Design Tokens
Complete CSS variable reference for the Edward Flynn design system. Every token is listed with dark and light theme values. Click copy to grab any variable name or value.
Brand Colors
| Token | Dark | Light | |
|---|---|---|---|
| var(--green) | #1db954 | #4caf50 | |
| var(--green-light) | #81c784 | #1db954 | |
| var(--green-dark) | #4caf50 | #388e3c | |
| var(--green-deep) | #2e7d32 | #2e7d32 | |
| var(--green-tint) | rgba(191,90,242,0.1) | rgba(76,175,80,0.08) | |
| var(--green-tint-border) | rgba(191,90,242,0.2) | rgba(76,175,80,0.2) |
Backgrounds
| Token | Dark | Light | |
|---|---|---|---|
| var(--bg) | #09090b | #ffffff | |
| var(--bg-alt) | #18181b | #f9fafb | |
| var(--bg-card) | #111113 | #ffffff | |
| var(--nav-bg) | rgba(9,9,11,0.85) | rgba(255,255,255,0.85) |
Text
| Token | Dark | Light | |
|---|---|---|---|
| var(--text) | #fafafa | #09090b | |
| var(--text-secondary) | #a1a1aa | #52525b | |
| var(--text-muted) | #71717a | #a1a1aa |
Borders
| Token | Dark | Light | |
|---|---|---|---|
| var(--border) | #27272a | #e4e4e7 | |
| var(--border-hover) | rgba(191,90,242,0.4) | rgba(76,175,80,0.5) |
Shadows
| Token | Dark | Light | |
|---|---|---|---|
| var(--shadow-card) | 0 4px 24px rgba(0,0,0,0.3) | 0 4px 24px rgba(0,0,0,0.08) | |
| var(--shadow-btn) | 0 0 20px rgba(191,90,242,0.3) | 0 0 20px rgba(76,175,80,0.2) | |
| var(--shadow-mega) | 0 20px 60px rgba(0,0,0,0.5) | 0 20px 60px rgba(0,0,0,0.12) | |
| var(--shadow-glow) | 0 0 20px rgba(76,175,80,0.15) | 0 0 20px rgba(76,175,80,0.1) |
Spacing
| Token | Dark | Light | |
|---|---|---|---|
| var(--space-1) | 4px | 4px | |
| var(--space-2) | 8px | 8px | |
| var(--space-3) | 12px | 12px | |
| var(--space-4) | 16px | 16px | |
| var(--space-5) | 20px | 20px | |
| var(--space-6) | 24px | 24px | |
| var(--space-7) | 32px | 32px | |
| var(--space-8) | 40px | 40px | |
| var(--space-9) | 48px | 48px | |
| var(--space-10) | 64px | 64px |
Border Radius
| Token | Dark | Light | |
|---|---|---|---|
| var(--radius-sm) | 8px | 8px | |
| var(--radius-md) | 10px | 10px | |
| var(--radius-lg) | 12px | 12px | |
| var(--radius-xl) | 16px | 16px | |
| var(--radius-2xl) | 20px | 20px | |
| var(--radius-pill) | 9999px | 9999px |
Typography
| Token | Dark | Light | |
|---|---|---|---|
| var(--font-family) | 'Inter', system-ui, sans-serif | 'Inter', system-ui, sans-serif | |
| var(--font-size-xs) | 11px | 11px | |
| var(--font-size-sm) | 13px | 13px | |
| var(--font-size-base) | 15px | 15px | |
| var(--font-size-lg) | 17px | 17px | |
| var(--font-size-xl) | 20px | 20px | |
| var(--font-size-hero) | clamp(3rem, 5vw, 5.5rem) | clamp(3rem, 5vw, 5.5rem) | |
| var(--font-size-page-hero) | clamp(2.5rem, 4vw, 4rem) | clamp(2.5rem, 4vw, 4rem) | |
| var(--font-size-section) | clamp(2rem, 3vw, 3rem) | clamp(2rem, 3vw, 3rem) | |
| var(--line-height-tight) | 1.1 | 1.1 | |
| var(--line-height-normal) | 1.5 | 1.5 | |
| var(--line-height-relaxed) | 1.7 | 1.7 | |
| var(--letter-spacing-tight) | -0.03em | -0.03em | |
| var(--letter-spacing-normal) | 0 | 0 | |
| var(--letter-spacing-wide) | 0.15em | 0.15em |
Z-Index
| Token | Dark | Light | |
|---|---|---|---|
| var(--z-base) | 1 | 1 | |
| var(--z-dropdown) | 100 | 100 | |
| var(--z-sticky) | 200 | 200 | |
| var(--z-nav) | 1000 | 1000 | |
| var(--z-modal) | 2000 | 2000 | |
| var(--z-progress) | 9999 | 9999 |
Transitions
| Token | Dark | Light | |
|---|---|---|---|
| var(--transition-fast) | 0.15s ease | 0.15s ease | |
| var(--transition-base) | 0.2s ease | 0.2s ease | |
| var(--transition-slow) | 0.3s ease | 0.3s ease | |
| var(--transition-fade) | 0.6s ease | 0.6s ease |
Full CSS
css
:root, .dark {
/* Brand Colors */
--green: #1db954;
--green-light: #81c784;
--green-dark: #4caf50;
--green-deep: #2e7d32;
--green-tint: rgba(191,90,242,0.1);
--green-tint-border: rgba(191,90,242,0.2);
/* Backgrounds */
--bg: #09090b;
--bg-alt: #18181b;
--bg-card: #111113;
--nav-bg: rgba(9,9,11,0.85);
/* Text */
--text: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
/* Borders */
--border: #27272a;
--border-hover: rgba(191,90,242,0.4);
/* Shadows */
--shadow-card: 0 4px 24px rgba(0,0,0,0.3);
--shadow-btn: 0 0 20px rgba(191,90,242,0.3);
--shadow-mega: 0 20px 60px rgba(0,0,0,0.5);
--shadow-glow: 0 0 20px rgba(76,175,80,0.15);
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 64px;
/* Border Radius */
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-pill: 9999px;
/* Typography */
--font-family: 'Inter', system-ui, sans-serif;
--font-size-xs: 11px;
--font-size-sm: 13px;
--font-size-base: 15px;
--font-size-lg: 17px;
--font-size-xl: 20px;
--font-size-hero: clamp(3rem, 5vw, 5.5rem);
--font-size-page-hero: clamp(2.5rem, 4vw, 4rem);
--font-size-section: clamp(2rem, 3vw, 3rem);
--line-height-tight: 1.1;
--line-height-normal: 1.5;
--line-height-relaxed: 1.7;
--letter-spacing-tight: -0.03em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.15em;
/* Z-Index */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-nav: 1000;
--z-modal: 2000;
--z-progress: 9999;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.3s ease;
--transition-fade: 0.6s ease;
}
.light {
--bg: #ffffff;
--bg-alt: #f9fafb;
--bg-card: #ffffff;
--border: #e4e4e7;
--border-hover: rgba(76,175,80,0.5);
--text: #09090b;
--text-secondary: #52525b;
--text-muted: #a1a1aa;
--green: #4caf50;
--green-light: #1db954;
--green-dark: #388e3c;
--green-tint: rgba(76,175,80,0.08);
--green-tint-border: rgba(76,175,80,0.2);
--nav-bg: rgba(255,255,255,0.85);
--shadow-card: 0 4px 24px rgba(0,0,0,0.08);
--shadow-btn: 0 0 20px rgba(76,175,80,0.2);
--shadow-mega: 0 20px 60px rgba(0,0,0,0.12);
--shadow-glow: 0 0 20px rgba(76,175,80,0.1);
}