Single source of truth
AETHER & ASH
Every block below is the real component, exported from @/components/ui. Import from there when assembling the game — don't copy the markup out of this page. Each section lists the exact props and tokens that are load-bearing, plus the constraint behind them.
Colour, type & surfaces
The whole game is built from three surface tiers and two brand alignments. Everything below resolves to these tokens — no ad-hoc hex values in components.
Base · Deep Forest
Page, section and overlay surfaces. Darkest values sit at the back.
Card & Panel · Muted Moss Slate
Every raised surface in the game. Pair with border-forest-500/80.
Primary Brand · Light Alignment
Preservation, Sun-Gold, health, safe states.
Secondary Brand · Dark Alignment
Exploitation, Blight-Ash, cooldowns, rest states.
Channels · Energy & Failure
Two supporting channels that keep the two alignments from competing.
Text
Primary white on forest surfaces; ash-400 is the workhorse secondary.
tailwind.config.ts → theme.extendSix ramp families cover the entire product. Adding a colour outside these ramps needs a design review — that's the point of the constraint.Surface tiers
Base
Page
bg-forest-950Raised
Sidebar, table
bg-forest-900Card
Default panel
bg-forest-700Radii
rounded-md6px · Inline chips, tiny tags
rounded-lg10px · Buttons, inputs
rounded-xl14px · Nav rows, list items
rounded-2xl18px · Cards, panels
rounded-full9999px · Pills, dots, avatars
Elevation & glow
shadow-panelDefault resting elevation on a card
shadow-panel-lgModals, popovers, the top bar
shadow-glow-emeraldActive / light-alignment affordance
shadow-glow-violetExploitation affordance
shadow-glow-amberFlame / Blight-Ash affordance
shadow-glow-arcaneEnergy channel
shadow-glow-bloodFailure / depletion
shadow-glow-goldTimer-complete celebration
shadow-*Glows are not decoration. They mark the one thing on screen that wants a click, or the one thing that just became ready.Type scale
Wordmark, headings, labels, and a mono face reserved for anything that counts. Numerals are always tabular so timers don't jitter as digits change.
wordmark36px / 1.1AETHER & ASH
Logo / title only. Never for UI copy.
h130px / 1.2Wilderness Expeditions
Page titles. One per screen.
h220px / 1.3Ley-Nodes & Plots
Section headers, card group titles.
h316px / 1.4Solar Lily Expedition
Card titles, list item names.
subtitle14px / 1.5Cycle 214 · Tier II wilds · dusk
Supporting line beneath a header.
body14px / 1.65The ley lines thrum beneath the terrace. Siphon them while the Warden holds the ward.
Prose, event log entries, flavour text.
label11px / 1.4Mastery
All-caps eyebrow above values and bars.
numeric18px / 1.201:45
Timers and counters. Always tabular so digits don't jitter.
numeric-lg24px / 1.1$1,250
Hero currency counters.
font-mono + tabularAny value that changes over time must use the mono face with tabular figures. Proportional digits shift the layout on every tick, which reads as jitter at 10Hz.font-wordmarkCinzel is loaded for the logo and section marks only. It is not legible below 18px, so it never appears in body copy.Alignment pills & status badges
Alignment says which path an action belongs to. Status says what a place is doing right now. They are separate axes and never share a component.
Alignment
Preservation — Grow, tend and defend. Yields Sun-Gold and Mastery over time.
Exploitation — Siphon and strip. Yields Blight-Ash fast, at a cost to the world.
AlignmentPill · AlignmentToggleThe toggle commits the player to a path. The pill only labels one. Never use a pill where a choice is being made — a player who can't tell them apart will tap the wrong thing.Status badges
- Safe Haven
safe-havenNo hostile spawns. Cannot be raided while the ward holds. - Open
openAnyone may enter. Standard risk. - Restful
restfulRegeneration bonus applied to the occupant. - Guarded
guardedA warden or ward-dog is present. Reduced encounter rate. - Active
activeSomething is running here right now. - Closed
closedSealed or depleted. Entry blocked until the next cycle.
StatusBadge status=… size=… glow?glow is meant for exactly one badge in view at a time — the thing the player is standing in. Glowing everything is the same as glowing nothing.Composed — how they read together
Alignment says the action is dark. Status says the node is defended. The player can see both risks before committing energy.
ComposedAlignment on the left, action in the middle, status on the right, actions beneath. Keep this reading order consistent across every panel.Currency, vitals & profile
The top bar. Two currencies, two meters, one non-zero-based score, and the player identity pill that anchors the layout.
Currency
CurrencyPill currency=… size=… animated?animated eases the number to its new value so a payout reads as a tick-up. Keep it on the header counters only — animating a list of a hundred rows is noise.Vitality & score
Lethal encounters cost the full difference.
100% remainingSpent on expeditions. Restores at the Sanctuary and Restful sites.
85% remainingVitalityBar · MasteryMeter · ScoreChipHealth and Energy are capped meters. Mastery, Renown and Wounds are unbounded counters, so they get a chip instead of a bar — a bar implies a ceiling the player can't see.Player profile
Full variant, then the compact one. The compact variant drops the subtitle and the trailing balance — it survives down to a 380px viewport where the full pill would wrap.
ProfilePill size=…The level bar is the same ProgressBar as the vitals at xs height. One component, two jobs — if level progress ever needs a different visual, it should be a different component.Countdowns & cooldowns
The core verb of the game. Use the transport controls to drive one to completion and watch the state transition to Ready to Claim.
Cooldown cards
Solar Lily Harvest
Pressing completes on its own. Claim before the next cycle.
Ley-Node Siphon
Long draw, heavier payout, drains Blight-Ash into the node.
Ward Upkeep
Keeps the terrace warded. Skipping it invites raiders.
CountdownCard durationSec=…Use Skip to ready to jump straight to the completed state instead of waiting out a four-minute cycle. The bar fills toward ready — it never refills from zero, which would read as a glitch.Cooldown row — the same hook, no card
Energy regen
01:45
useCountdown({ durationMs })The hook is the reusable part. It ticks off an absolute end timestamp, so it stays accurate through tab throttling, and it exposes percent for the bar plus isComplete for the transition.Fast-travel cards
Right-sidebar rows. Select one to see the selected treatment; the active row is the only place a status badge gets its glow.
Fast travel
6 knownSelected destination
Sun Temple
BankVault of the old order. Your deposits are untouchable here.
- Region
- The Terraces
- Travel
- 2m
- Energy
- −15
- Yield
- +$300
Variants
Top: selected, no travel time. Middle: resting. Bottom: a closed destination, still selectable so the player can read why it's sealed.
LocationCard · LocationListThe row is the hit target, not the icon. Selection is a shared framer-motion layoutId scoped per instance, so two lists on the same page don't animate against each other.Notification suite
Five variants on react-hot-toast. Each carries its own channel label, icon and glow so the player can read the outcome from the corner of their eye.
Trigger buttons
lightActionToast · darkActionToast · errorToast · timerCompleteToastNamed helpers in @/lib/toasts so gameplay code never names a variant directly. Reach for pushToast when the copy has to come from a quest log or a server message.Static reference
Light · Preservation
Harvested Solar Lily
Light · Preservation
Dark · Exploitation
Siphoned Ley-Node
Dark · Exploitation
Blocked
Not enough energy to enter the wilds
Blocked
Cycle complete
Your Sanctuary Plot is ready!
Cycle complete
Aether & Ash
The cycle turns
Aether & Ash
GameToast variant=…The static row is here for pixel comparison — it renders the same component the live toasts use, so what you see here is exactly what fires in game.Buttons & inputs
Buttons are named for what they do to the world. Destructive and dark-alignment actions get their own treatment so a misclick is hard.
Variants
Button variant=…primary for the one thing you want done. flame and danger are the only two that get a glow — they are the only two that can cost you something.Sizes
Button size=…Minimum 28px hit target on desktop, 36px minimum anywhere tappable. Thexs size is for dense rows and demo controls only.Inputs
Armed stateAnything irreversible gets a two-step confirm. The destructive button appears only after intent, so a stray click can never raze a plot.The dashboard, assembled
Every block above, in the arrangement the real dashboard uses. This is the reference for assembling the game screens.
Active cycles
Solar Lily Harvest
Ley-Node Siphon
Ward Upkeep
Ledger
- LightSolar Lily harvested at Ashfen Mire4m ago+$300
- DarkLey-Node siphoned at Thornhollow22m ago+400
- LightWard reinforced on Terrace III1h ago−15