prism·mdthe design press
EXTRACTED · 10 SECTIONS · 41 COLORS · GRADE B 78/100

biomejs.dev

41 colours · Roboto · real motion · desktop + mobile shots — every number measured, never written.

41
colors
2
shadows
16
breakpoints
Get DESIGN.md tokens.json
01

Color — roles, semantics & the full census

41 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 11.71:1
Ink
#353841
AAA 11.71:1
Accent
#0065da
AA 5.42:1
Line
#353841
AAA 11.71:1
Semantic states

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

41 colors mined from the live renderexpand
02

Type — the ladder, in the real face

7 roles · system fallback — no woff2 captured · lines are editable, click any spec to copy

display xl
display-xl64px · 600
display lg
display-lg64px · 600 · ×1.00
body
body13.3333px · 400 · ×4.80
body sm
body-sm24px · 600 · ×0.56
caption
caption20px · 400 · ×1.20
button
button14px · 400 · ×1.43
mono
mono16.8px · 400 · ×0.83
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 · 32px
2xl · 43px
3xl · 56px
Radius
none
0px
xs
4px
sm
8px
md
12px
lg
99.2px
xl
800px
full
15984px
04

Depth — elevation is extracted, not invented

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

shadow-1
shadow-2
05

Motion — easings, transitions & live keyframes

2 easing curves · 0 keyframes · hover a tile to preview

Easing & transitions
transition-2cubic-bezier(0.25, 0.46, 0.45, 0.94)
transition-3ease-in
Keyframes

Transitions only — no @keyframes animation on this page. Motion lives entirely in the easing curves on the left.

06

Components — the closed vocabulary

12 component families · 40 variants counted on the live DOM

ComponentVariants found
links×10
code Block×7
buttons×5
cards×5
nav Links×4
badges×3
inputs×1
heading H1×1
heading H2×1
captions×1
avatar×1
progress Bar×1
Component style specs (§4)expand

Buttons

Light / Invert

  • Background: #ffffff {colors.on-primary}
  • Text: #353841 {colors.hairline}
  • Padding: 1px 8px 1px 12px
  • Radius: 8px
  • Border: 1px solid rgb(192, 194, 199)
  • Font: 14px weight 400
  • Use: Bright CTA on dark sections
  • Hover: color: #17181c, border: 1px solid rgb(53, 56, 65), borderColor: #353841
  • Focus: outline: rgb(16, 16, 16) auto 1px

Primary Brand

  • Background: #0065da {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 15px 20px
  • Radius: 4.8px
  • Border: 1px solid rgb(0, 101, 218)
  • Font: 16px weight 400
  • Use: Primary CTA / brand action
  • Hover: color: #17181c, border: 1px solid rgb(53, 56, 65), borderColor: #353841
  • Focus: outline: rgb(16, 16, 16) auto 1px

Outline

  • Background: transparent
  • Text: #17181c {colors.ink-subtle}
  • Padding: 15px 20px
  • Radius: 4.8px
  • Border: 1px solid rgb(23, 24, 28)
  • Font: 16px weight 400
  • Use: Secondary action with border
  • Hover: color: #17181c, border: 1px solid rgb(53, 56, 65), borderColor: #353841
  • Focus: outline: rgb(16, 16, 16) auto 1px

Pill

  • Background: #0065da {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 15px 20px
  • Radius: 9999px
  • Border: 1px solid rgb(0, 101, 218)
  • Font: 16px weight 400
  • Use: Status pills, tags, chips
  • Hover: color: #17181c, border: 1px solid rgb(53, 56, 65), borderColor: #353841
  • Focus: outline: rgb(16, 16, 16) auto 1px

Inputs & Forms

Text Input

  • Background: #ffffff {colors.on-primary}
  • Text: #17181c {colors.ink-subtle}
  • Padding: 0px 56px 0px 43.2px
  • Radius: 8px
  • Border: 1px solid rgb(192, 194, 199)
  • Font: 16.8px weight 400
  • Use: Text fields, search inputs

Navigation

Main Nav

07

Layout — structure & dimensions

4 layout metrics measured

header 64px 67.5rem max-width
max Width67.5rem
header Height64px
sidebar Width0px
container Padding0px 0px 27px
08

Responsive — real breakpoints

15 media-query stops read from the live CSS

30px
50px
72px
95px
400px
550px
600px
700px
750px
768px
900px
960px
970px
1080px
1200px
09

Do's & Don'ts

21 enforceable rules pulled verbatim from the spec

Do
Use Helvetica Neue 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 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 M Tricolor Blue (`#0065da`) as the primary accent — it's the brand's signature interactive color
Use small 4.8px radius for buttons — this design system uses subtle rounding, not pill shapes
Style form inputs with a `1px solid rgb(192, 194, 199)` border — use border-based inputs, not floating labels or underline-only
Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
Build the hero as a split layout with media on the left — text and visual share equal weight
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
Include a search input directly in the nav — discoverability is a primary UX value here
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 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 over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
Don't remove the input border — the border is the primary affordance indicator for form fields
Don't put a CTA button in the nav — this design uses links only at the top
Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the biomejs.dev design system. Canvas #ffffff · ink #353841 · accent #0065da. Type: Roboto — 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 biomejs
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press