SKYSHIFT · BUREAU OF INTERFACE
UI Design
Inspired by official documents with serial codes and stamps.

Default panel surface. Every panel, card, or control that sits over live content — HUD buttons, the speed rack, landing cards, help cards, the codex header — uses the shared glass recipe: var(--glass-bg) (low-opacity dark tint), var(--glass-blur) (blur(32px) saturate(220%)), and var(--glass-edge) for the soft top highlight. The low fill lets the backdrop color bleed through as an obvious saturated hint; the strong blur keeps shapes abstract so text stays readable.

01  Color / what each color is for

Surfaces
Base#0a0d14
Deepest background — the page, and the empty channel behind cargo bars.
Card · bottom#11151f
Bottom half of the ID card gradient — the deeper, settled side.
Card · top#1a2030
Top half of the ID card gradient — the lifted, cooler side.
Lines · dividers
Line · default#d2dcf5 · 8%
Faintest divider — for separations that should barely register.
Line · strong#d2dcf5 · 16%
Default border for interactive pieces — buttons, racks, dials, cards.
Line · emphatic#d2dcf5 · 28%
Hover edge — the border brightens to confirm something's interactive.
Foreground
Paper#e8e4d6
Readable text, more important — names, headlines, primary values.
Paper · dim#b8b3a3
Readable but less prominent — idle buttons, body copy, supporting data.
Paper · mute#7a7668
Accent or decorative text, not important for gameplay — mostly group labels.
Paper · faint#524e44
Structural texture — dialog morse bars and other marks that should barely register against the dark card surface.
Accent
Active · gold#f5c26b
User actions, high visibility, important text — active buttons, key values, codes.
Accent · green#87d186
Informational, not interactive — status readouts like cargo fill and current log lines.
Semantic — alert states
Error#f0b4b4
Error toasts and inline failure messages — text, background, border.
OK · success#87d186
Success toasts and confirmation messages — background and border. Text reuses --accent (green).

02  Typography / what each size is for

DISPLAY · SPACE GROTESK VARIABLE
Skyshift
34 / 500 · page hero — this showcase only, not in-game
Leafsong
17 / 600 · primary object name — ship, station, or sector
Seedhaul
14 / 600 · codex drawer title
Grown-hull pod vessel of the Bio-Annex.
12 / 400 · body copy — lore text, descriptions
MONO · JETBRAINS MONO VARIABLE
BIO-42
11 / 700 · 0.08em · serial code on the ID card
// 04 · Seedhaul
10 / 500 · structural labels — stack groups, cargo rows
36.3k/43.2k +5/s
10 / 500 · cargo numbers — amount + rate

Stack labels — corner annotations

Muted mono comment lines that sit above HUD groups and name the corner they anchor. Pattern: // [grid-code] * [description]. Retired from the live game to reduce mobile clutter; kept here as design-system vocabulary. The game's one remaining mono comment — the elapsed-time readout — is styled separately as .speed-hud__elapsed so stack-label can evolve independently.

// NW1 * overview
NW corner · overview pane identifier
// SE1 * simulation speed
SE corner · speed HUD
// SW1 * zones, overview, settings
SW corner · control toggles
// NW2 * Codex Entry
Secondary NW slot · lore drawer
// NW1 * selected, viewing
Context variant · selection dossier

03  Buttons / icon toggles · default · active · soft

Backdrop uses the shared glass tokens (--glass-bg, --glass-blur, --glass-edge) — see §00 Surfaces. Buttons sit over the live starfield, and the saturated blur is what gives them readable contrast while the backdrop color still reads through.

DEFAULT
ACTIVE · IS-ON
SOFT · IS-SOFT  / auto / ambiguous state

04  Controls / speed rack · zoom dial

Same glass recipe as the buttons (--glass-bg + --glass-blur + --glass-edge) — the rack and dial are single pills over the starfield.

SPEED RACK
ZOOM DIAL
0.4×

05  HUD Controls / bottom-left · every toggle · speed · zoom

SPEED · PAUSE → 1× → 2× → 5×
ZOOM
0.4×
GRID · AUTO → ON → OFF
AUDIO · ON → OFF
VIEW MODE · ZONES
VIEW MODE · TRADE & HEALTH
VIEW MODE · BOTH OFF
HUD SEGMENT · SCROLLING
HUD SEGMENT · ALWAYS
HUD SEGMENT · NEVER
SPEED HUD · 1× RUNNING
// elapsed 00h:12m
// SE1 * simulation speed
SPEED HUD · 2× RUNNING
// elapsed 00h:12m
// SE1 * simulation speed
SPEED HUD · 5× RUNNING
// elapsed 00h:12m
// SE1 * simulation speed
SPEED HUD · PAUSED
// elapsed 00h:12m
// SE1 * simulation speed
CONTROLS · HIDDEN → COMPACT → FULL

06  Selection / top-left ID card · sector · stations · ships

The stack-label (// NW1 * selected, viewing) sits outside the card as constant flavor — type and size moved into a small mono subtitle (.id-type) under the id-name where they're easier to read. Serial code and seal take the nation color; body remains on the shared ink gradient.

Sector

06-A  SECTOR · WITH LORE
// NW1 * selected, viewing
Green Silence
Sector · coords (-1,1)
SCT-GR
Supports Stations
Farm · Medical Lab
Water Processing · Habitat
Environment: Bio Nebula
// NW2 * Codex Entry
Green Silence
The Bio-Annex breadbasket. Vast grown-hull farms nest in the deeper branches of Palo Celestia, tended by crews who rarely speak to outsiders.

Stations

06-B  STATION · HUB
// NW1 * selected, viewing
Iron Gate
Metal Forge · Large
HUB-M
Metals 30.6k/43.2k, +4/s
Mineral 32.8k/86.4k, −6/s
Reserved −8.0k
Producing Metals
06-C  STATION · BIO
// NW1 * selected, viewing
Bloomreach
Farm · Large
BIO-F
Food 36.3k/43.2k, +5/s
Inbound +2.1k
Water 20.7k/86.4k, −3/s
Producing Food
06-D  STATION · ORE
// NW1 * selected, viewing
Ironvein
Mine · Large
ORE-N
Ice 62.2k/115.2k, +3/s
Mineral 89.9k/115.2k, +2/s
Producing Ice
06-E  STATION · SKY
// NW1 * selected, viewing
Faint Echo
Observatory · Medium
SKY-O
Signal 19.0k/28.8k, +2/s
Producing Signal
06-F  STATION · FAR
// NW1 * selected, viewing
Last Anchor
Water Processing · Small
FAR-W
Water 12.1k/28.8k, +1/s
Ice 5.2k/28.8k, −2/s
Producing Water
06-G  STATION · IN CONSTRUCTION
// NW1 * selected, viewing
Cold Theory
Tech Factory · Medium
HUB-Z
Provisions 2.3k/4.8k
Inbound +420
Hulls 3.1k/4.8k
In Construction
06-H  STATION · EMIGRATING
// NW1 * selected, viewing
Spore Refuge
Medical Lab · Medium
BIO-L
Evacuation 60%
Boarding
Generational ship Transitus
Emigrating

Ships

06-I  SHIP · HUB · EN ROUTE
// NW1 * selected, viewing
Accord
Trader
HUB-07
Metals 1.6k/2.5k
Tech 700/2.5k
Route
HUB Iron Gate to
HUB Far Theorem
Flying
06-J  SHIP · BIO · IDLE
// NW1 * selected, viewing
Leafsong
Seedhaul
BIO-42
No Cargo 0/4.0k
Status
Last trade 23s ago
Looking for Traders
06-K  SHIP · ORE · EN ROUTE
// NW1 * selected, viewing
Grinder
Tanker
ORE-12
Water 9.4k/10.0k
Route
ORE Ironvein to
BIO Bloomreach
Flying
06-L  SHIP · SKY · EN ROUTE
// NW1 * selected, viewing
Wanderloft
Jumpship
SKY-03
Hyperdata 1.5k/2.0k
Route
SKY Faint Echo to
SKY Drifthollow
Flying
06-M  SHIP · FAR · IDLE
// NW1 * selected, viewing
Pathfinder
Trader
FAR-19
No Cargo 0/2.5k
Status
Last trade 47s ago
Looking for Traders

07  Overview - nations / NW1 pane · nations tab

Pane layout

07-A  NATIONS PANE · LAYOUT (HUB ACTIVE)
// NW1 * overview
Hub-Cluster Alliance
grows core systems
HUB
Tech factories: 3·Stations: 8
Builds stationstech-factory · water-processing · shipyard

Card states reference

07-B  NATION CARDS · IDLE STATES
// NW1 * nations, expansion
Hub-Cluster Alliance
grows core systems
HUB
Tech factories: 3·Stations: 8
Builds stationstech-factory · water-processing · shipyard
Bio-Annex
cultivates bio-prosperity
BIO
Farms: 3·Stations: 6
Builds stationsfarm · medical-lab · habitat
20th Mining Fleet
mines asteroid veins
ORE
Mines: 3·Stations: 7
Builds stationsmine · metal-forge
Skyshift Cooperative
explores deep space
SKY
Archives: 2·Stations: 4
Builds stationsarchives
Farshift Collective
scatters frontier outposts
FAR
Observatories: 2·Stations: 3
Builds stationsobservatory
Wayfarer-Ark Transitus
transports communities
WAY
Generational Ships: 1·Stations: 1
Builds stationsnone
Shore Leave
07-C  NATION CARDS · MID-EVENT (STRIKE THRESHOLDS)
// NW1 * nations, expansion
Hub-Cluster Alliance
grows core systems
HUB
Tech factories: 3·Stations: 8
Builds stationstech-factory · water-processing · shipyard
Surveying new sites 75%
Top sectors
• Abject Pride
• New Logic
• Border 02
Surveying
Hub-Cluster Alliance
grows core systems
HUB
Tech factories: 3·Stations: 8
Builds stationstech-factory · water-processing · shipyard
Building at Iron Gate · tech-factory · 45%
In Construction
Bio-Annex
cultivates bio-prosperity
BIO
Farms: 3·Stations: 6
Builds stationsfarm · medical-lab · habitat
Seeding new prospects 52%
Top sectors
• Overgrowth
• Green Silence
• The Fallow
Surveying
20th Mining Fleet
mines asteroid veins
ORE
Mines: 3·Stations: 7
Builds stationsmine · metal-forge
Prospecting new claims 38%
Top sectors
• Hearth
• Void of Silence
• Gap of Calamity
Surveying
Skyshift Cooperative
explores deep space
SKY
Archives: 2·Stations: 4
Builds stationsarchives
Charting new horizons 20%
Top sectors
• Blind Study
• Deep Space
• Not Here
Surveying
Farshift Collective
scatters frontier outposts
FAR
Observatories: 2·Stations: 3
Builds stationsobservatory
Seeking new frontiers 22%
Top sectors
• Long Decimal
• Thin Edge
• Cold Theory
Surveying
07-D  CONTRACT · BUILDING VIA CONTRACT
// SKY contracting BIO * habitat
Skyshift Cooperative
explores deep space
SKY
Archives: 2·Stations: 4
Builds stationsarchives
Building via contract with BIO Drifthollow · habitat · 45%
In Construction

08  Overview - wares / overview sidebar · wares tab

08-A  OVERVIEW · DEFAULT · NO WARE
// NW1 * overview
Overview
WaresShipments
Shipments in last
08-B  OVERVIEW · DROPDOWN OPEN
// NW1 * overview
Overview
WaresShipments
// None
// Metals 12.4k
// Food 8.7k
// Water 6.1k
// Ice 3.9k
// Mineral 2.7k
// Hyperdata 0.8k
Shipments in last

09  Overview - emigration / NW1 pane · emigration tab

// overview * NW1 pane content

Gen-ship dossier

09-A  GEN-SHIP · TAKING IT EASY (WAY)
// NW1 * selected, viewing
Transitus
Wayfarer-Ark
WAY-01
Crew status
enjoying shore leave
Destination
The Long Drift
Taking It Easy
09-B  GEN-SHIP · PREPARING TO JUMP
// NW1 * selected, viewing
Transitus
Wayfarer-Ark
WAY-01
Destination
The Long Drift
Departure T − 42s
Passengers
8,400 aboard
from 3 stations total
Preparing to Jump

Emigration controls

09-C  EMIGRATION CONTROLS · AUTO
// NW1 * overview
Emigration
» Mode
Emigration triggers automatically once a vast majority of sectors are populated.
» Share
Percentage of stations that will start emigrating out of the cluster.
09-D  EMIGRATION CONTROLS · MANUAL
// NW1 * overview
Emigration
» Mode
Emigration only triggers when you start it yourself.
» Share
Percentage of stations that will start emigrating out of the cluster.
» Trigger
Encourage station population to board generational ship and emigrate to another cluster.

Event log

Fourth tab in the overview. A FIFO list of notable world events — emigration start/end, station construction start/complete, new surveys, gen-ship arrivals. Each entry is timestamped with player-facing elapsed time and color-coded by category. Newest on top, capped at 200 entries. Persisted with the save.
09-E  OVERVIEW · LOG
// NW1 * overview
Log 6 / 200
12h:42m Emigration complete: 4 stations departed to The Long Drift
11h:58m Construction complete: Leafsong — Tech Factory, HUB
10h:17m Emigration started: 4 stations bound for The Pale Reach — ORE, BIO
08h:04m Survey started: Farm in sector B4 — BIO
06h:49m Gen-ship arrived: Causeway
03h:12m Construction started: Brackwater — Mine (M), ORE
09-F  OVERVIEW · LOG · EMPTY
// NW1 * overview
Log
Events will show up here as they happen:
  • Station construction
  • Emigration
  • Generational ship arrival

10  Codex & Log / collapse · codex · log

Three icon toggles outside the card's right edge. ChevronUp is always visible and collapses the card to a title-only strip; the other two hide with it. Book opens the codex drawer, Logs opens the trade log — either, both, or neither, and each hides itself when the selection has no info of that type.
10-A  CODEX OPEN · LOG CLOSED
// NW1 * selected, viewing
Leafsong
Seedhaul
BIO-42
Food 1.9k/4.0k
Medicine 880/4.0k
Flying
// NW2 * Codex Entry
Seedhaul
Grown-hull pod vessel of the Bio-Annex. Drifts between stations nested in the Palo Celestia tree nebula.
10-B  BOTH OPEN
// NW1 * selected, viewing
Leafsong
Seedhaul
BIO-42
Food 1.9k/4.0k
Medicine 880/4.0k
Flying
// NW2 * Codex Entry
Seedhaul
Grown-hull pod vessel of the Bio-Annex. Drifts between stations nested in the Palo Celestia tree nebula.
// NW2 * Ship computer log
Selling: Food
From: BIO Bloomreach 84% (36.3k/43.2k)
To: HUB Drifthollow 12% (1.7k/14.4k)
▸ Fly: Bloomreach → Drifthollow
  Deliver: 4.0k food
Default behavior: trade
10-C  COLLAPSED · title only
// NW1 * selected, viewing

11  Ship log / debug log · faction tint · emphasis rules

Three stacked treatments break the dense log into scannable chunks without adding height: dashed rule between ware groups echoes the id-card divider; faction-tinted code (BIO · HUB · ORE · FAR) lets the eye group rows by nation at a glance; focal + mute keeps the ware name and percentage in paper while dropping parenthetical inventory to paper-mute and the trailing reason to paper-dim italic. Compact footprint is preserved — numbers use the k formatter (38.7k vs 38,652).
11-A  SHIP LOG · ACTIVE HAULER · MULTI-LEG
// NW2 * Ship computer log
Selling: Medicine
From: HUB Last Resolve 82.3% filled (28.9k/35.2k)
To: BIO Bloomreach 22.4% filled (7.9k/35.2k)
Bonus: Provisions (8.1k on ship)
▸ Fly: Last Resolve to Bloomreach
  Dock: Bloomreach
  Deliver: 28.9k medicine
  Load: 8.1k provisions
  Fly: Bloomreach to Last Resolve
  Dock: Last Resolve
  Deliver: 8.1k provisions
  Orbit: Last Resolve
Default behavior: trade
11-B  SHIP LOG · IDLE TRADER
// NW2 * Ship computer log
Trader wants to fill at least 20.7% of cargo space
Water (sell): 44.7% (38.7k), no destination needs it, 3 most eligible:
 · BIO Bloomreach: 60.6% (38.4k +14.0k in)
 · HUB Far Theorem: 60.4% (34.8k)
 · HUB Last Resolve: 49.3% (28.4k)
Ice (buy): 56.5% (87.5k +10.0k in), no producer has surplus, 3 most eligible:
 · ORE Dustrock: 48.4% (83.6k)
 · ORE Ironvein: 43.6% (50.3k -10.0k out)
 · ORE Deepvein: 41.6% (71.9k)
Default behavior: trade

12  Landing page / index.html · cover · ledger · dossier · register

The cover page reuses the in-game passport vocabulary above the starfield — stack-labels, mono-caps straps, the .id-card chassis. The only piece unique to this surface is the gradient wordmark; everything else is HUD register applied at landing scale.

12-A  HERO · gradient wordmark

Skyshift

12-B  LANDING CAPTION · hero register
// FIVE NATIONS TRADE · BUILD · EMIGRATE
BIO · HUB · ORE · SKY · FAR
12-C  UNIVERSE PICKER · selected card gets gold title + border
12-D  SETTINGS PANEL · audio + savegame slots
Settings

» View

Show sector grid

» Audio

Announce station and ship names

» Browser Savegame

» File Savegame

Saved.
This save is from a different build of Skyshift and can't be loaded.
12-E  COLOPHON · numbered registry

13  App icon / iOS home-screen · squircle mask

iOS masks apple-touch-icon.png to a squircle on the home screen, so the home-screen icon insets the reticle (a tighter version stays in favicon.svg for browser tabs). Background is a 4-unit dashed paper-line grid, tuned strong enough to read at 180×180 — the dashes stand in for a projected HUD overlay behind the sighting glyph. Source is public/app-icon.svg; rasters are emitted by node dev/images/generate-app-icon.mjs.