prismdinstrument
EXTRACTED · 10 SECTIONS · 14 COLORS · GRADE D

drizzle.team

Accent #5e6ad2 · -apple-system — every value below measured via getComputedStyle(), not asserted by hand.

14
colors
1
shadows
4
breakpoints
DESIGN.md tokens.json
drizzle.team
real render · source of truth

drizzle.team is built on a pure-white canvas (rgb(255,255,255)). The system uses rgb(67, 75, 85) as a near-neutral accent (low saturation). Crisp CTAs (3px radius) reinforce a precise, technical aesthetic alongside -apple-system as the primary typeface. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

01

Color — roles, semantics & the full census

14 colors measured · click any swatch to copy

Canvas
#ffffff
AAA 8.95:1
Ink
#434a54
AAA 8.95:1
Accent
#434b55
AAA 8.84:1
Line
#434a54
AAA 8.95:1
Semantic states

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

14 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-xl24px · 500
display md
display-md24px · 500 · ×1.00
headline
headline18px · 500 · ×1.33
body
body12px · 600 · ×1.50
body sm
body-sm12px · 600 · ×1.00
button
button14px · 600 · ×0.86
mono
mono16px · 400 · ×0.88
04

Depth — elevation is extracted, not invented

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

shadow-1
05

Motion — easings, transitions & live keyframes

1 easing curve · 0 keyframes · hover a tile to preview

Easing & transitions
transition-4ease-out
Keyframes

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

03

Spacing & radius, made spatial

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

Spacing scale
xxs · 2px
xs · 11px
sm · 15px
md · 16px
base · 20px
lg · 30px
xl · 35px
2xl · 50px
3xl · 120px
Radius
none
0px
xs
4px
sm
100px
md
108px
lg
116px
xl
124px
full
9999px
06

Components — the closed vocabulary

9 component families · 22 variants counted on the live DOM

ComponentVariants found
links×6
cards×4
nav Links×3
avatar×3
heading H4×2
buttons×1
footer Links×1
heading H2×1
heading H3×1
Component style specs (§4)expand

Buttons

Secondary

  • Background: #434b55 {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 15px 16px
  • Radius: 3px
  • Font: 12px weight 600
  • Use: Secondary action

Secondary

  • Background: #434b55 {colors.primary}
  • Text: #ffffff {colors.on-primary}
  • Padding: 0px 20px
  • Radius: 3px
  • Font: 14px weight 600
  • Use: Secondary action

Cards & Containers

Standard Card

  • Background: transparent
  • Padding: 15px
  • Radius: 2px
  • Border: 1px solid rgb(175, 185, 197)
  • Use: Content containers, listing items

Inputs & Forms

Text Input

  • Background: #e6e9ed {colors.surface-1}
  • Text: #2c3136
  • Padding: 11px 16px
  • Radius: 3px
  • Border: 0px none rgb(44, 49, 54)
  • Font: 16px weight 400
  • Use: Text fields, search inputs

Navigation

Main Nav

  • Background: transparent
  • Padding: 30px 0px 0px
  • Radius: none
  • Font: 14px weight 400
  • Use: Static flex nav — N/A items
07

Layout — structure & dimensions

4 layout metrics measured

header 160px 1200px max-width
max Width1200px
header Height160px
sidebar Width0px
container Padding0px
08

Responsive — real breakpoints

4 media-query stops read from the live CSS

400px
509px
767px
1160px
09

Do's & Don'ts

14 enforceable rules pulled verbatim from the spec

Do
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 Slate (`#434b55`) 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
Apply 15px padding inside cards — matches the design system's content breathing room
Use 2px border-radius on cards — consistent with the grid card corners
Each card uses an icon (not photo) — the visual language is illustrative, not photographic
Use a 4-column grid on desktop — density matters for this content type
Don't
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 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 make the nav sticky — this design lets it scroll away to maximize content focus
Don't over-build the footer — this design keeps it minimal (2 cols, 8 links)
10

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the drizzle.team design system. Canvas #ffffff · ink #434a54 · accent #434b55. Type: -apple-system — 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 drizzle
DESIGN.md · narrative spec tokens.json
A · InstrumentB · Press