Prism prismd.fr

Extracted · 9 sections · 14 colors · grade D

runwayml.com

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

colors

faces

keyframes

breakpoints

Get DESIGN.md tokens.json Repeindre ce design

rendu réel · source de vérité

runwayml.com is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(247, 247, 247) as the singular interactive color. AbcNormal as the primary typeface. AbcNormal is paired with abcNormal Fallback for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

Color — roles, semantics & the full census

14 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 10.37:1

Ink

#404040

AAA 10.37:1

Accent

#f7f7f7

Fail 1.07:1

Line

#404040

AAA 10.37:1

Semantic states

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

14 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-xl48px · 400

display md

display-md14px · 500 · ×3.43

headline

headline24px · 400 · ×0.58

body

body16px · 400 · ×1.50

body sm

body-sm11px · 450 · ×1.45

button

button16px · 600 · ×0.69

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 16px

lg · 24px

xl · 40px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
4px

sm
8px

md
12px

lg
20px

xl
32px

full
9999px

Motion — easings, transitions & live keyframes

1 easing curve · 3 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.4, 0, 0.2, 1)

3 keyframe animations extracted

pulse

spin

fadeIn

Components — the closed vocabulary

10 component families · 39 variants counted on the live DOM

Component	Variants found
buttons	×10
links	×10
nav Links	×5
heading H4	×3
eyebrow Labels	×3
tabs	×2
footer Links	×2
heading H2	×2
heading H1	×1
heading H3	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent
Text: #ffffff {colors.background}
Padding: 4px 8px
Radius: 4px
Font: 14px weight 600
Use: Subtle action, toolbar, nav button

Light / Invert

Background: #eef1f5 {colors.surface-2}
Text: #1a1a1a
Padding: 6px 10px
Radius: 6px
Font: 14px weight 600
Use: Bright CTA on dark sections

Secondary

Background: #262626
Text: #ffffff {colors.background}
Padding: 6px 10px
Radius: 6px
Font: 14px weight 600
Use: Secondary action

Light / Invert

Background: #f7f7f7 {colors.primary-hover}
Text: #0c0c0c {colors.ink-subtle}
Padding: 8px 12px
Radius: 8px
Font: 16px weight 600
Use: Bright CTA on dark sections

Secondary

Background: #262626
Text: #ffffff {colors.background}
Padding: 4px 8px
Radius: 4px
Font: 14px weight 600
Use: Secondary action

Light / Invert

Background: #ffffff {colors.background}
Text: #1a1a1a
Padding: 4px 8px
Radius: 4px
Font: 14px weight 600
Use: Bright CTA on dark sections

Subtle

Background: rgba(247, 247, 247, 0.05) {colors.primary-hover}
Text: #ffffff {colors.background}
Padding: 6px 10px
Radius: 6px
Font: 14px weight 600
Use: Quiet action against page bg

Layout — structure & dimensions

4 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

7 media-query stops read from the live CSS

640px

768px

1024px

1200px

1280px

1536px

1600px

Do's & Don'ts

18 enforceable rules pulled verbatim from the spec

Use abcNormal 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

Use negative letter-spacing (-1.2px) at display sizes for compressed, editorial headlines

Use Off-White (`#f7f7f7`) as the primary accent — it's the brand's signature interactive color

Use 6px border-radius on buttons — the standard corner rounding for interactive elements

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

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

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

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

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

Use a 5-column grid on desktop — density matters for this content type

Don't

Don't substitute with generic sans-serif or serif — the custom font carries the brand

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

Don't increase letter-spacing on headings — the type is designed to run tight at scale

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

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

Don't put a CTA button in the nav — this design uses links only at the top

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the runwayml.com design system. Canvas #ffffff · ink #404040 · accent #f7f7f7. Type: abcNormal — 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 runwayml

DESIGN.md · narrative spec tokens.json