Composer avec les saisons
Prendre le temps d’observer, de choisir et de créer.
Découvrir l’OracleDelta · Design system · Seed 0.3.0
Layout
Guide visuel des styles Delta par défaut. Les échantillons utilisent les variables actives du site : couleurs, typographie, espacements et composants.
Oracle des Saisons — Palette de marque
Les six couleurs de la charte, avec le vert foncé corrigé. Les aplats saisonniers s’associent au texte vert foncé ; le fond clair accompagne les contenus plus longs.
Rose#D2849B
--oracle-roseVert#8FAF92
--oracle-vertJaune#EDC87B
--oracle-jauneBleu#96AABE
--oracle-bleuGris clair#F0F0F0
--oracle-clairVert foncé#232D14
--oracle-fonceComposer avec les saisons
Prendre le temps d’observer, de choisir et de créer.
Découvrir l’OracleComposer avec les saisons
Prendre le temps d’observer, de choisir et de créer.
Découvrir l’OracleComposer avec les saisons
Prendre le temps d’observer, de choisir et de créer.
Découvrir l’Oracle01 — Couleurs
Palette claire : chaque variable correspond à un rôle dans l’interface.
--color-surface-body#FFFFFF--color-surface-subtle#F4F4F5--color-surface-raised#FFFFFF--color-ink#09090B--color-ink-muted#6E6E77--color-border#E4E4E7--color-action#18181B--color-action-hover#27272A--color-action-subtle#F4F4F5--color-focus#18181B--color-on-action#FAFAFA--color-danger#DC2626--color-danger-bg#FEF2F2--color-success#16A34A--color-success-bg#F0FDF4--color-warning#D97706--color-warning-bg#FFFBEB02 — Typographie
Texte et titres : Inter. Code : JetBrains Mono. Les grandes tailles sont fluides.
title-xs · 1.25remComposer avec les saisons
title-sm · 1.5remComposer avec les saisons
title-md · clamp(1.5rem, 1.3rem + 1vw, 1.875rem)Composer avec les saisons
title-lg · clamp(1.875rem, 1.5rem + 1.8vw, 2.25rem)Composer avec les saisons
title-xl · clamp(2.25rem, 1.6rem + 3.2vw, 3rem)Composer avec les saisons
title-display · clamp(2.75rem, 1.8rem + 4.8vw, 3.75rem)Composer avec les saisons
text-xs · 0.75remPrendre le temps d’observer, de choisir et de créer.
text-sm · 0.875remPrendre le temps d’observer, de choisir et de créer.
text-md · clamp(1rem, 0.95rem + 0.25vw, 1.125rem)Prendre le temps d’observer, de choisir et de créer.
text-lg · clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem)Prendre le temps d’observer, de choisir et de créer.
text-xl · clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)Prendre le temps d’observer, de choisir et de créer.
text-label · 0.75remPrendre le temps d’observer, de choisir et de créer.
font-mono — Aa Bb Cc 0123456789
03 — Espacements
Les barres représentent les valeurs réelles de chaque pas de l’échelle.
--space-3xs · 0.125rem--space-2xs · 0.25rem--space-xs · 0.5rem--space-sm · 0.75rem--space-md · clamp(1rem, 0.9rem + 0.5vw, 1.25rem)--space-lg · clamp(1.5rem, 1.3rem + 0.8vw, 2rem)--space-xl · clamp(2rem, 1.7rem + 1.2vw, 2.75rem)--space-2xl · clamp(3rem, 2.5rem + 2vw, 4rem)--space-3xl · clamp(4rem, 3.2rem + 3vw, 6rem)--space-4xl · clamp(6rem, 4.5rem + 5vw, 9rem)05 — Cartes
Exemples de composition utilisant les surfaces, bordures, rayons et ombres du seed.
Surface surélevée
Une idée à explorer
Fond raised, bordure légère, ombre sm et rayon lg.
Voir la typographieSurface douce
Du temps pour choisir
Fond subtle, espacement lg et hiérarchie simple.
Voir les espacementsSurface contrastée
Changer de perspective
La surface inversée réattribue les couleurs du texte et des boutons.
Voir les couleurs