Une même grammaire, sur chaque page.
La Home est la référence visuelle. On reprend ses titres, sa grille, ses cartes et ses fenêtres, tout en conservant le contenu et les interactions de chaque page.
01 — Titres et hiérarchie
Dock AIUse Dock AI everywhere
you already work
Les H2 sont centrés, en Roobert SemiBold (600), jusqu’à 80 px sur grand écran et 40 px sur mobile. Les labels restent en casse naturelle. Le corps de texte est un cran plus doux que le titre.
02 — Cartes et survols
Dock MCP
Create deal rooms, find content, and run Dock agents from ChatGPT or Claude.
Explore Dock MCP ↗Dock in Slack
Use AI agents, pull up workspaces, and find content without leaving Slack.
Explore integrations ↗Fond blanc, coins de 28 px, contour fin et 40 px d’espace intérieur. Le survol d’un lien change le fond ou le contour ; le texte reste à pleine opacité. Les cartes sans destination restent statiques.
03 — Onglets de démonstration
Le composant Courses / Playbooks / Roleplay de la Home : colonnes ouvertes, retrait de 48 px, gouttières de 56 px, titres 24/32 et texte 18/28. Une ligne de 1,5 px progresse pendant 9 secondes ; seuls les libellés inactifs sont atténués. Les écrans changent instantanément. Ces onglets ne sont jamais des cartes encadrées.
04 — Boutons d’action
Une hauteur de 40 px et des coins en pilule pour les CTA marketing. La variante inversée garde la même géométrie sur le hero bleu.
05 — Fenêtres produit et fonds
Le chrome vient directement de la Home : onglet, barre d’adresse et icônes. Cet écran conserve ses 1 248 × 736 px et se réduit d’un seul bloc. Le hero Sales utilise le fond bleu à motif ; les autres démonstrations reprennent le fond clair à points.
06 — Règles d’adaptation
| Élément | Référence commune |
|---|---|
| Grille | 1 440 px maximum ; marges de 56 px sur ordinateur, 20 px sous 900 px. |
| Sections | 132 px d’espace vertical ; 80 px sur tablette, 64 px sur mobile. |
| Surfaces | Cartes blanches, sections légèrement teintées, fond de démonstration #FAF9F7. Contours fins, ombres discrètes. |
| Fenêtres | Contenu, dimensions natives et proportions préservés. Hauteur réservée dès le chargement ; aucun étirement ni réorganisation de l’interface miniature. |
| Contenu et logique | Conserver textes, destinations, onglets, formulaires, FAQ et animations. Adapter la présentation autour de ces éléments. |
| Variante Sales | Hero centré bleu à motif, texte blanc et CTA inversés. Même grille et mêmes composants sur le reste de la page. |
Les styles de cette référence sont partagés avec Sales. La Home reste la source visuelle ; cette page documente son état du 4 octobre. Lors d’une prochaine évolution de la Home, mettre à jour cette référence avant d’adapter une nouvelle page.