Analyse du design system

facebook.fr

facebook.fr is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(0, 100, 224) as the high-saturation accent for primary actions. Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Facebook Sans Normal as the primary typeface. Facebook Sans Normal is paired with Segoe UI for secondary roles. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 200 keyframe animations plus transition-driven interactions.

Accent #0064e0 · police principale Segoe UI Historic

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.

http://www.facebook.fr/lesaperoboxdesophie ·extrait le 2026-08-01 ·scorer v2 ·moteur getComputedStyle

Desktop · source de vérité

Mobile

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

13 couleurs mesurées · clique une pastille pour copier

Canvas

#ffffff

AAA 16.71:1

Ink

#1c1e21

AAA 16.71:1

Accent

#0064e0

AA 5.39:1

Line

#dfe2e5

Fail 1.3:1

États sémantiques

error#d31130success#147b29warning#965e03

3 rôles sémantiques trouvés.

13 couleurs extraites du rendu livedéplier

Typographie — l’échelle, dans la vraie police

4 rôles · rendu live dans la vraie Segoe UI Historic (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl

display-xl59.04px · 600

body

body12px · 400 · ×4.92

body sm

body-sm15px · 400 · ×0.80

mono

mono15px · 500 · ×1.00

Espacements & arrondis, rendus spatiaux

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

Échelle d’espacement

xxs · 2px

xs · 2px

sm · 18px

md · 26px

base · 34px

lg · 42px

xl · 50px

2xl · 58px

3xl · 64px

Arrondis

none
0px

xs
16px

sm
22px

md
40px

lg
48px

xl
56px

full
9999px

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

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

shadow-1

Motion — courbes, transitions & keyframes réels

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

Courbes & transitions

transition-1cubic-bezier(0.08, 0.52, 0.52, 1)

transition-2cubic-bezier(0.17, 0.17, 0, 1)

transition-3cubic-bezier(0, 0, 1, 1)

transition-4ease-in-out

200 animations keyframes extraites

x11uh2n3-B

x17x9eqa-B

x18re5ia-B

x1a2jnmv-B

x1ayzhmi-B

x1bfvtgj-B

x1dq47om-B

x1e5kmei-B

x1gnlf15-B

x1ofn8cw-B

x1prjo1g-B

x1ql2n3s-B

Composants — le vocabulaire fermé

3 familles de composants · 5 variantes comptées sur le DOM live

Composant	Variantes
inputs	×2
links	×2
buttons	×1

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

Inputs & Forms

Text Input

Background: transparent
Text: #111112
Padding: 18px 2px 1px
Radius: 0px
Border: 0px none rgba(0, 0, 0, 0)
Font: 15px weight 500
Use: Text fields, search inputs

Mise en page — structure & dimensions

5 métriques de layout mesurées

max Width100%

header Height64px

sidebar Width0px

gap16px

container Padding0px

Responsive — vrais breakpoints

201 points de rupture lus dans le CSS live

320px

340px

359px

360px

375px

389px

390px

400px

404px

420px

422px

450px

459px

460px

480px

481px

482px

486px

500px

501px

519px

530px

531px

561px

562px

564px

583px

584px

599px

600px

622px

639px

640px

645px

648px

650px

655px

656px

660px

665px

670px

679px

680px

699px

700px

701px

703px

704px

719px

720px

735px

736px

760px

767px

768px

769px

784px

789px

790px

792px

799px

800px

820px

836px

837px

838px

860px

875px

876px

877px

878px

880px

899px

900px

905px

915px

916px

939px

940px

945px

950px

955px

960px

970px

980px

990px

996px

999px

1000px

1009px

1023px

1024px

1025px

1035px

1036px

1050px

1058px

1071px

1072px

1099px

1100px

1103px

1104px

1105px

1150px

1159px

1160px

1190px

1193px

1194px

1199px

1200px

1201px

1219px

1230px

1235px

1237px

1238px

1249px

1259px

1260px

1263px

1264px

1267px

1274px

1279px

1280px

1290px

1291px

1300px

1319px

1320px

1337px

1339px

1350px

1351px

1352px

1359px

1360px

1364px

1365px

1366px

1367px

1371px

1372px

1379px

1380px

1382px

1384px

1395px

1396px

1400px

1439px

1440px

1447px

1456px

1460px

1509px

1510px

1535px

1553px

1554px

1599px

1600px

1627px

1628px

1661px

1667px

1668px

1679px

1680px

1711px

1712px

1730px

1800px

1825px

1826px

1869px

1870px

1919px

1920px

1921px

1928px

1935px

1936px

1983px

1984px

1987px

1988px

2027px

2028px

2076px

2142px

2243px

2244px

2295px

2296px

2300px

2552px

2604px

2605px

À faire / À éviter

12 règles applicables, verbatim de la spec

À faire

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

Use Segoe UI Historic as the primary typeface — it defines the brand personality

Keep font weights between 400-600 — the system uses a narrow weight range for subtle hierarchy (CSS declares up to 700, but the heaviest weight actually painted is 600)

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

Use M Tricolor Blue (`#0064e0`) as the primary accent — it's the brand's signature interactive color

Respect the 2px–50px spacing range — the design uses a wide scale for visual breathing room

À é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 — 600 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 over-build the footer — this design keeps it minimal (1 cols, 0 links)

Guide agent & export

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

Construis une UI dans le design system de facebook.fr. Fond #ffffff · encre #1c1e21 · accent #0064e0. Typo : Segoe UI Historic — 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 facebook

DESIGN.md · narrative spec tokens.json