Analyse du design system

dekra-norisko.fr

dekra-norisko.fr is built on a pure-white canvas (rgb(245, 245, 245)). The system uses rgb(93, 172, 46) as the accent for primary actions and brand signals. Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside Roboto as the primary typeface. A layered elevation system (8 distinct shadows) building a clear front-to-back hierarchy. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

Accent #5dac2e · police principale Roboto

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.dekra-norisko.fr ·extrait le 2026-07-31 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

37 couleurs mesurées · clique une pastille pour copier

Canvas

#f5f5f5

AAA 13.52:1

Ink

#282828

AAA 13.52:1

Accent

#5dac2e

Fail 2.6:1

Line

#282828

AAA 13.52:1

États sémantiques

error#dc3545success#198754warning#ffc107info#0dcaf0

4 rôles sémantiques trouvés.

37 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl32px · 300

display lg

display-lg28px · 700 · ×1.14

display md

display-md18px · 400 · ×1.56

body

body16px · 400 · ×1.13

body sm

body-sm15px · 400 · ×1.07

caption

caption13.76px · 400 · ×1.09

button

button16px · 700 · ×0.86

mono

mono13px · 400 · ×1.23

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 5px

sm · 9px

md · 12px

base · 16px

lg · 24px

xl · 30px

2xl · 50px

3xl · 64px

Arrondis

none
0px

xs
4px

sm
5px

md
14px

lg
20px

xl
32px

full
9999px

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

8 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

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

Courbes & transitions

transition-1linear

transition-2ease-out

transition-3ease-in-out

transition-4cubic-bezier(0.4, 0, 0.2, 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 · 41 variantes comptées sur le DOM live

Composant	Variantes
buttons	×10
nav Links	×10
links	×10
heading H2	×3
inputs	×2
badges	×2
heading H3	×2
reservation Card	×2

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

Buttons

Primary Brand

Background: #008132 {colors.primary-hover}
Text: #ffffff {colors.surface-1}
Padding: 14px 15px
Radius: 4px
Shadow: rgb(0, 96, 37) 0px -4px 0px 0px inset
Font: 16px weight 700
Use: Primary CTA / brand action
Hover: backgroundColor: #006025, borderColor: #006025

Secondary

Background: #d9d9d9
Text: #ffffff {colors.surface-1}
Padding: 19px 31px
Radius: 4px
Border: 1px solid rgb(217, 217, 217)
Shadow: rgba(0, 0, 0, 0.1) 0px -4px 0px 0px inset
Font: 16px weight 700
Use: Secondary action
Hover: backgroundColor: #006025, borderColor: #006025

Light / Invert

Background: #ffffff {colors.surface-1}
Text: #008132 {colors.primary-hover}
Padding: 14px 15px
Radius: 4px
Border: 1px solid rgb(0, 129, 50)
Shadow: rgb(0, 129, 50) 0px -4px 0px 0px inset
Font: 13px weight 700
Use: Bright CTA on dark sections
Hover: backgroundColor: #006025, borderColor: #006025

Light / Invert

Background: #ffffff {colors.surface-1}
Text: #f82b75
Padding: 14px 15px
Radius: 4px
Border: 1px solid rgb(143, 20, 65)
Shadow: rgb(179, 39, 76) 0px 4px 0px 0px
Font: 13px weight 700
Use: Bright CTA on dark sections
Hover: backgroundColor: #006025, borderColor: #006025

Light / Invert

Background: #ffffff {colors.surface-1}
Text: #6f6e6b
Padding: 14px 15px
Radius: 4px
Border: 1px solid rgb(111, 110, 107)
Font: 16px weight 400
Use: Bright CTA on dark sections
Hover: backgroundColor: #006025, borderColor: #006025

Primary Brand

Background: #5dac2e {colors.primary}
Text: #ffffff {colors.surface-1}
Padding: 0px 15px
Radius: 4px

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height121px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

30 points de rupture lus dans le CSS live

380px

400px

480px

481px

575px

576px

577px

680px

690px

700px

767px

768px

800px

900px

979px

980px

981px

991px

992px

1000px

1010px

1090px

1100px

1140px

1180px

1199px

1200px

1300px

1360px

1580px

À faire / À éviter

18 règles applicables, verbatim de la spec

À faire

Use Off-White (`#f5f5f5`) as the page background — it's intentionally not pure white

Use Near-Black (`#282828`) for text — not pure black, it's warmer and more readable

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

Use Success Green (`#5dac2e`) as the primary accent — it's the brand's signature interactive color

Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes

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

Transition button background to Forest Green (`#006025`) on hover — this is the extracted interactive state

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Build a content-dense footer (4 columns, ~23 links) — this site treats the footer as a sitemap, not an afterthought

À é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 invent new shadow values — use only the extracted shadow levels

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

Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners

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

Don't use opacity or brightness filter for button hover — the design uses an explicit background color change

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

Guide agent & export

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

Construis une UI dans le design system de dekra-norisko.fr. Fond #f5f5f5 · encre #282828 · accent #5dac2e. Typo : Roboto — 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 dekra-norisko

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