Color Palette
A dark-first, high-contrast system designed for readability and visual hierarchy. Click any swatch to copy the hex value.
Typography
Playfair Display for headings, Inter for body, JetBrains Mono for code. Optimized for long-form reading.
Aevum Encyclopedia
Knowledge, Reimagined
Interactive Graphs
Cross-references millions of sources in real-time, surfacing verified facts and hidden connections between topics across every discipline.
--color-accent: #E94560;
Spacing & Grid
Based on a 4px modular scale. Consistent rhythm across all breakpoints.
Inputs & Forms
Accessible, high-contrast states with clear focus rings.
Badges & Tags
Used for categories, status indicators, and quick filters.
Cards & Layout
Elevated containers for content grouping, navigation, and data display.
Article Card
Quantum computing leverages quantum mechanical phenomena such as superposition and entanglement to process information in fundamentally new ways...
Action Card
Compact layout for CTAs and quick links.
Accessibility
WCAG 2.1 AA compliant. All interactive elements meet minimum 4.5:1 contrast ratios for text and 3:1 for UI components.
Body text on dark background
White text on accent background
Motion & States
Respects prefers-reduced-motion. Uses cubic-bezier easing for natural feel.
Transition Tokens
fast: 150ms | base: 250ms | slow: 400ms
Hover over the dot. If you have reduced motion enabled in your OS, the animation will pause automatically.
Usage & Implementation
CSS variables ready for component libraries. Import via `