Analyse du design system

noma.dk

noma.dk is built on a warm, off-white canvas (rgb(249, 249, 243)). 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 Reckless as the primary typeface. Reckless is paired with Roobert for secondary roles. A restrained elevation system (2 distinct shadows) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 35 keyframe animations plus transition-driven interactions.

Accent #0066ff · police principale Reckless

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://noma.dk/ ·extrait le 2026-07-13 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

16 couleurs mesurées · clique une pastille pour copier

Canvas

#f9f9f3

AAA 11.73:1

Ink

#29382b

AAA 11.73:1

Accent

#0066ff

AA 4.57:1

Line

#29382b

AAA 11.73:1

États sémantiques

error#b32d2esuccess#007017

2 rôles sémantiques trouvés.

16 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl72px · 500

display lg

display-lg72px · 500 · ×1.00

body

body15px · 400 · ×4.80

body sm

body-sm30px · 400 · ×0.50

button

button30px · 400 · ×1.00

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 15px

sm · 20px

md · 40px

base · 80px

lg · 88px

xl · 110px

2xl · 112px

3xl · 135px

Arrondis

none
0px

xs
4px

sm
6px

md
14px

lg
20px

xl
32px

full
9999px

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

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

shadow-1

shadow-2

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-3ease-in-out

35 animations keyframes extraites

show-content-image

turn-on-visibility

turn-off-visibility

lightbox-zoom-in

lightbox-zoom-out

spin

blink

cmplz-fadein

fadeVideoIn

slide

navigationFadeIn

contentFadeIn

Composants — le vocabulaire fermé

9 familles de composants · 36 variantes comptées sur le DOM live

Composant	Variantes
links	×10
buttons	×7
cards	×5
heading H2	×5
nav Links	×3
footer Links	×2
heading H1	×2
inputs	×1
status Badge	×1

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

Buttons

Outline

Background: transparent
Text: #ffffff {colors.on-primary}
Padding: 19.5px 42px 19.5px 30px
Radius: 0px
Border: 1px solid rgb(255, 255, 255)
Font: 30px weight 400
Use: Secondary action with border

Secondary

Background: #465443
Text: #ecefdf {colors.surface-2}
Padding: 0px 16px
Radius: 0px
Border: 1px solid rgb(70, 84, 67)
Font: 18px weight 400
Use: Secondary action

Outline

Background: transparent
Text: #29382b {colors.hairline}
Padding: 7.92px 33.6px 7.92px 20px
Radius: 0px
Border: 1px solid rgb(41, 56, 43)
Font: 24px weight 400
Use: Secondary action with border

Light / Invert

Background: #f2f5f7
Text: #08162f
Padding: 15px
Radius: 12px 12px 0px 0px
Shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px
Font: 15px weight 400
Use: Bright CTA on dark sections

Inputs & Forms

Text Input

Background: transparent
Text: #29382b {colors.hairline}
Padding: 0px
Radius: 0px
Border: 1px solid border-color
Font: 15px weight 400
Use: Text fields, search inputs

Navigation

Main Nav

Background: transparent
Padding: 40px 80px 40px 40px
Radius: none
Font: 18px weight 400
Use: Fixed/sticky block nav — N/A items
Hover: opacity: 0.6

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1920px

header Height115px

sidebar Width0px

gap20px

container Padding0px

Responsive — vrais breakpoints

26 points de rupture lus dans le CSS live

37px

45px

54px

64px

75px

81px

87px

120px

350px

425px

500px

600px

700px

721px

768px

781px

782px

799px

800px

960px

1000px

1023px

1024px

1025px

1200px

1296px

À faire / À éviter

18 règles applicables, verbatim de la spec

À faire

Use Background (`#f9f9f3`) as the page background — it's intentionally not pure white

Use Foreground (`#29382b`) for text — not pure black, it's warmer and more readable

Use Reckless 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 negative letter-spacing (-1.44px) at display sizes for compressed, editorial headlines

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

Use 12px 12px 0px 0px border-radius on buttons — the standard corner rounding for interactive elements

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

À é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 increase letter-spacing on headings — the type is designed to run tight at scale

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 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 noma.dk. Fond #f9f9f3 · encre #29382b · accent #0066ff. Typo : Reckless — 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 noma

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