01
Visual Theme & Atmosphere
# Design System Inspired by Lamborghini
Live Visual Theme Representation:
Visual Theme Example
02
Color Palette & Roles
primary
#FFC000
canvas
#000000
surface-card
#202020
surface-soft
#181818
ink
#ffffff
body
#F5F5F5
muted
#7D7D7D
hairline
#313131
lamborghini-gold
#FFC000
absolute-black
#000000
charcoal
#202020
dark-iron
#181818
gold-text
#FFCE3E
cyan-pulse
#29ABE2
link-blue
#3860BE
03
Typography Rules
Dynamic Preview:
display-xl
size: 120px | weight: 700 | height: 0.92 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Display Headlines
body-lg
size: 18px | weight: 600 | height: 1.3 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Sub Headings
body-md
size: 14px | weight: 400 | height: 1.5 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Body Copy
button
size: 12px | weight: 700 | height: 1 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Primary CTA
04
Layout Principles
Grid Layout Wireframe Mockup:
Layout Grid Example
05
Depth & Elevation
Elevation Level Showcase:
Elevation Level Example
Flat Surface (Level 0)
Used for background layers, sidebar headers, or baseline borders.
Low Elevation (Level 1 / Card)
Used for floating product elements, cards, and hover states.
High Elevation (Level 2 / Popover & Dropdown)
Used for modals, select menus, code editor tooltips, and overlay headers.
Border Radius & Shape Scale:
radius-sm
4px
radius-md
6px
radius-lg
8px
radius-pill
Pill / Tag
06
Component Stylings
Interactive Component Demonstrations:
Component Interactive Example
07
Do's and Don'ts
✅ Recommended / Do
❌ Discouraged / Don't
08
Responsive Behavior
Responsive Adaptation Note:
Responsive Behavior Example
09
Agent Prompt Guide
Copyable Agent Integration Prompt:
Prompt Guide Copy Box
10
Full System Design Tokens
The parsed design tokens extracted from the core stylesheet of this design system:
| Design Token | Hex Value | System Palette Role |
|---|---|---|
| --primary | #FFC000 | System color representation for primary |
| --canvas | #000000 | System color representation for canvas |
| --surface-card | #202020 | System color representation for surface-card |
| --surface-soft | #181818 | System color representation for surface-soft |
| --ink | #ffffff | System color representation for ink |
| --body | #F5F5F5 | System color representation for body |
| --muted | #7D7D7D | System color representation for muted |
| --hairline | #313131 | System color representation for hairline |
| --lamborghini-gold | #FFC000 | System color representation for lamborghini-gold |
| --absolute-black | #000000 | System color representation for absolute-black |
| --charcoal | #202020 | System color representation for charcoal |
| --dark-iron | #181818 | System color representation for dark-iron |
| --gold-text | #FFCE3E | System color representation for gold-text |
| --cyan-pulse | #29ABE2 | System color representation for cyan-pulse |
| --link-blue | #3860BE | System color representation for link-blue |