Design System
A comprehensive guide to colors, typography, and design tokens used throughout the application.
Color Palette
Complete color system with semantic naming and consistent scales.
Gray
gray-25
bg-gray-25
gray-50
bg-gray-50
gray-100
bg-gray-100
gray-200
bg-gray-200
gray-300
bg-gray-300
gray-400
bg-gray-400
gray-500
bg-gray-500
gray-600
bg-gray-600
gray-700
bg-gray-700
gray-800
bg-gray-800
gray-900
bg-gray-900
gray-950
bg-gray-950
Primary
primary-25
bg-primary-25
primary-50
bg-primary-50
primary-100
bg-primary-100
primary-200
bg-primary-200
primary-300
bg-primary-300
primary-400
bg-primary-400
primary-500
bg-primary-500
primary-600
bg-primary-600
primary-700
bg-primary-700
primary-800
bg-primary-800
primary-900
bg-primary-900
primary-950
bg-primary-950
Secondary
secondary-25
bg-secondary-25
secondary-50
bg-secondary-50
secondary-100
bg-secondary-100
secondary-200
bg-secondary-200
secondary-300
bg-secondary-300
secondary-400
bg-secondary-400
secondary-500
bg-secondary-500
secondary-600
bg-secondary-600
secondary-700
bg-secondary-700
secondary-800
bg-secondary-800
secondary-900
bg-secondary-900
secondary-950
bg-secondary-950
Error
error-25
bg-error-25
error-50
bg-error-50
error-100
bg-error-100
error-200
bg-error-200
error-300
bg-error-300
error-400
bg-error-400
error-500
bg-error-500
error-600
bg-error-600
error-700
bg-error-700
error-800
bg-error-800
error-900
bg-error-900
error-950
bg-error-950
Warning
warning-25
bg-warning-25
warning-50
bg-warning-50
warning-100
bg-warning-100
warning-200
bg-warning-200
warning-300
bg-warning-300
warning-400
bg-warning-400
warning-500
bg-warning-500
warning-600
bg-warning-600
warning-700
bg-warning-700
warning-800
bg-warning-800
warning-900
bg-warning-900
warning-950
bg-warning-950
Success
success-25
bg-success-25
success-50
bg-success-50
success-100
bg-success-100
success-200
bg-success-200
success-300
bg-success-300
success-400
bg-success-400
success-500
bg-success-500
success-600
bg-success-600
success-700
bg-success-700
success-800
bg-success-800
success-900
bg-success-900
success-950
bg-success-950
Typography
Type scale and font weights for consistent text hierarchy.
Display Group
Fusce Porta Fermentum Mollis Vestibulum
2xl
type-display-2xl
Size: 72px
Fusce Porta Fermentum Mollis Vestibulum
xl
type-display-xl
Size: 60px
Fusce Porta Fermentum Mollis Vestibulum
lg
type-display-lg
Size: 48px
Fusce Porta Fermentum Mollis Vestibulum
md
type-display-md
Size: 36px
Fusce Porta Fermentum Mollis Vestibulum
sm
type-display-sm
Size: 30px
Fusce Porta Fermentum Mollis Vestibulum
xs
type-display-xs
Size: 24px
Fusce Porta Fermentum Mollis Vestibulum
2xs
type-display-2xs
Size: 18px
Text Group
Text 3xl
Fusce Porta Fermentum Mollis Vestibulum
Text 3xl normal
type-text-3xl
Size: 30px
Fusce Porta Fermentum Mollis Vestibulum
Text 3xl medium
type-text-3xl-medium
Size: 30px
Fusce Porta Fermentum Mollis Vestibulum
Text 3xl bold
type-text-3xl-bold
Size: 30px
Fusce Porta Fermentum Mollis Vestibulum
Text 3xl extrabold
type-text-3xl-extrabold
Size: 30px
Text 2xl
Fusce Porta Fermentum Mollis Vestibulum
Text 2xl normal
type-text-2xl
Size: 24px
Fusce Porta Fermentum Mollis Vestibulum
Text 2xl medium
type-text-2xl-medium
Size: 24px
Fusce Porta Fermentum Mollis Vestibulum
Text 2xl bold
type-text-2xl-bold
Size: 24px
Fusce Porta Fermentum Mollis Vestibulum
Text 2xl extrabold
type-text-2xl-extrabold
Size: 24px
Text xl
Fusce Porta Fermentum Mollis Vestibulum
Text xl normal
type-text-2xl
Size: 24px
Fusce Porta Fermentum Mollis Vestibulum
Text xl medium
type-text-2xl-medium
Size: 24px
Fusce Porta Fermentum Mollis Vestibulum
Text xl bold
type-text-2xl-bold
Size: 24px
Fusce Porta Fermentum Mollis Vestibulum
Text xl extrabold
type-text-2xl-extrabold
Size: 24px
Text lg
Fusce Porta Fermentum Mollis Vestibulum
Text lg normal
type-text-lg
Size: 18px
Fusce Porta Fermentum Mollis Vestibulum
Text lg medium
type-text-lg-medium
Size: 18px
Fusce Porta Fermentum Mollis Vestibulum
Text lg bold
type-text-lg-bold
Size: 18px
Fusce Porta Fermentum Mollis Vestibulum
Text lg extrabold
type-text-lg-extrabold
Size: 18px
Text md
Fusce Porta Fermentum Mollis Vestibulum
Text md normal
type-text-md
Size: 16px
Fusce Porta Fermentum Mollis Vestibulum
Text md medium
type-text-md-medium
Size: 16px
Fusce Porta Fermentum Mollis Vestibulum
Text md bold
type-text-md-bold
Size: 16px
Fusce Porta Fermentum Mollis Vestibulum
Text md extrabold
type-text-md-extrabold
Size: 16px
Buttons
Interactive button components with variants, sizes, and states.
Primary Button
| State | SM | MD | LG | XL | 2XL |
|---|---|---|---|---|---|
| Default | |||||
| Disabled |
Classes: button button-primary [size]
Secondary Button
| State | SM | MD | LG | XL | 2XL |
|---|---|---|---|---|---|
| Default | |||||
| Disabled |
Classes: button button-secondary [size]
Tertiary Button
| State | SM | MD | LG | XL | 2XL |
|---|---|---|---|---|---|
| Default | |||||
| Disabled |
Classes: button button-tertiary [size]