«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
09-B  OVERVIEW · DROPDOWN OPEN
Overview
// 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.
Emigration triggers automatically once a vast majority of sectors are populated.
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.
Emigration only triggers when you start it yourself.
Percentage of stations that will start emigrating out of the cluster.
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