Design System
01 — Color palette
Violet Ramp
50#EDEAFC
100#D2CBF8
200#B0A5F2
300#8E7EEB
400#6B58E0
500#422AD5
600#3421AA
700#271880
800#1A1057
900#0E082E
Semantic Colors
Primary
primary#422AD5
primary-content#FFFFFF
secondary#4A4860
accent#422AD5
neutral#8B89A0
Base
base-100#FFFFFF
base-200#EDEAFC
base-300#D2CBF8
base-content#0E0A2E
Status
info#6B58E0
success#1D9E75
warning#BA7517
error#D85A30
Surfaces
surface#FFFFFF
surface-subtle#EDEAFC
surface-raised#FFFFFF
ds-bg#F0EFF9
bubble-bg#EDEAFC
dark-section#0E0A2E
Borders
border#D2CBF8
border-subtle#E8E4FB
Accent States
accent
#422AD5
primary
accent-hover
#3421AA
violet-600
accent-subtle
#EDEAFC
violet-50
accent-border
#D2CBF8
violet-100
Text Hierarchy
Aa
text-primary#0E0A2E
base-content
Aa
text-secondary#4A4860
secondary
Aa
text-muted#8B89A0
neutral
Aa
text-placeholder#C4C2CF
text-placeholder
Aa
text-on-accent#FFFFFF
primary-content
02 — Typography
Typefaces
Aa Bb Cc
Russo One
Display / Brand — weight 400
font-brand
Aa Bb Cc
Roboto
Body / UI — weights 400, 500, 700
font-sans
Type Scale
Hero XL
48pxline-height: 1.15All hero headlines (home + page)
Display L
36pxline-height: 1.15Page titles
Section Title
24pxline-height: 1.35Section headings
Sub-section
20pxline-height: 1.35Card groups, sub-headings
Card Title / Nav Logo
18pxline-height: 1.35Card headers, nav items
Body
16pxline-height: 1.6Paragraphs, descriptions
Small
14pxline-height: 1.6Captions, metadata, helper text
XS
12pxline-height: 1.6Labels, badges, footnotes
Text Color Hierarchy
base-content
Primary text — headings and body
/80
Secondary text — descriptions
/60
Muted text — captions and hints
/40
Placeholder text — disabled states
03 — Spacing & Radius
Spacing Scale
4pxp-1
8pxp-2
12pxp-3
16pxp-4
20pxp-5
24pxp-6
32pxp-8
48pxp-12
64pxp-16
96pxp-24
Border Radius
sm
6px
md (box)
10px
lg
16px
xl
24px
2xl
36px
full
9999px
Shadows
shadow-sm
Subtle elevation
shadow-md
Medium elevation
shadow-card
Card elevation
04 — Motion
Transitions
duration-fast
140ms
duration-base
220ms
Hover to compare transition speeds.