🧬 kbird.ai

visual-design-system

12 min read

40 Days of Existential Threats — Visual Design System

A comprehensive design system for an immersive, dark-themed interactive experience collection. This document provides exact specifications for colors, typography, spacing, animations, and effects to ensure cohesive implementation across all 40 experiences.

1. Design Philosophy

Dark, Luminous Aesthetic Principles

The visual foundation of “40 Days of Existential Threats” draws from the profound beauty of deep ocean bioluminescence—where life emerges as points of light against infinite darkness. Our dark canvas (near-black backgrounds at 95-98% darkness) creates psychological space for contemplation, while luminous accents guide attention and evoke emotional resonance.

Core Principles:

  • Darkness as canvas: Backgrounds recede, allowing content and interactions to emerge with purpose
  • Light as narrative: Every glow, pulse, and shimmer carries meaning—progress, danger, revelation, hope
  • Restraint creates impact: Limited color palette with strategic accent usage maximizes visual weight
  • Motion as emotion: Animations are never decorative; they communicate state, guide focus, and create atmosphere

Bioluminescent Accent Philosophy

Our accent colors mirror nature’s deep-sea organisms—cyan for information and discovery, teal for life and growth, electric blue for energy and transformation. These colors never compete; they complement the darkness, appearing as if emitted from within the interface itself.

Cohesion Across 40 Experiences

Despite 40 distinct interactive experiences, users must feel they’re on a single journey. Cohesion is achieved through:

  • Consistent visual language: Same colors, shadows, and glass-morphism throughout
  • Shared UI patterns: Progress indicators, navigation, and interactive elements follow identical rules
  • Rhythmic consistency: Animation timing creates familiar temporal patterns
  • Thematic continuity: Each experience reveals new facets while maintaining the dark, luminous atmosphere

2. Color Palette

Primary Dark Backgrounds

TokenHex ValueRGBAUsage
--bg-primary#0A0A0Frgba(10, 10, 15, 1)Main background, deepest layer
--bg-secondary#12121Argba(18, 18, 26, 1)Cards, panels, elevated surfaces
--bg-tertiary#1A1A24rgba(26, 26, 36, 1)Hover states, active elements
--bg-elevated#222230rgba(34, 34, 48, 1)Highest elevation surfaces

Bioluminescent Accent Colors

TokenHex ValueRGBAUsage
--accent-cyan#00E5CCrgba(0, 229, 204, 1)Primary accent, progress, discovery
--accent-cyan-glow#00E5CCrgba(0, 229, 204, 0.4)Glow effects
--accent-teal#00D4AArgba(0, 212, 170, 1)Secondary accent, life, growth
--accent-teal-glow#00D4AArgba(0, 212, 170, 0.4)Teal glow effects
--accent-blue#00BFFFrgba(0, 191, 255, 1)Energy, transformation moments
--accent-blue-glow#00BFFFrgba(0, 191, 255, 0.4)Blue glow effects
--accent-purple#A855F7rgba(168, 85, 247, 1)Mystery, reveal moments
--accent-purple-glow#A855F7rgba(168, 85, 247, 0.4)Purple glow effects

Semantic Colors

TokenHex ValueRGBAUsage
--danger#FF4757rgba(255, 71, 87, 1)Errors, critical threats, danger states
--danger-glow#FF4757rgba(255, 71, 87, 0.4)Danger glow effects
--warning#FFA502rgba(255, 165, 2, 1)Warnings, caution, attention
--warning-glow#FFA502rgba(255, 165, 2, 0.4)Warning glow effects
--success#2ED573rgba(46, 213, 115, 1)Success, positive outcomes, hope
--success-glow#2ED573rgba(46, 213, 115, 0.4)Success glow effects
--info#1E90FFrgba(30, 144, 255, 1)Information, neutral highlights
--info-glow#1E90FFrgba(30, 144, 255, 0.4)Info glow effects

Text Colors

TokenHex ValueRGBAUsage
--text-primary#FFFFFFrgba(255, 255, 255, 1)Headings, primary content
--text-secondary#B8B8C8rgba(184, 184, 200, 1)Body text, descriptions
--text-muted#6B6B80rgba(107, 107, 128, 1)Captions, meta information
--text-disabled#4A4A5Crgba(74, 74, 92, 1)Disabled states, placeholders

Gradient Specifications

/* Primary Bioluminescent Gradient */
--gradient-cyan-teal: linear-gradient(135deg, #00E5CC 0%, #00D4AA 100%);
 
/* Deep Ocean Gradient */
--gradient-deep: linear-gradient(180deg, #0A0A0F 0%, #12121A 50%, #0A0A0F 100%);
 
/* Accent Glow Gradient */
--gradient-glow: radial-gradient(ellipse at center, rgba(0, 229, 204, 0.15) 0%, transparent 70%);
 
/* Threat Gradient (Danger to Warning) */
--gradient-threat: linear-gradient(90deg, #FF4757 0%, #FFA502 100%);
 
/* Hope Gradient (Teal to Success) */
--gradient-hope: linear-gradient(90deg, #00D4AA 0%, #2ED573 100%);
 
/* Mystic Gradient (Purple to Blue) */
--gradient-mystic: linear-gradient(135deg, #A855F7 0%, #00BFFF 100%);

3. Typography System

Font Family Recommendations

/* Primary Font Stack - Clean, modern, excellent readability */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 
/* Monospace Font - Code, data, technical content */
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', monospace;
 
/* Display Font - Hero headings, dramatic moments (optional) */
--font-display: 'Space Grotesk', 'Inter', sans-serif;

Type Scale

TokenSizeLine HeightLetter SpacingWeight RangeUsage
--text-hero64px / 4rem1.1-0.02em600-700Main hero titles
--text-hero-mobile48px / 3rem1.15-0.02em600-700Hero titles (mobile)
--text-h136px / 2.25rem1.2-0.01em600-700Page titles
--text-h228px / 1.75rem1.25-0.01em500-600Section headings
--text-h322px / 1.375rem1.30500-600Subsection headings
--text-h418px / 1.125rem1.40500Card titles, labels
--text-body16px / 1rem1.60400-500Body text
--text-small14px / 0.875rem1.50400Secondary text
--text-caption12px / 0.75rem1.40.02em400Captions, meta
--text-overline11px / 0.6875rem1.20.08em500Labels, badges

Font Weights

TokenValueUsage
--weight-light300Large display text, subtle emphasis
--weight-regular400Body text, default content
--weight-medium500Subheadings, emphasized body
--weight-semibold600Headings, important labels
--weight-bold700Hero text, maximum emphasis

Typography CSS Variables

:root {
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
  
  /* Type Scale */
  --text-hero: 4rem;        /* 64px */
  --text-hero-mobile: 3rem; /* 48px */
  --text-h1: 2.25rem;       /* 36px */
  --text-h2: 1.75rem;       /* 28px */
  --text-h3: 1.375rem;      /* 22px */
  --text-h4: 1.125rem;      /* 18px */
  --text-body: 1rem;        /* 16px */
  --text-small: 0.875rem;   /* 14px */
  --text-caption: 0.75rem;  /* 12px */
  --text-overline: 0.6875rem; /* 11px */
  
  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;
  
  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;
}

4. Spacing System

Base Unit Scale

All spacing values are derived from a 4px base unit, creating a harmonious and predictable rhythm throughout the interface.

TokenValuePixelsUsage
--space-000pxNo spacing
--space-10.25rem4pxMinimal gaps, icon padding
--space-20.5rem8pxTight spacing, inline elements
--space-30.75rem12pxCompact padding, small gaps
--space-41rem16pxDefault spacing, standard gaps
--space-61.5rem24pxMedium padding, section gaps
--space-82rem32pxLarge padding, component separation
--space-123rem48pxSection padding, major gaps
--space-164rem64pxLarge section spacing
--space-246rem96pxExtra large spacing
--space-328rem128pxMaximum spacing, hero sections

Container Specifications

:root {
  /* Container Widths */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 800px;
  --container-content: 640px;
  
  /* Container Padding */
  --container-padding: var(--space-4);      /* 16px mobile */
  --container-padding-md: var(--space-6);   /* 24px tablet */
  --container-padding-lg: var(--space-8);   /* 32px desktop */
  
  /* Section Spacing */
  --section-padding-y: var(--space-16);     /* 64px vertical */
  --section-padding-y-lg: var(--space-24);  /* 96px large screens */
}

Grid Specifications

:root {
  /* Grid Gap */
  --grid-gap: var(--space-4);      /* 16px default */
  --grid-gap-sm: var(--space-2);   /* 8px compact */
  --grid-gap-lg: var(--space-6);   /* 24px spacious */
  
  /* Column Counts */
  --grid-cols-1: 1;
  --grid-cols-2: 2;
  --grid-cols-3: 3;
  --grid-cols-4: 4;
  --grid-cols-6: 6;
  --grid-cols-12: 12;
}

5. Animation Timing

Duration Scale

TokenDurationUsage
--duration-instant0msImmediate state changes
--duration-fast150msMicro-interactions, hovers
--duration-normal300msStandard transitions
--duration-slow500msEmphasis animations
--duration-dramatic800msReveal moments, page transitions
--duration-epic1200msMajor reveals, climax moments

Easing Curves

TokenValueUsage
--ease-linearlinearContinuous animations, loops
--ease-outease-outElements entering, appearing
--ease-inease-inElements exiting, disappearing
--ease-in-outease-in-outSymmetric transitions
--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)Bouncy, playful interactions
--ease-smoothcubic-bezier(0.4, 0, 0.2, 1)Smooth, professional
--ease-dramaticcubic-bezier(0.87, 0, 0.13, 1)Dramatic reveals
--ease-bouncecubic-bezier(0.68, -0.55, 0.265, 1.55)Attention-grabbing

Stagger Patterns

:root {
  /* Stagger Delays */
  --stagger-fast: 50ms;
  --stagger-normal: 100ms;
  --stagger-slow: 150ms;
  --stagger-dramatic: 200ms;
  
  /* Pre-calculated Stagger Delays (for 8 items) */
  --stagger-1: calc(var(--stagger-normal) * 0);
  --stagger-2: calc(var(--stagger-normal) * 1);
  --stagger-3: calc(var(--stagger-normal) * 2);
  --stagger-4: calc(var(--stagger-normal) * 3);
  --stagger-5: calc(var(--stagger-normal) * 4);
  --stagger-6: calc(var(--stagger-normal) * 5);
  --stagger-7: calc(var(--stagger-normal) * 6);
  --stagger-8: calc(var(--stagger-normal) * 7);
}

Animation Keyframes

/* Fade In Up - Content Reveal */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 
/* Pulse Glow - Bioluminescent Effect */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px var(--glow-cyan);
  }
  50% {
    box-shadow: 0 0 40px var(--glow-cyan), 0 0 60px var(--glow-cyan);
  }
}
 
/* Shimmer - Loading/Progress */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
 
/* Float - Subtle Movement */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
 
/* Scale In - Modal/Reveal */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

6. Glass-Morphism Specifications

Background Blur Values

TokenValueUsage
--blur-sm8pxSubtle blur, minimal elevation
--blur-md16pxStandard glass effect
--blur-lg24pxHeavy blur, maximum depth
--blur-xl32pxExtreme blur, overlay backgrounds

Background Opacity

TokenValueUsage
--glass-subtlergba(18, 18, 26, 0.4)Light glass, minimal obstruction
--glass-defaultrgba(18, 18, 26, 0.6)Standard glass panels
--glass-strongrgba(18, 18, 26, 0.8)Opaque glass, high contrast
--glass-overlayrgba(10, 10, 15, 0.9)Modal overlays, maximum focus

Border Specifications

TokenValueUsage
--glass-border1px solid rgba(255, 255, 255, 0.08)Subtle glass border
--glass-border-accent1px solid rgba(0, 229, 204, 0.2)Accent-tinted border
--glass-border-strong1px solid rgba(255, 255, 255, 0.15)Prominent border

Complete Glass-Morphism Classes

/* Standard Glass Card */
.glass {
  background: rgba(18, 18, 26, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
}
 
/* Glass with Accent Border */
.glass-accent {
  background: rgba(18, 18, 26, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 229, 204, 0.2);
  border-radius: var(--radius-lg);
}
 
/* Strong Glass - Modals */
.glass-strong {
  background: rgba(18, 18, 26, 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
}
 
/* Subtle Glass - Backgrounds */
.glass-subtle {
  background: rgba(18, 18, 26, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

Backdrop-Filter Fallbacks

/* For browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(16px)) {
  .glass {
    background: rgba(18, 18, 26, 0.95);
  }
  .glass-accent {
    background: rgba(18, 18, 26, 0.95);
  }
  .glass-strong {
    background: rgba(18, 18, 26, 0.98);
  }
}

7. Shadow System

Elevation Levels

LevelTokenBox ShadowUsage
0--shadow-nonenoneFlat elements
1--shadow-sm0 1px 2px rgba(0, 0, 0, 0.3)Subtle elevation
2--shadow-md0 4px 6px rgba(0, 0, 0, 0.4)Cards, buttons
3--shadow-lg0 10px 15px rgba(0, 0, 0, 0.5)Elevated cards
4--shadow-xl0 20px 25px rgba(0, 0, 0, 0.6)Modals, dropdowns
5--shadow-2xl0 25px 50px rgba(0, 0, 0, 0.7)Maximum elevation

Bioluminescent Glow Effects

:root {
  /* Cyan Glow - Primary Accent */
  --glow-cyan-sm: 0 0 10px rgba(0, 229, 204, 0.3);
  --glow-cyan: 0 0 20px rgba(0, 229, 204, 0.4);
  --glow-cyan-lg: 0 0 40px rgba(0, 229, 204, 0.5);
  --glow-cyan-xl: 0 0 60px rgba(0, 229, 204, 0.6);
  
  /* Teal Glow - Secondary Accent */
  --glow-teal-sm: 0 0 10px rgba(0, 212, 170, 0.3);
  --glow-teal: 0 0 20px rgba(0, 212, 170, 0.4);
  --glow-teal-lg: 0 0 40px rgba(0, 212, 170, 0.5);
  
  /* Blue Glow - Energy Accent */
  --glow-blue-sm: 0 0 10px rgba(0, 191, 255, 0.3);
  --glow-blue: 0 0 20px rgba(0, 191, 255, 0.4);
  --glow-blue-lg: 0 0 40px rgba(0, 191, 255, 0.5);
  
  /* Purple Glow - Mystery Accent */
  --glow-purple-sm: 0 0 10px rgba(168, 85, 247, 0.3);
  --glow-purple: 0 0 20px rgba(168, 85, 247, 0.4);
  --glow-purple-lg: 0 0 40px rgba(168, 85, 247, 0.5);
  
  /* Semantic Glows */
  --glow-danger: 0 0 20px rgba(255, 71, 87, 0.4);
  --glow-warning: 0 0 20px rgba(255, 165, 2, 0.4);
  --glow-success: 0 0 20px rgba(46, 213, 115, 0.4);
  
  /* Inner Glow */
  --glow-inner-cyan: inset 0 0 20px rgba(0, 229, 204, 0.2);
  --glow-inner-danger: inset 0 0 20px rgba(255, 71, 87, 0.2);
}

Combined Shadow + Glow

/* Elevated Card with Glow */
.card-glow {
  box-shadow: 
    var(--shadow-lg),
    var(--glow-cyan);
}
 
/* Button with Hover Glow */
.btn-glow {
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.btn-glow:hover {
  box-shadow: 
    var(--shadow-md),
    var(--glow-cyan-lg);
}

8. Border & Radius

Border Widths

TokenValueUsage
--border-none0No border
--border-thin1pxSubtle dividers, glass borders
--border-default2pxStandard borders, inputs
--border-thick3pxEmphasized borders
--border-heavy4pxMaximum border weight

Border Radius Scale

TokenValueUsage
--radius-none0Sharp corners
--radius-sm4pxSmall elements, tags
--radius-md8pxButtons, inputs, small cards
--radius-lg12pxCards, panels
--radius-xl16pxLarge cards, modals
--radius-2xl24pxHero sections, featured content
--radius-full9999pxPills, badges, circular elements

Border Color Tokens

:root {
  /* Default Borders */
  --border-color-default: rgba(255, 255, 255, 0.08);
  --border-color-strong: rgba(255, 255, 255, 0.15);
  --border-color-subtle: rgba(255, 255, 255, 0.04);
  
  /* Accent Borders */
  --border-color-cyan: rgba(0, 229, 204, 0.3);
  --border-color-cyan-strong: rgba(0, 229, 204, 0.5);
  
  /* Semantic Borders */
  --border-color-danger: rgba(255, 71, 87, 0.5);
  --border-color-warning: rgba(255, 165, 2, 0.5);
  --border-color-success: rgba(46, 213, 115, 0.5);
}

9. Z-Index Scale

Layer Organization

LayerTokenZ-IndexUsage
Background--z-bg-10Decorative backgrounds, patterns
Base--z-base0Default content layer
Content--z-content10Main content elements
Elevated--z-elevated20Cards, raised elements
Dropdown--z-dropdown100Dropdown menus
Sticky--z-sticky200Sticky headers, nav
Overlay--z-overlay300Modal backdrops
Modal--z-modal400Modal dialogs
Popover--z-popover500Popovers, tooltips
Toast--z-toast600Toast notifications
Tooltip--z-tooltip700Tooltips
Maximum--z-max9999Critical overlays

Z-Index CSS Variables

:root {
  --z-bg: -10;
  --z-base: 0;
  --z-content: 10;
  --z-elevated: 20;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-max: 9999;
}

10. Complete CSS Variables Summary

:root {
  /* ========================================
     40 DAYS OF EXISTENTIAL THREATS
     Complete Design System Variables
     ======================================== */
 
  /* --- COLORS --- */
  /* Backgrounds */
  --bg-primary: #0A0A0F;
  --bg-secondary: #12121A;
  --bg-tertiary: #1A1A24;
  --bg-elevated: #222230;
  
  /* Bioluminescent Accents */
  --accent-cyan: #00E5CC;
  --accent-teal: #00D4AA;
  --accent-blue: #00BFFF;
  --accent-purple: #A855F7;
  
  /* Glow Opacities */
  --glow-cyan-alpha: rgba(0, 229, 204, 0.4);
  --glow-teal-alpha: rgba(0, 212, 170, 0.4);
  --glow-blue-alpha: rgba(0, 191, 255, 0.4);
  --glow-purple-alpha: rgba(168, 85, 247, 0.4);
  
  /* Semantic */
  --danger: #FF4757;
  --warning: #FFA502;
  --success: #2ED573;
  --info: #1E90FF;
  
  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #B8B8C8;
  --text-muted: #6B6B80;
  --text-disabled: #4A4A5C;
  
  /* --- TYPOGRAPHY --- */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  --text-hero: 4rem;
  --text-hero-mobile: 3rem;
  --text-h1: 2.25rem;
  --text-h2: 1.75rem;
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --text-overline: 0.6875rem;
  
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;
  
  /* --- SPACING --- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  
  --container-max: 1200px;
  --container-padding: var(--space-4);
  
  /* --- ANIMATION --- */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-dramatic: 800ms;
  --duration-epic: 1200ms;
  
  --ease-linear: linear;
  --ease-out: ease-out;
  --ease-in: ease-in;
  --ease-in-out: ease-in-out;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-dramatic: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  --stagger-normal: 100ms;
  
  /* --- GLASS MORPHISM --- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
  --blur-xl: 32px;
  
  --glass-subtle: rgba(18, 18, 26, 0.4);
  --glass-default: rgba(18, 18, 26, 0.6);
  --glass-strong: rgba(18, 18, 26, 0.8);
  --glass-overlay: rgba(10, 10, 15, 0.9);
  
  /* --- SHADOWS --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);
  
  --glow-cyan: 0 0 20px rgba(0, 229, 204, 0.4);
  --glow-cyan-lg: 0 0 40px rgba(0, 229, 204, 0.5);
  --glow-teal: 0 0 20px rgba(0, 212, 170, 0.4);
  --glow-blue: 0 0 20px rgba(0, 191, 255, 0.4);
  --glow-purple: 0 0 20px rgba(168, 85, 247, 0.4);
  
  /* --- BORDERS --- */
  --border-thin: 1px;
  --border-default: 2px;
  --border-thick: 3px;
  --border-heavy: 4px;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* --- Z-INDEX --- */
  --z-bg: -10;
  --z-base: 0;
  --z-content: 10;
  --z-elevated: 20;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-max: 9999;
}

Usage Examples

Button Component

.btn {
  /* Layout */
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  
  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  
  /* Colors */
  background: var(--accent-cyan);
  color: var(--bg-primary);
  
  /* Effects */
  border: none;
  box-shadow: var(--shadow-md);
  
  /* Animation */
  transition: all var(--duration-fast) var(--ease-out);
}
 
.btn:hover {
  box-shadow: var(--shadow-md), var(--glow-cyan);
  transform: translateY(-2px);
}
 
.btn:active {
  transform: translateY(0);
  transition-duration: var(--duration-instant);
}

Glass Card Component

.card-glass {
  /* Glass Effect */
  background: var(--glass-default);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  
  /* Border */
  border: var(--border-thin) solid var(--border-color-default);
  border-radius: var(--radius-lg);
  
  /* Spacing */
  padding: var(--space-6);
  
  /* Shadow */
  box-shadow: var(--shadow-lg);
}

Document Version: 1.0
Last Updated: 2024
For: 40 Days of Existential Threats Interactive Experience Collection

Graph View