UI Style Guide — Widget Library

UI Style Guide · Components

Button variants, sliders, toggles, tab controls, panel anatomy, and progress bars. Implement using the theme files listed here.

Buttons

Core principle — button size signals context, not importance.
Large buttons appear in menus where the user's whole attention is on a single decision. Smaller buttons appear inside panels where the UI must share space with information. The primary variant still gets visual priority at any size.

Size tiers

TierHeightFontWidthWhen to use
Large .btn-lg 52 px Onest-Bold 16 px Full width Single full-screen confirmation dialogs only (e.g. "Are you sure you want to delete this save?"). Not for pause menu — use btn-md there.
Medium .btn-md 40 px Onest-Bold 14 px Full width Secondary actions in pause / settings menus — Save, Settings, Quit.
Small .btn-sm 32 px Onest-Bold 12 px Auto / hug Standalone modal actions only — not for detail panels. Use btn-xs inside any panel that contains information.
Extra-small .btn-xs 24 px Onest-Bold 10 px Auto / hug All actions inside detail panels (Assign Worker, Unassign, Demolish) and inline card controls. Default for any button inside an information-dense panel.
Icon .btn-icon 24 × 24 px — 24 px Panel close, row-level actions (×), icon-only controls.

Live examples

Large — pause / modal CTA
Extra-small — detail panel actions (building, unit, hab)
Extra-small — inline card / list row actions

Button types & color tokens

Each button type maps to a fixed set of color tokens. Never override these per-node unless a one-off accessibility need arises — the theme file is the single source of truth.

btn-primary · button_primary.tres
Background — --cream #EAE0CD
Text — #0D0D12 (void-black)
Use for: single primary CTA per panel — Resume, Confirm, Build
btn-secondary · button_secondary.tres
Background — --regolith-slate #2A2F37
Text — --cream #EAE0CD
Use for: secondary / nav actions — Settings, Back, Save, Unassign
btn-danger · button_danger.tres
Background — rgba(--arc-red, 0.15)
Text — --arc-red #F23649
Border — rgba(--arc-red, 0.35)
Use for: destructive actions only — Quit, Demolish, Delete Save
btn-ghost · no separate .tres
Background — transparent
Text — --dust-shadow #8A8A7A
Use for: dismissive / low-priority — Unassign, Cancel, Close. Applied via node-level override.

Variant guide

Theme fileVariantFontBG tokenText tokenUse case
button_primary.tres .btn-primary Onest-Bold --cream (#EAE0CD) #0D0D12 Single primary CTA per panel (Resume, Confirm, Build)
button_secondary.tres .btn-secondary Onest-Bold --regolith-slate (#2A2F37) --cream Secondary / nav (Settings, Back, Save, Unassign, Wake)
button_danger.tres .btn-danger Onest-Bold rgba(--arc-red, 0.15) --arc-red (#F23649) Destructive actions (Delete, Quit without saving, Demolish)
button_big.tres — PIXEARG_ — — Main menu list buttons only. Never use in-game.
button_card.tres .btn-xs Onest-Bold --regolith-slate --cream Compact inline actions inside cards (xs size, 4 px radius)

Main menu button style

The main menu uses a distinct button pattern — hard corners, border-only default state, blue-filled selected state. This style is exclusive to the main menu (before the game world is visible). Once gameplay begins, all UI reverts to the rounded 12 px panel system.

Annotations
Corner radius: 2 px. Hard edges signal pre-game context. All in-game panels use 12 px.
Default: #111318 fill + #363C4A border (1px). Text: Cream.
Selected / hover: #3A506E fill + #6B9FD4 border. Text: Ghost White.
Font: PIXEARG_ 15 px. The only place this font is used for interactive buttons.
The blue selected state echoes ARC Cyan's role but uses a desaturated variant so it doesn't compete with in-game UI chrome.
Do not apply this style inside in-game panels. The hard-corner + outlined style is a pre-game context signal. Once the game world is visible, all interactive elements use the rounded panel system (--r-panel: 12px, --r-card: 4px).

Button variants — usage matrix

Choose variants based on context, not importance. The design keeps button styles explicit and purposeful across different UI densities.

VariantTheme fileVisual styleUse caseExample contexts
button_big button_big.tres Textured, pixelated (PIXEARG font, 14 px) Main menu only. Each button gets full attention. Pixel-art aesthetic signals pre-game state. Main menu (New Game, Load, Settings), Difficulty selection, Scenario picker
button_primary button_primary.tres Cream fill, rounded corners (Onest-Bold 12 px) Pause menu and full-screen modals. Single-decision panels with breathing room. Pause menu (Resume, Save, Settings, Quit), Confirmation dialogs, Mission log actions
panel_button_primary panel_button_primary.tres Dark slate with magenta accent on hover (Onest-Bold 10 px) Detail panels (building, unit, hab). Compact, information-dense UI where buttons share space with data. Building details panel (Repair), Hab module (Assign Resident), Bottom tab bar actions
button_secondary button_secondary.tres Slate background, neutral (Onest-Bold 12 px) Secondary actions in pause menu. Lower visual weight than primary. Pause menu (Save Game, Settings), Confirmation dialogs (Cancel, Decline)
button_danger button_danger.tres Red tint, outlined (Onest-Bold 12 px) Destructive actions in pause/modal. Warns user before permanent loss. Pause menu (Quit to Desktop), Delete save slot, Confirm demolition (full-screen dialog only)
Inline panel actions use btn-xs only. Never use full-width buttons inside detail panels. Size signals context: large buttons = menu focus, small buttons = data browsing. Demolish, Unassign, and similar panel actions are btn-xs btn-danger (red text on transparent), not full-width button_danger.tres.
In context — see buttons assembled in real panels: Pause Menu, Building Details, Hab Module

Sliders & Range Controls

Sliders let users adjust continuous values (volume, brightness). Soviet-functional style uses minimal visual noise — a simple track and highlighted grab area.

Anatomy

Master volume
65%

Key features

  • Track: 4 px height, light tint rgba(255,255,255,.08), rounded caps
  • Fill: ARC Cyan #4AC1F2, shows progress from left to right
  • Grabber circle: 14 px diameter, cyan, centered on the fill. Includes subtle shadow ring rgba(74,193,242,.15) for depth. Cursor changes to grab on hover.
  • Label + value: 9/10 px text, label on left, value (%) on right in monospace
  • Theme resource: slider_volume.tres (HSlider node)

Usage rules

  • Always show the current value. Display as percentage or absolute number (0–100) in monospace to the right of the track.
  • Use only in settings panels. Sliders are for configurations the player tweaks once. Not for in-game control (building power, research allocation, etc.) — use buttons or direct input for those.
  • Label at 10 px, uppercase. "Master Volume", "Music Volume", "Effects Volume" — same style as other setting labels.
  • Pair with a label. Never display a slider without identifying what it controls.
  • Maintain consistent width. All sliders in settings are full-width within their container (typically 240 px in a settings panel).
Avoid horizontal scroll & full-panel sliders. A slider that runs the full width of the panel competes with panel padding. Leave 12 px padding on left/right; slider track itself runs ~216 px (in a 240 px wide settings panel).
In context — see sliders in the Settings panel: Settings Panel

Toggles & Checkboxes

Two toggle styles for in-game use: inline toggle switches (minimal) for settings rows, and checkbox buttons (CheckButton theme) for tab-like selection within panels.

Toggle switch (settings row)

Fullscreen mode
Windowed or borderless

Toggle switch anatomy

  • Container: 36 px wide × 20 px tall, rounded pill (border-radius 10 px)
  • Off state: Slate background #2A2F37, gray knob on left
  • On state: Cyan tint rgba(74,193,242,.2), cyan knob on right
  • Knob: 14 px circle, smooth 100ms transition on toggle
  • Theme: HTML toggle via .stg-toggle + .stg-pill (CSS-based)

Checkbox button (tab-like selection)

Mission Log tabs example

CheckButton usage (Godot)

  • Node type: CheckButton (built-in Godot control)
  • Theme: button_toggle.tres applies to the entire button
  • Inactive: Dust Shadow text, no background
  • Active (pressed): Cyan text + light cyan background, subtle rounded corners
  • Font: Onest-Bold 10 px, uppercase with 0.07 em letter-spacing
  • Spacing: Arrange in a horizontal row inside a VBox with 2–3 px padding + background tint

When to use each toggle type

TypeThemeBest forAvoid
Toggle switch .stg-toggle (CSS) Binary on/off settings in settings panel. One-line config rows with label + toggle. In-game controls, mission log tabs, building mode selection — use CheckButton instead.
CheckButton (toggle) button_toggle.tres Multi-option tab selection: Mission Log tabs (All / Active / Complete), Building list filters, Mode selection. Settings toggles — use toggle switch. Use as a decorative check icon — use icon font instead.
Toggle buttons are not radio buttons. CheckButton with button_toggle.tres can be used for exclusive selection (mission tabs) but the visual does not distinguish exclusivity. If users need to toggle between three options and only one can be active, document this behavior in code comments or preserve the state on close.
In context — see toggles in the Settings panel: Settings Panel

Tab Buttons & Segmented Selection

Tab-like controls appear in mission log, building list filters, and mode selection. Use CheckButton with button_toggle.tres arranged horizontally, or apply .mission-tabs CSS class for web.

Visual anatomy

Mission Log

Visual breakdown

  • Container: Subtle background tint rgba(255,255,255,.03), 4 px border-radius, 3 px padding inside
  • Inactive tab: Dust Shadow text #8A8A7A, transparent background, 3 px corner radius
  • Active tab: Cyan text #4AC1F2, 10% cyan tint background, smooth color transition (120 ms)
  • Font: Onest-Bold 10 px, uppercase, 0.07 em letter-spacing
  • Gap between tabs: 2 px (creates visual separation without borders)

Godot implementation

Structure: Use HBoxContainer with spacing set to 2 px. Add CheckButton children with theme button_toggle.tres. Use group property (without radio exclusivity) to manage visibility of content panels tied to each tab. Connect toggled(bool) signal to tab switching logic.

Usage guidelines

  • Use when space is limited. Tabs pack 3–4 filter/mode options into one row. Prefer tabs over a dropdown for < 5 options visible at once.
  • Label each tab clearly. "ALL", "ACTIVE", "COMPLETE" (mission log) or "FILTER_A", "FILTER_B" (building list). Keep labels short (≤ 10 chars).
  • Only one tab active at a time. Use code logic to enforce mutual exclusion, not Godot's RadioButton (which has different styling).
  • Align above the content they filter. Tabs sit at the top of a panel. Content below changes when user clicks a different tab.
  • Keyboard navigation: Tab key cycles tabs. Bind arrow keys (← / →) to switch tabs if needed.
Tab buttons are not standalone buttons. Never use button_toggle.tres for a single on/off action. For binary toggles, use a toggle switch (.stg-toggle). Tabs are always grouped in a container with multiple options.
In context — see tabs filtering content in the Mission Log: Mission Log

Panel Anatomy

All panels share the same three-layer structure. Padding and separation values differ between modal (full-attention) and compact (in-game) contexts.

Modal / menu

PanelContainer · card_bgr_panel.tres · r=12px
MarginContainer · 20px all sides
VBoxContainer · sep=12px
Title label — 16px

Padding: 20 px · Sep: 12 px

In-game panel (compact)

PanelContainer · card_bgr_panel.tres · r=12px
MarginContainer · 12px all sides
VBoxContainer · sep=6–8px
Building Name
Status info · 10px
Inset card · r=4px · 1px border

Padding: 12 px · Sep: 6–8 px

Detail panel philosophy — quick overview, main tasks first

A player opening a detail panel is scanning, not reading. The panel must answer three questions instantly:

  1. 1. What is this? — Name + icon in the header. Prominent, always visible.
  2. 2. Is there a problem? — Alert banner, status colour, warning text. Surfaces urgency before anything else.
  3. 3. What can I do? — One primary action button, immediately visible without scrolling.

Everything else (stats, assignments, secondary info) fills the rest of the panel in descending priority. All action buttons in detail panels use btn-xs (24px) — never btn-sm or larger. Use btn-secondary for the main action and btn-ghost for dismissive ones; the data should draw the eye, not the buttons.

Vertical order inside a detail panel: Header (name + icon) → Alert banner (if any) → Stats at a glance → Primary action → Secondary/optional info → Fine-print metadata.
In context — see panel anatomy applied in real panels: Building Details, Hab Module, Unit Details

Progress Bars

Height: 4 px · Radius: 2 px · Track: rgba(255,255,255,.08)

HealthHealthy
OxygenStable
HungerWell fed
EnergyRested
HealthCritical
In context — see progress bars in colonist and hab panels: Unit Details, Hab Module