Analyse du design system

sahtayn.fr

sahtayn.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(255, 49, 49) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Qwitcher Grypen as the primary typeface. Qwitcher Grypen is paired with Open Sans for secondary roles. A layered elevation system (9 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 19 keyframe animations plus transition-driven interactions.

Accent #ff3131 · police principale Lato

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.sahtayn.fr ·extrait le 2026-08-11 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

14 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 18.88:1

Ink

#111111

AAA 18.88:1

Accent

#ff3131

AA·lg 3.66:1

Line

#d1d5db

Fail 1.47: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.

14 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl80px · 700

display lg

display-lg80px · 700 · ×1.00

display md

display-md60px · 400 · ×1.33

body

body14px · 800 · ×4.29

body sm

body-sm16px · 400 · ×0.88

button

button25px · 800 · ×0.64

mono

mono14px · 400 · ×1.79

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 5px

sm · 8px

md · 10px

base · 20px

lg · 25px

xl · 30px

2xl · 50px

3xl · 100px

Arrondis

none
0px

xs
4px

sm
5px

md
14px

lg
20px

xl
32px

full
9999px

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

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

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — courbes, transitions & keyframes réels

1 courbe d’easing · 19 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-1linear

19 animations keyframes extraites

wc-skeleton-shimmer

rotating

sk-bouncedelay

msb-flash

msb-shake

msb-swing

msb-tada

msb-heartbeat

msb-wobble

spin

dotPulse

swiper-preloader-spin

Composants — le vocabulaire fermé

15 familles de composants · 52 variantes comptées sur le DOM live

Composant	Variantes
buttons	×10
links	×10
nav Links	×8
price Tag	×5
footer Links	×4
badges	×3
inputs	×2
cta Banner	×2
captions	×2
cards	×1
status Badge	×1
heading H1	×1
heading H2	×1
heading H3	×1
divider	×1

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

Buttons

Outline

Background: transparent
Text: #ff3131 {colors.primary}
Padding: 10px
Radius: 0px
Border: 1px solid rgb(255, 49, 49)
Font: 14px weight 800
Use: Secondary action with border
Hover: color: #ff3131, border: 0px none rgb(255, 49, 49), borderColor: #ff3131
Focus: color: rgb(234, 45, 45), border: 0px none rgb(234, 45, 45), borderColor: rgb(234, 45, 45)
Active: color: rgb(106, 20, 20), borderColor: rgb(106, 20, 20), outline: rgb(106, 20, 20)

Primary Brand

Background: #25a819
Text: #ffffff {colors.primary-hover}
Padding: 15px 30px
Radius: 0px
Border: 1px solid rgb(37, 168, 25)
Font: 25px weight 800
Use: Primary CTA / brand action
Hover: color: #ff3131, border: 0px none rgb(255, 49, 49), borderColor: #ff3131
Focus: color: rgb(234, 45, 45), border: 0px none rgb(234, 45, 45), borderColor: rgb(234, 45, 45)
Active: color: rgb(106, 20, 20), borderColor: rgb(106, 20, 20), outline: rgb(106, 20, 20)

Primary Brand

Background: #ff3131 {colors.primary}
Text: #ffffff {colors.primary-hover}
Padding: 15px 30px
Radius: 0px
Border: 1px solid rgb(255, 49, 49)
Font: 25px weight 800
Use: Primary CTA / brand action
Hover: color: #ff3131, border: 0px none rgb(255, 49, 49), borderColor: #ff3131
Focus: color: rgb(234, 45, 45), border: 0px none rgb(234, 45, 45), borderColor: rgb(234, 45, 45)
Active: color: rgb(106, 20, 20), borderColor: rgb(106, 20, 20), outline: rgb(106, 20, 20)

Outline

Background: #000000
Text: #ffffff {colors.primary-hover}
Padding: 15px 30px
Radius: 0px
Border: 1px solid rgb(0, 0, 0)
Font: 25px weight 800
Use: Secondary action with border
Hover: color: #ff3131, border: 0px none rgb(255, 49, 49), borderColor: #ff3131
Focus: color: rgb(234, 45, 45), border: 0px none rgb(234, 45, 45), borderColor: rgb(234, 45, 45)
Active: color: rgb(106, 20, 20), borderColor: rgb(106, 20, 20), outline: rgb(106, 20, 20)

Ghost

Background: transparent
Text: #3a3a3a
Padding: 14.4px
Radius: 0px
Font: 24px weight 800
Use: Subtle action, toolbar, nav button
Hover: color: #ff3131, border: 0px none rgb(255, 49, 49), borderColor: #ff3131
Focus: color: rgb(234, 45, 45), border: 0px none rgb(234, 45, 45), borderColor: rgb(234, 45, 45)
Active: color: rgb(106, 20, 20), borderColor: rgb(106, 20, 20), outline: rgb(106, 20, 20)

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1280px

header Height191px

sidebar Width367px

gap16px

container Padding0px

Responsive — vrais breakpoints

31 points de rupture lus dans le CSS live

44px

48px

420px

421px

449px

480px

481px

543px

544px

545px

546px

600px

641px

767px

768px

769px

780px

782px

921px

976px

977px

980px

981px

992px

993px

1023px

1024px

1025px

1168px

1200px

1201px

À faire / À éviter

13 règles applicables, verbatim de la spec

À faire

Use Lato 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 Vermillion (`#ff3131`) as the primary accent — it's the brand's signature interactive color

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

Each card includes a top image — imagery is part of the card identity, not optional

Include a newsletter signup in the footer — email capture is part of the conversion funnel

À éviter

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 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, 11 links)

Guide agent & export

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

Construis une UI dans le design system de sahtayn.fr. Fond #ffffff · encre #111111 · accent #ff3131. Typo : Lato — 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 sahtayn

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