Analyse du design system

ateliercrenn.com

ateliercrenn.com is built on a mid-dark canvas (rgb(74, 83, 87)). The system uses rgb(110, 117, 120) as a near-neutral accent (low saturation). Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Julius Sans One as the primary typeface. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

Accent #6e7578 · police principale Halant

Chaque valeur ci-dessous est vérifiée à la capture. getdesign.md décrit — prismd montre : chaque couleur, police et courbe ici a été lue via getComputedStyle() sur le rendu réel capturé à droite, jamais affirmée à la main.

Rapport DESIGN.md complet · light & dark · fichiers tokens · Paiement non activé — on mesure la demande d’abord.

https://www.ateliercrenn.com ·extrait le 2026-08-11 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

Couleurs — rôles, sémantique & recensement complet

10 couleurs mesurées · clique une pastille pour copier

Canvas

#4a5357

AA 4.5:1

Ink

#bec5c8

AA 4.5:1

Accent

#6e7578

Fail 1.68:1

Line

#bec5c8

AA 4.5:1

États sémantiques

Aucune couleur d’état sémantique détectée — ce système signale l’état par le poids & le motion, pas la teinte.

10 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

6 rôles · rendu live dans la vraie Inter (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl54px · 700

display lg

display-lg40.5px · 700 · ×1.33

body

body18px · 400 · ×2.25

body sm

body-sm11.7px · 400 · ×1.54

caption

caption18px · 400 · ×0.65

button

button36px · 400 · ×0.50

Espacements & arrondis, rendus spatiaux

9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes

Échelle d’espacement

xxs · 2px

xs · 5px

sm · 8px

md · 9px

base · 15px

lg · 27px

xl · 72px

2xl · 80px

3xl · 88px

Arrondis

none
0px

xs
2px

sm
8px

md
14px

lg
20px

xl
32px

full
9999px

Profondeur — l’élévation est extraite, pas inventée

1 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute

shadow-1

Motion — courbes, transitions & keyframes réels

2 courbes d’easing · 0 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-2ease-in-out

transition-5cubic-bezier(0.77, 0, 0.175, 1)

Keyframes

Transitions seules — aucune @keyframes sur cette page. Le motion vit entièrement dans les courbes d’easing à gauche.

Composants — le vocabulaire fermé

8 familles de composants · 26 variantes comptées sur le DOM live

Composant	Variantes
buttons	×6
links	×5
cta Banner	×4
nav Links	×3
footer Links	×3
badges	×2
tabs	×2
heading H2	×1

Specs de style des composants (§4)déplier

Buttons

Ghost

Background: transparent
Text: #ffffff {colors.surface-2}
Padding: 4.5px 18px 4.5px 9px
Radius: 0px
Font: 16.2px weight 400
Use: Subtle action, toolbar, nav button
Hover: color: #ffffff, border: 0px none rgb(255, 255, 255), borderColor: #ffffff
Focus: color: rgb(247, 248, 248), border: 0px none rgb(247, 248, 248), borderColor: rgb(247, 248, 248)

Icon Button

Background: transparent
Text: transparent
Padding: 5px
Radius: 0px
Font: 0px weight 400
Use: Toolbar/UI icons
Hover: color: #ffffff, border: 0px none rgb(255, 255, 255), borderColor: #ffffff
Focus: color: rgb(247, 248, 248), border: 0px none rgb(247, 248, 248), borderColor: rgb(247, 248, 248)

Icon Button

Background: transparent
Text: #ffffff {colors.surface-2}
Padding: 9px
Radius: 0px
Border: 1px solid rgba(0, 0, 0, 0)
Font: 36px weight 400
Use: Toolbar/UI icons
Hover: color: #ffffff, border: 0px none rgb(255, 255, 255), borderColor: #ffffff
Focus: color: rgb(247, 248, 248), border: 0px none rgb(247, 248, 248), borderColor: rgb(247, 248, 248)

Secondary

Background: #6e7578 {colors.primary}
Text: #ffffff {colors.surface-2}
Padding: 8.64px 21.6px 7.2px
Radius: 0px
Border: 1px solid rgb(110, 117, 120)
Font: 14.4px weight 700
Use: Secondary action
Hover: color: #ffffff, border: 0px none rgb(255, 255, 255), borderColor: #ffffff
Focus: color: rgb(247, 248, 248), border: 0px none rgb(247, 248, 248), borderColor: rgb(247, 248, 248)

Inputs & Forms

Text Input

Background: #ffffff {colors.surface-2}
Text: #ffffff {colors.surface-2}
Padding: 1px 2px
Radius: 0px
Border: 2px inset rgb(118, 118, 118)
Font: 18px weight 400
Use: Text fields, search inputs

Tabs

Ghost Tab

Background: transparent
Text: transparent

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height0px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

système fluide — aucun palier dur

Aucun breakpoint @media distinct capturé au passage desktop/mobile — ce layout est fluide, il s’adapte par ratio plutôt que par paliers durs.

À faire / À éviter

19 règles applicables, verbatim de la spec

À faire

Use Dark Gray (`#4a5357`) as the page background — it's intentionally not pure white

Use Halant as the primary typeface — it defines the brand personality

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use Slate Grey (`#6e7578`) as the primary accent — it's the brand's signature interactive color

Style form inputs with a `2px inset rgb(118, 118, 118)` border — use border-based inputs, not floating labels or underline-only

Maintain nav height at 49.2031px — consistent vertical space for the navigation bar

Respect the 5px–72px spacing range — the design uses a wide scale for visual breathing room

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Build the hero as a split layout with media on the right — text and visual share equal weight

Include exactly 10 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose

À éviter

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't invent new shadow values — use only the extracted shadow levels

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't remove the input border — the border is the primary affordance indicator for form fields

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Don't put a CTA button in the nav — this design uses links only at the top

Don't over-build the footer — this design keeps it minimal (1 cols, 7 links)

Guide agent & export

Prompt prêt à coller + les vrais fichiers derrière cette page

Construis une UI dans le design system de ateliercrenn.com. Fond #4a5357 · encre #bec5c8 · accent #6e7578. Typo : Halant — respecte l’échelle taille/graisse du §3. Arrondis, espacements, ombres : uniquement les échelles extraites (aucun nombre magique). La spec complète suit — colle le DESIGN.md ci-dessous dans ton agent.

Chaque valeur ci-dessus est vérifiée par getComputedStyle.

$ npx prism-design add ateliercrenn

DESIGN.md · narrative spec tokens.json