Style Guide

The definitive design system for Aevum News. Documenting visual language, component architecture, and implementation standards for consistent digital journalism.

Active Release — Updated Jan 2025

Brand Overview

Aevum News operates at the intersection of authoritative journalism and modern digital design. Our visual system prioritizes clarity, accessibility, and editorial integrity. Every pixel serves the story.

v4.2 Stable Dark Mode Optimized Accessibility WCAG 2.1 AA

Color System

Our palette is engineered for readability in low-light environments while maintaining editorial sophistication. The gold accent represents trust and timelessness.

Background Primary
#0A0A0F
Background Secondary
#12121A
Background Tertiary
#1A1A25
Brand Accent
#C9A84C
Text Primary
#E8E8ED
Text Secondary
#8A8A9A
Status Success
#4ADE80
Status Alert
#F87171

Typography System

Playfair Display provides editorial gravitas for headlines, while Inter ensures optimal screen readability for body content. JetBrains Mono handles code and technical annotations.

Heading 1
32px / 900
Playfair Display
Global Consensus Reaches New Height
Heading 2
24px / 700
Playfair Display
Markets Respond to Policy Shifts
Heading 3
20px / 700
Playfair Display
Analysis & Editorial Perspective
Body
16px / 400
Inter
Journalism requires precision. Every sentence must carry weight, every paragraph must advance the narrative without sacrificing accuracy or context.
Caption
12px / 500
Inter
Published 8h ago • 4 min read • Verified Sources
Mono
14px / 400
JetBrains Mono
--text-primary: #E8E8ED;

Layout & Spacing

We utilize a 12-column fluid grid with 24px gutters. Spacing follows a 4px base scale, ensuring rhythm and visual hierarchy across all breakpoints.

Grid System

8
4
6
6
3
3
3
3

Spacing Scale

4
8
12
16
24
32
48
64

UI Components

Modular, accessible, and theme-aware. All components support dark mode natively and follow WCAG 2.1 AA contrast standards.

Buttons

Cards & Content Blocks

📰
Analysis

The Architecture of Truth

How modern newsrooms verify information in an era of synthetic media and algorithmic distribution.

Forms & Inputs

Design Tokens

Platform-agnostic variables bridging design and development. Import directly into CSS, Tailwind, or component frameworks.

{
  "brand": {
    "name": "Aevum News",
    "version": "4.2.0",
    "theme": "dark-editorial"
  },
  "colors": {
    "bg": { "primary": "#0A0A0F", "secondary": "#12121A" },
    "text": { "primary": "#E8E8ED", "secondary": "#8A8A9A" },
    "accent": { "base": "#C9A84C", "dim": "rgba(201,168,76,0.15)" }
  },
  "typography": {
    "heading": "'Playfair Display', serif",
    "body": "'Inter', sans-serif",
    "mono": "'JetBrains Mono', monospace"
  },
  "spacing": { "base": "4px", "scale": "linear" },
  "radius": { "sm": "6px", "md": "10px", "lg": "16px" }
}

Changelog

v4.2.0 Current
• Unified spacing scale (4px base)
• Added JetBrains Mono for technical UI
• Enhanced contrast ratios for WCAG AA compliance
• Optimized component hover states

v4.1.0
• Introduced card component variants
• Refactored color tokens for CSS custom properties
• Mobile grid breakpoint adjustments

v4.0.0
• Major redesign: dark-first editorial theme
• Playfair Display + Inter typography system
• Gold accent integration (#C9A84C)
• Full component library rollout