---
version: alpha
name: Depth Charge
description: A deep navy hull with one lime brighter than the page can normally hold. Naval instrumentation, not a startup gradient.
meta:
  id: "theme-depth-charge"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Navy hull, one lime, and readings that never stop moving
  bestFor: Fleet and vehicle telemetry, marine and aviation, energy monitoring, control rooms
  avoidFor: Editorial, marketing sites, anything printed
  defaultMode: dark
  surfaceStyle: filled
  accentUse: bar
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: cool
  motion:
    intensity: 4
    duration: 160ms
    ease: "cubic-bezier(0.2, 0, 0, 1)"
    signature: "Needles sweep and bars fill. Motion is always along one axis."
  displayFont: Chakra Petch
  displayKind: sans
  bodyFont: Titillium Web
  monoFont: Share Tech Mono
colors:
  background: "#EDF2F9"
  foreground: "#212A33"
  card: "#E3EAF2"
  card-foreground: "#212A33"
  popover: "#E3EAF2"
  popover-foreground: "#212A33"
  primary: "#748400"
  primary-foreground: "#070E15"
  secondary: "#D8E1EB"
  secondary-foreground: "#212A33"
  muted: "#D8E1EB"
  muted-foreground: "#576372"
  accent: "#BC3E79"
  accent-foreground: "#F7FBFF"
  destructive: "#B6322D"
  destructive-foreground: "#F7FBFF"
  border: "#C6CED8"
  input: "#C6CED8"
  ring: "#748400"
  chart-1: "#718100"
  chart-2: "#009381"
  chart-3: "#1672BF"
  chart-4: "#AF66B8"
  chart-5: "#A84603"
colorsDark:
  background: "#021429"
  foreground: "#D8E2EE"
  card: "#101F2F"
  card-foreground: "#D8E2EE"
  popover: "#101F2F"
  popover-foreground: "#D8E2EE"
  primary: "#C7E02B"
  primary-foreground: "#040E1A"
  secondary: "#152B42"
  secondary-foreground: "#D8E2EE"
  muted: "#152B42"
  muted-foreground: "#8693A1"
  accent: "#FE82B6"
  accent-foreground: "#040E1A"
  destructive: "#FFBFB6"
  destructive-foreground: "#040E1A"
  border: "#26394F"
  input: "#26394F"
  ring: "#C7E02B"
  chart-1: "#B8CF36"
  chart-2: "#00D4BB"
  chart-3: "#A1CFFF"
  chart-4: "#E186EC"
  chart-5: "#FFC1A4"
typography:
  display-lg:
    fontFamily: Chakra Petch
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Chakra Petch
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Chakra Petch
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Titillium Web
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Titillium Web
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Titillium Web
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Titillium Web
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.12em
  label-mono:
    fontFamily: Share Tech Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Share Tech Mono
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 6px
  xl: 10px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 22px
  xl: 40px
  gutter: 16px
  margin: 24px
  measure: 72ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 10px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 10px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 16px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Depth Charge

## Overview

Depth Charge is instrumentation. The ground is a saturated deep navy — not a
neutral dark grey, a blue you could name — and the readings sit on it in a lime
that is deliberately brighter than anything else in this library. In a control
room, contrast is not a style choice.

Panels are filled rather than outlined, gauges are drawn as arcs and bars rather
than as cards, and every value has a unit and a state. Nothing here is
decorative: if it is on the screen, someone might have to act on it.

Personality: alert, mechanical, slightly military. No gradients as decoration.

## Colors

Navy hull, lime readings, one pink alarm.

- **Ground (#021429):** Deep navy at high chroma. It is the only theme here with
  a genuinely saturated dark ground.
- **Primary (#C7E02B):** Instrument lime. Live values, the fill of a gauge, the
  active tab. Extremely bright by design.
- **Accent (#FE82B6):** Alarm pink. Out of range, overdue, disconnected. It is
  never used for anything that is not a problem.
- **Panels:** filled one step up from the navy, with no border at all in dark
  mode. The fill is the boundary.
- Charts are polychrome, because a control screen is genuinely plotting
  unrelated systems.

## Typography

Chakra Petch for structure, Titillium Web for prose, Share Tech Mono for every
reading.

- **Display:** Chakra Petch at 40px. Its cut corners read as instrumentation
  without tipping into science fiction.
- **Body:** Titillium Web at 14px. There is very little prose here; when there
  is, it is an explanation of a state.
- **Labels:** uppercase at 10.5px with 0.12em tracking. Every gauge has one.
- **Readings:** Share Tech Mono with tabular figures. Units are always present
  and always in muted-foreground at the same size.

## Layout

A 12-column grid at 1440px with 16px gutters and a tight 24px margin. The
signature layout is a gauge wall: a 4-column row of arc gauges above a 2:1 split
of a live chart and an event log.

Vertical rhythm is 4px. Panels butt against each other with only the gutter
between them — no section spacing, because the screen is one instrument.

## Elevation & Depth

Depth is a tonal fill upward from the navy, with no borders and no shadows in
dark mode. The only exception is the alarm state, which draws a 2px pink outline
around the offending panel and pulses it once.

## Shapes

Tight: 6px on panels, 4px on buttons, 2px on badges. Gauge arcs are stroked at
8px with round caps and always start at the same angle so a wall of them reads
as a set.

Photography is rare and cool-graded; when a camera feed appears it is given a
2px lime frame.

## Components

- **Arc gauges:** the signature component. An 8px stroked arc from 135 to 45
  degrees, lime fill on a muted track, the reading in mono at the centre and the
  unit beneath it.
- **Buttons:** lime fill, navy text, 4px radius, 10px padding.
- **Event log:** a mono list with a 3px left bar coloured by severity, newest at
  the top, timestamps in muted-foreground.
- **Panels:** filled, no border, 16px padding, uppercase label at top-left.
- **Badges:** 2px radius, 18% tint of the state colour, full-strength text.

## Do's and Don'ts

- Do keep every reading in tabular mono with a visible unit.
- Do use the pink only for genuine alarms.
- Do let panels touch, with only the gutter between them.
- Don't put a border on a panel in dark mode; the fill is the boundary.
- Don't use the lime as a background for text.
- Don't animate on two axes — motion here sweeps or fills, never both.
- Don't add a gradient that does not encode a value.