<runic>

Viking / Norse

CSS Design System

Forged in iron, carved in stone, weathered by salt wind and saga. A design language drawn from runestones, longship prows, mead hall warmth, and the interlace knotwork of the Urnes masters.

01

Color Palette

Drawn from the materials of the Viking world -- weathered timber, forged iron, hammered gold, fjord water, and hearthfire.

Weathered Wood

Charred
#1a1410
Dark
#2e2318
Aged
#4a3828
Warm
#6b5038
Pale
#8c7256
Drift
#b8a080

Forged Iron & Steel

Black
#1c1e22
Dark
#33363c
Mid
#4a4e56
Light
#6b7080
Frost
#8a90a0
Bright
#b0b8c8

Rune Gold & Amber

Deep
#8b6914
Gold
#b8960f
Bright
#d4af37
Pale
#e8cc6e
Amber
#c07020
Glow
#e09030

Blood & Fire

Blood Dark
#5c1010
Blood
#8b1a1a
Bright
#b02020
Ember
#c04818
Fire
#e06020
Glow
#f08830

Fjord & Sky

Deep
#0e1e30
Fjord
#1a3050
Light
#2a4a6a
Sea Grey
#5a7080
Frost
#c0d0e0
Ice
#e0eaf0

Moss, Earth & Parchment

Moss Dark
#2a3a20
Moss
#3e5030
Lichen
#6a7a50
Bone
#e8dcc8
Parchment
#f0e8d8
Vellum
#ddd0b8
02

Typography

Three voices: the uncial script of illuminated sagas, the carved majuscules of runestones, and the steady hand of the chronicle scribe.

Display / Uncial Antiqua
Uncial Antiqua 400 -- Saga titles, hero text, ceremonial inscriptions
Hail the All-Father
Heading 1 / Cinzel
Cinzel 800, 0.08em tracking, uppercase -- Section headings
Voyage to Vinland
Heading 2 / Cinzel
Cinzel 700, 0.1em tracking, uppercase -- Subsection headings
The Longship Fleet
Heading 3 / Cinzel
Cinzel 600, 0.12em tracking, uppercase -- Card titles, labels
Iron & Whalebone
Body / EB Garamond
EB Garamond 400, 18px/1.7 -- Long-form text, descriptions
The keel was laid from a single oak, hewn in the forests east of the fjord. Forty oar-ports lined each side, and the prow bore the serpent's head carved by Thorolf the Elder, whose hands knew wood as a skald knows words. When the sail caught wind, the dragon seemed to breathe.
Caption / EB Garamond Italic
EB Garamond 400 italic, 14px/1.5 -- Metadata, attributions
From the Saga of Erik the Red, chapter XII, as recorded at Skalholt in the year 1264.
Runic Display
Unicode Elder Futhark runes -- Decorative accents only
ᚅ ᚟ ᚅ ᚢ ᚨ ᚅ ᚟ ᚅ
03

Spacing Scale

A 4px base unit, scaled for the sturdy proportions of timber-frame construction.

space-1 4px
space-2 8px
space-3 12px
space-4 16px
space-5 24px
space-6 32px
space-7 48px
space-8 64px
space-9 96px
space-10 128px
04

Buttons

Forged from the same iron as axe-heads and shield bosses. Each variant serves a distinct purpose in the UI hierarchy.

Variants

Sizes

With Icon

States

05

Forms

Input fields carved like rune channels -- clear borders, honest materials, no unnecessary ornamentation.

Recorded by the skalds for all time.
This oath does not satisfy the Althing.
06

Cards & Panels

Three vessel types for content: driftwood planks, dark longship timber, and carved runestones.

Shipwright's Guild

The keel must be laid true, or the sea will claim what the axe began. Every plank is steamed and riveted by hand, the old way.

Navigator's Chart

By sun-stone and star-board, by whale-road and wave-pattern. The navigator reads the sea as the rune-carver reads stone.

Forge & Anvil

Pattern-welded steel, folded forty times. The smith sings to the iron as it cools, binding strength into the blade's heart.

ᚅ ᚢ ᚅ

Runestone Variant

Fehu

Wealth, cattle, prosperity. The first rune of the Elder Futhark speaks of earned abundance.

Thurisaz

Thorn, giant, protective force. The gateway rune, standing between known lands and the wild.

Ansuz

Odin's rune. Breath, speech, divine communication. The voice that carries across worlds.

07

Alerts

Dispatches from scouts, warnings from the seer, declarations from the jarl.

Rune Reading

The runes speak of favorable winds. Your longship fleet may depart at dawn with the tide.

Seer's Warning

Storm clouds gather over the North Sea. Delay your crossing or risk the wrath of Aegir.

Battle Alert

Enemy warships sighted off the starboard bow. All hands to shields. Archers to the prow.

Victory Declared

The settlement is secured. The harvest stores are full and the defenses hold strong for winter.

Navigation Update

Current position: 62 degrees north by the sun-stone. Landfall expected within two days.

08

Data Table

The jarl's ledger -- tallying raids, tribute, and trade in the manner of the Althing records.

Voyage Destination Ships Season Outcome
Lindisfarne Raid Northumbria 3 longships Summer 793 Decisive victory
Vinland Expedition Western Lands 2 knarrs Spring 1000 Colony founded
Constantinople Trade Miklagard 5 knarrs Autumn 860 Treaty signed
Iceland Settlement Thule 8 knarrs Summer 874 Althing established
Siege of Paris Francia 120 longships Winter 845 Ransom paid
09

Badges & Tags

Small markers for categorization, status, and rank -- like the tokens hung from a warrior's belt.

Iron Gold Blood Fjord Moss

In Context

Jarl Karl Berserker Navigator Healer Skald Shipwright Shieldmaiden
10

Dividers & Ornaments

Structural separators inspired by knotwork interlace and rune-stone border patterns.

Simple divider:


Rune divider:

ᚅ ᚟ ᚨ ᚟ ᚅ

Knotwork divider:

11

Blockquotes & Saga Text

Two voices: the calm chronicle and the firelit saga recitation.

Cattle die, kinsmen die, the self must also die; but glory never dies, for the one who is able to achieve it.

-- Havamal, Stanza 76

There was a man named Thorolf who dwelt at Mosfell. He was the son of Ornolf Fish-Driver, and his mother was Hallbera, daughter of a man from Hordaland. Thorolf was tall and strong, fair to look upon, and a great warrior.

-- Egil's Saga, Opening
12

Navigation

The longship's tiller bar -- directing the eye across the page as the steersman directs the keel.

13

Progress & Raid Bars

Tracking the advance of a longship fleet, the filling of mead stores, or the progress of a siege.

Fleet Readiness 78%
Battle Strength 45%
Voyage Progress 92%
Harvest Stores 61%