À EMPORTER

Ressources

Un langage commun, jusque dans vos outils.

Tokens de design

:root {
--guide-accent: #606c38;
--guide-text: #283618;
--guide-muted: #62646B;
--guide-background: #f7f8ef;
--guide-surface: #DFE5D1;
--guide-border: #707D5A;
--guide-success: #38b000;
--guide-warning: #f48c06;
--guide-danger: #d00000;
--guide-font: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--guide-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--guide-type-display: 56px;
--guide-leading-display: 1.08;
--guide-weight-display: 650;
--guide-tracking-display: -0.04em;
--guide-type-heading: 36px;
--guide-leading-heading: 1.2;
--guide-weight-heading: 600;
--guide-tracking-heading: -0.03em;
--guide-type-subheading: 24px;
--guide-leading-subheading: 1.3;
--guide-weight-subheading: 600;
--guide-tracking-subheading: -0.02em;
--guide-type-body: 16px;
--guide-leading-body: 1.6;
--guide-weight-body: 400;
--guide-tracking-body: 0em;
--guide-type-caption: 13px;
--guide-leading-caption: 1.5;
--guide-weight-caption: 400;
--guide-tracking-caption: 0em;
--guide-space-2xs: 4px;
--guide-space-xs: 8px;
--guide-space-sm: 12px;
--guide-space-md: 16px;
--guide-space-lg: 24px;
--guide-space-xl: 32px;
--guide-space-2xl: 48px;
--guide-space-3xl: 64px;
--guide-layout-width: 1200px;
--guide-layout-columns: 12;
--guide-layout-gutter: 24px;
--guide-radius-control: 10px;
--guide-radius-card: 16px;
--guide-button-background: var(--guide-accent);
--guide-button-foreground: var(--guide-background);
--guide-secondary-background: var(--guide-surface);
--guide-secondary-foreground: var(--guide-text);
--guide-button-padding: 12px 22px;
--guide-button-size: 16px;
--guide-button-weight: 600;
--guide-button-height: 24px;
--guide-button-hover: brightness(0.93);
--guide-disabled-opacity: 0.45;
--guide-input-padding: 8px 12px;
--guide-input-height: 24px;
--guide-input-width: 360px;
--guide-input-size: 16px;
--guide-input-border: 1px;
--guide-nav-padding: 10px 16px;
--guide-nav-gap: 8px;
--guide-nav-size: 15px;
--guide-focus-color: var(--guide-accent);
--guide-focus-width: 3px;
--guide-focus-offset: 3px;
--guide-easing: cubic-bezier(0.2, 0, 0, 1);
--guide-motion-distance: 140px;
--guide-motion-size: 48px;
--guide-duration-fast: 120ms;
--guide-duration-standard: 240ms;
--guide-duration-slow: 400ms;
}

@media (prefers-color-scheme: dark) {
:root {
--guide-accent: #B6C77B;
--guide-text: #F0F2E4;
--guide-muted: #B5B9AA;
--guide-background: #171C12;
--guide-surface: #303B26;
--guide-border: #8D9979;
--guide-success: #8DD55A;
--guide-warning: #FFB84D;
--guide-danger: #FF8585;
--guide-font: 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--guide-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--guide-type-display: 56px;
--guide-leading-display: 1.08;
--guide-weight-display: 650;
--guide-tracking-display: -0.04em;
--guide-type-heading: 36px;
--guide-leading-heading: 1.2;
--guide-weight-heading: 600;
--guide-tracking-heading: -0.03em;
--guide-type-subheading: 24px;
--guide-leading-subheading: 1.3;
--guide-weight-subheading: 600;
--guide-tracking-subheading: -0.02em;
--guide-type-body: 16px;
--guide-leading-body: 1.6;
--guide-weight-body: 400;
--guide-tracking-body: 0em;
--guide-type-caption: 13px;
--guide-leading-caption: 1.5;
--guide-weight-caption: 400;
--guide-tracking-caption: 0em;
--guide-space-2xs: 4px;
--guide-space-xs: 8px;
--guide-space-sm: 12px;
--guide-space-md: 16px;
--guide-space-lg: 24px;
--guide-space-xl: 32px;
--guide-space-2xl: 48px;
--guide-space-3xl: 64px;
--guide-layout-width: 1200px;
--guide-layout-columns: 12;
--guide-layout-gutter: 24px;
--guide-radius-control: 10px;
--guide-radius-card: 16px;
--guide-button-background: var(--guide-accent);
--guide-button-foreground: var(--guide-background);
--guide-secondary-background: var(--guide-surface);
--guide-secondary-foreground: var(--guide-text);
--guide-button-padding: 12px 22px;
--guide-button-size: 16px;
--guide-button-weight: 600;
--guide-button-height: 24px;
--guide-button-hover: brightness(0.93);
--guide-disabled-opacity: 0.45;
--guide-input-padding: 8px 12px;
--guide-input-height: 24px;
--guide-input-width: 360px;
--guide-input-size: 16px;
--guide-input-border: 1px;
--guide-nav-padding: 10px 16px;
--guide-nav-gap: 8px;
--guide-nav-size: 15px;
--guide-focus-color: var(--guide-accent);
--guide-focus-width: 3px;
--guide-focus-offset: 3px;
--guide-easing: cubic-bezier(0.2, 0, 0, 1);
--guide-motion-distance: 140px;
--guide-motion-size: 48px;
--guide-duration-fast: 120ms;
--guide-duration-standard: 240ms;
--guide-duration-slow: 400ms;
}
}

Version 1.0

Dernière mise à jour : .

IntroductionBien démarrer · Un langage commun pour mieux concevoir.Principes de designBien démarrer · Les convictions qui orientent nos choix.Voix et tonBien démarrer · Les mots aussi font partie de l’expérience.CouleursFondations · Une palette pensée pour donner du sens.TypographieFondations · Une hiérarchie claire, à chaque échelle.Espacement et mise en pageFondations · Du rythme et de l’espace pour le contenu.IconographieFondations · Des signes simples et reconnaissables.MouvementFondations · Des transitions qui aident à comprendre.AccessibilitéFondations · Des expériences ouvertes à tout le monde.BoutonsComposants · Des actions évidentes et bien hiérarchisées.Champs de saisieComposants · Accompagner chaque information saisie.NavigationComposants · Des repères pour trouver son chemin.