Orbital Archive No. 01

System in use

Before the documentation, the system demonstrates itself — an unretouched Mission-depth workspace built entirely from the contracts and tokens on this page.

TOKENS · --lsm-color-semantic-surface · --lsm-color-semantic-primary · --lsm-font-display

Review workspaceOverviewActivitySettings

Ready for review

6 added today

Priority items

2 due this week

Records complete

Within target

Record	Owner	Updated	State
Quarterly access review	M. Chen	`4 min ago`	Priority
Vendor evidence packet	A. Rivera	`22 min ago`	Nominal
Policy exception register	T. Singh	`Yesterday`	Attention
Control owner roster	J. Okafor	`Aug 08`	Nominal

Design principles

Function before ornament. Signal over noise. Accent with intent. Structure creates calm.

TOKENS · --lsm-font-display · --lsm-color-palette-teal · --lsm-space-6

P.01

Clarity

Make orientation, state, and next action legible before expression.

P.02

Precision

Use exact labels, stable alignment, and deliberate state language.

P.03

Restraint

Accent only where it carries hierarchy or meaning.

P.04

Optimism

Technical systems should feel capable and understandable.

Color & severity

Calm Graphite is the operational default. Ignition Orange is a controlled editorial signal — not a status color. Fault Red stays reserved for error, critical, and destructive state.

TOKENS · --lsm-color-palette-* · --lsm-color-semantic-editorial-signal · --lsm-color-semantic-error

Orbit#11181E

--lsm-color-palette-orbitDeepest editorial surface — hero and full-bleed grounds

Graphite#253139

--lsm-color-palette-graphiteDefault operational background across Mission depth

Slate#2D3A42

--lsm-color-palette-slateRaised surface — cards and panels

Alloy#37464F

--lsm-color-palette-alloyElevated controls, inputs, and popovers

Gridline#56656E

--lsm-color-palette-gridlineBorders, rules, and schematic linework

Dust#B3BBC2

--lsm-color-palette-dustMuted content — AA legible on every surface

Bone#E7E1D5

--lsm-color-palette-bonePrimary content and headings

Teal#5CA3A6

--lsm-color-palette-tealActive, focused, linked, and info state — never the primary action

Gold#CBAE67

--lsm-color-palette-goldPriority and editorial hierarchy accents

Orange#CB7248

--lsm-color-palette-orangePrimary action & editorial signal — one job per surface

Signal#7EB79E

--lsm-color-palette-signalNominal and success state

Rust#C97A60

--lsm-color-palette-rustWarning and degraded state

Fault#EA7468

--lsm-color-palette-faultError, critical, and destructive state

Severity scale · semantic tokens

Info--lsm-color-semantic-info

Success--lsm-color-semantic-success

Warning--lsm-color-semantic-warning

Error--lsm-color-semantic-error

Typography

Display creates identity. Interface carries work. Monospace communicates machine state.

TOKENS · --lsm-font-display · --lsm-font-sans · --lsm-font-mono · --lsm-font-size-display1

Display · Oswald

Aerospace
Signal

Interface · Inter

Mission Control Interface

Readable hierarchy for labels, forms, navigation, descriptions, and data interpretation.

Telemetry · IBM Plex Mono

UPLINK› 14:32:18 UTC
CALLSIGN: LUNA-01
STATUS: TRAJECTORY NOMINAL
FAULT: NONE

Orbital depth architecture

Complexity rises only when the task requires it. Every deeper context retains a visible way back.

TOKENS · --lsm-color-semantic-surface-deep · --lsm-color-semantic-surface · --lsm-color-semantic-surface-elevated · --lsm-shadow-raised

Signal

Orientation, essential state, and one primary action.

Mission

Forms, filters, progress, and moderate task data.

Systems

Advanced settings, diagnostics, logs, and dense telemetry.

Page anatomy

Use the same calm sequence in every stack: context, task, primary work surface, supporting context, then deliberate systems detail.

TOKENS · --lsm-grid-columns · --lsm-grid-gutter · --lsm-space-16 · --lsm-size-content

01 / CONTEXT

Locate

Mission or scope, current state, and only controls that affect the current view.

02 / PRIMARY SURFACE

Work

The form, queue, record, or focused dashboard. It carries the visual weight and the one clear next action.

03 / SUPPORT

Confirm

Compact status, help, and related context. Stack it after the work surface on narrow screens.

Wide screensGive the primary work surface roughly two-thirds of the width. Use the remaining third only for supporting context that improves the active decision.

Small screensKeep labels visible and stack supporting context after work. Defer low-frequency settings and raw telemetry behind deliberate disclosure.

Orbital architectureUse large arcs, horizon curves, trajectory lines, registration marks, and subtle texture to frame the composition. Do not use aerospace photography.

Expression by depthSignal may be cinematic. Mission remains restrained. Systems can become denser and schematic only after deliberate entry.

Application atlas

Thirteen complete, stack-neutral references cover cinematic entry, product shells, active work, administration, content, settings, sequencing, mobile, and deep diagnostics. The nine specimens below show the range; open the full atlas for every responsive page.

TOKENS · --lsm-color-semantic-primary · --lsm-font-display · --lsm-shadow-overlay

Editorial landing

SIGNAL / 01

Oversized identity, one invitation, plotted flight architecture, and a protected copy corridor.

Portfolio

SIGNAL / 02

Project storytelling with a large media plane and smaller evidence cards.

Operations dashboard

MISSION / 05

Orientation metrics lead directly into a live work trajectory and review queue.

Data administration

MISSION / 06

Calibration, scoped filters, a dense record table, and an inspector that does not interrupt scanning.

Knowledge base

MISSION / 08

A protected reading column, stable guide rail, and horizon profile inside a dedicated figure.

Settings

MISSION / 09

Grouped controls with an impact summary and an instrument-like configuration profile.

Mission timeline

MISSION / 11

A real trajectory mapped to discovery, build, launch, and observation milestones.

Mobile work

MISSION / 12

Primary action first. Supporting context follows in a narrow, explicit sequence.

Deep systems diagnostics

SYSTEMS / 13

Visible scope, topology, state summary, bounded logs, and an obvious route back to operations.

Open all 13 complete responsive applicationsApplication atlas →

Components & states

49 governed, stack-neutral contracts cover core actions, forms, navigation, feedback, overlays, data display, and layout.

TOKENS · --lsm-color-semantic-primary · --lsm-radius-sm · --lsm-size-control · --lsm-shadow-focus

Button

Triggers a single, discrete action. Label with a verb phrase in the imperative. Minimum target height is 46px; focus, hover, and disabled are contract-required states.

TOKENS · --lsm-* semantic action + control sizing

States

Default

Hover

Primary

Secondary

Ghost

Disabled

Usage

button.primary · HTML + CSS

<!-- markup -->
<button class="btn btn--primary">
  Initiate sequence
</button>

/* consumes tokens — no hard-coded color */
.btn--primary {
  background: var(--lsm-color-semantic-primary);
  color: var(--lsm-color-semantic-primary-foreground);
  min-height: var(--lsm-size-control);
  font-family: var(--lsm-font-mono);
}

Tokens consumed

--lsm-color-semantic-primaryfill
--lsm-color-semantic-primary-foregroundlabel
--lsm-size-controlheight
--lsm-radius-smcorner
--lsm-shadow-focusfocus ring
--lsm-font-monolabel type

Guidance

◆ Do

Give a surface exactly one primary orange button for its single most important action; pair it with secondary controls for everything else.

✕ Don't

Never stack multiple primary buttons or use Ignition Orange to signal status — severity has its own semantic colors.

Input

Collects a single line of typed text. Pair every field with a persistent, visible label; the invalid state and Fault Red are reserved for validation failure, never for emphasis.

TOKENS · --lsm-color-semantic-surface · --lsm-color-semantic-border · --lsm-color-semantic-focus · --lsm-color-semantic-error

States

Default

Hover

Focus

Filled

Invalid

Disabled

Read-only

Guidance

◆ Do

Keep the label visible above the field and surface each validation error inline in Fault Red, next to the input it describes.

✕ Don't

Don't lean on placeholder text as the only label, and never tint a valid field red or an idle field Ignition Orange to pull attention.

Select

Chooses one option from a known, finite list. The current value stays legible at rest behind a caret; the list opens on click, focus, or arrow keys.

TOKENS · --lsm-color-semantic-surface · --lsm-color-semantic-border · --lsm-color-semantic-focus · --lsm-radius-sm

States

Default

Hover

Focus

Selected

Invalid

Disabled

Guidance

◆ Do

Use a Select for four to twelve mutually exclusive options, keep the resting value legible, and drive focus and the open affordance with Teal.

✕ Don't

Don't reach for a Select when two or three options fit a segmented control, and don't ship it with no default or placeholder cue.

Toggle

Commits a binary on/off setting immediately, with no separate save step. The on position and its track read in Teal to match the system's active language — never Ignition Orange.

TOKENS · --lsm-color-palette-teal · --lsm-color-palette-gridline · --lsm-color-palette-bone · --lsm-color-semantic-focus

States

Off

Hover

Focus

Disabled

Guidance

◆ Do

Use a toggle only for an instant on/off setting, and let Teal carry the on state so "active" stays consistent with focus and links.

✕ Don't

Don't use a toggle for actions that need a Save, and never color the on state Ignition Orange — orange is rationed to one primary action.

Status chip

Labels the current state of an object in a compact, non-interactive tag. Each severity maps to one fixed semantic color so status reads the same everywhere it appears.

TOKENS · --lsm-color-semantic-info · --lsm-color-semantic-success · --lsm-color-semantic-warning · --lsm-color-semantic-error

States

NeutralNeutral · dust

InfoInfo · teal

NominalSuccess · signal

DegradedWarning · rust

FaultError · fault

StandbyStandby · gold

Guidance

Nominal Degraded Fault

◆ Do

Map each status to its fixed semantic color — Teal info, Signal success, Rust warning, Fault error — and keep the label to a single word.

Active Fault

✕ Don't

Don't signal status with Ignition Orange or remap colors per screen — orange means action, not condition, and drift breaks scannability.

Segmented control

Switches between a few mutually exclusive views in place. Exactly one segment is active at a time; the active segment fills with Teal to match the system's active language.

TOKENS · --lsm-color-palette-teal · --lsm-color-semantic-border · --lsm-color-semantic-surface · --lsm-font-mono

Variants

OrbitSystemsPayload

Interactive · click to switch

Guidance

DayWeekMonth

◆ Do

Use a segmented control for two to four peer views with short labels; the single active segment carries Teal.

OverviewSystemsPayloadLogsDelete

✕ Don't

Don't overflow past four segments or bury a destructive action inside — it selects a view, it doesn't confirm or delete.

Tabs

Organizes peer sections under one region, showing a single panel at a time. The selected tab is marked with a Teal underline; a disabled tab stays present but inert.

TOKENS · --lsm-color-palette-teal · --lsm-color-semantic-border · --lsm-color-semantic-focus · --lsm-color-semantic-muted-foreground

States

MissionTelemetryLogsArchive

Selected · hover · disabled · click to switch

Guidance

MissionTelemetryLogs

◆ Do

Give the selected tab a clear Teal underline, hold labels to one or two words, and preserve each panel's state as users move between tabs.

HomePricingSign out

✕ Don't

Don't route primary navigation or one-way actions like sign-out through tabs, or disable a tab with no explanation of why.

Additional display patterns — quick reference, not yet full contract docs

Progress

72% COMPLETE

Slider

Signal gain — 64%

Telemetry

Uplink14:32:18

CallsignLUNA-01

StatusNominal

Asset language

Marks, technical patterns, typography, and restrained framing carry the aerospace identity. The icon set is conventional and immediately legible, adapted from Tabler Icons (MIT).

TOKENS · --lsm-color-palette-teal · --lsm-color-palette-gold · --lsm-border-width

24-pixel grid

1.5-pixel default stroke, round caps and joins, monochrome currentColor.

Optical sizes

Review at 16, 20, 24, 32, and 48 pixels; interactive targets remain at least 44 pixels where practical.

Delivery

Individual SVGs, symbol sprite, and searchable JSON metadata—usable in any stack.

Scope discipline

Do not invent niche pictograms. Use text labels, established platform symbols, or a vetted icon library when a conventional native glyph is unavailable.

Native icon catalog

161 conventional icons across 5 categories, adapted from Tabler Icons (MIT) and normalized to the Orbital contract. See THIRD_PARTY_NOTICES.md. Search the full family directly in this standalone guide.

TOKENS · --lsm-size-icon · --lsm-color-palette-teal

161 assets

Component contract manifest

State coverage, allowed depth, and stable contract IDs are machine-readable in components/contracts.json and validated.

TOKENS · --lsm-font-mono · --lsm-color-semantic-border

Component	States	Depth	Contract ID
Button	default hover active focus disabled loading	`0 / 1 / 2`	`button`
IconButton	default hover active focus disabled	`0 / 1 / 2`	`icon-button`
ButtonGroup	horizontal vertical responsive disabled	`0 / 1 / 2`	`button-group`
Card	default elevated interactive disabled	`0 / 1 / 2`	`card`
Badge	neutral info success warning error priority	`0 / 1 / 2`	`badge`
StatusChip	neutral info success warning error standby	`0 / 1 / 2`	`status-chip`
Alert	neutral info success warning error	`0 / 1 / 2`	`alert`
Avatar	image fallback online offline busy	`1 / 2`	`avatar`
EmptyState	default compact action	`0 / 1 / 2`	`empty-state`
Separator	horizontal vertical decorative semantic	`0 / 1 / 2`	`separator`
Skeleton	loading reduced-motion	`1 / 2`	`skeleton`
Spinner	active reduced-motion	`0 / 1 / 2`	`spinner`
Input	default hover focus filled invalid disabled readonly	`1 / 2`	`input`
Textarea	default hover focus filled invalid disabled readonly	`1 / 2`	`textarea`
SearchInput	default focus filled disabled	`1 / 2`	`search-input`
Select	default hover focus selected invalid disabled	`1 / 2`	`select`
Checkbox	unchecked checked indeterminate focus disabled invalid	`1 / 2`	`checkbox`
RadioGroup	unchecked checked focus disabled invalid	`1 / 2`	`radio-group`
Toggle	off on hover focus disabled	`1 / 2`	`toggle`
Slider	default hover focus disabled value	`1 / 2`	`slider`
Combobox	default focus expanded selected invalid disabled	`1 / 2`	`combobox`
FileInput	empty selected invalid disabled drag-ready	`1 / 2`	`file-input`
CharacterCount	empty typing nearing-limit over-limit disabled	`1 / 2`	`character-count`
Tabs	default hover focus selected disabled horizontal vertical	`0 / 1 / 2`	`tabs`
Accordion	collapsed expanded hover focus disabled	`0 / 1 / 2`	`accordion`
Tooltip	closed hover focus open escaped	`1 / 2`	`tooltip`
Dialog	closed open focus-trapped dismissing	`1 / 2`	`dialog`
Drawer	closed open focus-trapped dismissing left right	`1 / 2`	`drawer`
Progress	determinate indeterminate complete error	`0 / 1 / 2`	`progress`
Meter	low optimum high critical	`1 / 2`	`meter`
DataTable	populated empty loading overflow selected	`1 / 2`	`data-table`
Breadcrumb	default current collapsed overflow	`0 / 1 / 2`	`breadcrumb`
Navigation	default hover active focus compact expanded	`0 / 1 / 2`	`navigation`
Pagination	first middle last current disabled compact	`1 / 2`	`pagination`
StepIndicator	complete current upcoming error vertical horizontal	`1 / 2`	`step-indicator`
Toolbar	horizontal vertical focus disabled overflow	`1 / 2`	`toolbar`
CodeSnippet	default copied multiline overflow	`0 / 1 / 2`	`code-snippet`
Banner	info success warning error dismissible	`0 / 1 / 2`	`banner`
ToastProvider	queued visible dismissing info success warning error	`1 / 2`	`toast-provider`
Menu	closed open hover focus disabled destructive	`1 / 2`	`menu`
Disclosure	closed open hover focus disabled	`0 / 1 / 2`	`disclosure`
Tag	static interactive removable selected disabled	`1 / 2`	`tag`
SummaryBox	default priority info	`0 / 1 / 2`	`summary-box`
DepthBoundary	signal mission systems editorial operational	`0 / 1 / 2`	`depth-boundary`
Container	responsive constrained full-bleed	`0 / 1 / 2`	`container`
Stack	vertical responsive	`0 / 1 / 2`	`stack`
Cluster	wrapped aligned distributed	`0 / 1 / 2`	`cluster`
AutoGrid	responsive dense auto-fit	`0 / 1 / 2`	`auto-grid`
DescriptionList	stacked inline compact	`0 / 1 / 2`	`description-list`

From signalto systems.

System in use

Design principles

Clarity

Precision

Restraint

Optimism

Color & severity

Typography

Orbital depth architecture

Signal

Mission

Systems

Page anatomy

Locate

Work

Confirm

Application atlas

Editorial landing

Portfolio

Operations dashboard

Data administration

Knowledge base

Settings

Mission timeline

Mobile work

Deep systems diagnostics

Components & states

Button

Tokens consumed

◆ Do

✕ Don't

Input

◆ Do

✕ Don't

Select

◆ Do

✕ Don't

Toggle

◆ Do

✕ Don't

Status chip

◆ Do

✕ Don't

Segmented control

◆ Do

✕ Don't

Tabs

◆ Do

✕ Don't

Asset language

Native icon catalog

Component contract manifest

From signal
to systems.