Analyse du design system

racine.re

racine.re is built on a warm, off-white canvas (rgb(240, 238, 228)). The system uses rgb(66, 133, 244) as the high-saturation accent for primary actions. Generously rounded CTAs (30px) suggest approachable, content-first design alongside Manrope as the primary typeface. Manrope is paired with elementskit for secondary roles. A layered elevation system (4 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 200 keyframe animations plus transition-driven interactions.

Accent #4285f4 · police principale Manrope

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.

http://www.racine.re ·extrait le 2026-08-12 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

23 couleurs mesurées · clique une pastille pour copier

Canvas

#f0eee4

AA·lg 3.69:1

Ink

#7a7a7a

AA·lg 3.69:1

Accent

#4285f4

AA·lg 3.06:1

Line

#7a7a7a

AA·lg 3.69: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.

23 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-xl45px · 500

headline

headline21px · 500 · ×2.14

body

body16px · 400 · ×1.31

body sm

body-sm12px · 600 · ×1.33

caption

caption12px · 400 · ×1.00

button

button14px · 600 · ×0.86

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 10px

sm · 11px

md · 12px

base · 28px

lg · 30px

xl · 50px

2xl · 75px

3xl · 100px

Arrondis

none
0px

xs
3px

sm
12px

md
24px

lg
30px

xl
50px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

shadow-4

Motion — courbes, transitions & keyframes réels

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

200 animations keyframes extraites

open-frame

open-toast

timer

eicon-spin

fadeIn

swiper-preloader-spin

xs-zoomIn

dtb-spinner

bounceAnim

menu-animation

Composants — le vocabulaire fermé

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

Composant	Variantes
links	×10
buttons	×5
badges	×2
nav Links	×2
heading H2	×2
divider	×2
heading H1	×1
heading H4	×1

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

Buttons

Outline

Background: transparent
Text: #f0eee4 {colors.background}
Padding: 10px 28px 11px
Radius: 30px
Border: 1px solid rgba(2, 1, 1, 0)
Font: 14px weight 600
Use: Secondary action with border

Pill

Background: transparent
Text: #ffffff {colors.surface-2}
Padding: 9px 24px 10px
Radius: 30px
Border: 1px solid rgba(255, 255, 255, 0.19)
Font: 14px weight 600
Use: Status pills, tags, chips

Pill

Background: #f0eee4 {colors.background}
Text: #0a230e
Padding: 10px 30px 11px
Radius: 30px
Font: 14px weight 600
Use: Status pills, tags, chips

Light / Invert

Background: #f0eee4 {colors.background}
Text: #0a230e
Padding: 0px 0px 0px 5px
Radius: 50%
Font: 14px weight 600
Use: Bright CTA on dark sections

Inputs & Forms

Text Input

Background: transparent
Text: #0a230e
Padding: 0px 0px 12px
Radius: 0px
Border: 0px solid rgba(10, 35, 14, 0.19)
Font: 16px weight 400
Use: Text fields, search inputs
Focus: borderColor: rgb(21, 61, 25)

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1140px

header Height64px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

21 points de rupture lus dans le CSS live

320px

411px

479px

480px

481px

568px

575px

576px

640px

766px

767px

768px

800px

900px

991px

992px

1023px

1024px

1025px

1199px

1200px

À faire / À éviter

17 règles applicables, verbatim de la spec

À faire

Use Warm Cream (`#f0eee4`) as the page background — it's intentionally not pure white

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

Keep font weights between 400-600 — 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 Ring Blue (`#4285f4`) as the primary accent — it's the brand's signature interactive color

Use 30px border-radius on primary buttons — the brand uses generously-rounded CTAs

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

Use a 3-column grid on desktop — density matters for this content type

À é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 reach for weight 700 (bold) or above — 600 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 use sharp-cornered or pill buttons — 30px is the CTA border-radius standard

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 over-build the footer — this design keeps it minimal (2 cols, 1 links)

Guide agent & export

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

Construis une UI dans le design system de racine.re. Fond #f0eee4 · encre #7a7a7a · accent #4285f4. Typo : Manrope — 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 racine

Repeindre ce design · éditeur live DESIGN.md · narrative spec tokens.json