Color Palette

Our palette balances deep academic tones with vibrant accent colors that guide attention and denote interactive states. All colors are WCAG AA compliant for text on dark surfaces.

Primary Accent

#E94560

CTAs, active states, highlights, interactive elements

Secondary Accent

#F0C040

Gradients, badges, success/warning indicators

Surface Base

#1A1A2E

Cards, modals, elevated containers

Background

#0A0A14

Page background, deep layers

Text Primary

#F4F4F8

Headings, body text, primary content

Text Muted

#6B7280

Captions, placeholders, secondary info

02

Typography

We use a pairing of Playfair Display (serif) for editorial headings and Inter (sans-serif) for UI and body text. Code and data use JetBrains Mono.

48px / 3rem700 Weight

Page Title

36px / 2.25rem600 Weight

Section Heading

24px / 1.5rem600 Weight

Subsection Heading

16px / 1rem400 Weight

Body text provides the foundation for readability. Line height is set to 1.6 for comfortable scanning across long-form editorial content.

14px / 0.875rem500 Weight

Caption / Metadata text

03

Spacing & Layout

All spacing follows a 4px base scale. Container max-width is 1200px with responsive gutters. Grid uses 12 columns at desktop, 8 at tablet, 4 at mobile.

4px (0.25rem)

8px (0.5rem)

12px (0.75rem)

16px (1rem)

24px (1.5rem)

32px (2rem)

48px (3rem)

64px (4rem)

04

UI Components

Core interactive elements follow strict token usage. Hover states shift Y by -2px with subtle shadow elevation. Focus rings use 2px outline with 2px offset.

Buttons

Cards

Article Preview

Standard card for encyclopedia entries. Includes title, excerpt, and metadata. Hover reveals accent border.

Feature Highlight

Elevated container for AI insights or trending topics. Uses gradient top-border on interaction.

Form Elements

Email Address

Search Query

05

Icons & Media

Icons use a 2px stroke weight with rounded caps and joins. Size scale: 16px (inline), 24px (UI), 32px (standalone). Media maintains 16:9 or 4:3 aspect ratios with 12px border radius. Images receive a subtle 8px blur vignette for text overlay readability.

/* Icon Usage Rules */ - Stroke: 2px uniform - Style: Outline/Duotone (no filled solids) - Color: Inherit or var(--text-secondary) - Spacing: 8px from adjacent text /* Image Treatment */ - Border Radius: 12px - Shadow: 0 4px 16px rgba(0,0,0,0.4) - Overlay: Linear gradient (bottom: rgba(10,10,20,0.8))

06

Tone & Voice

Our voice bridges academic rigor with approachable clarity. We write for a global, multilingual audience spanning students to seasoned researchers.

Authoritative

Cite primary sources. Avoid speculation. Use precise terminology but define it on first use. Confidence without arrogance.

Inclusive

Use gender-neutral language. Acknowledge multiple cultural perspectives. Avoid idioms that don't translate well globally.

Forward-Looking

Frame historical context within modern relevance. Highlight ongoing research and emerging consensus over settled dogma.

Accessible

Grade reading level to ~10th grade. Use active voice. Break complex ideas into scannable sections with clear headings.

07

Implementation Notes

All design tokens are exposed as CSS custom properties. Import the base stylesheet and reference variables directly in components. Avoid hardcoded values.

/* Core Token Reference */ :root { --brand-accent: #e94560; --bg-base: #0a0a14; --text-primary: #f4f4f8; --space-4: 1rem; --radius-md: 12px; --font-sans: 'Inter', sans-serif; --font-serif: 'Playfair Display', serif; } /* Usage Example */ .article-card { background: var(--bg-elevated); border-radius: var(--radius-md); padding: var(--space-6); font-family: var(--font-sans); color: var(--text-primary); }