thejaneantwerp.com is built on a warm, off-white canvas (rgb(247, 247, 244)).
The system uses rgb(0, 128, 0) as the accent for primary actions and brand signals.
Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside edict_displayregular as the primary typeface.
A restrained elevation system (3 distinct shadows) — shadows reserved for the few elements that must lift off the page.
Motion is a first-class concern — 13 keyframe animations plus transition-driven interactions.
Accent #212529 · police principale edict_displayregular
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.
Profondeur — l’élévation est extraite, pas inventée
3 ombres mesurées sur la page live · clique une tuile pour copier sa valeur brute
shadow-1
shadow-2
shadow-3
05
Motion — courbes, transitions & keyframes réels
2 courbes d’easing · 13 keyframes · survole une tuile pour prévisualiser
Courbes & transitions
transition-4linear
transition-5ease-in-out
13 animations keyframes extraites
wc-skeleton-shimmer
spin
cmplz-fadein
elasticus
plyr-progress
plyr-popup
plyr-fade-in
progress-bar-stripes
spinner-border
spinner-grow
mc_slideIn
mc_slideOut
06
Composants — le vocabulaire fermé
5 familles de composants · 22 variantes comptées sur le DOM live
Composant
Variantes
links
×10
nav Links
×7
footer Links
×3
heading H2
×1
heading H4
×1
07
Mise en page — structure & dimensions
5 métriques de layout mesurées
max Width1200px
header Height0px
sidebar Width0px
gap16px
container Padding24px
08
Responsive — vrais breakpoints
26 points de rupture lus dans le CSS live
38px
44px
56px
59px
350px
399px
400px
425px
480px
575px
576px
600px
673px
767px
768px
991px
992px
1024px
1040px
1110px
1168px
1199px
1200px
1218px
1399px
1400px
09
À faire / À éviter
18 règles applicables, verbatim de la spec
À faire
Use Off-White (`#f7f7f4`) as the page background — it's intentionally not pure white
Use Near-Black (`#212529`) for text — not pure black, it's warmer and more readable
Use edict_displayregular as the primary typeface — it defines the brand personality
Keep font weights between 400-500 — the system uses a narrow weight range for subtle hierarchy
Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
Use Forest Green (`#008000`) as the primary accent — it's the brand's signature interactive color
Maintain nav height at 114.391px — consistent vertical space for the navigation bar
Respect the 5px–40px 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
À éviter
Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
Don't use pure black (`#000000`) for text — the near-black adds warmth
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't reach for weight 700 (bold) or above — 500 is the heaviest weight this design paints
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 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
10
Guide agent & export
Prompt prêt à coller + les vrais fichiers derrière cette page
Construis une UI dans le design system de thejaneantwerp.com.
Fond #f7f7f4 · encre #212529 · accent #212529.
Typo : edict_displayregular — 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.
