prism·mdthe design press
EXTRACTED · 10 SECTIONS · 24 COLORS · GRADE A 93/100

expo.dev

24 colours · Inter woff2 captured · real motion · desktop + mobile shots — every number measured, never written.

24
colors
2
faces
7
shadows
24
keyframes
Get DESIGN.md tokens.json
01

Color — roles, semantics & the full census

24 colors measured · click any swatch to copy

Canvas
#fcfcfd
AAA 15.98:1
Ink
#1c2024
AAA 15.98:1
Accent
#30a46c
AA·lg 3.08:1
Line
#80838d
AA·lg 3.69:1
Semantic states
error#ffcdcesuccess#8eceaawarning#ab6400info#0588f0

4 semantic roles found.

24 colors mined from the live renderexpand
02

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 · 700
display md
display-md16px · 600 · ×4.00
headline
headline14px · 600 · ×1.14
body
body16px · 400 · ×0.88
button
button14px · 400 · ×1.14
03

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 · 48px
2xl · 68px
3xl · 88px
Radius
none
0px
xs
4px
sm
8px
md
14px
lg
20px
xl
32px
full
9999px
04

Depth — elevation is extracted, not invented

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

Motion — easings, transitions & live keyframes

7 easing curves · 24 keyframes · hover a tile to preview

Easing & transitions
transition-2cubic-bezier(0.4, 0, 0.2, 1)
widget-accordion-easecubic-bezier(.4,0,.2,1)
legal-links-transitionease
button-hover-transition-fullease-in-out
dialog-animation-timingease-out
default-transition-timing-functioncubic-bezier(.4, 0, .2, 1)
ease-outcubic-bezier(0, 0, .2, 1)
24 keyframe animations extracted
spin
pulse
status-pulse
fadeIn
fadeOut
slideDownAndFade
slideRightAndFade
slideLeftAndFade
slideUpAndFade
largeSlideUpAndFadeIn
largeSlideDownAndFadeIn
progressBar
06

Components — the closed vocabulary

11 component families · 46 variants counted on the live DOM

ComponentVariants found
buttons×10
links×10
nav Links×7
heading H3×5
footer Links×4
heading H2×4
tabs×2
cards×1
status Badge×1
heading H1×1
heading H4×1
Component style specs (§4)expand

Buttons

Pill

  • Background: transparent
  • Text: #1c2024 {colors.ink}
  • Padding: 0px 16px
  • Radius: 24px
  • Font: 14px weight 400
  • Use: Status pills, tags, chips
  • Focus: outline: rgb(5, 136, 240) solid 2px

Pill

  • Background: transparent
  • Text: #1c2024 {colors.ink}
  • Padding: 0px 8px 0px 16px
  • Radius: 36px
  • Border: 1px solid rgba(0, 0, 0, 0)
  • Font: 14px weight 400
  • Use: Status pills, tags, chips
  • Focus: outline: rgb(5, 136, 240) solid 2px

Cards & Containers

Standard Card

  • Background: #fcfcfd {colors.background}
  • Padding: 0px
  • Radius: 20px
  • Border: 1px solid rgb(232, 232, 236)
  • Shadow: rgba(0, 0, 0, 0.12) 0px 15px 25px 0px, rgba(0, 0, 0, 0.05) 0px 5px 10px 0px
  • Use: Content containers, listing items

Navigation

Main Nav

  • Background: transparent
  • Padding: 12px 12px 4px
  • Radius: none
  • Font: 16px weight 400
  • Use: Static flex nav — N/A items

Status Badges

Tinted

  • Background: #30a46c {colors.primary}
  • Text: #1c2024 {colors.ink}
  • Padding: 0px
  • Radius: 9999px
  • Font: 16px weight 400
  • Use: Status indicator, label, pill

Tabs

Pill Tab

  • Background: #ffffff
  • Text: #1c2024 {colors.ink}
  • Padding: 8px
  • Radius: 24px
  • Font: 16px weight 400
  • Use: Navigation tabs, filter tabs
07

Layout — structure & dimensions

5 layout metrics measured

header 55px 440px max-width
max Width440px
header Height55px
sidebar Width0px
gap16px
container Padding24px
08

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.

09

Do's & Don'ts

25 enforceable rules pulled verbatim from the spec

Do
Use Pure White (`#fcfcfd`) as the page background — it's intentionally not pure white
Use Near-Black (`#1c2024`) for text — not pure black, it's warmer and more readable
Use Inter as the primary typeface — it defines the brand personality
Use negative letter-spacing (-3px) at display sizes for compressed, editorial headlines
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 Teal (`#30a46c`) 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
Use 20px border-radius on cards — consistent with the grid card corners
Maintain nav height at 68px — consistent vertical space for the navigation bar
Respect the 4px–48px 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 5 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single
Build a content-dense footer (5 columns, ~42 links) — this site treats the footer as a sitemap, not an afterthought
Don't
Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
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 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 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
Don't use sharp-cornered or pill buttons — 24px is the CTA border-radius standard
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
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the expo.dev design system. Canvas #fcfcfd · ink #1c2024 · accent #30a46c. 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 expo
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press