Aevum News Style Guide

Design Tokens

Core CSS variables that power the Aevum design system. These tokens should be referenced instead of hardcoded values to maintain consistency.

Token Reference

--color-primary: #C9A84C
--color-bg: #0A0A0F
--color-text: #E8E8ED
--font-serif: 'Playfair Display', serif
--font-sans: 'Inter', sans-serif
--radius-md: 12px
--transition-base: 0.3s ease

Color Palette

Aevum's color system is built around a deep, authoritative dark base accented by warm gold. Semantic colors support status and categorization without breaking visual harmony.

Primary Gold

#C9A84C CLICK TO COPY

Background

#0A0A0F CLICK TO COPY

Surface

#12121A CLICK TO COPY

Text Primary

#E8E8ED CLICK TO COPY

Text Muted

#8A8A9A CLICK TO COPY

Alert / Breaking

#E63946 CLICK TO COPY

Info / World

#457B9D CLICK TO COPY

Success / Positive

#64C864 CLICK TO COPY

Usage Guidelines

• Primary Gold: Headlines, CTAs, active states, brand highlights
• Backgrounds: Never use pure black. Use surface layers to create depth
• Text: Maintain minimum 4.5:1 contrast ratio for body text
• Semantic: Reserve for status indicators, categories, and alerts only

Typography

Aevum uses a serif/sans-serif pairing to balance editorial authority with modern readability. Playfair Display establishes gravitas, while Inter ensures clarity across all screen sizes.

Playfair Display

Used for headlines, pull quotes, and editorial emphasis. Weights: 400, 600, 700, 900. Conveys trust, heritage, and premium quality.

Inter

Used for body text, UI elements, navigation, and metadata. Weights: 300–700. Optimized for screen legibility and responsive scaling.

Type Scale

H1 / Display

Authority in Every Headline

H2 / Section

Deep Analysis & Context

H3 / Article

Verified & Unbiased

Body / Default

Aevum News delivers unfiltered, authoritative journalism that cuts through the noise. Clean, readable, and accessible.

Caption / Meta

Published 2 hours ago • 5 min read • By Elena Rodriguez

UI Components

Reusable interface elements following Aevum's design tokens. All components support keyboard navigation and screen readers.

Buttons

Inputs & Forms

Email Address

Badges & Categories

Breaking Technology World Politics Default

News Card

[ IMAGE PLACEHOLDER ]

World

Global Summit Reaches Historic Agreement

190 nations unite on sustainability frameworks in landmark session.

Layout & Grid

Aevum uses a 12-column fluid grid with responsive breakpoints. Consistent spacing ensures rhythm and hierarchy across layouts.

12-Column Grid System

12 Columns (Full Width)

8 Columns (Main Content)

4 Columns (Sidebar)

6 Columns (Half)

4 Columns

Spacing Scale (8px Base)

--space-xs

4px

--space-sm

8px

--space-md

16px

--space-lg

24px

--space-xl

32px

--space-2xl

48px

--space-3xl

64px

Accessibility Standards

Aevum is committed to WCAG 2.1 AA compliance. All content must meet contrast requirements, support keyboard navigation, and provide clear focus states.

Color Contrast Testing

Primary Text

Ratio: 13.2:1 (AAA Pass)

Muted Text

Ratio: 5.8:1 (AA Pass)

Gold Accent

Ratio: 8.1:1 (AA Pass)

Low Contrast

Ratio: 3.2:1 (Fail)

Focus States

All interactive elements must show a visible focus indicator. Aevum uses a 2px offset border in primary gold.

Link Element

Imagery & Photography

Visual content must align with Aevum's editorial standards. Prioritize authenticity, context, and technical quality.

Guidelines

• Style: Documentary, editorial, high-contrast. Avoid heavy filters or artificial lighting.
• Treatment: Subtle gradient overlays for text readability. Max opacity 60%.
• Aspect Ratios: 16:9 (featured), 4:3 (article cards), 1:1 (thumbnails)
• Alt Text: Mandatory for all images. Descriptive, not repetitive.
• Sourcing: In-house photographers, licensed agencies, or verified public domain. No AI-generated imagery for news stories.