Starwind

01 · Color Palette

Backgrounds

Decoration — borders, fills, dots (never text)

Text — AA-compliant on --deep

Never apply CSS opacity to text — use --text-muted / --text-disabled instead.

Text accents — brighter, interactive

Station type & specialty

02 · Typography

Three families, loaded via <link> in index.html.

Type scale

Each token has matching --fs-*, --lh-*, --fw-* vars. Compose with font: var(--fw-x) var(--fs-x)/var(--lh-x) var(--font-x).

03 · Layout System

Viewport & root

Borders & radius

Scanlines (CRT)

One global <div class="scanlines"> in App.tsx, pointer-events: none; z-index: 9999, always on.

background: repeating-linear-gradient(
  to bottom,
  transparent 0px, transparent 3px,
  rgba(0,0,0,0.15) 3px, rgba(0,0,0,0.15) 4px
);

Panel flex pattern

.panel-root {
  flex: 1;            /* fill available space */
  display: flex;
  flex-direction: column;
  min-height: 0;      /* allow scrolling children */
  overflow: hidden;   /* or overflow-y: auto when scrollable */
}

04 · Icons & Glyphs

Starwind uses no icon font or SVG sprite — every icon is a Unicode glyph rendered in a colored <span>. Module/system icons live as components in src/components/icons/; planet icons come from getPlanetIcon() in engine/travel.ts; the rest are inline in component JSX.

Module & system icons src/components/icons/

Default size 16px via size prop. ScannerIcon uses --cyan; ShieldIcon & RepairIcon render in currentColor (purple / cargo in context). The schematic maps these via ICON_MAP keyed on module type.

Planet-type icons getPlanetIcon()

Tinted at render with getPlanetColor() (mining = purple, agriculture = green, technology = blue).

Bars, status & checkboxes

Navigation, arrows & waypoints

Notifications & trade markers

Separators & utility

05 · Window Chrome OS Windows

Every panel and modal is drawn as a shipboard OS window — the in-fiction STARWIND OS. A window has three parts: a title bar, a body, and an optional status bar footer. Title and status bars sit one shade lighter (var(--hull)) than the body (var(--deep)) so the chrome reads as window furniture. All of it derives from the .chrome-bar family in global.css.

Anatomy

Title-bar elements

Window controls

Each control is an 18×16px mono glyph in a 0.5px solid var(--panel) box. Flat, no shadow; only border & text color change on hover, instantly.

Status-lamp variants

Window glyph & label reference

CSS

/* global.css — window chrome */
.chrome-bar {                /* title bar */
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--hull);   /* chrome shade, lighter than body */
  border-bottom: 0.5px solid var(--panel);
  flex-shrink: 0;
}
.chrome-bar-dots { display: flex; gap: 5px; }
.chrome-bar-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chrome-bar-dot.red   { background: var(--negative); }
.chrome-bar-dot.amber { background: var(--accent-amber); }
.chrome-bar-dot.green { background: var(--positive); }
.chrome-bar-glyph { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--accent-cyan); }
.chrome-bar-label {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase;
}
.chrome-bar-spacer { flex: 1; }
.chrome-bar-controls { display: flex; gap: 6px; }
.chrome-bar-ctrl {
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1;
  color: var(--text-muted); width: 18px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--panel); border-radius: 3px;
}
.chrome-bar-ctrl:hover       { border-color: var(--cyan);  color: var(--accent-cyan); }
.chrome-bar-ctrl.close:hover { border-color: var(--alert); color: var(--negative); }

.status-bar {                /* footer */
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px; background: var(--hull);
  border-top: 0.5px solid var(--panel);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); letter-spacing: 0.04em; flex-shrink: 0;
}

.os-window { position: relative; }   /* HUD corner brackets */
.os-window-corner {
  position: absolute; width: 10px; height: 10px;
  border: 0 solid var(--cyan); opacity: 0.55; pointer-events: none;
}
.os-window-corner.tl { top:5px; left:5px;  border-top-width:.5px;    border-left-width:.5px; }
.os-window-corner.tr { top:5px; right:5px; border-top-width:.5px;    border-right-width:.5px; }
.os-window-corner.bl { bottom:5px; left:5px;  border-bottom-width:.5px; border-left-width:.5px; }
.os-window-corner.br { bottom:5px; right:5px; border-bottom-width:.5px; border-right-width:.5px; }

06 · Buttons

Base states (global.css)

Variants

07 · Inputs & Selects

Scrollbar

8px wide, --hull track, --panel thumb, 3px radius.

08 · Panels & Cards

Panel backgrounds

Layout classes

Examples

Card classes & state variants

09 · Tabs

/* tab button */
background: none; border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted);
font-family: var(--font-display); font-size: var(--fs-micro);
font-weight: 700; text-transform: uppercase;
transition: none;        /* snap — no smooth transitions */
/* active */ color: var(--accent-cyan); border-bottom-color: var(--cyan);

Tab badge (count): amber pill, min-width: 20px; height: 18px; border-radius: 9px, --void text, badge-pulse 2s step-end.

10 · Stat Bars

Block-character gauges using ▐ (U+2590) in spans — on = opacity 1, off = opacity 0.22.

FUEL ▐▐▐▐▐▐▐▐▐▐▐▐    HULL ▐▐▐▐▐▐

.bar-gauge { display: flex; gap: 2px; letter-spacing: -1px; }
.bar-seg { font-size: var(--fs-micro); line-height: 1; }
.bar-seg.on  { opacity: 1; }
.bar-seg.off { opacity: 0.22; }

11 · Modals

All overlays: position: absolute; inset: 0; background: rgba(10,13,20,0.82); flex center. All panels: var(--deep), 0.5px solid var(--panel), each with a .chrome-bar header.

12 · Notifications

Toasts bottom-right, z-index 500, column-reverse (newest at bottom). Slide-in 0.3s steps(6). Subtitle (micro, uppercase, muted) + Title (small, bold, primary).

13 · Title Screen

The game entry screen (state.screen === 'title'). Full-bleed background image (/title-screen.png) with a semi-transparent chrome bar pinned to the top, centered brand + menu, and a footer bar. Launches the Options modal (options.cfg).

Key classes

Legibility over the background image comes from opaque translucent fills (rgba(10,13,20,0.80–0.88)) on the chrome, buttons, and footer — no blur (the interface uses zero backdrop-filter). Keyboard: N new · C continue · O options · Esc closes options.

14 · TopBar (Header)

15 · Star Map

Node sizes (SVG units)

Lines & labels

Node states & fog of war

Info card: top-right, 340px, faction-colored bullet + name, stats (type/faction/region/hazard); when routed, 3-col distance/fuel/ETA grid + color-coded jump button. HUD: corner legend top-left, zoom top-right, route/transit info bottom center.

16 · Station Panel (Docked)

7 tabs: Info · Market · Outfitting · Shipyard · Crew · Comms · Gather (Gather only when station has gatherables).

17 · Ship Panel (Docked)

4 tabs: Ship · Schematic · Cargo · Missions (+ Codex within Missions).

18 · Schematic (Ship Build View)

Main row: ship SVG (hull fill, archetype-colored stroke, alert-red engine glow with stepped pulse) + absolute-positioned slot boxes + detail panel. Warehouse cards below; drag-and-drop slots ↔ warehouse.

Slot states

Slot colors by module type

19 · Transit Screen

Fullscreen, radial dot-grid over void.

20 · Story Panel

Two tabs: Missions & Codex (opens on L).

• Active quests — steps with title, description, objectives (■/□ + counter), rewards. New missions fade in cyan (step-highlight 3s steps(6)). Ready-to-hand-in = amber left-border; auto-complete = green border.
• Story chains — row per chain: title + faction + progress + status (Dormant gray / Active amber / Complete green). Prerequisites in italic amber.
• Story flags — list with green check markers.
• Codex · Field Records — public lore entries: title (display, accent-cyan, uppercase, bordered) + body; amber discover timestamp.
• Codex · Classified — story-gated secrets: same card shape but accent-amber title + 0.5px amber border. Unrevealed = dimmed SEALED rows showing only the mono amber teaser (▓ CLASSIFIED — …). Amber accent is the only differentiator; no shadow/gradient.

21 · Denied & Game Over

22 · Animations

All animations use step-end or steps(N) — never ease, ease-in-out, linear, or cubic-bezier. Hover states snap instantly (transition: none).

Banned

/* NEVER */
transition: all 0.3s ease-in-out;
box-shadow / text-shadow / filter: drop-shadow();
backdrop-filter: blur();        /* never — use opaque translucent rgba fills instead */
linear-gradient / radial-gradient  /* except scanlines, star-map bg, starfield */

Global keyframes

Component keyframes

23 · Screen Reference

#root
├── .scanlines (CRT, always on)
├── .small-viewport-warning (< 1024px)
└── .app-shell
    └── GameShell (screen router)
        ├── TitleScreen
        ├── TopBar (all non-title screens)
        ├── StarMap / DockPanel / DeniedPanel / GameOverPanel
        ├── EventModal · ControlsOverlay (conditional)
        └── NotificationToast

24 · CSS File Map

Starwind Interface Style Guide · Updated 2026-05-30 · style_guide() to open