Living Document · v0.1

Horde

Design System

❦

Witty medieval manuscript. If the Bayeux Tapestry had a snarky monk writing the UI copy. See home · spec doc

Principles

Principle 1

Craft over chrome.

No default Material components. Every button reads as made, not rendered.

Principle 2

Legibility first.

Ornamentation serves reading, never fights it. Medieval ≠ illegible.

Principle 3

Weight in every interaction.

Clicks feel consequential. No instant transitions for meaningful actions.

Principle 4

The world is doomed and that's funny.

Copy is wry, never sincere. Never cutesy. Tired battlefield medic making a joke.

II.

Voice

The narrator has seen this before and is mildly amused. Never break the fourth wall. Never lowercase-tone-perfect. Errors are observations, not apologies.

Generic

Loading…
Please wait
Insufficient resources
Invalid code
Alliance dissolved
Horde incoming
You win!
End Turn
Declare War

Horde

“Saddling the horses…”
“Patience. Others conspire.”
“Your coffers disagree.”
“No such game. Or they locked you out.”
“They will not forget this.”
“The horizon darkens.”
“The crown is yours. Briefly, perhaps.”
“Rest the standard”
“Raise the banner”

III.

Color

Ink (dark, primary)

ink-900

#1a1410

ink-800

#2a221a

ink-700

#3d3129

ink-600

#5a4a3f

ink-500

#8a7868

ink-400

#b5a590

Parchment (light)

parchment-light

#fbf7eb

parchment

#f4ead5

parchment-dark

#e8d8b3

parchment-deep

#d8c190

Pigments (players)

pigment-crimson

#8b1a1a

Red player

pigment-azure

#1e3a8a

Blue player

pigment-verdant

#2d5016

Green player

pigment-saffron

#b8860b

Yellow player

Tiles

tile-grain

#d4a84a

tile-wood

#3d6b2d

tile-stone

#6b6b63

tile-gold

#b8860b

tile-desert

#d6c8a8

IV.

Typography

Display — Cormorant Garamond

Horde

The horizon darkens

Section header

Body — EB Garamond

A hex-based political conquest game for 2–4 players. Build cities, form alliances, and defend against the Horde. First to 15 victory points wins — but if the Horde devastates the map three times, everyone loses.

Secondary text. Same face, smaller. Used for descriptions, hints, less-important info.

Mono — JetBrains Mono

Round 07 · Turn: Red · 14 VP

ABCDEF invite code

Surfaces

Panel (ink)

Primary container

Default panel. Ink-800 background, ink-600 border. Used for everything that needs to feel contained but not highlighted.

Panel (parchment)

Inverted surface

Parchment-textured panel for moments that need warmth — end-game screens, tech card details, narrative beats. Use sparingly.

VI.

Controls

Buttons

Input

Invite code

VII.

Player identity

Each player is identified by a medieval pigment + initial. Banner art (optional) can be generated per-game.

Red

crimson

Blue

azure

Green

verdant

Yellow

saffron

VIII.

Pieces

Hand-coded ink-sketch SVG. Inherit color from currentColor so they tint per player pigment or surface. Designed to read at 20–200px.

Settlement

1 grain · 1 wood · 1 stone

City

2 grain · 2 stone

Army

1 grain · 1 wood

Legibility test — City at 16 / 24 / 40 / 64 / 96px

Player-color tints

crimson

azure

verdant

saffron

IX.

Resources

Same hand-coded SVG treatment. These appear in resource bars, build costs, trade modals, production previews.

Grain

#d4a84a

Wood

#3d6b2d

Stone

#8a7868

Gold

#b8860b

Inline cost (what it looks like in UI)

Build settlement

111

Upgrade to city

Build road

Motion

Grammar of movement. Hover any button above to feel it — `-1px` lift, 150ms. Click to feel the press. Longer animations (combat reveal, horde approach) come in Phase 5+.

Action	Duration	Curve
Hover	120ms	ease-out
Click	80ms	ease-in
Modal open	220ms	ease-out
Combat reveal	600ms pause + 400ms	ease
Horde track tick	400ms	ease-in-out