prismdinstrument

EXTRACTED · 10 SECTIONS · 13 COLORS · GRADE B

warp.dev

Accent #bda6f7 · Inter — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

shadows

keyframes

DESIGN.md tokens.json

real render · source of truth

warp.dev is built on a near-black canvas (#121212). The system uses rgb(28, 26, 24) as a near-neutral accent (low saturation). Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside Matter as the primary typeface. Matter is paired with Inter Fallback for secondary roles. A layered elevation system (9 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 8 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

13 colors measured · click any swatch to copy

Canvas

#121212

AAA 17.21:1

Ink

#f8f5ee

AAA 17.21:1

Accent

#1c1a18

Fail 1.08:1

Line

#5f5d59

Fail 2.85:1

Semantic states

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

13 colors mined from the live renderexpand

Type — the ladder, in the real face

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

display xl

display-xl64px · 400

display md

display-md36px · 400 · ×1.78

body

body14px · 400 · ×2.57

caption

caption18px · 400 · ×0.78

button

button14px · 400 · ×1.29

Depth — elevation is extracted, not invented

9 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

4 easing curves · 8 keyframes · hover a tile to preview

Easing & transitions

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

ease-incubic-bezier(.4,0,1,1)

ease-in-outcubic-bezier(.4,0,.2,1)

ease-outcubic-bezier(0,0,.2,1)

8 keyframe animations extracted

reveal

fill-progress

scroll-left

scroll-right

loading-spinner-in

spin-slow

spin

hero-left-photo-carousel

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 2px

sm · 10px

md · 32px

base · 40px

lg · 48px

xl · 64px

2xl · 112px

3xl · 120px

Radius

none
0px

xs
4px

sm
6px

md
14px

lg
20px

xl
32px

full
9999px

Components — the closed vocabulary

11 component families · 42 variants counted on the live DOM

Component	Variants found
buttons	×10
testimonial	×7
links	×6
nav Links	×5
cards	×3
heading H3	×3
tabs	×2
footer Links	×2
heading H2	×2
heading H1	×1
captions	×1

Component style specs (§4)expand

Buttons

Icon Button

Background: transparent
Text: #605d59
Padding: 0px
Radius: 4px
Font: 14px weight 400
Use: Toolbar/UI icons
Hover: backgroundColor: #000000, color: #5f5d59, border: 0px solid oklab(0.479999 0.000654012 0.00697976)
Focus: backgroundColor: oklab(0.14 0.000375051 0.00398531 / 0.000898747), color: oklab(0.473888 0.000648998 0.00692594), border: 0px solid oklab(0.473888 0.000648998 0.00692594)

Ghost

Background: transparent
Text: #f8f5ee {colors.ink}
Padding: 4px 10px
Radius: 3px
Font: 14px weight 500
Use: Subtle action, toolbar, nav button
Hover: backgroundColor: #000000, color: #5f5d59, border: 0px solid oklab(0.479999 0.000654012 0.00697976)
Focus: backgroundColor: oklab(0.14 0.000375051 0.00398531 / 0.000898747), color: oklab(0.473888 0.000648998 0.00692594), border: 0px solid oklab(0.473888 0.000648998 0.00692594)

Ghost

Background: transparent
Text: #f8f5ee {colors.ink}
Padding: 0px 12px
Radius: 3px
Font: 14px weight 500
Use: Subtle action, toolbar, nav button
Hover: backgroundColor: #000000, color: #5f5d59, border: 0px solid oklab(0.479999 0.000654012 0.00697976)
Focus: backgroundColor: oklab(0.14 0.000375051 0.00398531 / 0.000898747), color: oklab(0.473888 0.000648998 0.00692594), border: 0px solid oklab(0.473888 0.000648998 0.00692594)

Secondary

Background: #1c1a18 {colors.primary}
Text: #f8f5ee {colors.ink}
Padding: 4px
Radius: 2px
Font: 16px weight 400
Use: Secondary action
Hover: backgroundColor: #000000, color: #5f5d59, border: 0px solid oklab(0.479999 0.000654012 0.00697976)
Focus: backgroundColor: oklab(0.14 0.000375051 0.00398531 / 0.000898747), color: oklab(0.473888 0.000648998 0.00692594), border: 0px solid oklab(0.473888 0.000648998 0.00692594)

Light / Invert

Background: #f8f5ee {colors.ink}
Text: #121212 {colors.canvas}
Padding: 0px 20px
Radius: 2px 0px 0px 2px
Font: 14px weight 500
Use: Bright CTA on dark sections
Hover: backgroundColor: #000000, color: #5f5d59, border: 0px solid oklab(0.479999 0.000654012 0.00697976)
Focus: backgroundColor: oklab(0.14 0.000375051 0.00398531 / 0.000898747), color: oklab(0.473888 0.000648998 0.00692594), border: 0px solid oklab(0.473888 0.000648998 0.00692594)

Icon Button

Background: transparent
Text: #a5a39d {colors.ink-subtle}
Padding: 0px
Radius: 9999px
Font: 14px weight 400
Use: Toolbar/UI icons
Hover: backgroundColor: #000000, color: #5f5d59, border: 0px solid oklab(0.479999 0.000654012 0.00697976)

Layout — structure & dimensions

4 layout metrics measured

max Width80rem

header Height41px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

fluid system — no hard stops

No distinct @media breakpoints captured at the desktop/mobile pass — this layout is fluid, adapting by ratio rather than hard stops.

Do's & Don'ts

24 enforceable rules pulled verbatim from the spec

Use dark background (`#121212`) as the foundation — this is a dark-mode-native design

Use Inter as the primary typeface — it defines the brand personality

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

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

Use Surface (`#1c1a18`) as the primary accent — it's the brand's signature interactive color

Use small 3px radius for buttons — this design system uses subtle rounding, not pill shapes

Use 2px border-radius on cards — consistent with the grid card corners

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

Transition button background to Black (`#000000`) on hover — this is the extracted interactive state

Respect the 2px–64px 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

Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose

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

Lay out testimonials in a grid (7+ items) — quantity signals scale and trust

Build a content-dense footer (5 columns, ~31 links) — this site treats the footer as a sitemap, not an afterthought

Don't

Don't use light backgrounds — the dark canvas is the native medium

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

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

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-round buttons with pill or large radius — the system uses restrained, sharp-ish corners

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

Don't use opacity or brightness filter for button hover — the design uses an explicit background color change

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 warp.dev design system. Canvas #121212 · ink #f8f5ee · accent #1c1a18. Type: Inter — 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 warp

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press