Design System & Philosophy

The visual language and technical guidelines that power VägVisaren.

Our Philosophy: The Nordic Blueprint

VägVisaren is built on the concept of "Lagom" — not too little, not too much, just right. The design prioritizes extreme clarity, strict accessibility, and high information density without feeling overwhelming. We avoid bureaucratic jargon and unapproachable gray walls of text.

Typography

We use DM Serif Display for maximum editorial authority on headings, paired with Manrope for excellent legibility on dense UI and body text.

Headings
ABc
DM Serif Display
Body Text
ABc
Manrope

Token Architecture

Our entire platform uses a centralized CSS Custom Property system natively mapped to Tailwind v4. The color palette revolves around a deep, authoritative midnight blue (Brand), warm stone grays (Neutral) and strict semantic feedback colors (Warning, Success, Info).

Brand (Nordic Blue)

Neutral (Warm Stone)

Spacing System

We use a rigid base-4 spacing scale to ensure mathematical harmony across all layouts.

4px--space-1
8px--space-2
12px--space-3
16px--space-4
24px--space-6
32px--space-8
40px--space-10
48px--space-12
64px--space-16

Corner Radius

A disciplined scale of border radii creates a soft yet professional Scandinavian feel.

--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl

Shadows & Elevation

Depth is used sparingly to denote interactive layers and important surfaces.

--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg