prism·mdthe design press

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

airtable.com

58 colours · Haas Groot Disp 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

58 colors measured · click any swatch to copy

Canvas

#ffffff

AAA 12.63:1

Ink

#333333

AAA 12.63:1

Accent

#ffffff

Fail 1:1

Line

#333333

AAA 12.63:1

Semantic states

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

58 colors mined from the live renderexpand

Type — the ladder, in the real face

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

display xl

display-xl40px · 400

display md

display-md24px · 400 · ×1.67

body

body14px · 400 · ×1.71

body sm

body-sm20px · 400 · ×0.70

button

button20px · 500 · ×1.00

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 4px

sm · 16px

md · 20px

base · 24px

lg · 32px

xl · 40px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
2px

sm
6px

md
12px

lg
20px

xl
32px

full
999px

Depth — elevation is extracted, not invented

3 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 · 41 keyframes · hover a tile to preview

Easing & transitions

transition-2ease-in

transition-4linear

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

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

41 keyframe animations extracted

BkButton-module-scss-module__dZ-VXq__animatedBackground

BkButton-module-scss-module__dZ-VXq__counterAnimatedBackground

BkLoadingAnimation-module-scss-module__gtyXKW__loader

index-module-scss-module__KcLkaG__fadeInOut

MarketoSubmitButton-module-scss-module__xCPVEa__blink

baymax-module__82pTNW__progress

baymax-module__82pTNW__spinScale

baymax-module__82pTNW__swayHorizontal

baymax-module__82pTNW__spin

baymax-module__82pTNW__spinReverse

baymax-module__82pTNW__highlight

baymax-module__82pTNW__highlightYellow

Components — the closed vocabulary

12 component families · 63 variants counted on the live DOM

Component	Variants found
cards	×9
nav Links	×9
links	×9
buttons	×7
footer Links	×7
heading H2	×6
status Badge	×5
accordion	×4
cta Banner	×3
eyebrow Labels	×2
heading H1	×1
heading H3	×1

Component style specs (§4)expand

Buttons

Light / Invert

Background: #ffffff {colors.primary-hover}
Text: #181d26 {colors.ink-subtle}
Padding: 16px 24px
Radius: 12px
Border: 1px solid rgb(255, 255, 255)
Font: 16px weight 500
Use: Bright CTA on dark sections
Focus: outline: rgba(7, 12, 20, 0.82) none 0px

CTA Banners

Full-width CTA

Background: #ffffff {colors.primary-hover}
Text: #333333 {colors.hairline}
Padding: 48px 0px
Radius: 0px
Font: 20px weight 400
Use: Full-width conversion strip with headline + button
Focus: outline: rgba(7, 12, 20, 0.82) none 0px

Status Badges

Neutral Dark

Background: transparent
Text: #ffffff {colors.primary-hover}
Padding: 4px 12px
Radius: 999px
Font: 14px weight 600
Use: Status indicator, label, pill

Tinted

Background: #912e1f
Text: #9297a0
Padding: 0px
Radius: 2px
Font: 18px weight 400
Use: Status indicator, label, pill

Neutral Light

Background: #b6e995
Text: #9297a0
Padding: 0px
Radius: 2px
Font: 18px weight 400
Use: Status indicator, label, pill

Layout — structure & dimensions

4 layout metrics measured

max Width1200px

header Height0px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

23 media-query stops read from the live CSS

39px

40px

51px

52px

71px

72px

400px

642px

720px

768px

832px

834px

904px

1024px

1080px

1100px

1184px

1344px

1350px

1408px

1440px

1600px

1664px

Do's & Don'ts

17 enforceable rules pulled verbatim from the spec

Use Charcoal (`#333333`) for text — not pure black, it's warmer and more readable

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

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

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

Keep navigation fixed to the top — the design uses a persistent navigation pattern

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

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

Make the navigation fixed — it stays visible during scroll, signaling content depth

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

Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single

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

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the airtable.com design system. Canvas #ffffff · ink #333333 · accent #ffffff. Type: Haas Groot Disp — 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 airtable

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press