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}
07
Layout — structure & dimensions
5 layout metrics measured
max Width1200px
header Height69px
sidebar Width0px
gap16px
container Padding24px
08
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.
09
Do's & Don'ts
15 enforceable rules pulled verbatim from the spec
Do
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)
10
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.