prism·mdthe design press

EXTRACTED · 10 SECTIONS · 108 COLORS · GRADE B 81/100

voltagent.dev

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

108

colors

face

shadows

keyframes

Get DESIGN.md tokens.json

Color — roles, semantics & the full census

108 colors measured · click any swatch to copy

Canvas

#050507

AAA 18.19:1

Ink

#f2f2f2

AAA 18.19:1

Accent

#101010

Fail 1.07:1

Line

#4b5563

Fail 2.69:1

Semantic states

error#fd9c9fsuccess#008b00warning#ffdd80info#4cb3d4

4 semantic roles found.

108 colors mined from the live renderexpand

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-xl60px · 400

display lg

display-lg60px · 400 · ×1.00

display md

display-md14px · 600 · ×4.29

body

body16px · 400 · ×0.88

button

button18px · 700 · ×0.89

Spacing & radius, made spatial

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

Spacing scale

xxs · 2px

xs · 7px

sm · 8px

md · 16px

base · 24px

lg · 32px

xl · 40px

2xl · 48px

3xl · 64px

Radius

none
0px

xs
4px

sm
8px

md
9999px

lg
10007px

xl
10015px

full
9999px

Depth — elevation is extracted, not invented

12 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

Motion — easings, transitions & live keyframes

3 easing curves · 27 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.08, 0.52, 0.52, 1)

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

ifm-transition-timing-defaultcubic-bezier(0.08,0.52,0.52,1)

27 keyframe animations extracted

twinkle

colorPulse

Components — the closed vocabulary

8 component families · 43 variants counted on the live DOM

Component	Variants found
links	×10
code Block	×10
nav Links	×8
buttons	×6
heading H2	×4
footer Links	×3
heading H1	×1
heading H3	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent
Text: #00d992
Padding: 8px
Radius: 0px
Font: 13.3333px weight 700
Use: Subtle action, toolbar, nav button

Outline

Background: transparent
Text: #eeeeee
Padding: 12px 16px
Radius: 6px
Border: 1px solid rgb(61, 58, 57)
Font: 18px weight 700
Use: Secondary action with border

Dark / Solid

Background: #101010 {colors.primary}
Text: #2fd6a1
Padding: 12px 16px
Radius: 0px
Font: 13.3333px weight 500
Use: Solid dark CTA

Ghost

Background: transparent
Text: #eeeeee
Padding: 12px 16px
Radius: 0px
Font: 13.3333px weight 500
Use: Subtle action, toolbar, nav button

Dark / Solid

Background: #101010 {colors.primary}
Text: #f2f2f2 {colors.ink}
Padding: 20px
Radius: 8px
Border: 3px solid rgb(61, 58, 57)
Font: 16px weight 400
Use: Solid dark CTA

Subtle

Background: rgba(0, 0, 0, 0.2)
Text: #10b981
Padding: 48px
Radius: 8px
Border: 3px solid rgba(255, 255, 255, 0.1)
Font: 16px weight 400
Use: Quiet action against page bg

Secondary

Background: #242526
Text: #f5f6f7
Padding: 8px 16px
Radius: 0px
Font: 16px weight 400
Use: Secondary action

Layout — structure & dimensions

4 layout metrics measured

max Width1440px

header Height64px

sidebar Width0px

container Padding0px

Responsive — real breakpoints

23 media-query stops read from the live CSS

360px

420px

576px

640px

720px

767px

768px

960px

975px

996px

997px

1000px

1024px

1025px

1100px

1160px

1200px

1270px

1280px

1296px

1440px

1584px

1992px

Do's & Don'ts

21 enforceable rules pulled verbatim from the spec

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

Use Inter as the primary typeface — it defines the brand personality

Use negative letter-spacing (-0.65px) 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 Near-Black (`#101010`) as the primary accent — it's the brand's signature interactive color

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

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

Maintain nav height at 64px — consistent vertical space for the navigation bar

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 sticky — it stays visible during scroll, signaling content depth

Each card uses an icon (not photo) — the visual language is illustrative, not photographic

Use a 3-column grid on desktop — density matters for this content type

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 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 collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the voltagent.dev design system. Canvas #050507 · ink #f2f2f2 · accent #101010. 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 voltagent

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press