Design System v2.4
Visual Architecture &
Design Overview
A comprehensive look at the visual language, layout systems, and interface patterns that power Aevum News' editorial experience.
🎨 Design Tokens
📐 Grid Systems
🧩 Components
📊 Visualizations
Design Tokens
Brand Identity System
Core visual tokens that maintain consistency across all digital touchpoints.
🎨 Color Palette
#0B0B0F
#12121A
#C9A84C
#E8D49C
#2196F3
#4CAF50
#E63946
#FF9800
🔤 Typography Scale
Display
40px / 900
Heading
28px / 700
Body Large
16px / 600
Body Regular
14px / 400
Code / Caption
12px / 500
📏 Spacing System
xs 8
sm 12
md 16
lg 24
xl 32
2xl 48
Layout Architecture
Editorial Grid System
12-column responsive grid powering adaptive content layouts across devices.
Featured Article
(7 cols)
Standard Card
(4 cols)
Standard Card
(4 cols)
Standard Card
(4 cols)
Compact
(3 cols)
Compact
(3 cols)
Compact
(3 cols)
Compact
(3 cols)
Interface Patterns
UI Components
Reusable interface elements designed for clarity, accessibility, and editorial hierarchy.
Category Badges
Politics
Technology
World
Business
Button Variants
Data Visualization
Performance & Engagement
Visual representation of content distribution, reader engagement, and editorial metrics.
2.1M
Daily Active Readers
Content Distribution by Category
Reader Platform Split
🔵 Desktop 32%
🟡 Mobile 64%
🟢 Tablet 4%