Design Language

Shortwave's visual language is the Forge design system (mechaforge/forge), seeded from the locked forged-2 concept approved by Rod Leviton.

The canonical source of truth for all tokens lives at mechaforge/forge/tokens/.
Shortwave consumes a synced copy at lib/forge/tokens.css.

TODO mechaforge/shortwave#14: replace file-copy with @mechaforge/forge npm package once Forge is packaged.

The aesthetic

Terminal / instrument. Shortwave is a precision cockpit readout, not a consumer app.

• Monospace-only — Space Mono (primary, chunky/austere), JetBrains Mono (secondary/dense-code)
• All-caps labels — letter-spacing: 0.2em+ for all HUD / lab text
• Tabular nums — all timestamps, metrics, and IDs
• Zero rounding — no border-radius anywhere; sharp, angular, machined

Colour rules

The palette is strictly monochrome + one signal-green accent.

Do not add accent colours. If you feel the need for a second colour, express the meaning monochromatically first.

The 8px alignment grid

All layout dimensions are multiples of --forge-u (8px).

The signature spatial relationship: identity panel (96px) and compose bar (96px) share the same height and their bottom edges are always flush — one controlled grid across both columns.

The columnar ledger

The core chat thread — every message occupies one shared 5-column grid:

96px (time) | avatar | 132px (operator) | 1fr (transmission) | 96px (state)

• Every row uses display: grid; grid-template-columns: subgrid for hard vertical alignment
• Direction is shown by a 2px left signal-rule + faint signal-x wash on outbound rows
• No chat bubbles — machined terminal readout

Geometric avatar marks

Operators are identified by unique SVG geometric marks (not photos):

Mark is derived deterministically from the last 2 bytes of the pubkey hex.

TODO mechaforge/shortwave#13: source operator_id + avatar from Mini Mecha profiles; gate access.

Responsive contract (M6)

Shortwave uses a single codebase with a CSS breakpoint at 600px to switch layouts.

The mobile layout is a different layout over the same engine — same lib/nostr send/receive, same identity, same contacts. No fork, no duplication of logic.

Mobile-1 layout principles

• App bar: 56px compact bar — wordmark + link pill (list mode) or back + peer name + relay dot (conversation mode)
• Transmission cards: each message is a bordered card with an operator header (avatar · ID · time). Outbound cards align right + right-side signal-rule + green wash; inbound align left + left border.
• Compose bar: pinned footer with padding-bottom: calc(11px + env(safe-area-inset-bottom)) — clears iOS home indicator.
• Identity strip: docked at the bottom of the operators list, also uses env(safe-area-inset-bottom).
• Touch targets: all interactive controls ≥ 44px.
• Momentum scroll: thread and list both use -webkit-overflow-scrolling: touch.

Production placeholder icon

The app icon is a production placeholder — a geometric signal mark with the SW monogram in the Forge techwear language:

• #0c0d0e background plate with #262a2e outer border hairline
• Three concentric signal arcs in #4ea88b (at 100%, 70%, 40% opacity)
• SW monogram in #e2e4e6 with angular stroke joins
• #4ea88b accent square (the Forge signal-dot)
• Corner registration marks in #262a2e

Rod designs the hero brand mark in-house. This icon is explicitly labelled a placeholder in its source file (public/icons/icon.svg).

Generated sizes: icon-192.png, icon-512.png, icon-maskable-192.png, icon-maskable-512.png (10% safe-zone padding), apple-touch-icon.png (180×180), favicon-32.png.

Consuming Forge tokens

Shortwave uses Tailwind v4 CSS-first config. The @theme block is driven by the Forge token CSS custom properties.

/* app/globals.css */
@import "../lib/forge/tokens.css";  /* Forge tokens — do not edit here */
@import "tailwindcss";

All components reference tokens via CSS custom properties:

// Use --forge-* or --color-* aliases — never hardcode hex values
style={{ color: 'var(--forge-ink)', background: 'var(--forge-surface)' }}