Prism prismd.fr

Extracted · 10 sections · 15 colors · grade B

meta.com

Accent #5e6ad2 · Optimistic VF — chaque valeur ci-dessous est mesurée via getComputedStyle(), jamais affirmée à la main.

colors

face

shadows

200

keyframes

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

meta.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(4, 87, 203) as the high-saturation accent for primary actions. Generously rounded CTAs (24px) suggest approachable, content-first design alongside Optimistic VF as the primary typeface. 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.

Color — roles, semantics & the full census

15 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 16.71:1

Ink

#1c1e21

AAA 16.71:1

Accent

#0457cb

AA 6.5:1

Line

#000000

AAA 21:1

Semantic states

success#31a24cwarning#ffe200

2 semantic roles found.

15 colors mined from the live renderexpand

Type — the ladder, in the real face

4 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl64px · 500

display md

display-md16px · 400 · ×4.00

body

body12px · 400 · ×1.33

button

button14px · 400 · ×0.86

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 4px

sm · 10px

md · 16px

base · 22px

lg · 24px

xl · 32px

2xl · 80px

3xl · 88px

Radius

none
0px

xs
12px

sm
24px

md
32px

lg
100px

xl
999px

full
999px

Depth — elevation is extracted, not invented

1 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

Motion — easings, transitions & live keyframes

2 easing curves · 200 keyframes · hover a tile to preview

Easing & transitions

transition-3ease-in-out

transition-5ease-out

200 keyframe animations extracted

x11uh2n3-B

x17x9eqa-B

x18re5ia-B

x1a2jnmv-B

x1ayzhmi-B

x1dq47om-B

x1e5kmei-B

x1gnlf15-B

x1ofn8cw-B

x1prjo1g-B

x1ql2n3s-B

x1rp9ifn-B

Components — the closed vocabulary

7 component families · 29 variants counted on the live DOM

Component	Variants found
links	×10
heading H2	×6
buttons	×5
nav Links	×3
footer Links	×2
heading H3	×2
inputs	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent
Text: #1c1e21 {colors.ink-muted}
Padding: 4px
Radius: 24px
Font: 12px weight 400
Use: Subtle action, toolbar, nav button

Pill

Background: transparent
Text: #1c1e21 {colors.ink-muted}
Padding: 4px 12px 4px 4px
Radius: 24px
Font: 12px weight 400
Use: Status pills, tags, chips

Icon Button

Background: transparent
Text: #1c1e21 {colors.ink-muted}
Padding: 0px
Radius: 999px
Font: 12px weight 400
Use: Toolbar/UI icons

Pill

Background: transparent
Text: rgba(68, 86, 100, 0.5)
Padding: 10px 22px
Radius: 100px
Border: 2px solid rgba(10, 19, 23, 0.12)
Font: 12px weight 400
Use: Status pills, tags, chips

Inputs & Forms

Text Input

Background: transparent
Text: transparent
Padding: 0px
Radius: 0px
Border: 0px none rgb(118, 118, 118)
Font: 16px weight 400
Use: Text fields, search inputs
Focus: color: rgb(10, 19, 23), transform: matrix(1, 0, 0, 1, 0, 0), outline: rgb(10, 19, 23) none 3px

Layout — structure & dimensions

4 layout metrics measured

max Width100%

header Height64px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

198 media-query stops read from the live CSS

320px

340px

359px

360px

375px

389px

390px

400px

404px

420px

422px

430px

450px

459px

460px

480px

481px

482px

486px

499px

500px

501px

530px

531px

559px

560px

561px

562px

564px

575px

583px

584px

599px

600px

648px

650px

655px

656px

660px

665px

670px

679px

680px

699px

700px

701px

703px

704px

719px

720px

735px

736px

744px

760px

767px

768px

769px

784px

789px

790px

792px

799px

800px

820px

836px

837px

838px

860px

868px

875px

876px

877px

878px

880px

899px

900px

905px

915px

916px

939px

940px

950px

955px

960px

970px

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

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

1395px

1396px

1400px

1439px

1440px

1456px

1460px

1504px

1509px

1510px

1535px

1553px

1554px

1599px

1600px

1627px

1628px

1661px

1667px

1668px

1679px

1680px

1711px

1712px

1728px

1800px

1825px

1826px

1869px

1870px

1919px

1920px

1921px

1928px

1935px

1936px

1983px

1984px

1987px

1988px

2027px

2028px

2048px

2142px

2243px

2244px

2295px

2296px

2300px

2552px

2604px

2605px

Do's & Don'ts

18 enforceable rules pulled verbatim from the spec

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

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 full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

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

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

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

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

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

Place 3 pricing tiers side-by-side on desktop — direct comparison is the value prop

Don't

Don't use pure black (`#000000`) for text — the near-black adds warmth

Don't use weight 700 (bold) or above — 500 is the maximum weight in this system

Don't invent new shadow values — use only the extracted shadow levels

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

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

Don't use sharp-cornered or pill buttons — 24px is the CTA border-radius standard

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

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the meta.com design system. Canvas #ffffff · ink #1c1e21 · accent #0457cb. Type: Optimistic VF — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add meta

DESIGN.md · narrative spec tokens.json