Prism prismd.fr

Extracted · 10 sections · 11 colors · grade B

theverge.com

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

colors

faces

shadows

keyframes

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

theverge.com is built on a pure-white canvas (rgb(255, 255, 255)). The system uses rgb(82, 0, 255) as the high-saturation accent for primary actions. Crisp CTAs (1px radius) reinforce a precise, technical aesthetic alongside __manuka_62afb5 as the primary typeface. A layered elevation system (8 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 18 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

11 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 18.58:1

Ink

#131313

AAA 18.58:1

Accent

#5200ff

AAA 7.49:1

Line

#4a4a4a

AAA 8.86:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

11 colors mined from the live renderexpand

Type — the ladder, in the real face

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

display xl

display-xl90px · 900

display md

display-md24px · 700 · ×3.75

body

body11px · 500 · ×2.18

body sm

body-sm11px · 400 · ×1.00

button

button12px · 600 · ×0.92

mono

mono18px · 400 · ×0.67

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 10px

base · 16px

lg · 23px

xl · 30px

2xl · 50px

3xl · 70px

Radius

none
0px

xs
3px

sm
16px

md
24px

lg
32px

xl
40px

full
9999px

Depth — elevation is extracted, not invented

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

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — easings, transitions & live keyframes

0 easing curves · 18 keyframes · hover a tile to preview

18 keyframe animations extracted

ftptba1

lk710f0

lk710f1

lk710f2

lk710f3

fqbi2x0

pswp-clockwise

onetrust-fade-in

ot-slide-in-left

ot-slide-in-right

ot-slide-out-left

ot-slide-out-right

Components — the closed vocabulary

10 component families · 43 variants counted on the live DOM

Component	Variants found
cards	×10
buttons	×6
footer Links	×5
links	×5
cta Banner	×4
heading H2	×4
tabs	×3
captions	×3
nav Links	×2
badges	×1

Component style specs (§4)expand

Buttons

Outline

Background: transparent
Text: #5200ff {colors.primary}
Padding: 0px 20px
Radius: 1px
Border: 1px solid rgb(82, 0, 255)
Font: 11px weight 500
Use: Secondary action with border
Focus: transform: none

Ghost

Background: transparent
Text: #131313 {colors.ink-muted}
Padding: 14px 0px 14px 14px
Radius: 0px
Font: 16px weight 400
Use: Subtle action, toolbar, nav button
Focus: transform: none

Pill

Background: #5200ff {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 10px 24px
Radius: 24px
Font: 12px weight 600
Use: Status pills, tags, chips
Focus: transform: none

Pill

Background: #e9e9e9 {colors.surface-2}
Text: #4a4a4a {colors.hairline}
Padding: 10px 24px
Radius: 24px
Font: 12px weight 600
Use: Status pills, tags, chips
Focus: transform: none

Primary Brand

Background: #5200ff {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 4px 5px 5px
Radius: 2px
Font: 11px weight 400
Use: Primary CTA / brand action
Focus: transform: none

Inputs & Forms

Text Input

Background: #ffffff {colors.on-primary}
Text: #000000
Padding: 20px 45px 20px 20px
Radius: 2px
Border: 0px none rgb(0, 0, 0)
Font: 18px weight 400
Use: Text fields, search inputs

Navigation

Layout — structure & dimensions

4 layout metrics measured

max Width1300px

header Height0px

sidebar Width0px

container Padding10px 0px 40px

Responsive — real breakpoints

25 media-query stops read from the live CSS

320px

400px

420px

425px

426px

530px

549px

550px

600px

767px

768px

769px

890px

896px

897px

900px

901px

1023px

1024px

1179px

1180px

1181px

1200px

1280px

1300px

Do's & Don'ts

11 enforceable rules pulled verbatim from the spec

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

Use ui-sans-serif 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 #5200ff (`#5200ff`) 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

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

Don't

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

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the theverge.com design system. Canvas #ffffff · ink #131313 · accent #5200ff. Type: Roboto — 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 theverge

DESIGN.md · narrative spec tokens.json