⚜ Anno of the Iron Reign · MMXXVI ⚜

A Folio of the Free Companies

This folio governs every parchment, panel and pressed seal in the chronicle. Inks, gilt, leather and wax — drawn from the Main Menu, Loading Screen, Company Selection and Delete Company popup, codified for every screen yet to be writ.

I.

Inks, Gilt & Wax

Four palettes carry the whole game: parchment inks for legible text, gilt for chrome and emphasis, wax-red for blood & danger, and the deep tavern darks that backdrop everything.

Parchment & Inks For long-form text, names & signatures, and any "open page" surface.
Paper--paper#E3D3B0
Paper Deep--paper-deep#CDB88A
Paper Shade--paper-shade#B39A6A
Paper Edge--paper-edge#8E764A
Ink--ink#1A1410
Ink Soft--ink-soft#3D2F23
Ink Faint--ink-faint#6B5A44
Foxing--foxing#7A4A1F
Gilt Chrome, type emphasis, fillets, button strokes. Always painted as a top-light gradient — never flat.
Gold Pale--gold-pale#F4DC94
Gold Light--gold-light#E8CF7E
Gold Bright--gold-bright#C9A040
Gold--gold#9C7A2C
Gold Deep--gold-deep#8A6818
Gilt Gradient--grad-giltlight → bright → deep
Gilt Rich--grad-gilt-richtitle display
Fillet Rule--grad-filletdivider gradient
Wax & Blood Reserved for danger, destructive actions, the wax seal and the tiny ⚜ marks beside primary buttons.
Wax Bright--wax-bright#A83333
Wax--wax#7D1D1D
Wax Deep--wax-deep#5A1010
Wax Sealradial blendstamp gradient
Tavern Dark Backdrop only. Pure pitch, hearth browns, wood-grain blacks. Always paired with the candle-pool gradient.
Pitch--pitch#0A0806
Hearth 3--hearth-3#0A0503
Hearth 2--hearth-2#1A0D06
Hearth 1--hearth-1#3A2516
II.

A Hand for Every Voice

Three typefaces govern the chronicle. IM Fell English SC for all titles, buttons and labels — its tracking carries the medieval cadence. IM Fell English (italic) for body, names and quiet captions. Cormorant Garamond reserved for long parchment text where IM Fell becomes too textured.

Display Title IM Fell English SC · 700 · 62px · 0.10em
The Free Companies
H1 — Loading Title IM Fell English SC · 700 · 38px · 0.32em
The Free Companies
H2 — Page Title IM Fell English SC · 700 · 22px · 0.32em
CHOOSE THY COMPANY
H3 — Modal Title IM Fell English SC · 700 · 20px · 0.28em
DELETE COMPANY
Eyebrow IM Fell English SC · 12px · 0.28em · uppercase
FOLIO · CHAPTER ONE
Caption / Slot Label IM Fell English SC · 10px · 0.30em · gold@55%
Founded · Late Autumn build
Body Prose IM Fell English · 15px · 1.55 · paper@92%
Strike Halric's Hand from thy chronicles? This deed cannot be undone, nor the parchment unwritten.
Italic Aside IM Fell English Italic · 14px · 0.04em · gold@70%
— a chronicle is opened in many hands —
Name (Small Caps) IM Fell English SC · 16px · 0.16em · gold-light
HALRIC'S HAND
Button Label IM Fell English SC · 12px · 0.28em · uppercase
START GAME
Version Tag IM Fell English Italic · 11px · 0.05em · gold@50%
Folio v. 0.4 — Late Autumn build
III.

Measure & Margin

An eight-step scale, doubling roughly every two stops. Use the smaller stops inside panels (rules, padding, button gutters); the larger stops between modules.

S-1
4px
S-2
8px
S-3
12px
S-4
16px
S-5
24px
S-6
32px
S-7
48px
S-8
64px
Radii — almost square
R-0 · 0px · raw edge
R-2 · 2px · default
R-4 · 8px · book corners
IV.

Fillets & Flourishes

A small kit of ornaments carries the chronicle's voice. Use sparingly — a single fillet under a title, one fleur per heading, two ⚜ marks bracketing a primary button.

Gilt Fillet · under titles
Short Fillet · in panels
Fillet with Heart-Pall
Heart-Pall ❦ · cover dividers
Fleur ⚜ · primary marker
Cross ✠ · destructive marker
START GAME
Wax-fleur Bracketing
⚜ ANNO MMXXVI ⚜ Anno Tag · corner flourish
V.

Tables, Panels & Leather

Four canonical surfaces. Tavern table fills the screen. Panel hosts modals & dialogs. Parchment is reserved for written content. Leather is for book covers and presented objects.

Tavern Table --grad-tavern + noise
Dark Gilt Panel --grad-panel + gilt double-rule
Parchment paper → paper-deep
Leather Cover 82362a → 5a2218 → 3d160c
VI.

Pressed & Gilded Actions

Six button variants cover the whole game. All share the same chrome — dark interior, gilt 1.5px stroke, inset highlight, drop shadow — only the fill, label and ornament change.

Primary · Start / Confirm Used once per screen, for the affirmative action. Wax-fleur bookends, oversized padding (13×44), tracking 0.32em.
Secondary · Default Gilt The workhorse. Cancel buttons in modals, secondary menu items, "Open in Library" — anything gilt and quiet.
Destructive · Wax Wax-red fill. Always paired with a gilt Cancel of equal width in confirmation dialogs.
Ghost Destructive Lower-emphasis destructive — for inline slot deletes beneath each company. Wax-deep border & label, brightens on hover.
Parchment · For Vellum Surfaces Light variant for buttons sitting on parchment maps or inked vellum. Dark ink label on parchment fill, foxing-brown rule, wax-red glyph that intensifies on hover.
VII.

Panels, Modals & Bars

Composite components built from the tokens above. Each one already lives in the game — these are the canonical specs other screens should reuse verbatim.

Confirmation Modal · 440px
Form Modal · 520px · multi-field charter
Loading Bar · 420px gilt-on-dark
THE FREE COMPANIES
Charting the territory…
6px tall, 1px gilt stroke, gilt fill with inner highlight + soft glow
Page Header · with fillet
CHOOSE THY COMPANY
— a chronicle is opened in many hands —
Slot Label & Empty Slot
+
Found a
Company
Empty Slot · dashed gilt outline
HALRIC'S HAND Founded · March 4th, 2026 Cover Title · small caps + italic date
VIII.

Candle & Quill — Motion

Every animation in the chronicle is small, slow and warm. No springs, no bounce — only flicker, drift and the soft entry of pressed wax.

flicker 4.5s ease-in-out infinite opacity wobble on the candle pool — never below 0.92, never above 1.05
drift 9s linear infinite alternate dust motes glide -40y / +20x — slow enough to feel like still air
panel-in 0.32s cubic-bezier(.2,.7,.3,1) opacity 0→1, translateY -12px→0, scale 0.97→1 — the press of a wax seal
dots 1.6s steps(4) infinite "Charting the territory" — three dot stops, no smoothing
candleFlicker irregular 5-stop loop scaleY 0.94–1.04 + opacity wobble for any flame element
hover-lift 0.25s ease books rise translateY(-6px) on hover, with a soft gilt halo behind
IX.

Where to See It Live

Every token, ornament and component on this page traces back to one of these four screens. Open them side-by-side as the source of truth when designing new chapters.

⚜ MAIN MENU Display title, primary & secondary gilt buttons, the candlelit tent backdrop, fleur-bracketed primary action.
⚜ LOADING SCREEN H1 title, status italic, the canonical 420px gilt progress bar, candle-flicker on the table backdrop.
⚜ COMPANY SELECTION Page header pattern, leather book covers, empty slot, ghost-destructive slot delete, Return button.
⚜ DELETE POPUP Confirmation modal, panel chrome, gilt + wax button pair, close button, panel-in entry animation.
Folio v. 0.4 · Late Autumn build · Drawn at the long table by candlelight