prism·mdthe design press

EXTRACTED · 10 SECTIONS · 17 COLORS · GRADE B 87/100

webflow.com

17 colours · WF Visual Sans Variable woff2 captured · real motion · desktop + mobile shots — every number measured, never written.

colors

faces

shadows

keyframes

Get DESIGN.md tokens.json

Color — roles, semantics & the full census

17 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 20.03:1

Ink

#080808

AAA 20.03:1

Accent

#146ef5

AA 4.59:1

Line

#e5e5e5

Fail 1.26:1

Semantic states

error#146ef5

1 semantic role found.

17 colors mined from the live renderexpand

Type — the ladder, in the real face

9 roles · rendered live in the real WF Visual Sans Variable (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl80px · 600

display md

display-md20px · 600 · ×4.00

body

body16px · 400 · ×1.25

body sm

body-sm14px · 500 · ×1.14

caption

caption16px · 500 · ×0.88

caption sm

caption-sm10px · 600 · ×1.60

button

button24px · 400 · ×0.42

eyebrow

eyebrow20px · 500 · ×1.20

mono

mono14px · 400 · ×1.43

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 1px

sm · 8px

md · 12px

base · 24px

lg · 32px

xl · 56px

2xl · 80px

3xl · 88px

Radius

none
0px

xs
4px

sm
8px

md
14px

lg
20px

xl
32px

full
9999px

Depth — elevation is extracted, not invented

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

shadow-1

shadow-2

shadow-3

Motion — easings, transitions & live keyframes

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

Easing & transitions

transition-2cubic-bezier(0.165, 0.84, 0.44, 1)

transition-4cubic-bezier(0.455, 0.03, 0.515, 0.955)

transition-timing-inoutquartcubic-bezier(0.77, 0, 0.175, 1)

transition-timing-inoutcubiccubic-bezier(0.645, 0.045, 0.355, 1)

8 keyframe animations extracted

spin

fadein

marquee_1_timeline

moveGradientRight

moveGradientLeft

scale

fade

noise-animation

Components — the closed vocabulary

14 component families · 44 variants counted on the live DOM

Component	Variants found
logo Tile	×9
tabs	×6
heading H2	×5
badges	×4
cta Banner	×4
nav Links	×3
links	×3
eyebrow Labels	×3
heading H3	×2
buttons	×1
status Badge	×1
footer Links	×1
heading H1	×1
avatar	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent {colors.hairline}
Text: #080808 {colors.ink-muted}
Padding: 12px 8px
Radius: 0px
Font: 24px weight 400
Use: Subtle action, toolbar, nav button

Ghost

Background: transparent {colors.hairline}
Text: #080808 {colors.ink-muted}
Padding: 20.775px 0px 19.177px
Radius: 0px
Font: 15.9808px weight 500
Use: Subtle action, toolbar, nav button

Primary Brand

Background: #146ef5 {colors.semantic-error}
Text: #ffffff {colors.on-primary}
Padding: 12px 0px
Radius: 0px
Font: 14px weight 500
Use: Primary CTA / brand action

Primary Brand

Background: #146ef5 {colors.semantic-error}
Text: #ffffff {colors.on-primary}
Padding: 9.6px 18px
Radius: 8px
Font: 12px weight 500
Use: Primary CTA / brand action

Cards & Containers

Standard Card

Background: #146ef5 {colors.semantic-error}
Padding: 0px
Radius: 8px
Use: Content containers, listing items

Inputs & Forms

Text Input

Background: #ffffff {colors.on-primary}
Text: #1a1a1a
Padding: 8px 12px
Radius: 6px
Border: 1px solid rgb(209, 213, 219)
Font: 14px weight 400
Use: Text fields, search inputs

Status Badges

Tinted

Background: #000000
Text: #000000
Padding: 3.2px 6px 2.4px
Radius: 4px

Layout — structure & dimensions

4 layout metrics measured

max Widthcalc(90*1rem)

header Height68px

sidebar Width1440px

container Padding0px

Responsive — real breakpoints

5 media-query stops read from the live CSS

479px

767px

768px

991px

992px

Do's & Don'ts

22 enforceable rules pulled verbatim from the spec

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

Use WF Visual Sans Variable 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 (-0.8px) at display sizes for compressed, editorial headlines

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

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

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

Style form inputs with a `1px solid rgb(209, 213, 219)` border — use border-based inputs, not floating labels or underline-only

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

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

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

Use expandable accordion for the FAQ — saves vertical space and lets users self-navigate

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 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 invent new shadow values — use only the extracted shadow levels

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

Don't remove the input border — the border is the primary affordance indicator for form fields

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 webflow.com design system. Canvas #ffffff · ink #080808 · accent #146ef5. Type: WF Visual Sans Variable — 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 webflow

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press