Color Palette
Colors derived from the game's own visual language — cave darkness, parchment warmth, forge fire, moss and mineral.
Proposed Palette
The strategy document defined 6 core colors with general direction: "Dark background + warm text + organic accents. Never pure white. Never artificial colors."
Refined System
Extended with surface hierarchy, tints/shades for each accent, neutral scale, and verified WCAG contrast ratios.
Contrast ratios verified: Primary text on base background exceeds WCAG AAA (10.2:1). Forge accent on dark backgrounds meets AA (5.8:1). All interactive elements maintain at least 4.5:1.
Type System
Three typefaces that bridge the scholarly and the organic — like an alchemist's notebook written with both precision and wonder.
Type Direction
"Serif with character — something evoking old books, cartography, craftsmanship. Not gothic, not generic fantasy. Think 17th century alchemy encyclopedia."
"Readable sans-serif with personality — not corporate Helvetica/Roboto. Something humanist, slightly imperfect."
"Possible handwritten weight for quotes or lore elements."
Selected Typefaces
Craft. Explore. Unearth.
From knapped flint to tempered steel
A high-contrast Garamond revival with scholarly elegance. Its fine serifs and sharp contrast feel like engraved lettering on aged copper plates — learned, precise, subtly dramatic.
An uncompromising survival sandbox where every tool is earned, every season matters, and ancient mysteries wait beneath the surface. The world remembers every choice, every structure, every forge you ignite.
Adobe's humanist sans-serif. Warm terminals, open apertures, excellent readability at all sizes. Feels approachable without being casual — like a well-made tool.
"When the sky turns to rust, you'll want to be underground."
For section labels, handwritten annotations, lore quotes, and UI details that need a human, informal touch. Used sparingly — the ink in the margins.
Type Scale
3rem / 48px Craft. Explore. Unearth.
2.25rem / 36px A World That Breathes
1.75rem / 28px Every Tool Earned
1.35rem / 22px What Lies Beneath
1.1rem / 18px Geological Ages of Discovery
1rem / 16px Shape the world one stone at a time. From your first flint knife to a medieval township, every age of progress is earned through patience and skill.
0.875rem / 14px 6000+ community mods · Active forums · Comprehensive wiki
0.75rem / 12px Feature · Survival Sandbox
1.1rem / 18px Handcrafted since 2016
Spacing & Grid
An 8px base unit system. Every margin, padding, and gap is a multiple of 4px or 8px — creating rhythm without rigidity.
Spacing Scale
Grid
Max width: 1200px · Container padding: 32px · Column gap: 24px · 12-column grid with fluid columns. Breakpoints: mobile (<600px), tablet (600–900px), desktop (>900px).
UI Components
The building blocks of the interface — each one designed to carry the warmth and weight of the brand.
Navigation Bar
Sticky, translucent. Logo + ecosystem links + CTA. Always visible.
Buttons
Links
Cards
Every Tool Earned
From knapped flint to tempered steel — every age of progress earned through patience and genuine skill.
A World That Breathes
Four seasons reshape the land. Crops follow real growing cycles. Rivers freeze. Wildflowers bloom.
What Lies Beneath
Ancient ruins. Corrupted creatures. A parallel dimension that bleeds through reality during temporal storms.
Mod Cards
Expanded Foods
New cooking recipes, ingredients, and food preservation mechanics.
Better Ruins
Handcrafted ruins and structures to discover while exploring the world.
Testimonials
On a completely different level from any survival game I've ever played.
— Community review, vintagestory.atThe best survival game I've ever played. Nothing else comes close to the depth.
— Community review, vintagestory.atSection Dividers
Artisanal separators — not just lines. Each carries the feeling of a hand-drawn mark.
Day Theme Extension
An optional warm light palette for contexts where readability in daylight matters —
primarily Wiki and Mod Repository. Activated via data-theme="light" on the root element.
The dark theme remains the canonical brand expression.
Design principle: The light theme is parchment, not paper. Every surface carries warmth — cream, sand, aged linen. Pure white (#fff) is never used as a background. The emotional register shifts from "cave firelight" to "workshop by a window" — still artisanal, still warm, just lit differently.
#f4ede3
#ebe2d6
#e0d5c7
#f9f5f0
#d5c9ba
#2c2418
#584c3c
#887a6a
#b5a898
Contrast ratios (light mode): Primary text (#2c2418) on base (#ebe2d6) = 11.4:1 (WCAG AAA ✓). Forge accent (#c07830) on base = 4.7:1 (WCAG AA ✓). Moss text (#527840) on base = 5.2:1 (AA ✓). Mineral text (#3a7f74) on base = 4.6:1 (AA ✓). All interactive elements ≥ 4.5:1.
Expanded Foods
New cooking recipes, preservation methods, and nutrition mechanics for the aspiring chef.
Better Ruins
Handcrafted ruins and structures scattered across the world, above and below ground.
Primitive Survival
Fishing, trapping, and irrigation systems inspired by real primitive technology.
Knapping — The First Tool
Before the forge, before the kiln, there was stone against stone.
Knapping is the process of striking flint against a hard surface to create sharp-edged stone tools. In Vintage Story, this is your first interaction with the crafting system — and a preview of the depth that awaits in every subsequent technology tier.
Tip: Hold the stone tool against the knapping surface and click to remove material. The grid pattern shows which squares to clear.
When to use light mode:
- Wiki — Long-form reading benefits from light backgrounds (reduced eye strain in daylight)
- Mod Repository — Browsing/comparison tasks are easier with high-contrast light UI
- User preference — Toggle available, dark theme is always the default
When to keep dark mode:
- Main Page — The cinematic, atmospheric sell requires dark backgrounds
- Purchase Page — Emotional close benefits from the immersive dark treatment
- Default for all pages — Light mode is opt-in, never forced
Grain overlay adaptation: In light mode, the SVG grain uses
mix-blend-mode: multiply
at 3.5% opacity (vs. 2.5% in dark mode). This preserves the organic, textured feel on parchment
surfaces — like aged paper under natural light. The grain prevents the "flat digital" look
that plagues most light themes.
Implementation: Toggle via
document.documentElement.setAttribute('data-theme', 'light').
All CSS variables override automatically. Store preference in
localStorage
and respect prefers-color-scheme
media query as initial hint — but never auto-switch. The user must explicitly choose.