Distributed Environment
Auto-fit grid that places autonomous entities in a non-linear, responsive layout. Uses container queries for intelligent sizing.
@include genesis-environment('distributed')
Genesis Design System
A futuristic, consciousness-expanding design language for the age of Artificial Superintelligence
Responsive Grid System
Container query-aware layouts that adapt intelligently across all devices
Primary Entity
Fundamental objects with glassmorphism, depth shadows, and neural glow effects.
@include genesis-entity('primary')
Neural Cognition
AI consciousness aesthetic with quantum gradients and pulse animations.
@include genesis-atmosphere('vibrant')
Axiom Typography
Foundational headlines with fluid scaling from 2rem to 3.5rem across viewports.
@include genesis-cognition('axiom')
Execute Synapse
Action buttons with WCAG 2.1 compliant 44px touch targets on mobile.
@include genesis-synapse('execute')
Transcendent State
Scroll-triggered animations with reduced motion support.
@include genesis-state('scroll-triggered')
Fluid Typography Scale
Responsive type that flows naturally from mobile to ultrawide
Display
Genesis
clamp(3.5rem, 2rem + 7.5vw, 7rem)
5XL (Axiom)
Consciousness
clamp(3rem, 2rem + 5vw, 5rem)
4XL (Title)
Transcendence
clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem)
3XL (Heading)
Infinite Possibilities
clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem)
Base (Discourse)
Standard prose for extended reading with optimal line height and measure
for sustained comprehension.
clamp(1rem, 0.9rem + 0.5vw, 1.125rem)
Small (Gloss)
Annotations and metadata with accessibility-safe minimum sizing
clamp(0.875rem, 0.8rem + 0.35vw, 0.95rem)
Interactive Components
Touch-optimized controls with quantum hover effects
Synapse Actions
Form Inputs
Entity Cards with Effects
Glassmorphism
Deep consciousness depth with blur and saturation
Neural Glow
AI consciousness aesthetic with pulse animation
Ethereal
Light-based transcendent transparency
Quantum Gradient
Animated mesh-like background effect
Navigation Patterns
Responsive navigation that transforms from mobile drawer to desktop horizontal
Mobile (< 768px): Off-canvas drawer with glassmorphism overlay
Desktop (≥ 768px): Horizontal sticky header with dropdowns
Accessibility Features
WCAG 2.1 AA compliant with enhanced keyboard and screen reader support
-
Reduced Motion:
Animations automatically disabled when
prefers-reduced-motion: reduceis set -
High Contrast:
Enhanced borders and disabled glassmorphism in
prefers-contrast: moremode - Touch Targets: Minimum 44×44px touch targets on mobile (WCAG 2.5.5)
- Focus Indicators: Visible focus rings with 2px offset for keyboard navigation
-
Safe Area Insets:
Padding for notched devices using
env(safe-area-inset-*) -
Dynamic Viewport:
Using
100dvhto account for mobile browser chrome
Current Viewport:
XS (< 480px)
SM (480px – 767px)
MD (768px – 1023px)
LG (1024px – 1439px)
XL (1440px – 1919px)
2XL (≥ 1920px)