Analyse du design system

tim-raue.com

tim-raue.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(221, 0, 121) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside latex-shadow as the primary typeface. A layered elevation system (7 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 55 keyframe animations plus transition-driven interactions.

Accent #dd0079 · police principale century-gothic

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://tim-raue.com/ ·extrait le 2026-07-13 ·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

#ffffff

AAA 12.76:1

Ink

#282d63

AAA 12.76:1

Accent

#dd0079

AA 4.83:1

Line

#333333

AAA 12.63:1

États sémantiques

error#cc1818

1 rôle sémantique trouvé.

23 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

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

display xl

display-xl85px · 500

display md

display-md55px · 500 · ×1.55

body

body13.3333px · 400 · ×4.13

body sm

body-sm36px · 500 · ×0.37

button

button16px · 600 · ×2.25

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 10px

sm · 14px

md · 15px

base · 24px

lg · 40px

xl · 42px

2xl · 49px

3xl · 180px

Arrondis

none
0px

xs
4px

sm
8px

md
12px

lg
20px

xl
30px

full
9999px

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

7 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 · 55 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-3ease-in-out

55 animations keyframes extraites

spin

multi-view-image-fade

fadeBottom

fadeLeft

fadeRight

fadeTop

fadeIn

et_pb_fade

et_pb_fadeTop

et_pb_fadeRight

et_pb_fadeBottom

et_pb_fadeLeft

Composants — le vocabulaire fermé

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

Composant	Variantes
buttons	×6
nav Links	×6
links	×6
inputs	×1
cards	×1
status Badge	×1
footer Links	×1
heading H1	×1
heading H3	×1

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

Buttons

Ghost

Background: transparent
Text: #000000
Padding: 0px
Radius: 0px
Border: 2px solid rgba(0, 0, 0, 0)
Font: 13.3333px weight 400
Use: Subtle action, toolbar, nav button
Focus: border: 0px none rgb(255, 255, 255), outline: rgb(255, 255, 255) dashed 0px

Primary Brand

Background: #dd0079 {colors.primary}
Text: #ffffff {colors.primary-focus}
Padding: 7px 17px
Radius: 0px 0px 10px 10px
Font: 14px weight 400
Use: Primary CTA / brand action
Focus: border: 0px none rgb(255, 255, 255), outline: rgb(255, 255, 255) dashed 0px

Primary Brand

Background: #dd0079 {colors.primary}
Text: #ffffff {colors.primary-focus}
Padding: 42px 18px
Radius: 50%
Font: 16px weight 600
Use: Primary CTA / brand action
Focus: border: 0px none rgb(255, 255, 255), outline: rgb(255, 255, 255) dashed 0px

Pill

Background: rgba(211, 203, 203, 0.2)
Text: #ffffff {colors.primary-focus}
Padding: 8px 14px 8px 8px
Radius: 160px
Font: 13.3333px weight 400
Use: Status pills, tags, chips
Focus: border: 0px none rgb(255, 255, 255), outline: rgb(255, 255, 255) dashed 0px

Icon Button

Background: rgba(0, 0, 0, 0.1)
Text: #ffffff {colors.primary-focus}
Padding: 8px
Radius: 75px
Border: 1px solid rgba(0, 0, 0, 0)
Font: 15px weight 400
Use: Toolbar/UI icons
Focus: border: 0px none rgb(255, 255, 255), outline: rgb(255, 255, 255) dashed 0px

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height0px

sidebar Width0px

gap16px

container Padding24px

Responsive — vrais breakpoints

20 points de rupture lus dans le CSS live

38px

44px

56px

59px

479px

480px

576px

600px

673px

767px

768px

980px

981px

991px

992px

1040px

1110px

1168px

1218px

1225px

À faire / À éviter

13 règles applicables, verbatim de la spec

À faire

Use Navy Blue (`#282d63`) for text — not pure black, it's warmer and more readable

Use century-gothic 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 Rose (`#dd0079`) as the primary accent — it's the brand's signature interactive color

À éviter

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

Guide agent & export

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

Construis une UI dans le design system de tim-raue.com. Fond #ffffff · encre #282d63 · accent #dd0079. Typo : century-gothic — 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 tim-raue

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