EXTRACTED · 10 SECTIONS · 108 COLORS · GRADE B
voltagent.dev
Accent #5e6ad2 · Inter — every value below measured via getComputedStyle(), not asserted by hand.
108
colors
1
face
12
shadows
27
keyframes
real render · source of truth
voltagent.dev is built on a near-black canvas (rgb(5, 5, 7)). The system uses rgb(16, 16, 16) as the singular interactive color. System-ui as the primary typeface. A layered elevation system (12 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 27 keyframe animations plus transition-driven interactions.
01
Color — roles, semantics & the full census
108 colors measured · click any swatch to copy
Semantic states
error#fd9c9fsuccess#008b00warning#ffdd80info#4cb3d4
4 semantic roles found.
108 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-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
04
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
05
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
a
b
c
d
e
f
g
h
i
j
twinkle
colorPulse
03
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
0px
xs
4px
4px
sm
8px
8px
md
9999px
9999px
lg
10007px
10007px
xl
10015px
10015px
full
9999px
9999px
06
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
07
Layout — structure & dimensions
4 layout metrics measured
max Width1440px
header Height64px
sidebar Width0px
container Padding0px
08
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
09
Do's & Don'ts
21 enforceable rules pulled verbatim from the spec
Do
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
10
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.