prismdinstrument

EXTRACTED · 10 SECTIONS · 56 COLORS · GRADE B

getdesign.md

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

colors

faces

shadows

keyframes

DESIGN.md tokens.json

real render · source of truth

getdesign.md is built on a near-black canvas (rgb(0, 0, 0)). The system uses rgb(0, 128, 128) as the accent for primary actions and brand signals. GeistPixel-line as the primary typeface. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Motion is a first-class concern — 6 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

56 colors measured · click any swatch to copy

Canvas

#ffffff

Fail 1.17:1

Ink

#ededed

Fail 1.17:1

Accent

#008080

AA 4.77:1

Line

#666666

AA 5.74:1

Semantic states

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

56 colors mined from the live renderexpand

Type — the ladder, in the real face

6 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl48px · 400

display md

display-md12px · 500 · ×4.00

body

body16px · 400 · ×0.75

body sm

body-sm21px · 600 · ×0.76

caption

caption13px · 500 · ×1.62

button

button12px · 400 · ×1.08

Depth — elevation is extracted, not invented

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

shadow-1

Motion — easings, transitions & live keyframes

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

Easing & transitions

transition-2cubic-bezier(0.4, 0, 0.2, 1)

default-transition-timing-functioncubic-bezier(.4, 0, .2, 1)

ease-incubic-bezier(.4, 0, 1, 1)

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

6 keyframe animations extracted

catalog-shimmer

catalog-pulse

fade-up

fade-in

marquee

heartbeat

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 · 48px

3xl · 64px

Radius

none
0px

xs
4px

sm
6px

md
12px

lg
9999px

xl
10007px

full
9999px

Components — the closed vocabulary

11 component families · 39 variants counted on the live DOM

Component	Variants found
buttons	×10
links	×9
badges	×5
nav Links	×5
cta Banner	×3
footer Links	×2
inputs	×1
status Badge	×1
heading H1	×1
heading H2	×1
heading H3	×1

Component style specs (§4)expand

Buttons

Icon Button

Background: transparent
Text: #1a1305 {colors.primary-focus}
Padding: 0px
Radius: 6px
Font: 16px weight 400
Use: Toolbar/UI icons
Hover: backgroundColor: #000000
Focus: outline: rgb(26, 19, 5) auto 1px

Outline

Background: transparent
Text: #ededed {colors.ink}
Padding: 6px 12px
Radius: 6px
Border: 1px solid rgb(46, 46, 46)
Font: 12px weight 400
Use: Secondary action with border
Hover: backgroundColor: #000000
Focus: outline: rgb(26, 19, 5) auto 1px

Icon Button

Background: #c0c0c0
Text: #ededed {colors.ink}
Padding: 2px
Radius: 0px
Font: 16px weight 400
Use: Toolbar/UI icons
Hover: backgroundColor: #000000
Focus: outline: rgb(26, 19, 5) auto 1px

Dark / Solid

Background: #0a0a0a {colors.surface-1}
Text: #ededed {colors.ink}
Padding: 12px 20px
Radius: 6px
Border: 1px solid rgb(46, 46, 46)
Font: 15px weight 400
Use: Solid dark CTA
Hover: backgroundColor: #000000
Focus: outline: rgb(26, 19, 5) auto 1px

Inputs & Forms

Text Input

Background: transparent
Text: #ededed {colors.ink}
Padding: 12px 0px
Radius: 0px
Border: 0px solid rgb(237, 237, 237)
Font: 13px weight 500
Use: Text fields, search inputs
Focus: outline: rgb(16, 16, 16) none 1px

CTA Banners

Full-width CTA

Background: #0a0a0a {colors.surface-1}

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height69px

sidebar Width0px

gap16px

container Padding24px

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.

Do's & Don'ts

15 enforceable rules pulled verbatim from the spec

Use dark background (`#000000`) as the foundation — this is a dark-mode-native design

Use Geist 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 #008080 (`#008080`) as the primary accent — it's the brand's signature interactive color

Transition button background to Black (`#000000`) on hover — this is the extracted interactive state

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

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

Don't

Don't use light backgrounds — the dark canvas is the native medium

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

Don't use opacity or brightness filter for button hover — the design uses an explicit background color change

Don't over-build the footer — this design keeps it minimal (1 cols, 4 links)

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the getdesign.md design system. Canvas #ffffff · ink #ededed · accent #008080. Type: Geist — 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 getdesign

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press