USCSS TECHNICAL REFERENCE // WCYPD COLONY SYSTEMS

CASSETTE FUTURISM

Design System Reference — NASA/TM-2026-CSS-001 — Revision D

DOC NO. CSS-4.2.1
REV. D
2026-03-06
▶ APPROVED

Technologies Demonstrated

[Alpine] Copy-to-clipboard on color swatches
[Alpine] Button state toggle with x-bind:class
[HTMX] Form submission with hx-post + hx-target
[Alpine] Status board lights with reactive x-data state
[Alpine] setInterval instrument readouts (live number updates)
[Alpine] Segmented progress tracker with dynamic width binding
[HTMX] System log polling: hx-trigger="every 4s" + hx-swap="beforeend"
[Alpine] Modal open/close with x-show + x-transition overlay

1.0 Color Palette

[Alpine]

DOCUMENT COLORS

--color-bg

#f5f4ef

Page Background

--color-surface

#ffffff

Panel / Card Surface

--color-surface-2

#e8e7e2

Table Headers / Inputs

PRIMARY PALETTE

--color-primary

#0b3d91

Primary / Rules / Labels

--color-secondary

#1a5276

Hover / Secondary Actions

STATUS COLORS

--color-danger

#c0392b

Fault / Warning / KIA

--color-caution

#c85200

Caution / Degraded

TEXT & BORDERS

--color-text

#1a1a14

Body Text

--color-text-muted

#5a5a52

Labels / Metadata

--color-border

#c8c7c0

Borders / Dividers

--color-rule

#0b3d91

Section Rules

Click any swatch to copy hex value to clipboard.

<div x-data="{ copied: null }">
				<div class="mb-4">
					<p class="mb-2" style="font-size: var(--font-size-caption); color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;">DOCUMENT COLORS</p>
					<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#f5f4ef'); copied='bg'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #f5f4ef; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-bg</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='bg' ? 'COPIED' : '#f5f4ef'">#f5f4ef</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Page Background</p>
						</div>
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#ffffff'); copied='surface'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #ffffff; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-surface</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='surface' ? 'COPIED' : '#ffffff'">#ffffff</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Panel / Card Surface</p>
						</div>
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#e8e7e2'); copied='surface2'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #e8e7e2; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-surface-2</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='surface2' ? 'COPIED' : '#e8e7e2'">#e8e7e2</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Table Headers / Inputs</p>
						</div>
					</div>
				</div>
				<div class="mb-4">
					<p class="mb-2" style="font-size: var(--font-size-caption); color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;">PRIMARY PALETTE</p>
					<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#0b3d91'); copied='primary'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #0b3d91; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-primary</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='primary' ? 'COPIED' : '#0b3d91'">#0b3d91</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Primary / Rules / Labels</p>
						</div>
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#1a5276'); copied='secondary'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #1a5276; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-secondary</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='secondary' ? 'COPIED' : '#1a5276'">#1a5276</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Hover / Secondary Actions</p>
						</div>
					</div>
				</div>
				<div class="mb-4">
					<p class="mb-2" style="font-size: var(--font-size-caption); color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;">STATUS COLORS</p>
					<div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#c0392b'); copied='danger'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #c0392b; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-danger</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='danger' ? 'COPIED' : '#c0392b'">#c0392b</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Fault / Warning / KIA</p>
						</div>
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#c85200'); copied='caution'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #c85200; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-caution</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='caution' ? 'COPIED' : '#c85200'">#c85200</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Caution / Degraded</p>
						</div>
					</div>
				</div>
				<div class="mb-4">
					<p class="mb-2" style="font-size: var(--font-size-caption); color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;">TEXT &amp; BORDERS</p>
					<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#1a1a14'); copied='text'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #1a1a14; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-text</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='text' ? 'COPIED' : '#1a1a14'">#1a1a14</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Body Text</p>
						</div>
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#5a5a52'); copied='muted'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #5a5a52; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-text-muted</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='muted' ? 'COPIED' : '#5a5a52'">#5a5a52</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Labels / Metadata</p>
						</div>
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#c8c7c0'); copied='border'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #c8c7c0; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-border</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='border' ? 'COPIED' : '#c8c7c0'">#c8c7c0</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Borders / Dividers</p>
						</div>
						<div class="cursor-pointer" { templ.Attributes{"@click": "navigator.clipboard.writeText('#0b3d91'); copied='rule'; setTimeout(()=>copied=null,1500)"}... }>
							<div style="height: 48px; background: #0b3d91; border: 1px solid var(--color-border);"></div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-top: 0.25rem;">--color-rule</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="copied==='rule' ? 'COPIED' : '#0b3d91'">#0b3d91</p>
							<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Section Rules</p>
						</div>
					</div>
				</div>
				<p style="font-size: var(--font-size-caption); color: var(--color-text-muted); margin-top: 0.75rem;">Click any swatch to copy hex value to clipboard.</p>
			</div>

2.0 Typography

TYPE SPECIMEN TABLE — IBM PLEX MONO + ORBITRON
Orbitron 700
2rem / Display
TECHNICAL REFERENCE MANUAL
IBM Plex Mono 700
0.875rem / Heading
SYSTEM STATUS: ALL SUBSYSTEMS NOMINAL
IBM Plex Mono 500
0.8125rem / Body Medium
Crew manifest updated 2183-06-03 at 0347 UTC
IBM Plex Mono 400
0.8125rem / Body Regular
The atmospheric processor regulates colony life support across all 72 decks. Nominal operating pressure is 101.3 kPa with a tolerance of ±2.5 kPa.
IBM Plex Mono 300
0.8125rem / Body Light
Secondary system documentation, footnotes, and supplementary reference materials.
IBM Plex Mono 400i
0.8125rem / Body Italic
Note: This document supersedes all prior revisions. Consult engineering before making any modifications.
IBM Plex Mono 700
0.6875rem / Caption Uppercase
CLASSIFICATION: COMPANY CONFIDENTIAL
PARAGRAPH SPECIMEN — MISSION BRIEFING DOCUMENT

WEYLAND-YUTANI CORP. — MISSION BRIEFING — USCSS NOSTROMO (MSV-180286) — The crew of the Nostromo has been diverted to planetoid LV-426 to investigate a transmission of unknown origin. Special Order 937 has been activated per standing directives from the Science Division. All non-essential crew members are to be kept uninformed of the nature of the mission objective. The Science Officer will assume command authority for all specimen-related activities. Crew safety is secondary to retrieval of specimen. This order supersedes all standing protocols established under the Colonial Marine Corps Charter, Articles 1 through 18. Any violation of this order constitutes breach of contract under ICC Charter and is subject to immediate punitive action.

3.0 Spacing Scale

SPACING SCALE — BASE UNIT: 4px
4px / 0.25rem
p-1
8px / 0.5rem
p-2
12px / 0.75rem
p-3
16px / 1rem
p-4
20px / 1.25rem
p-5
24px / 1.5rem
p-6
32px / 2rem
p-8
40px / 2.5rem
p-10
48px / 3rem
p-12
64px / 4rem
p-16
80px / 5rem
p-20
96px / 6rem
p-24

4.0 Button Components

[Alpine]
VARIANT SPECIFICATION MATRIX
VARIANTPREVIEWUSE CASE
Outline PrimaryStandard actions, secondary operations
Filled PrimaryPrimary CTA, high-priority actions
Outline DangerDestructive secondary action
Filled DangerIrreversible destructive action
DisabledLocked / insufficient clearance
SIZE VARIANTS

SM

MD (default)

LG

INTERACTIVE — ARMED / SAFE TOGGLE
WEAPONS SAFE — CLICK TO ARM
<div class="cass-panel mb-6">
				<div class="cass-panel-header">INTERACTIVE — ARMED / SAFE TOGGLE</div>
				<div style="padding: 1rem;">
					<div x-data="{ armed: false }" class="flex items-center gap-4">
						<button
							{ templ.Attributes{"@click": "armed = !armed"}... }
							{ templ.Attributes{":class": "armed ? 'cass-btn cass-btn-danger-filled' : 'cass-btn'"}... }
						>
							<span x-text="armed ? '&#9689; ARMED' : '&#9675; SAFE'">&#9675; SAFE</span>
						</button>
						<span style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="armed ? 'WEAPONS HOT — CONFIRM TARGET BEFORE FIRING' : 'WEAPONS SAFE — CLICK TO ARM'">WEAPONS SAFE — CLICK TO ARM</span>
					</div>
				</div>
			</div>
INTERACTIVE — CONFIRM WITH FEEDBACK
SEQUENCE ACKNOWLEDGED — EXECUTING

5.0 Form Components

[HTMX] [Alpine]
MISSION REQUEST FORM — MRF-2183-A
PERSONNEL DESIGNATION
AUTHORIZATION CODE
MISSION CLASSIFICATION
MISSION BRIEFING
0 chars
SYSTEMS VERIFIED
CREW STATUS
THRUST ALLOCATION
75%
0% — OFFLINE 50% — CRUISE 100% — MAX
<form
						hx-post="/guides/cassette/demo-form"
						hx-target="#cass-form-response"
						hx-swap="innerHTML"
						style="display: grid; gap: 1.25rem;"
					>
						<!-- Personnel Designation -->
						<div class="cass-field-group">
							<span class="cass-field-group-label">PERSONNEL DESIGNATION</span>
							<label class="cass-label" for="cass-personnel">Full Name / ID</label>
							<input
								id="cass-personnel"
								name="name"
								type="text"
								class="cass-input"
								placeholder="RIPLEY, E. — WO-NOS-002"
							/>
						</div>
						<!-- Authorization Code -->
						<div class="cass-field-group">
							<span class="cass-field-group-label">AUTHORIZATION CODE</span>
							<label class="cass-label" for="cass-auth">Access Code (L-4 or above)</label>
							<input
								id="cass-auth"
								name="auth"
								type="password"
								class="cass-input cass-input-box"
								placeholder="••••••••"
							/>
						</div>
						<!-- Mission Classification -->
						<div class="cass-field-group">
							<span class="cass-field-group-label">MISSION CLASSIFICATION</span>
							<label class="cass-label" for="cass-class">Select Classification Level</label>
							<select id="cass-class" name="classification" class="cass-input cass-input-box" style="cursor: pointer;">
								<option value="routine">ROUTINE</option>
								<option value="priority">PRIORITY</option>
								<option value="classified">CLASSIFIED</option>
								<option value="eyes-only">EYES ONLY</option>
							</select>
						</div>
						<!-- Mission Briefing with char counter -->
						<div class="cass-field-group" x-data="{ chars: 0 }">
							<span class="cass-field-group-label">MISSION BRIEFING</span>
							<div class="flex justify-between items-center mb-1">
								<label class="cass-label" for="cass-briefing">Operational Summary</label>
								<span style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="chars + ' chars'">0 chars</span>
							</div>
							<textarea
								id="cass-briefing"
								name="briefing"
								rows="3"
								class="cass-input cass-input-box"
								style="resize: vertical;"
								placeholder="Describe mission objectives, hazards, and special orders..."
								x-on:input="chars = $el.value.length"
							></textarea>
						</div>
						<!-- Systems Verified checkboxes -->
						<div class="cass-field-group">
							<span class="cass-field-group-label">SYSTEMS VERIFIED</span>
							<div style="display: flex; gap: 1.5rem; flex-wrap: wrap;">
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="checkbox" name="systems" value="life-support" class="cass-check"/> LIFE SUPPORT
								</label>
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="checkbox" name="systems" value="propulsion" class="cass-check"/> PROPULSION
								</label>
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="checkbox" name="systems" value="comms" class="cass-check"/> COMMUNICATIONS
								</label>
							</div>
						</div>
						<!-- Crew Status radios -->
						<div class="cass-field-group">
							<span class="cass-field-group-label">CREW STATUS</span>
							<div style="display: flex; gap: 1.5rem; flex-wrap: wrap;">
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="radio" name="crew-status" value="nominal" class="cass-check" checked/> <span class="cass-value-ok">NOMINAL</span>
								</label>
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="radio" name="crew-status" value="degraded" class="cass-check"/> <span class="cass-value-warn">DEGRADED</span>
								</label>
								<label class="flex items-center gap-2 cursor-pointer" style="font-size: var(--font-size-body);">
									<input type="radio" name="crew-status" value="critical" class="cass-check"/> <span class="cass-value-danger">CRITICAL</span>
								</label>
							</div>
						</div>
						<!-- Thrust Allocation range -->
						<div class="cass-field-group" x-data="{ thrust: 75 }">
							<span class="cass-field-group-label">THRUST ALLOCATION</span>
							<div class="flex justify-between items-center mb-2">
								<label class="cass-label">Engine Power Output</label>
								<span class="cass-value" x-text="thrust + '%'">75%</span>
							</div>
							<input
								type="range"
								name="thrust"
								min="0"
								max="100"
								x-model="thrust"
								style="width: 100%; accent-color: var(--color-primary);"
							/>
							<div class="flex justify-between" style="font-size: var(--font-size-caption); color: var(--color-text-muted); margin-top: 0.25rem;">
								<span>0% — OFFLINE</span>
								<span>50% — CRUISE</span>
								<span>100% — MAX</span>
							</div>
						</div>
						<!-- Submit -->
						<div class="flex justify-end gap-3">
							<button type="reset" class="cass-btn">CLEAR FORM</button>
							<button type="submit" class="cass-btn cass-btn-filled">TRANSMIT REPORT</button>
						</div>
					</form>

6.0 Panel Components

[Alpine]
MISSION DATA
VESSEL USCSS NOSTROMO
REGISTRATION MSV-180286
DESTINATION LV-426 / ZETA RETICULI
MISSION PHASE APPROACH VECTOR
ETD 2183-06-01 0600 UTC
SPECIAL ORDER 937 — ACTIVE
PRIORITY WEYLAND-YUTANI CORP.
CLASSIFICATION EYES ONLY
OBJECTIVE RETRIEVE SPECIMEN
CREW AWARENESS SCIENCE OFFICER ONLY
ACTIVATED BY MOTHER — MU/TH/UR 6000
ENGINEERING SUBSYSTEMS
REACTOR STATUS ONLINE — 98.7%
COOLANT TEMP. 487°C — NOMINAL
FUEL RESERVE 67.4%
THRUST CAPACITY 100% AVAILABLE

NAVIGATIONAL NOTE

The Nostromo has been diverted from its registered course by automated subroutine activation. Navigation override is locked pending Science Officer authorization. ETA to LV-426: 18 hours at current velocity.

VESSEL STATUS SUMMARY
HULL INTEGRITY
100%
SHIELDS
N/A
LIFE SUPPORT
NOMINAL
REACTOR
98.7%
NAVIGATION
OVERRIDE
CREW STATUS
7/7
CRITICAL ALERT — XENOMORPH CONTAINMENT BREACH
THREAT LEVEL EXTREME
LOCATION DECK C — MEDICAL BAY
PERSONNEL AT RISK 7 CREW MEMBERS
RECOMMENDED ACTION INITIATE PROTOCOL

7.0 Data Tables

[Alpine]
USCSS NOSTROMO — CREW MANIFEST (MSV-180286)
IDDESIGNATIONRANKDEPARTMENTSTATUSCLEARANCE
NOS-001DALLAS, A.J.CAPTAINCOMMANDACTIVEL-5
NOS-002RIPLEY, E.WARRANT OFFICERCOMMANDACTIVEL-4
NOS-003KANE, G.EXECUTIVE OFFICERCOMMANDKIAL-4
NOS-004ASHSCIENCE OFFICERSCIENCEDECOMMISSIONEDUNRESTRICTED
NOS-005LAMBERT, J.NAVIGATORCOMMANDKIAL-3
NOS-006BRETT, S.ENGINEERENGINEERINGKIAL-2
NOS-007PARKER, D.CHIEF ENGINEERENGINEERINGKIAL-2
ENVIRONMENTAL SYSTEMS STATUS MATRIX
SYSTEMCURRENT READINGNOMINAL RANGESTATUS
Atmospheric Pressure101.3 kPa99.0–103.0 kPaNOMINAL
Cabin Temperature19.7 °C18.0–22.0 °CNOMINAL
Oxygen Partial Press.21.3 kPa20.5–22.0 kPaNOMINAL
Reactor Coolant94.1%< 95%CAUTION
Fuel Cell Capacity67.4%> 20%NOMINAL
Hypersleep Units7/77/7NOMINAL

8.0 System Status Monitor

[Alpine]
SYSTEM STATUS GRID — CLICK TO CYCLE
MISSION ELAPSED TIME
00:00:00
HH:MM:SS — ELAPSED SINCE WAKE
PERSONNEL TRACKING — ACTIVE CREW
NAMELOCATIONSTATUS
RIPLEY, E.DECK C — MEDICAL
ACTIVE
BISHOPSCIENCE LAB
ACTIVE
HICKS, D.ARMORY
ACTIVE
<div class="cass-panel" x-data="{ systems: [{n:'LIFE SUPPORT',s:'ok'},{n:'PROPULSION',s:'ok'},{n:'NAVIGATION',s:'warn'},{n:'COMMUNICATIONS',s:'ok'},{n:'POWER GRID',s:'ok'},{n:'HYPERSLEEP',s:'ok'},{n:'MOTION SENSORS',s:'err'},{n:'ATMOSPHERIC',s:'ok'},{n:'FIRE SUPPRESSION',s:'ok'},{n:'CARGO LOCKS',s:'warn'}] }">
					<div class="cass-panel-header">SYSTEM STATUS GRID — CLICK TO CYCLE</div>
					<div style="padding: 0.5rem;">
						<template x-for="(sys, i) in systems" x-key="i">
							<div
								class="flex items-center gap-3 cursor-pointer"
								style="padding: 0.4rem 0.25rem; border-bottom: 1px solid var(--color-surface-2);"
								{ templ.Attributes{"@click": "sys.s = sys.s==='ok'?'warn':sys.s==='warn'?'err':'ok'"}... }
							>
								<span
									{ templ.Attributes{":class": "sys.s==='ok'?'cass-light cass-light-green cass-pulse':sys.s==='warn'?'cass-light cass-light-amber':sys.s==='err'?'cass-light cass-light-red cass-blink':'cass-light cass-light-off'"}... }
								></span>
								<span style="flex: 1; font-size: var(--font-size-caption); font-weight: 700; letter-spacing: 0.04em;" x-text="sys.n"></span>
								<span
									style="font-size: var(--font-size-caption); font-weight: 700;"
									{ templ.Attributes{":style": "sys.s==='ok'?'color:#27ae60':sys.s==='warn'?'color:var(--color-caution)':'color:var(--color-danger)'"}... }
									x-text="sys.s==='ok'?'NOMINAL':sys.s==='warn'?'DEGRADED':'FAULT'"
								></span>
							</div>
						</template>
					</div>
				</div>

9.0 Notice Components

NOTE

All personnel must complete atmospheric decompression protocol before entering Deck C. Standard decompression time is 15 minutes. Reference: SOP-ATM-042, Revision 3.

CAUTION

Reactor coolant pressure is operating at 94.1% of nominal limits. Monitor pressure gauge readings every 15 minutes. Initiate venting procedure if readings exceed 97% nominal. Contact Chief Engineer immediately.

WARNING

UNAUTHORIZED ACCESS TO SCIENCE DIVISION LABORATORY IS STRICTLY PROHIBITED. Special Order 937 is in effect. Violation is subject to immediate contract termination and criminal prosecution under ICC Charter Article 14, Section 9.

DISMISSIBLE VARIANTS
NOTE

Hypersleep revival protocol requires a minimum 4-hour monitoring period. Medical Officer must be present for all revivals. Reference: MED-HS-001.

CAUTION

Motion sensor array sector 7G reporting intermittent signal loss. Maintenance crew dispatched. Estimated resolution: 2 hours. Do not rely on sector 7G coverage during this period.

WARNING

AIRLOCK CYCLE DETECTED — DECK A EMERGENCY AIRLOCK. No crew authorization on record. Investigate immediately. Security to report to Deck A airlock station.

10.0 Document Metadata

WEYLAND-YUTANI CORPORATION // TECHNICAL OPERATIONS DIVISION
DOC NO.
WY-TECH-2183-CSS-001
REVISION
D
DATE
2026-03-06
CLASSIFICATION
COMPANY CONFIDENTIAL
AUTHOR
M.BISHOP, SYNTHETIC DIV
APPROVED
CARTER J. BURKE
PROJECT
HADLEY'S HOPE
STATUS
ACTIVE
DESCRIPTION
Comprehensive technical reference and design system specification for Weyland-Yutani colony management interfaces. Covers all UI components, color systems, and interaction patterns for colony administration terminals.
COLONIAL MARINE CORPS // OPERATIONS COMMAND — MISSION ORDERS
ORDER NO.
CMC-OPS-2183-447
PRIORITY
CLASSIFIED
ISSUED
2183-05-28
EXPIRY
ON COMPLETION
UNIT
2ND BN / ALPHA CO
CO
LT. GORMAN, S.
OBJECTIVE
RESCUE & INVESTIGATE
STATUS
ACTIVE
MISSION SUMMARY
Proceed to LV-426, Hadley's Hope colony. Investigate loss of contact with 158 colonists. Secure perimeter, assess threat, and recover any survivors. Coordinate with Weyland-Yutani civilian representative.

11.0 Navigation Components

[Alpine]
HORIZONTAL TAB NAVIGATION

The USCSS Nostromo (registration MSV-180286) is a modified Lockmart CM-88B Bison M-Class starfreighter, commissioned 2116 and currently assigned commercial haulage routes under contract ref. CMO-180286. The vessel has been diverted from its registered transit route by automated command subroutine Mother, acting under Special Order 937.

All crew have been revived from hypersleep at grid reference Zeta II Reticuli. Navigation shows current position 34 light years from Earth. Mission duration estimate: 10 months transit to LV-426. All systems reading nominal except Navigation (override engaged) and Science Lab (access restricted under SO-937).

SYSTEMSTATUSREADINGNOTES
Life SupportNOMINAL101.3 kPaAll within tolerances
PropulsionNOMINAL98.7%Cruise configuration
NavigationOVERRIDESO-937Locked by Mother
CommunicationsACTIVERelay BLong-range active
RIPLEY, E.
Warrant Officer / Command
ACTIVE
BISHOP
Synthetic / Science Division
ACTIVE
HICKS, D.
Corporal / Colonial Marines
ACTIVE
ITEMQTYMASSSTATUS
Ore Processing Equipment1 set20,000 MTSECURED
Refinery Consumables42 units8,400 MTSECURED
Personnel Equipment7 kits350 kgSECURED
Science Lab SamplesCLASSIFIEDCLASSIFIEDSO-937
2183-06-01 04:12 SYS Mother initiated hypersleep revival sequence
2183-06-01 04:47 NAV Course correction applied — new heading LV-426
2183-06-01 05:03 SCI Special Order 937 activated — Science Lab sealed
2183-06-01 06:22 COM Long-range signal detected — grid ref: Zeta Reticuli
2183-06-01 07:55 SYS Crew briefing complete — descent vehicle prepped
VERTICAL DOCUMENT NAVIGATION — TABLE OF CONTENTS
1.0 Color Palette
2.0 Typography
3.0 Spacing Scale
4.0 Button Components
5.0 Form Components
6.0 Panel Components

Selected section:

Click any section in the nav to change the active state. In a production document, this would scroll to or load that section.

12.0 Instrument Readouts

[Alpine]
ENVIRONMENTAL INSTRUMENT READOUTS — LIVE
CABIN PRESSURE
101.3 kPa
NOMINAL
O₂ PARTIAL PRESS.
21.3 kPa
NOMINAL
CABIN TEMP.
19.7 °C
NOMINAL
REACTOR OUTPUT
98.7 %
NOMINAL
VELOCITY
12.4 km/s
CRUISE
FUEL REMAINING
67.4 %
NOMINAL
<div class="cass-panel mb-6">
				<div class="cass-panel-header cass-panel-header-blue">ENVIRONMENTAL INSTRUMENT READOUTS — LIVE</div>
				<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0.75rem; gap: 0.5rem;">
					<!-- 1. Cabin Pressure -->
					<div class="cass-readout" x-data="{ v: 101.3 }" x-init="setInterval(()=>{ v=parseFloat((101.3+(Math.random()-0.5)*0.4).toFixed(1)) },2500)">
						<div class="cass-readout-unit" style="margin-bottom: 0.25rem;">CABIN PRESSURE</div>
						<div class="flex items-baseline gap-1">
							<span class="cass-readout-value" x-text="v">101.3</span>
							<span class="cass-readout-unit">kPa</span>
						</div>
						<div style="margin-top: 0.25rem; font-size: var(--font-size-caption); font-weight: 700;" class="cass-value-ok">NOMINAL</div>
					</div>
					<!-- 2. O2 Partial Pressure -->
					<div class="cass-readout" x-data="{ v: 21.3 }" x-init="setInterval(()=>{ v=parseFloat((21.3+(Math.random()-0.5)*0.3).toFixed(1)) },2500)">
						<div class="cass-readout-unit" style="margin-bottom: 0.25rem;">O&#8322; PARTIAL PRESS.</div>
						<div class="flex items-baseline gap-1">
							<span class="cass-readout-value" x-text="v">21.3</span>
							<span class="cass-readout-unit">kPa</span>
						</div>
						<div style="margin-top: 0.25rem; font-size: var(--font-size-caption); font-weight: 700;" class="cass-value-ok">NOMINAL</div>
					</div>
					<!-- 3. Cabin Temp -->
					<div class="cass-readout" x-data="{ v: 19.7 }" x-init="setInterval(()=>{ v=parseFloat((19.7+(Math.random()-0.5)*0.5).toFixed(1)) },2500)">
						<div class="cass-readout-unit" style="margin-bottom: 0.25rem;">CABIN TEMP.</div>
						<div class="flex items-baseline gap-1">
							<span class="cass-readout-value" x-text="v">19.7</span>
							<span class="cass-readout-unit">&#176;C</span>
						</div>
						<div style="margin-top: 0.25rem; font-size: var(--font-size-caption); font-weight: 700;" class="cass-value-ok">NOMINAL</div>
					</div>
					<!-- 4. Reactor Output -->
					<div class="cass-readout" x-data="{ v: 98.7 }" x-init="setInterval(()=>{ v=parseFloat((98.7+(Math.random()-0.5)*2).toFixed(1)) },2500)">
						<div class="cass-readout-unit" style="margin-bottom: 0.25rem;">REACTOR OUTPUT</div>
						<div class="flex items-baseline gap-1">
							<span
								{ templ.Attributes{":class": "v < 80 ? 'cass-readout-value cass-readout-value-danger' : 'cass-readout-value'"}... }
								x-text="v"
							>98.7</span>
							<span class="cass-readout-unit">%</span>
						</div>
						<div
							style="margin-top: 0.25rem; font-size: var(--font-size-caption); font-weight: 700;"
							{ templ.Attributes{":class": "v < 80 ? 'cass-value-danger' : 'cass-value-ok'"}... }
							x-text="v < 80 ? 'FAULT' : 'NOMINAL'"
						>NOMINAL</div>
					</div>
					<!-- 5. Velocity (static) -->
					<div class="cass-readout">
						<div class="cass-readout-unit" style="margin-bottom: 0.25rem;">VELOCITY</div>
						<div class="flex items-baseline gap-1">
							<span class="cass-readout-value">12.4</span>
							<span class="cass-readout-unit">km/s</span>
						</div>
						<div style="margin-top: 0.25rem; font-size: var(--font-size-caption); font-weight: 700;" class="cass-value-ok">CRUISE</div>
					</div>
					<!-- 6. Fuel Remaining -->
					<div class="cass-readout" x-data="{ v: 67.4 }" x-init="setInterval(()=>{ v=parseFloat((67.4+(Math.random()-0.5)*0.2).toFixed(1)) },3000)">
						<div class="cass-readout-unit" style="margin-bottom: 0.25rem;">FUEL REMAINING</div>
						<div class="flex items-baseline gap-1">
							<span
								{ templ.Attributes{":class": "v < 30 ? 'cass-readout-value cass-readout-value-danger' : 'cass-readout-value'"}... }
								x-text="v"
							>67.4</span>
							<span class="cass-readout-unit">%</span>
						</div>
						<div
							style="margin-top: 0.25rem; font-size: var(--font-size-caption); font-weight: 700;"
							{ templ.Attributes{":class": "v < 30 ? 'cass-value-warn' : 'cass-value-ok'"}... }
							x-text="v < 30 ? 'LOW' : 'NOMINAL'"
						>NOMINAL</div>
					</div>
				</div>
			</div>
BAR GAUGE DISPLAY
FUEL CELLS 67%
OXYGEN RESERVES 89%
COOLANT LEVEL 23%
POWER DISTRIBUTION 78%
COOLANT PRESSURE — THRESHOLD MONITOR
CURRENT PRESSURE
78 kPa
THRESHOLD LIMIT
85 kPa
⚠ THRESHOLD EXCEEDED
78 kPa

13.0 Progress &amp; Completion

[Alpine]
MISSION PHASE PROGRESS BARS
PRE-LAUNCH CHECKLIST 100%
TRANSIT TO LV-426 67%
SURFACE SURVEY 12%
SPECIMEN RECOVERY 0%
SEGMENTED PROGRESS — MISSION SUBSTEPS
6 / 10 SUBSTEPS COMPLETE 
<div class="cass-panel" x-data="{ steps: 6, total: 10 }">
					<div class="cass-panel-header">SEGMENTED PROGRESS — MISSION SUBSTEPS</div>
					<div style="padding: 1rem;">
						<div class="flex flex-wrap" style="margin-bottom: 0.75rem;">
							<template x-for="i in total">
								<div { templ.Attributes{":style": "i<=steps?'width:24px;height:24px;margin:1px;background:var(--color-primary);border:1px solid var(--color-border)':'width:24px;height:24px;margin:1px;background:var(--color-surface-2);border:1px solid var(--color-border)'"}... }></div>
							</template>
						</div>
						<div class="flex items-center gap-3">
							<button class="cass-btn" { templ.Attributes{"@click": "if(steps>0)steps--"}... }>&#9664; PREV</button>
							<span style="font-size: var(--font-size-caption); color: var(--color-text-muted);" x-text="steps + ' / ' + total + ' SUBSTEPS COMPLETE'">6 / 10 SUBSTEPS COMPLETE</span>
							<button class="cass-btn" { templ.Attributes{"@click": "if(steps<total)steps++"}... }>NEXT &#9654;</button>
						</div>
					</div>
				</div>
STEP TRACKER — MISSION AUTHORIZATION SEQUENCE
1
INITIATE
2
VERIFY
3
AUTHORIZE
4
EXECUTE
5
CONFIRM
MISSION TASK STATUS MATRIX
TASKOWNERPROGRESSSTATUS
Atmospheric Processor RepairHICKS, D.
COMPLETE
Colonial Lab SweepVASQUEZ, J.
IN PROGRESS
Alien Nest SurveyBISHOP
IN PROGRESS
Drop Ship MaintenanceFERRO, C.
DELAYED
Perimeter Defense SetupAPONE, SGT.
NOT STARTED

14.0 System Event Log

[HTMX]
WCYPD COLONY SYSTEMS — EVENT LOG
(UI demo — filter does not apply to HTMX entries)
[00:00:01] SYS WCYPD COLONY SYSTEMS v4.2.1 — BOOT SEQUENCE COMPLETE
[00:00:03] NET NETWORK INTERFACES INITIALIZED — 4 NODES ACTIVE
[00:00:07] ATM ATMOSPHERIC PROCESSOR — NOMINAL — 101.3 kPa
[00:00:12] NAV NAVIGATION ARRAY — CALIBRATION COMPLETE
[00:00:15] SCI SCIENCE LAB — ACCESS RESTRICTED — SPECIAL ORDER 937 ACTIVE
[00:00:18] PWR POWER GRID — OUTPUT 98.7% NOMINAL
[00:00:22] SEC MOTION SENSOR ARRAY — ARMED — 24 SECTORS ACTIVE
[00:00:25] MED HYPERSLEEP UNITS 1-7 — OCCUPANTS STABLE
[00:00:31] COM LONG-RANGE COMMS — SIGNAL LOCK CONFIRMED — RELAY B
[00:00:38] ENG REACTOR TEMP — 487°C — WITHIN NOMINAL RANGE
[00:00:44] SYS SPECIAL ORDER 937 — ACTIVATED — SCIENCE DEPT NOTIFIED
[00:00:51] SEC BULKHEAD DOORS — ALL SEALED — OVERRIDE DISABLED

HTMX client — cassette.templ

<!-- HTMX polling trigger -->
						<div
							hx-get="/guides/cassette/log"
							hx-trigger="every 4s"
							hx-target="#cass-log-output"
							hx-swap="beforeend"
						></div>

Go handler — handlers/guides.go

mux.HandleFunc("/guides/cassette/log", func(w http.ResponseWriter, r *http.Request) {
    entries := []struct{ sub, msg string }{
        {"SYS", "WCYPD COLONY SYSTEMS — HEARTBEAT NOMINAL"},
        // ... more entries ...
    }
    idx := int(time.Now().Unix()) % len(entries)
    e := entries[idx]
    ts := time.Now().Format("15:04:05")
    fmt.Fprintf(w,
        `<div ...>[%s] %s %s</div>`,
        ts, templ.EscapeString(e.sub), templ.EscapeString(e.msg),
    )
})
Auto-polling every 4 seconds via HTMX

15.0 Dialog Components

[Alpine]

Click a button above to open the corresponding modal dialog.

<div x-data="{ modal: null, authCode: '', confirmed: false }">
				<!-- Trigger buttons -->
				<div class="flex flex-wrap gap-3 mb-4">
					<button class="cass-btn cass-btn-filled" { templ.Attributes{"@click": "modal='auth'"}... }>REQUEST ACCESS</button>
					<button class="cass-btn cass-btn-danger" { templ.Attributes{"@click": "modal='jettison'; authCode=''; confirmed=false"}... }>CONFIRM JETTISON</button>
					<button class="cass-btn" { templ.Attributes{"@click": "modal='alert'"}... }>SYSTEM NOTIFICATION</button>
				</div>
				<p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">Click a button above to open the corresponding modal dialog.</p>
				<!-- Overlay -->
				<div class="cass-overlay" x-show="modal !== null" style="display: none;" { templ.Attributes{"@click.self": "modal=null"}... }>
					<!-- Modal 1: Auth -->
					<div class="cass-modal" x-show="modal==='auth'" style="display: none;">
						<div class="cass-modal-header">ACCESS REQUEST — LEVEL 5 CLEARANCE</div>
						<div style="padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem;">
							<div>
								<label class="cass-label" for="modal-personnel">PERSONNEL ID</label>
								<input id="modal-personnel" type="text" class="cass-input" placeholder="e.g. RIPLEY, E. — WO-NOS-002"/>
							</div>
							<div>
								<label class="cass-label" for="modal-code">AUTHORIZATION CODE</label>
								<input id="modal-code" type="password" class="cass-input cass-input-box" placeholder="••••••••"/>
							</div>
							<div>
								<label class="cass-label" for="modal-level">ACCESS LEVEL REQUESTED</label>
								<select id="modal-level" class="cass-input cass-input-box" style="cursor: pointer;">
									<option>L-3</option>
									<option>L-4</option>
									<option>L-5</option>
									<option>UNRESTRICTED</option>
								</select>
							</div>
							<div>
								<label class="cass-label" for="modal-reason">REASON FOR ACCESS</label>
								<textarea id="modal-reason" rows="2" class="cass-input cass-input-box" placeholder="Describe operational need for elevated access clearance..."></textarea>
							</div>
						</div>
						<div class="flex justify-end gap-3" style="padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border);">
							<button class="cass-btn" { templ.Attributes{"@click": "modal=null"}... }>CANCEL</button>
							<button class="cass-btn cass-btn-filled" { templ.Attributes{"@click": "modal=null"}... }>SUBMIT REQUEST</button>
						</div>
					</div>
					<!-- Modal 2: Jettison -->
					<div class="cass-modal" x-show="modal==='jettison'" style="display: none; border-color: var(--color-danger);">
						<div class="cass-modal-header cass-modal-header-danger">CONFIRM JETTISON — IRREVERSIBLE ACTION</div>
						<div style="padding: 1.25rem;">
							<div class="cass-notice cass-notice-warning mb-4">
								<div class="cass-notice-label" style="color: var(--color-danger);">WARNING</div>
								<p>This action is irreversible. Once executed, the following cargo will be permanently jettisoned into open space and cannot be recovered.</p>
							</div>
							<p style="font-size: var(--font-size-caption); font-weight: 700; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em;">Cargo to be jettisoned:</p>
							<ul style="font-size: var(--font-size-body); color: var(--color-text-muted); margin-bottom: 1rem; padding-left: 1rem; line-height: 2;">
								<li>Refinery Module RFN-7 (8,400 MT)</li>
								<li>Processing Equipment Set A (12,000 MT)</li>
								<li>Cargo Bay 3 Contents (2,200 MT)</li>
							</ul>
							<div>
								<label class="cass-label" for="modal-jettison-confirm">TYPE "CONFIRM" TO PROCEED</label>
								<input
									id="modal-jettison-confirm"
									type="text"
									x-model="authCode"
									class="cass-input cass-input-box"
									placeholder="CONFIRM"
									style="text-transform: uppercase;"
								/>
							</div>
						</div>
						<div class="flex justify-end gap-3" style="padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border);">
							<button class="cass-btn" { templ.Attributes{"@click": "modal=null"}... }>ABORT</button>
							<button
								class="cass-btn cass-btn-danger-filled"
								{ templ.Attributes{":disabled": "authCode !== 'CONFIRM'"}... }
								{ templ.Attributes{"@click": "authCode==='CONFIRM' && (modal=null)"}... }
							>JETTISON</button>
						</div>
					</div>
					<!-- Modal 3: Alert -->
					<div class="cass-modal" x-show="modal==='alert'" style="display: none;">
						<div class="cass-modal-header">SYSTEM NOTIFICATION — PRIORITY MESSAGE</div>
						<div style="padding: 1.25rem;">
							<div class="cass-notice cass-notice-note mb-4">
								<div class="cass-notice-label" style="color: var(--color-primary);">PRIORITY: ROUTINE</div>
								<p>Scheduled maintenance window for atmospheric processing units 3 and 4 will commence at 0200 station time. Estimated duration: 45 minutes. Decks F and G will experience reduced atmospheric circulation during this period.</p>
							</div>
							<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem;">
								<div class="cass-doc-cell">
									<div class="cass-doc-cell-label">MSG REF</div>
									<div class="cass-doc-cell-value">SYS-MAINT-2026-003</div>
								</div>
								<div class="cass-doc-cell">
									<div class="cass-doc-cell-label">PRIORITY</div>
									<div class="cass-doc-cell-value">ROUTINE</div>
								</div>
								<div class="cass-doc-cell">
									<div class="cass-doc-cell-label">ISSUED BY</div>
									<div class="cass-doc-cell-value">MU/TH/UR 6000</div>
								</div>
								<div class="cass-doc-cell">
									<div class="cass-doc-cell-label">TIMESTAMP</div>
									<div class="cass-doc-cell-value">2026-03-06 01:42</div>
								</div>
							</div>
						</div>
						<div class="flex justify-end" style="padding: 0.75rem 1.25rem; border-top: 1px solid var(--color-border);">
							<button class="cass-btn cass-btn-filled" { templ.Attributes{"@click": "modal=null"}... }>ACKNOWLEDGED</button>
						</div>
					</div>
				</div>
			</div>