---
version: alpha
name: Radiograph
description: A pale cyan lightbox with deep purple chrome that gets out of the way: the image owns at least sixty percent of the viewport, always.
meta:
  id: "theme-radiograph"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-02T00:58:17+09:00"
  updatedAt: "2026-09-02T00:58:17+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: The image is the application.
  bestFor: Medical imaging review, PACS viewers, scientific microscopy, satellite and survey imagery, any image-first tool
  avoidFor: Content sites, marketing, anything where the image is an illustration rather than the subject
  defaultMode: dark
  surfaceStyle: flat
  accentUse: fill
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: cool
  motion:
    intensity: 1
    duration: 120ms
    ease: "cubic-bezier(0.2, 0, 0, 1)"
    signature: "The rail slides; the image never does. Any motion applied to the subject is a diagnostic hazard."
  displayFont: Geologica
  displayKind: sans
  bodyFont: Geologica
  monoFont: B612 Mono
colors:
  background: "#A2B9B9"
  foreground: "#000000"
  card: "#A0AEAD"
  card-foreground: "#000000"
  popover: "#A0AEAD"
  popover-foreground: "#000000"
  primary: "#430769"
  primary-foreground: "#F1FDFD"
  secondary: "#92A4A4"
  secondary-foreground: "#000000"
  muted: "#92A4A4"
  muted-foreground: "#213B37"
  accent: "#73482D"
  accent-foreground: "#F1FDFD"
  destructive: "#600005"
  destructive-foreground: "#F1FDFD"
  border: "#879797"
  input: "#879797"
  ring: "#430769"
  chart-1: "#582C7E"
  chart-2: "#5A4B00"
  chart-3: "#6E1147"
  chart-4: "#006162"
  chart-5: "#621F00"
colorsDark:
  background: "#103030"
  foreground: "#FFFFFF"
  card: "#303636"
  card-foreground: "#FFFFFF"
  popover: "#303636"
  popover-foreground: "#FFFFFF"
  primary: "#B07EE1"
  primary-foreground: "#070F0F"
  secondary: "#3A4343"
  secondary-foreground: "#FFFFFF"
  muted: "#3A4343"
  muted-foreground: "#99B4AE"
  accent: "#DBA98B"
  accent-foreground: "#070F0F"
  destructive: "#EF675D"
  destructive-foreground: "#070F0F"
  border: "#495151"
  input: "#495151"
  ring: "#B07EE1"
  chart-1: "#B285DF"
  chart-2: "#AC9207"
  chart-3: "#E480B0"
  chart-4: "#009FA0"
  chart-5: "#F38D67"
typography:
  display-lg:
    fontFamily: Geologica
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Geologica
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Geologica
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.3
  body-lg:
    fontFamily: Geologica
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: Geologica
    fontSize: 13.5px
    fontWeight: 400
    lineHeight: 1.52
  body-sm:
    fontFamily: Geologica
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.45
  label-caps:
    fontFamily: Geologica
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: B612 Mono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.01em
  numeral-xl:
    fontFamily: B612 Mono
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 3px
  md: 4px
  lg: 6px
  xl: 8px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 36px
  gutter: 12px
  margin: 16px
  measure: 60ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 9px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.sm}"
    padding: 9px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 14px
  badge-label:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Radiograph

## Overview

Radiograph is a viewer. Its rule is a proportion: **the image occupies at least
60% of the viewport on every screen that has one**, and all controls live in a
single 280px rail. There is no second panel, no bottom tray, no floating
toolbar over the subject.

The second rule follows from the first: controls are an icon and a numeral, not
a labelled button. A rail with twenty labelled buttons needs 400px; the same
twenty as icon-plus-value need 280px, and a reader who uses the tool daily reads
the value, not the label. Labels appear on hover in the rail, never over the
image.

Pale cyan for the light mode lightbox, deep purple chrome, and a dark mode that
is genuinely dark because that is how these are read. It suits imaging review
and any image-first tool. It is wrong for content sites.

## Colors

Chrome that retreats, so the subject can be the only thing with tone.

- **Ground:** pale cyan in light mode, near-black in dark. Dark is the default:
  a grey-scale study read against a bright surround loses low-contrast detail.
- **Primary (deep purple):** the chrome. Rail, active tool, selected series. It
  is deliberately dark and low-chroma in light mode so it does not compete with
  the study.
- **Accent (ochre):** a **fill** on measurement chips and annotation markers. It
  is the only warm thing on screen, which is exactly why annotations are visible
  over grey-scale.
- **Neutrals** step tightly (0.03) so the rail has separation without lines.
- Charts are accented: one series, one reference band, nothing more. Histograms
  of pixel value are the main chart here and they are single-series by nature.

## Typography

Geologica throughout, B612 Mono for every measured value.

- **Display and body are the same face.** Geologica is a variable grotesque with
  a very wide weight axis, which lets a rail be built from one family at five
  weights — fewer webfont requests in a tool people keep open all day.
- **Body at 13.5px, 1.52.** Small. This is a professional tool and the density is
  intentional.
- **B612 Mono** carries window/level values, distances, HU numbers, series and
  instance numbers. B612 was drawn for aircraft cockpit displays; its whole
  design brief was legibility of numerals under bad conditions, which is the
  brief here.
- Uppercase for rail section headers only.

## Layout

**Sixty percent, and one rail.** The viewport splits: image area at 60% minimum,
rail at 280px fixed, nothing else. On a wide screen the image takes the
remainder; the rail never grows.

Multi-image layouts are a hard grid of 1, 2 or 4 panes — never 3, never a
masonry. Each pane carries a four-corner overlay of mono metadata at 12px:
patient/series top-left, orientation top-right, window/level bottom-left, scale
bar bottom-right. The overlay is the only thing ever drawn over an image and it
sits in the corners because the corners are where the subject is not.

Margins are 16px, gutters 12px. This is the densest theme in the library.

## Elevation & Depth

Flat. The rail is a fill with a 1px border against the image area, no shadow.
Dialogs are the only elevated surface and they are modal, centred, and darken
the image area behind them.

Motion is 120ms and applies to the rail only. The image never animates — not on
load, not on pane change, not on window/level adjustment. A fade applied to a
diagnostic image is a rendering of something that is not the data.

## Shapes

Small radii — 3px on controls, 4px on panels. The image area itself is square.

Photography is cool-graded and appears only on marketing and login screens.
Inside the tool there is no decorative imagery at all; every pixel of the image
area is subject.

## Components

- **Rail tool:** 40px row, 20px icon, current value in B612 Mono flush right.
  Active tool gets a primary fill. Label appears on hover inside the rail.
- **Corner overlay:** four mono blocks at 12px with a 60% alpha shadow-free
  backdrop. Never centred, never in a box.
- **Measurement chip:** accent fill, 3px radius, distance in mono. Anchored to
  the annotation with a 1px accent leader.
- **Series strip:** a horizontal filmstrip of 64px thumbnails at the bottom of
  the rail, not under the image.
- **Window/level:** two mono numerals with drag handles; the numbers are the
  control, there are no sliders.

## Do's and Don'ts

- Do give the image 60% of the viewport, minimum, on every screen.
- Do keep every control in the one 280px rail.
- Do set measured values in B612 Mono.
- Don't float a toolbar over the subject.
- Don't animate the image, ever.
- Don't use a 3-up pane layout; it wastes a quadrant.
- Don't put a label next to every icon in the rail.