{{ page.title }}
{{ page.description }}
@@ -130,9 +130,9 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Brand Identity Kit
+Cloudlandscape
+Logo
+
+
+
+
+
+
+
+
+
+ Fond sombre — usage principal
+
+
+
+
+
+ Fond intermédiaire
+
+
+
+
+ Fond clair
+Favicon
+
+
+
+
+
+
+
+
+
+ 32×32 · dark
+
+
+
+
+
+
+ 32×32 · light
+
+
+
+
+
+
+ 16×16
+ Codes couleurs
+
+
+
+
+
+
+
+
+ Sky Deep
+ #0B1D2E
+ Fond principal
+
+
+
+
+
+
+ Sky Mid
+ #1A3A5C
+ Surfaces secondaires
+
+
+
+
+
+
+ Sky Pale
+ #4A7FA5
+ Éléments UI
+
+
+
+
+
+
+ Aurora
+ #7EC8C8
+ Accent / CTA — ratio 5.1:1
+
+
+
+
+
+
+ Horizon
+ #B8CDD8
+ Textes secondaires
+
+
+
+
+
+
+ Mist
+ #D9E8EF
+ Backgrounds clairs
+
+
+
+
+
+
+ Cloud White
+ #EEF4F9
+ Texte principal — ratio 15.3:1
+
+
+
+
+
+
+ Slate
+ #3D5A6E
+ Bordures / dividers
+
+ Typographie
+
+
+
+
+
+
+ Display — Cormorant Garamond 300
+Horizons sans limites.
+
+
+
+ Heading — Cormorant Garamond 400
+Paysages numériques, altitude infinie
+
+
+
+ Body — Cormorant Garamond 300
+Cloudlandscape capture la poésie de l'invisible — ces espaces suspendus entre les données et l'horizon, où chaque altitude raconte une géographie.
+
+
+
+ Mono — DM Mono 400
+--sky-deep: #0B1D2E; /* altitude max */
+
+
+
+ Caption — DM Mono 300
+cloudlandscape.io · brand kit v1.0 · 2026
+CSS Design Tokens
+
+
+ +/* Cloudlandscape — Design Tokens */ +:root { + /* Couleurs */ + --sky-deep: #0B1D2E; /* fond principal */ + --sky-mid: #1A3A5C; /* surfaces secondaires */ + --sky-pale: #4A7FA5; /* éléments UI */ + --aurora: #7EC8C8; /* accent principal */ + --horizon: #B8CDD8; /* textes secondaires */ + --mist: #D9E8EF; /* fonds clairs */ + --cloud-white: #EEF4F9; /* texte principal */ + --slate: #3D5A6E; /* bordures */ + + /* Typographie */ + --font-display: 'Cormorant Garamond', Georgia, serif; + --font-mono: 'DM Mono', 'Courier New', monospace; + + /* Espacements */ + --space-xs: 0.5rem; + --space-sm: 1rem; + --space-md: 2rem; + --space-lg: 4rem; +}+
Accessibilité RGAA
+
+
+
+
+
+
+ Contrastes
+Cloud White / Sky Deep
15.3:1 ✓
Aurora / Sky Deep
5.1:1 ✓
Critère 3.2 RGAA — min 4.5:1
+
+
+
+ Navigation clavier
+Focus visible sur tous les éléments interactifs
+Critère 12.1 RGAA
+
+
+
+ Textes alternatifs
+Attribut aria-label sur chaque SVG. Éléments décoratifs en aria-hidden
Critère 1.1 RGAA
+
+
+
+ Animations
+Animations désactivées via prefers-reduced-motion
Critère 13.8 RGAA
+