Documentation

Design Principles

Guidelines for building authoritative, accessible, and scalable knowledge interfaces across all Aevum Encyclopedia platforms.

Design Philosophy

Aevum Encyclopedia exists at the intersection of academic rigor and modern information design. Our interfaces must never compete with content; they must elevate it. Every pixel, interaction, and typographic choice is evaluated against a single question: Does this help a user understand complex information faster and more accurately?

We prioritize clarity over decoration, consistency over novelty, and accessibility over aesthetics. When these values conflict, accessibility and clarity always win. Our design system is built to scale across languages, devices, and cognitive frameworks without losing structural integrity.

Core Principles

01

Clarity Above All

Information hierarchy must be immediate. Users should understand the structure, scope, and key claims of any entry within three seconds of arrival.

02

Authoritative Trust

Design must signal verification. Citations, editorial timestamps, and contributor credentials are never hidden or secondary to content.

03

Cognitive Load Management

Complex topics are chunked progressively. Dense data uses interactive disclosure, not forced scrolling. White space is structural, not decorative.

04

Global Neutrality

Visual language remains culturally agnostic. Iconography, color semantics, and layout patterns avoid regional bias and translate cleanly across 140+ languages.

05

Progressive Enhancement

Core content loads instantly without JavaScript. Advanced features (knowledge graphs, AI summaries, audio playback) layer on top gracefully.

06

Consistent Scalability

Components are designed to handle 100 words or 100,000 words. Spacing, typography, and navigation patterns remain predictable at any content depth.

Visual System

Our visual language is restrained, typographic, and built for prolonged reading sessions. Every element serves a functional purpose.

Typography

/* Primary Interface */ DO: Use Inter for UI, navigation, and metadata DO: Use Playfair Display for section headings and pull quotes DON'T: Mix more than two typefaces per viewport DON'T: Use decorative fonts for body content

Scale

H1 / 32px
Knowledge Architecture
H2 / 24px
Structural Foundations
Body / 16px
Standard reading measure with optimal line-height.

Color Palette

/* Usage Rules */ DO: Use accent only for interactive states & critical alerts DO: Maintain 4.5:1 contrast minimum for all text DON'T: Use color alone to convey meaning

Spacing & Grid

/* Base Unit: 8px */ DO: Use multiples of 8 for spacing DO: Maintain max-width: 65ch for body text DO: Align all content to 12-column grid DON'T: Use arbitrary pixel values

Content Architecture

Information structure follows cognitive reading patterns. Every entry is organized to support scanning, deep reading, and cross-referencing.

Hierarchy Rules

  • Lead Paragraph: Maximum 3 sentences. Defines scope, consensus, and key terminology.
  • Section Headers: Follow Bloom's taxonomy progression (Overview → Context → Analysis → Applications → Related).
  • Citation Placement: Inline markers near claims, full references collapsed but always accessible.
  • Media Integration: Diagrams and tables are placed adjacent to referenced text, never orphaned at page bottom.
/* Information Density */ DO: Use progressive disclosure for technical data DO: Provide executive summaries for entries > 5,000 words DO: Maintain consistent terminology across related articles DON'T: Nest more than two heading levels without section breaks DON'T: Hide primary navigation behind mobile menus

Accessibility & Inclusion

Aevum is designed for global, lifelong learners. Accessibility is not a compliance checklist; it is a foundational constraint that shapes every component.

👁️

WCAG 2.2 AA Compliance

All interactive elements meet contrast, focus, and motor-reduction standards. Keyboard navigation is fully supported without tab traps.

🧠

Cognitive Accessibility

Reading level defaults to grade 8-10. Technical entries provide plain-language summaries. Reading time and complexity indicators are visible.

🌐

Multilingual Support

Layout accounts for RTL scripts, vertical CJK, and font-size expansion (up to 200% without breaking grid). Language switchers are persistent.

♿

Motor & Screen Reader

Touch targets ≥ 44px. All icons have hidden accessible labels. ARIA landmarks and live regions update dynamically without jank.

Implementation Guidelines

Developers and designers collaborate using a shared component library. All UI ships from a single source of truth.

  • Design Tokens: Colors, spacing, typography, and motion values are exported as CSS variables and JSON for cross-platform sync.
  • Component API: Every component documents props, variants, and accessibility requirements. No visual elements ship without interactive states.
  • Performance Budget: Initial paint < 1.2s. Knowledge graph rendering uses WebGL fallback. Lazy loading is content-aware, not viewport-only.
  • Review Process: All UI changes undergo heuristic evaluation against these principles before merging. Automated Lighthouse and axe-core checks are mandatory.
// Core Commitment "If it obscures content, it doesn't ship. If it excludes users, it gets redesigned."