«00Index BUREAU OF INTERFACE

Skyshift UI Design

Inspired by official documents with serial codes and stamps.

01  Color // what each color is for

Surfaces
Void#050709
Deepest void — body bg on landing pages under the nebula canvas; matches the browser theme color.
Base#0a0d14
Default page background, 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 · lore 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

Section bands

// Section header
Producing

Page masthead

«00Index BUREAU OF CARTOGRAPHY

Skyshift Lore

An atlas of the settled universe — nations, ships, wares, stations, sectors.

03  Buttons // icon toggles · default · active · soft

DEFAULT
ACTIVE · IS-ON

04  Controls // zoom dial

ZOOM DIAL
0.4×

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

ZOOM
0.4×
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
SPEED HUD · 2× RUNNING
// elapsed 00h:12m
SPEED HUD · 5× RUNNING
// elapsed 00h:12m
SPEED HUD · PAUSED
// elapsed 00h:12m

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

Sector

06-A  SECTOR · WITH LORE
Green Silence
Sector · coords (-1,1)
SCT-GR
Supports Stations
Farm · Medical Lab
Water Processing · Habitat
Environment: Bio Nebula
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
Iron Gate
Metal Forge · Large
HUB-M
▲ Produces
Metal 30.6k/43.2k, +4/s
▼ Consumes
Mineral 32.8k/86.4k, −6/s
Reserved −8.0k
Producing
06-C  STATION · BIO
Bloomreach
Farm · Large
BIO-F
▲ Produces
Food 36.3k/43.2k, +5/s
Inbound +2.1k
▼ Consumes
Water 20.7k/86.4k, −3/s
Producing
06-D  STATION · ORE
Ironvein
Mine · Large
ORE-N
▲ Produces
Ice 62.2k/115.2k, +3/s
Mineral 89.9k/115.2k, +2/s
Producing
06-E  STATION · SKY
Faint Echo
Observatory · Medium
SKY-O
▲ Produces
Signal 19.0k/28.8k, +2/s
Producing
06-F  STATION · FAR
Last Anchor
Water Processing · Small
FAR-W
▲ Produces
Water 12.1k/28.8k, +1/s
▼ Consumes
Ice 5.2k/28.8k, −2/s
Producing
06-G  STATION · IN CONSTRUCTION
Cold Theory
Tech Factory · Medium
HUB-Z
▼ Consumes
Provisions 2.3k/4.8k
Inbound +420
Hulls 3.1k/4.8k
In Construction
06-H  STATION · EMIGRATING
Spore Refuge
Medical Lab · Medium
BIO-L
Emigration 60%
Boarding
Generational ship Transitus
Emigrating

Ships

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

07  Stations Timelapse Log // overview log tab

07-A  OVERVIEW · LOG · 20D ELAPSED · SCRUBBED TO 14D:00H

08  Overview - nations // NW1 pane · nations tab

Pane layout

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

Card states reference

08-B  NATION CARDS · IDLE STATES
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
08-C  NATION CARDS · ACTIVE STATES
Hub-Cluster Alliance
grows core systems
HUB
Tech factories: 3·Stations: 8
Builds stationstech-factory · water-processing · shipyard
Building station at Iron Gate · tech-factory · 45%
Wayfarer-Ark Transitus
transports communities
WAY
Generational Ships: 0·Stations: 0
Builds stationsnone
Generational ship status Arriving · 1:26:04
Wayfarer-Ark Transitus
transports communities
WAY
Generational Ships: 1·Stations: 1
Builds stationsnone
Generational ship status
• Crew enjoying shore leave
• Waiting for emigration
Wayfarer-Ark Transitus
transports communities
WAY
Generational Ships: 1·Stations: 1
Builds stationsnone
Generational ship status
Emigration in progress
08-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%

09  Overview - wares // overview sidebar · wares tab

09-A  OVERVIEW · DEFAULT · NO WARE
Overview
Ware shipments in last 2h
09-B  OVERVIEW · DROPDOWN OPEN
Overview
Ware shipments in last 2h
// None
// Metal 12.4k
// Food 8.7k
// Water 6.1k
// Ice 3.9k
// Mineral 2.7k
// Hyperdata 0.8k

10  Overview - emigration // NW1 pane · emigration tab

Generational ship dossier

10-A  GENERATIONAL SHIP · TAKING IT EASY (WAY)
Transitus
Wayfarer-Ark
WAY-01
Ship status
Waiting for emigration
Crew status
Enjoying shore leave
Destination
The Long Drift
Taking It Easy
10-B  GENERATIONAL SHIP · PREPARING TO JUMP
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

10-C  EMIGRATION CONTROLS · AUTO
Emigration
Stations send their crew to the generational ship, which emigrates beyond the charts — freeing sectors for new settlement.
// Mode
Emigration triggers automatically once a vast majority of sectors are populated.
// Share
Percentage of stations that will start emigrating out of the cluster.
10-D  EMIGRATION CONTROLS · MANUAL
Emigration
Stations send their crew to the generational ship, which emigrates beyond the charts — freeing sectors for new settlement.
// 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.

11  Lore & Log // collapse · lore · 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 lore drawer, Logs opens the trade log — either, both, or neither, and each hides itself when the selection has no info of that type.
11-A  LORE OPEN · LOG CLOSED
Leafsong
Seedhaul
BIO-42
Food 1.9k/4.0k
Medicine 880/4.0k
Flying
Seedhaul
Grown-hull pod vessel of the Bio-Annex. Drifts between stations nested in the Palo Celestia tree nebula.
11-B  BOTH OPEN
Leafsong
Seedhaul
BIO-42
Food 1.9k/4.0k
Medicine 880/4.0k
Flying
Seedhaul
Grown-hull pod vessel of the Bio-Annex. Drifts between stations nested in the Palo Celestia tree nebula.
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
11-C  COLLAPSED · title only

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

12-A  SHIP LOG · ACTIVE HAULER · MULTI-LEG
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
12-B  SHIP LOG · IDLE TRADER
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

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

13-A  HERO · gradient wordmark

Skyshift

13-B  LANDING CAPTION · hero register
// FIVE NATIONS TRADE · BUILD · EMIGRATE
BIO · HUB · ORE · SKY · FAR
13-C  START ACTIONS · FIRST VISIT · two Enter-universe buttons, Settled featured in gold
13-D  START ACTIONS · RETURNING · prominent Continue over small "Start new" pair
13-E  SETTINGS PANEL · audio + savegame slots
Settings build 2024-05-02

// View

Show sector grid

// Audio

Announce station and ship names

// Browser Savegame

// File Savegame

13-F  TOAST · unified top-center notification · neutral and .toast--ok variants
Saved.
Exported.
This save is from a different build of Skyshift and can't be loaded.
13-G  LANDING NAV · two-tier · prominent Orientation + Lore over dim utility links
13-H  LOAD ERROR · shown by /universe or /start/:preset when the route can't boot

Load error

Can't load universe

Save file is not a Skyshift save.

Show details 
Missing or invalid field: emigrationManager.emigrantLaunchState
13-I  LOAD ERROR · CLEAR-SAVES PENDING · 1.5s pulse before the destructive confirm appears

Load error

Can't load universe

Save file is not a Skyshift save.

···
13-J  LOAD ERROR · CLEAR-SAVES CONFIRM · full-red button wipes every slot, X cancels back to idle

Load error

Can't load universe

Save file is not a Skyshift save.

14  Loading // route click → first Game.update()

14-A  ID-CARD PLACEHOLDER · top-left chassis, pulsing bar is the hero element
Skyshift
Entering universe
// standby