Design System

The Art of
Precision,
Refined.

A dark luxury system where 1,500 horsepower meets hand-stitched leather. Absolute black canvas, Bugatti Blue accents, and Heritage Gold highlights.

14 color tokens 11 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Absolute darkness as canvas. Bugatti Blue and Heritage Gold as brand anchors. 14 tokens across surfaces, text, interaction, and premium accents.

Absolute Black
#000000
Primary page background
Obsidian
#0A0A0A
Elevated surfaces, cards
Carbon
#111111
Sections, code areas
Graphite
#1A1A1A
Hover states, elevation
Dark Steel
#222222
Borders, dividers
Steel
#333333
Stronger borders, inactive
Pure White
#ffffff
Primary text, icons
Silver
#B0B0B0
Secondary text
Ash
#666666
Placeholders, muted
Bugatti Blue
#0047AB
Primary brand accent
French Blue
#4A7DC9
Hover, secondary accent
Heritage Gold
#C5A55A
Premium accent, badges
Champagne
#D4C5A9
Soft warm highlights
Racing Red
#8B0000
Danger, performance

Gradients

Blue Gradient
Brand gradient for hero sections, CTA backgrounds
Gold Gradient
Premium gradient for featured content, luxury badges
Dark Gradient
Subtle depth gradient for section transitions
Typography

Type Scale

EB Garamond for display headlines — classical proportions evoking coachbuilding heritage. Inter for all functional text — clean, engineered for screens.

Display-xl 1,500 HP 80px / 1.0 / −0.03em
Display Art of Precision 48px / 1.05 / −0.03em
Heading-lg W16 Engine 32px / 1.15 / −0.02em
Heading Performance 24px / 1.2 / −0.02em
Body Default body text for readable content 16px / 1.6 / 0
Body-sm Specifications, comparison data 14px / 1.5 / 0
Caption Labels · Metadata · Fine print 12px / 1.5 / 0.06px

Fonts

Display EB Garamond 400–800 · 24–80px · Serif
Body Inter 300–700 · 12–20px · Sans-serif
Mono JetBrains Mono 400–500 · 13–14px · Specs only
Layout

Spacing & Shapes

Base unit 4px. Spacious density with generous breathing room. 14-step spacing scale. Sharp, architectural edges — no playful rounding.

Spacing Scale (4px base)

44px
88px
1616px
2424px
3232px
4848px
6464px
120120px

Border Radius

sharp 0px
sm 2px
md / cards 4px
lg 8px
xl 12px
Elevation

Depth & Surfaces

Surface contrast over shadows. Each level is a subtle step away from absolute black. No box shadows — the system relies on darkness hierarchy.

Depth Levels

Absolute Black
Base page background — the canvas
Level 0
Obsidian
Elevated panels, cards, secondary sections
Level 1
Carbon
Feature sections, code areas, surface variation
Level 2
Graphite
Hover states, active surfaces, deepest elevation
Level 3

Surface System

Absolute Black #000000
Obsidian #0A0A0A
Carbon #111111
Graphite #1A1A1A
Components

Button Variants

Primary (Bugatti Blue), Premium (Heritage Gold), and Ghost variants. Sharp 2px radius. Uppercase labels with tight letter-spacing.

Primary Action Button
Main call to action — highest visual weight
.btn-primary
Bugatti Blue (#0047AB) background, Pure White text, 2px radius. Use exclusively for the single most important action on a page.
Gold Accent Button
Premium, featured actions
.btn-gold
Heritage Gold (#C5A55A) background, Absolute Black text. For premium CTAs, limited editions, or featured actions.
Ghost Button
Secondary actions, navigation
.btn-secondary
Pure White text, Steel border, 2px radius. Clean, minimal presence for secondary actions.
Outlined Blue Button
Secondary interactive actions
.btn-ghost
Bugatti Blue text and border. Interactive accent without competing with primary.
Spec Display
Technical specifications, data
.spec-demo
Top Speed 304mph
Power 1,500hp
0–60 2.3sec
JetBrains Mono for values in Heritage Gold (#C5A55A), Inter for labels in Ash. Carbon background with Dark Steel border.
Input Field
User text input
input
Transparent background, Pure White text, 4px radius. Focus state uses Bugatti Blue border.
Guidelines

Do's & Don'ts

Do — Embrace
  • Absolute Black (#000000) as primary canvas
  • Bugatti Blue (#0047AB) for interactive elements
  • Heritage Gold (#C5A55A) for premium highlights only
  • EB Garamond for all display headlines
  • Generous whitespace — spacious, unhurried layouts
  • 2px radius for buttons, 4px for cards
  • Uppercase labels with 0.06px letter-spacing
Don't — Avoid
  • Bright or saturated colors outside the palette
  • Rounded corners above 12px
  • Decorative drop shadows
  • Dense, cluttered layouts
  • Mixing serif and sans-serif in same hierarchy
  • Heritage Gold for body text or large blocks
  • Casual or playful UI copy