Analyse du design system

fioladc.com

fioladc.com is built on a soft, near-white canvas (rgb(240, 242, 244)). The system uses rgb(168, 72, 93) as the accent for primary actions and brand signals. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside freight-big-pro as the primary typeface. Freight-big-pro is paired with freight-sans-pro for secondary roles. A restrained elevation system (2 distinct shadows) — shadows reserved for the few elements that must lift off the page. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

Accent #a8485d · police principale proxima-nova

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://fioladc.com ·extrait le 2026-08-11 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

21 couleurs mesurées · clique une pastille pour copier

Canvas

#f0f2f4

AAA 16.83:1

Ink

#111111

AAA 16.83:1

Accent

#a8485d

AA 4.99:1

Line

#000000

AAA 18.71: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.

21 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

5 rôles · fallback système — aucun woff2 capturé · lignes éditables, clique une spec pour copier

display xl

display-xl38px · 500

display md

display-md14px · 500 · ×2.71

body

body12px · 600 · ×1.17

body sm

body-sm12px · 500 · ×1.00

button

button13px · 500 · ×0.92

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 4px

sm · 8px

md · 10px

base · 15px

lg · 25px

xl · 29px

2xl · 50px

3xl · 90px

Arrondis

none
0px

xs
36px

sm
300px

md
308px

lg
316px

xl
324px

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

Motion — courbes, transitions & keyframes réels

2 courbes d’easing · 1 keyframes · survole une tuile pour prévisualiser

Courbes & transitions

transition-1ease-out

transition-2cubic-bezier(0.55, 0, 0.1, 1)

1 animations keyframes extraites

fonts-loading

Composants — le vocabulaire fermé

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

Composant	Variantes
nav Links	×10
links	×10
footer Links	×8
heading H3	×4
buttons	×3
cards	×3
badges	×3
heading H2	×3
eyebrow Labels	×3
status Badge	×1
testimonial	×1
captions	×1
code Block	×1
breadcrumb	×1
price Tag	×1

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

Buttons

Ghost

Background: transparent
Text: #000000
Padding: 8px
Radius: 0px
Font: 15px weight 400
Use: Subtle action, toolbar, nav button

Pill

Background: transparent
Text: #a8485d {colors.primary}
Padding: 13px 26px
Radius: 300px
Border: 1px solid rgb(168, 72, 93)
Font: 12px weight 600
Use: Status pills, tags, chips

Pill

Background: #f0f2f4 {colors.background}
Text: #a54a5e {colors.primary-hover}
Padding: 8px 22px
Radius: 36px
Border: 1px solid rgb(165, 74, 94)
Font: 12px weight 600
Use: Status pills, tags, chips

Code Blocks

Inline Code / Pre

Background: transparent
Text: #000000
Padding: 17px
Radius: 0px
Font: 15px weight 400 — proxima-nova
Use: Code samples, CLI commands, syntax highlighting blocks

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width1200px

header Height0px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

3 points de rupture lus dans le CSS live

600px

767px

1020px

À faire / À éviter

12 règles applicables, verbatim de la spec

À faire

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

Use proxima-nova 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 Cherry (`#a8485d`) as the primary accent — it's the brand's signature interactive color

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

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Show company logos with testimonials — social proof relies on brand recognition, not avatars

À é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 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 — 300px is the CTA border-radius standard

Guide agent & export

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

Construis une UI dans le design system de fioladc.com. Fond #f0f2f4 · encre #111111 · accent #a8485d. Typo : proxima-nova — 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 fioladc

DESIGN.md · narrative spec tokens.json