Aevum Encyclopedia
A comprehensive design system and component library for building consistent, accessible, and scholarly digital experiences across web, mobile, and API interfaces.
Color System
Our palette balances academic authority with modern digital clarity. Colors are assigned semantic roles to ensure consistent usage across all touchpoints.
Typography
2>Playfair Display provides scholarly gravitas for headings, while Inter ensures maximum readability for UI and body text. All scaling follows a 1.25 modular ratio.
| Token | Preview | Properties | Usage |
|---|---|---|---|
| --ds-text-4xl | Encyclopedia | 36px / Bold / 1.25 | Page titles |
| --ds-text-2xl | Section Header | 24px / Semibold / 1.25 | Section titles |
| --ds-text-lg | Article Title | 18px / Semibold / 1.5 | Card headers |
| --ds-text-base | Body text defaults to 16px for optimal reading comfort across devices. | 16px / Regular / 1.5 | Paragraphs, UI |
| --ds-text-sm | Caption & Meta | 14px / Medium / 1.5 | Labels, hints |
| --ds-text-xs | Fine print & code | 12px / Regular / 1.4 | Tags, timestamps |
Spacing & Grid
All spacing values derive from a 4px base unit. This ensures rhythmic consistency and predictable layout mathematics.
Components
Reusable, accessible UI primitives built with semantic HTML and CSS variables.
Knowledge Cards
The primary content container for articles, citations, and related topics.
Status & Tags
Visual indicators for content state, verification level, and editorial workflow.
CSS Tokens
Core variables for rapid implementation. All components inherit these values.