---
version: alpha
name: Shortwave Desk
description: A lit room at night rather than a black void — slate ground, gold dial, and a magenta that only marks a peak.
meta:
  id: "theme-shortwave-desk"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Dark, but with the lamp on.
  bestFor: Monitoring and observability, radio and audio tools, log analysis, on-call consoles, night-shift software
  avoidFor: Marketing sites, print-like editorial, anything read in bright sunlight
  defaultMode: dark
  surfaceStyle: filled
  accentUse: bar
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: duotone
  motion:
    intensity: 2
    duration: 200ms
    ease: "cubic-bezier(0.25, 0.1, 0.25, 1)"
    signature: "The dial cursor glides continuously; every other element changes without moving."
  displayFont: Chivo
  displayKind: sans
  bodyFont: Rubik
  monoFont: Reddit Mono
colors:
  background: "#E0EAEA"
  foreground: "#142321"
  card: "#D6E1E1"
  card-foreground: "#142321"
  popover: "#D6E1E1"
  popover-foreground: "#142321"
  primary: "#BE7200"
  primary-foreground: "#050F10"
  secondary: "#CAD7D8"
  secondary-foreground: "#142321"
  muted: "#CAD7D8"
  muted-foreground: "#495F5C"
  accent: "#A44EC7"
  accent-foreground: "#F2FDFD"
  destructive: "#B6322D"
  destructive-foreground: "#F2FDFD"
  border: "#BAC6C6"
  input: "#BAC6C6"
  ring: "#BE7200"
  chart-1: "#B46B00"
  chart-2: "#6F9523"
  chart-3: "#00888A"
  chart-4: "#6D88E7"
  chart-5: "#AC4577"
colorsDark:
  background: "#2B3334"
  foreground: "#FFFFFF"
  card: "#314243"
  card-foreground: "#FFFFFF"
  popover: "#314243"
  popover-foreground: "#FFFFFF"
  primary: "#FFA643"
  primary-foreground: "#001111"
  secondary: "#3A5253"
  secondary-foreground: "#FFFFFF"
  muted: "#3A5253"
  muted-foreground: "#B6C3C1"
  accent: "#CE77F3"
  accent-foreground: "#001111"
  destructive: "#FF9F94"
  destructive-foreground: "#001111"
  border: "#4E6464"
  input: "#4E6464"
  ring: "#FFA643"
  chart-1: "#F39F42"
  chart-2: "#92BB4E"
  chart-3: "#00D8DB"
  chart-4: "#7F9BFC"
  chart-5: "#FFA4CB"
typography:
  display-lg:
    fontFamily: Chivo
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.06
    letterSpacing: -0.025em
  headline-lg:
    fontFamily: Chivo
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Chivo
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.32
  body-lg:
    fontFamily: Rubik
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Rubik
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Rubik
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.46
  label-caps:
    fontFamily: Rubik
    fontSize: 10px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.16em
  label-mono:
    fontFamily: Reddit Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.42
    letterSpacing: 0.01em
  numeral-xl:
    fontFamily: Reddit Mono
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 3px
  md: 5px
  lg: 7px
  xl: 10px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 15px
  lg: 22px
  xl: 44px
  gutter: 18px
  margin: 26px
  measure: 66ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 11px
  panel-filled:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 18px
  readout:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.foreground}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.sm}"
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Shortwave Desk

## Overview

Shortwave Desk is the only dark theme in this library whose dark mode stops at
slate. Every other one goes to near-black; this one holds at a mid-dark grey-blue
that reads as a room with a lamp on rather than a void with windows in it.

That decision has a practical payoff. On a near-black ground, panels can only go
lighter, so a dense console flattens into one plane plus glow. Here there is
room to go *down* as well, which means a well, an inactive panel and a disabled
control are all available without touching colour.

The gold dial is the only continuously moving thing in the system. Everything
else updates in place. It is built for monitoring, logs and on-call work, and it
is a poor choice for anything read in daylight.

## Colors

Slate, gold, and one magenta.

- **Ground (slate):** mid-dark, faintly blue. Panels go lighter, wells go
  darker, and both are legible.
- **Primary (gold):** the dial, the current channel, the selected row, the
  primary button. Warm against a cold ground so it reads as lamplight.
- **Accent (magenta):** a peak. A spike, a threshold breach, the loudest signal
  in a window. It appears as a 3px bar, never as a fill, so a screen full of
  peaks is still readable.
- **Neutrals** are only lightly tinted; the ground supplies the blue.
- Charts are polychrome, because a console plots unrelated series by definition.

## Typography

Chivo for display, Rubik for body, Reddit Mono for every readout.

- **Display:** Chivo at 48px, weight 700. A grotesque with slightly flared
  terminals — technical, but not a stencil.
- **Body:** Rubik at 14px, 1.58. Rounded corners on the letterforms take the
  hard edge off a dense console.
- **Readouts:** Reddit Mono at 12px with 0.01em tracking, always inside a filled
  chip. Frequencies, timestamps, signal strengths, error codes.
- **Labels:** uppercase at 0.16em, above every readout.

## Layout

A 12-column grid at 1400px with 18px gutters. The signature structure is the
**band strip**: a full-width horizontal scale, 72px tall, with tick marks at
regular intervals, a gold cursor at the current position, and magenta ticks at
peaks — above a two-column split of a live panel and a scrolling log.

Vertical rhythm is 4px. Panels are 18px apart, which is tight; this is a console
and space is expensive.

## Elevation & Depth

Filled. Panels are solid fills a step lighter than the ground, with a 1px border
only where two panels touch. There are no shadows — a shadow on a mid-dark
ground reads as dirt.

The dial cursor glides continuously. Every other element changes value without
changing position, so movement always means the same thing.

## Shapes

Softly rounded — 3px on controls, 7px on panels, 10px on modals. This is the
roundest of the technical themes, and it is what keeps a slate console from
feeling punitive.

Photography is duotone in the gold, used only in headers, and always of
equipment.

## Components

- **Band strip:** the signature component. 72px scale, regular ticks, gold
  cursor, magenta peak marks, mono frequency readout at both ends.
- **Readout chip:** secondary fill, mono, uppercase label above. Every live
  figure in the system is in one.
- **Log rows:** 26px, mono timestamp in a fixed 88px column, message in body-sm,
  magenta 3px bar if the row is a peak event.
- **Buttons:** gold fill, 3px radius, 11px padding.
- **Panels:** filled, 7px radius, 1px border only against another panel.

## Do's and Don'ts

- Do keep the dark ground at slate, not black.
- Do use both lighter and darker surfaces.
- Do put every live figure in a mono readout chip.
- Do reserve the magenta for peaks and use it as a bar.
- Don't add shadows on the dark ground.
- Don't animate anything except the dial.
- Don't let the gold appear on more than one element per panel.