Design Tokens
A single source of truth for all design decisions. These tokens power the entire system — from colors and typography to spacing and animation.
export const tokens = {
colors: {
light: {
bg: '#F6F3ED',
surface: '#EDE7DC',
surface2: '#E4DDD0',
border: '#C9BFB0',
borderSubtle: '#DDD6C8',
text: '#141214',
textMuted: '#6B6456',
textSubtle: '#A09689',
violet: '#6564DB',
violetLight: '#A8A7ED',
violetBg: '#EEEEFF',
violetDark: '#4544B8',
coral: '#FE5F55',
coralLight: '#FFA09B',
coralBg: '#FFF0EF',
red: '#E71D36',
success: '#4A6741',
warning: '#C89A2E',
},
dark: {
bg: '#141214',
surface: '#1E1C1E',
surface2: '#252325',
border: '#2E2A2E',
borderSubtle: '#3A353A',
text: '#F0EDE6',
textMuted: '#888088',
textSubtle: '#554F55',
violet: '#8584E8',
violetLight: '#6564DB',
violetBg: '#1E1C2E',
coral: '#FE5F55',
red: '#E71D36',
success: '#7A9E6F',
warning: '#C89A2E',
},
},
typography: {
families: {
display: "'Gambarino', Georgia, serif",
body: "'Switzer', sans-serif",
mono: "'JetBrains Mono', monospace",
},
sizes: {
xs: '10px',
sm: '12px',
base:'14px',
md: '16px',
lg: '20px',
xl: '24px',
'2xl': '32px',
'3xl': '48px',
},
},
spacing: {
1: '4px', 2: '8px', 3: '12px',
4: '16px', 6: '24px', 8: '32px',
12: '48px', 16: '64px',
20: '80px', 24: '96px',
},
animation: {
durations: { fast: '150ms', base: '300ms', slow: '600ms', slower: '700ms' },
easing: {
out: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
in: 'cubic-bezier(0.4, 0.0, 1, 1)',
inOut: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
},
stagger: '100ms',
},
effects: {
radii: { sm: '4px', md: '8px', lg: '12px', xl: '16px', full: '9999px' },
shadows: {
sm: '0 1px 3px rgba(0,0,0,0.08)',
md: '0 4px 16px rgba(0,0,0,0.12)',
lg: '0 8px 32px rgba(0,0,0,0.16)',
orb: '0 0 80px 20px rgba(101,100,219,0.35)',
},
},
breakpoints: {
sm: '640px', md: '768px', lg: '1024px',
xl: '1280px', '2xl': '1440px',
},
};Typography
The type system behind Raga — three families working in harmony across display, body, and code.
Font Families
Gambarino
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789
Switzer
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789
JetBrains Mono
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
nopqrstuvwxyz
0123456789
Type Styles
Display
GAMBARINO · DISPLAY · TIGHT
Heading
GAMBARINO · 36PX · HEADING
Body text sample
SWITZER · 16PX · BODY · NORMAL
Small text
SWITZER · 14PX · BODY · MUTED
MONO CAPTION
JETBRAINS MONO · 11PX · CAPTION · WIDE
Size
Body text uses 16px+ with 1.5 line height for readability. Smaller sizes are for non-essential information.
Weight
Text Color
All text colors meet WCAG 2.1 AA contrast requirements against their respective backgrounds.
Colors
Semantic color tokens that adapt to light and dark mode — the full palette powering every surface, text, and accent in Raga.
Brand Palette
Coral is the primary accent in light mode. Violet takes over in dark mode.
CORAL
PRIMARY (LIGHT)
CORAL LIGHT
ACCENT
VIOLET
PRIMARY (DARK)
VIOLET DARK
ACCENT
System Colors
Functional UI colors — switch theme to see variants.
BACKGROUND
SURFACE
BORDER
SUCCESS
WARNING
ERROR
Spacing
A consistent spatial scale rooted in multiples of 4px — from micro-details to full-section breathing room.
Iconography
Icons from Phosphor Icons — a flexible icon family with multiple weights for visual hierarchy.
Icon Library
@phosphor-icons/react ↗Icon Weights
Site Icons
Containers
Three surface levels for grouping content — each maps to a real CSS token used across the portfolio.
Surface Card
Used for work cards, about sections, and content blocks
Surface-2 Card
Used for nested content, code blocks, token tables
Transparent + Border
Used for nav pills, available pill, see work pill, design system cards
Dividers
Structural lines that separate content zones without adding visual weight.
Horizontal
Hero / footer dividers
Horizontal Subtle
Token rows, spacing rows
Vertical
Design system sidebar