01
Visual Theme & Atmosphere
# Design System Inspired by Tesla
Live Visual Theme Representation:
Visual Theme Example
02
Color Palette & Roles
primary
#3E6AE1
canvas
#ffffff
surface-card
#F4F4F4
surface-soft
#ffffff
ink
#171A20
body
#393C41
muted
#5C5E62
hairline
#EEEEEE
electric-blue
#3E6AE1
pure-white
#FFFFFF
light-ash
#F4F4F4
carbon-dark
#171A20
graphite
#393C41
pewter
#5C5E62
silver-fog
#8E8E8E
cloud-gray
#EEEEEE
03
Typography Rules
Dynamic Preview:
display-xl
size: 40px | weight: 500 | height: 1.1 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Display Title
body-lg
size: 14px | weight: 500 | height: 1.4 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Navigation Labels
body-md
size: 14px | weight: 400 | height: 1.6 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Body Text
button
size: 14px | weight: 600 | height: 1 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Action Button
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 | #3E6AE1 | System color representation for primary |
| --canvas | #ffffff | System color representation for canvas |
| --surface-card | #F4F4F4 | System color representation for surface-card |
| --surface-soft | #ffffff | System color representation for surface-soft |
| --ink | #171A20 | System color representation for ink |
| --body | #393C41 | System color representation for body |
| --muted | #5C5E62 | System color representation for muted |
| --hairline | #EEEEEE | System color representation for hairline |
| --electric-blue | #3E6AE1 | System color representation for electric-blue |
| --pure-white | #FFFFFF | System color representation for pure-white |
| --light-ash | #F4F4F4 | System color representation for light-ash |
| --carbon-dark | #171A20 | System color representation for carbon-dark |
| --graphite | #393C41 | System color representation for graphite |
| --pewter | #5C5E62 | System color representation for pewter |
| --silver-fog | #8E8E8E | System color representation for silver-fog |
| --cloud-gray | #EEEEEE | System color representation for cloud-gray |