Color: base register

Page surface, ink hierarchy, fleet hull, spacesuit, Atlas machine canon, color temperature, status semantics. From tokens/color.css.

Text aliases (semantic ladder)

Text-on (foreground per background)

Text-on-character-dominant (per cast member)

Color: cast

Two-color palette per character. Thirteen cards bound through [data-character]. Atlas adds a third token (--color-character-led).

• INNOCENT

  Reed

  Chaplain

• ORPHAN

  Stone

  Life Support Officer

• HERO

  Reeve

  Security Officer

• CAREGIVER

  Vance

  Chief Medical Officer

• EXPLORER

  Frost

  Planetary Science Officer

• REBEL

  Dalton

  Pilot

• LOVER

  Hale

  Crew Psychologist

• CREATOR

  Voss

  Chief Engineer

• JESTER

  Cross

  Communications Officer

• SAGE

  Sterling

  Chief Science Officer / Navigator

• MAGICIAN

  Kade

  Systems Engineer

• RULER

  Brennan

  Captain

• ATLAS

  Atlas

  Ship Intelligence

Color: craft accents

Per-craft accent tokens layered on the matte white-gray fleet hull (--color-hull-white). Each craft has role-specific stencil, utility, and warning marks.

Color: environment

Per-environment palettes for ship interiors, exterior worlds, and act registers (Earth post-Event, Mars hostile underground, lunar surface, deep space, Federation worlds). From tokens/color-environment.css.

Typography

Five families, full type scale through 8xl, twelve comic role tokens that bundle family + size + weight + leading + tracking.

Families

Scale

Comic role tokens

Layout: spacing

4px base scale, 23 steps from --space-0 to --space-64. Reading-column tokens plus six breakpoints documented in tokens/layout.css.

Container max-widths

Section vertical rhythm

Panel: bubbles, captions, SFX

Speech, thought, Atlas voice, shout, whisper bubble variants. Caption box. SFX text. Six ink-line weights.

Bubbles

Caption box

SFX

KRAK! BOOM! whssshhh

Ink line weights

Motion: timings, choreography

Ten base timings, seven easing curves, four composite choreography beats (attack, reveal, intimate, grief), Atlas LED pulse and still-pause tells.

Timings (sweep loops)

Easings

Choreography beats

Atlas LED pulse

Sound: gains, ambients

Master gain, six channel gains (ambient, atlas, cue, music, sfx), per-environment ambient multipliers. Runtime audio engine lands on a follow-up pass.

Gain channels

Ambient by environment

Effect: halftone, vignette, glow, flash, shake, barcode

Halftone densities, screentone, vignette weights, flash and shake animations, Atlas-amber glow, barcode flourishes for sci-fi UI.

Halftone

Vignette

Flash and Shake (animated)

Glow

Barcode (sci-fi UI flourish)

Photo filters (apply to imagery)

Blur scale (backdrop)

Elevation: shadows, focus

Soft elevation shadows, comic offset shadows, panel framing, focus rings.

Focus ring

Border radius scale

Shadow inner

Component: buttons, inputs, cards, toasts

UI primitives wired to the new tokens/component.css. Compose at component level.

Buttons (variant x size)

Inputs

Cards

Toasts

Tooltip

Avatars

Badges

Button height scale

Input height scale

Progress bar

State: hover, semantic banners

Interactive states (hover, active, focus, disabled, loading) plus semantic surfaces.

Banners

Disabled, loading

Interactive: hotspot, reveal, audio, subtitle

Web-comic-specific affordances. Tokens declared; component runtimes land later.

Click hotspot (panel-internal)

Reveal element

Scroll progress and chapter pips

Audio control

Subtitle

Dossier: classification, file-no, frontmatter, sections, stamps

Visual register tokens for the dossier-document treatment used across the site. Tokens in tokens/dossier.css; global utility classes in styles/dossier.css; <Stamp> component at components/Stamp.astro.

Classification banner

RESTRICTED // THRESHOLD-ALPHA // PUBLIC RELEASE PENDING

Page header (file-no, title, subtitle)

Front-matter table

Subject

Sample dossier entry

Designation

ADN-S1

Classification

Restricted

Section heading

§ 1. Section header sample

Section rule (standalone)

Stamps (three preset tilts)

Redaction bars (length variants)

Inline use: the rest of this paragraph is partially withheld and continues here. A bar can sit inside running text.

Full-width:

Exhibit frame

Microcopy footer

prepared by archive · date 2089 · distribution restricted

Surface tonal staircase

Six-step bg tone scale. Mixes --text-high into --surface-page at 0/4/8/12/16/22%, so it auto-flips between light and dark themes. Used for layered band backgrounds (cover sheet, manifests, panels).

Rule + divider

Translucent rules that flip with theme.

Status indicators

Small dots for telemetry cells, manifest rows, crew tiles. Composes the existing 5-stop status ramps.

• --dossier-status-ok
• --dossier-status-warn
• --dossier-status-alert
• --dossier-status-info

HUD corner-bracket frame

Four L-shaped registration marks at frame corners. The mission-interface signature for hero / manifest / portal blocks.

Band eyebrow strip

Repeating section header: // 0N // NAME left, rule fill, mono meta right. The connective tissue that turns a stack of bands into a single instrument panel.

Dotted leader

The line of dots between a label and its value. Used in manifests, signatures, and bibliographies.

Subject

Sample value

Designation

ADN-S1

Classification

Restricted

Pip rating (5-step)

Used by the standardized character dossier readout (operational profile, decision profile, alignment axis). Five pips, filled count maps to value; same scale across all 13 character pages.

Composure

Acumen

Empathy

Failure-mode flag pills

Compressed flag terms for character-level risk surfaces (lifted from each character's Shadow). Mono caps, alert-color border.

• scales-balance paralysis
• balancing-the-room bias
• scapegoat-magnet plumage

Live readout assembled from these primitives ships on every character page (e.g. Brennan, Atlas synthetic branch).

Drive: bubble, catalyst, state, hum

Gravimetric / catalyst-bubble propulsion tokens. Visual cues (bubble shimmer, refraction halo), HUD instrumentation (catalyst gauge, state codes, signature damper), and motion (spool build, hum fade). Source: docs/PROPULSION.md. Tokens in tokens/drive.css.

Bubble shimmer (engagement, transit)

Catalyst reserve gauge

Drive state indicators

Signature damper (engagement loudness)

Drive zones (ship-section overlay)

Hum fade tokens (--drive-hum-fade-in/out/-drop-cue) and spool timings (--drive-spool-build/trail) are declared but runtime audio wiring lands later.

Navigation: top bar, dropdown, breadcrumb, sidebar

Top-bar primary nav, hover dropdown, in-page breadcrumb, secondary sidebar rail. Tokens in tokens/component.css.

Top bar (default)

Top bar (compact / scrolled)

Dropdown / submenu

Breadcrumb

Sidebar rail

Mobile nav: hamburger, drawer

Hamburger glyph and off-canvas drawer with scrim. Tokens in tokens/interactive.css; runtime open/close state lands later.

Hamburger button (closed and open glyph)

Drawer surface (statically open)

Footer: editorial register, skip-link

Footer composes paper-deep, fine ink rules, mono microcopy. Tokens in tokens/component.css.

Skip link (visible on focus only)

Tab into the link below; the skip-link surfaces.

Editorial footer

Brand: logo scale

Wordmark at six size steps. Mark composes against either theme via currentColor.

Iconography: icon scale, aspect ratios

Icon size scale, stroke widths, aspect-ratio vocabulary.

Icon size scale

Aspect ratios

Dispatch: transmission register

Visual language for the newsletter hub and individual post pages. FREQ-NNN designators, signal-status dots, comms-log table, decoded transmission header, subscribe block. Tokens in tokens/dispatch.css.

FREQ designators

Signal status dots

Comms log entry row

Decoded transmission header

End-of-transmission mark