Terminal Cobalt DESIGN.md

---
version: 1
name: "Terminal Cobalt Mobile"
colors:
  primary: "#0057FF"
  on-primary: "#FFFFFF"
  surface: "#121212"
  surface-alt: "#1E1E1E"
  surface-muted: "#2C2C2C"
  on-surface: "#FFFFFF"
  on-surface-variant: "#A3A3A3"
  border: "#333333"
  success: "#4ADE80"
  error: "#FF3B30"
  accent-categorical-1: "#FB923C"
  accent-categorical-2: "#60A5FA"
  accent-categorical-3: "#2DD4BF"
  accent-categorical-4: "#C084FC"
  accent-categorical-5: "#22D3EE"
  accent-categorical-6: "#F472B6"
  accent-categorical-7: "#F87171"
  accent-categorical-8: "#FACC15"
typography:
  display-lg:
    fontFamily: "Space Grotesk"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 52px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 26px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0.02em
  body-md:
    fontFamily: "JetBrains Mono"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0em
  body-sm:
    fontFamily: "JetBrains Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  label-md:
    fontFamily: "JetBrains Mono"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 14px
    letterSpacing: 0.15em
  label-uppercase:
    fontFamily: "JetBrains Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0.18em
  caption:
    fontFamily: "JetBrains Mono"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: 0.18em
  numeric-md:
    fontFamily: "JetBrains Mono"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: 0em
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
  gutter: 24px
  card-padding: 16px
  section-gap: 32px
icons:
  set: solar
  default_variant: bold
  active_variant: bold
  stroke_weight: n/a
  default_size: 20px
components:
  card:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    padding: 16px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-md}"
    borderColor: "{colors.primary}"
    borderWidth: 2px
    boxShadow: "0 0 20px rgba(0,87,255,0.3)"
    rounded: "{rounded.lg}"
    height: 56px
    paddingX: 24px
    gap: 12px
  button-secondary:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    height: 40px
    paddingX: 16px
  button-icon:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    size: 40px
    iconSize: 20px
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    border: none
    boxShadow: none
  input-text:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 12px
    focusRingColor: "{colors.primary}"
  chip:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 8px
  chip-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    borderColor: "{colors.primary}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    paddingX: 16px
    paddingY: 8px
  badge-pill:
    backgroundColor: "rgba(74,222,128,0.10)"
    textColor: "{colors.success}"
    typography: "{typography.body-sm}"
    borderColor: "rgba(74,222,128,0.20)"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.sm}"
    paddingX: 8px
    paddingY: 4px
  badge-circle:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-surface}"
    border: none
    boxShadow: none
    rounded: "{rounded.full}"
    size: 12px
  avatar:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    borderWidth: 2px
    boxShadow: none
    rounded: "{rounded.lg}"
    size: 64px
  list-row:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    rounded: "{rounded.lg}"
    padding: 16px
    gap: 12px
  top-app-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    border: none
    boxShadow: none
    height: 64px
    paddingX: 24px
  tab-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface-variant}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    boxShadow: none
    height: 88px
    paddingX: 24px
  tab-item-active:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    border: none
    boxShadow: none
    iconSize: 24px
  tab-item-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.caption}"
    border: none
    boxShadow: none
    iconSize: 24px
  tab-item-fab:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "rgba(255,255,255,0.10)"
    borderWidth: 1px
    boxShadow: "0 0 15px rgba(0,87,255,0.4)"
    rounded: "{rounded.full}"
    size: 56px
    iconSize: 28px
---

# Terminal Cobalt Mobile

## Overview

**Industrial. Instrumented. Operational.** This aesthetic borrows from trading desks, ops dashboards, and developer consoles — a near-black canvas with a single saturated electric-blue accent and a typographic system that pairs a humanist geometric sans for headings with a code-grade monospace for everything else. Every screen feels like a panel on a control surface: bordered tiles, uppercase tracked-out kickers, status dots, and tiny telemetry captions in the corners.

The mood is alert and precise. Whitespace is moderate, not generous; surfaces are rectilinear with only mild rounding (8px max on chrome, 4px on inline accents). A single saturated blue carries all action and selection states, and a small categorical palette of saturated colors (orange, teal, purple, pink, cyan, yellow) is reserved exclusively for tagging items in lists — never for chrome.

The signature moves: an uppercase tracked-out heading anchored by a 4px primary-color left bar, hairline borders rendered against a deep neutral background, and a single glowing primary CTA whose box-shadow halo is the loudest moment on the screen.

## Colors

The system is dark-mode-only by intent. The deep neutral stack — `{colors.surface}` (#121212) page, `{colors.surface-alt}` (#1E1E1E) cards, `{colors.surface-muted}` (#2C2C2C) inputs — provides three tonal layers visible against `{colors.border}` (#333333) hairlines. Foreground text is pure `#FFFFFF` for primary content and `{colors.on-surface-variant}` (#A3A3A3) for metadata, captions, and inactive tab labels.

`{colors.primary}` is a single saturated electric blue (#0057FF). It is reserved for: the primary CTA, the 4px section-heading accent bar, the active tab item, focus rings, the floating center FAB, and a single highlighted bar in any chart. **Never** use primary as a card background, a row background, or general decoration — its scarcity is the entire reason it reads as "active."

Semantic colors: `{colors.success}` (#4ADE80) and `{colors.error}` (#FF3B30) appear only inside tinted pill badges (10% bg / 20% border / full text) for positive/negative deltas and confirmed/destructive states. The destructive button mirrors the primary button shape but swaps the halo color.

The categorical palette (`accent-categorical-1` through `-8`) is for **identity dots only** — a 8–12px filled circle inside a bordered icon tile that lets a user visually distinguish one row from another. Never paint a card, button, or chrome surface with these.

## Typography

Three families, each with a clear job:

- **Space Grotesk** (heading face) — used for `{typography.display-lg}` (hero balance numerals) and `{typography.headline-lg}` (profile/identity primary titles). Geometric humanist sans, tight tracking, weight 700.
- **JetBrains Mono** (body face, the dominant voice) — used for `{typography.body-md}`, `{typography.body-sm}`, `{typography.label-md}`, `{typography.label-uppercase}`, `{typography.caption}`, and `{typography.numeric-md}`. Monospace gives the entire system its "instrument readout" character. Numbers are inherently tabular here.
- **Playfair Display** (serif) — declared but reserved for rare display moments; default to not using unless the brief explicitly wants editorial contrast.

Weight strategy: monospace text is either 400 (captions, secondary metadata) or 700 (any name, value, or label that anchors a row). There is no 500/600 middle ground — the binary weight contrast is part of the aesthetic.

`{typography.label-uppercase}` and `{typography.caption}` are the workhorses of secondary information: status pills, row metadata, "TOTAL BALANCE", "24H CHANGE", tab labels. They are ALWAYS uppercase with `tracking-widest` (~0.18em). This tracked-out uppercase mono is a load-bearing aesthetic move — losing it collapses the whole identity into a generic dark theme.

`{typography.headline-md}` is for section anchors ("MAIN ASSETS", "RECENT TX", "ACCOUNT SETTINGS"). It is uppercase, weight 700, paired with the 4px primary left-bar (`border-l-4 border-primary pl-3`) — that bar is mandatory; it's how sections are visually demarcated.

## Spacing & Layout

Density is medium-tight. Page gutter is `{spacing.gutter}` (24px). Cards pad at `{spacing.card-padding}` (16px). Vertical section gap is `{spacing.section-gap}` (32px). Inline gaps inside rows are `{spacing.md}` (12px) between an icon-tile and its text.

The rhythm is grid-like: 2-column tile grids use `{spacing.md}` gap, vertical lists stack with `{spacing.md}` between rows. Headers sit tight to the screen edge top with `p-6 pb-2` so the status row above the first section doesn't feel detached.

## Elevation & Depth

This is a **flat, bordered** system, not a shadow-based one. Hierarchy comes from three tonal layers (page / card / input) plus 1px `{colors.border}` hairlines on every chrome surface. Drop shadows are forbidden on cards, list rows, inputs, and chips.

Two elevation exceptions, both glow-based not shadow-based:
1. **Primary CTA halo** — `box-shadow: 0 0 20px rgba(0,87,255,0.3)` intensifying to `0 0 30px rgba(0,87,255,0.5)` on hover. This colored bloom is the only "lift" the system uses.
2. **Floating center FAB** — `box-shadow: 0 0 15px rgba(0,87,255,0.4)` matching the same recipe.

For destructive actions (logout, delete), use the same halo recipe with `rgba(255,59,48,*)`.

## Shapes

Rectilinear with mild rounding. `{rounded.sm}` (4px) for inline pill badges. `{rounded.md}` (6px) for tiny accents inside charts. `{rounded.lg}` (8px) for ALL chrome — cards, buttons, inputs, chips, icon tiles, list rows. `{rounded.full}` for status dots, identity dots, the FAB, and avatar rings only.

The shape philosophy: corners are present but understated. The aesthetic should never read "pill" or "soft" — it reads "panel."

## Components

Every component sits on a deep neutral surface, defined by a 1px hairline rather than a shadow.

### card

```html
<div class="bg-[#1E1E1E] border border-[#333333] rounded-lg p-4 hover:border-[#0057FF]/50 transition-colors">
  <!-- card content -->
</div>
```

Cards are `{colors.surface-alt}` with `{colors.border}` hairline. On hover, the border shifts to `border-primary/50` — a subtle interactive cue. Never add a shadow.

### button-primary

```html
<button class="w-full h-14 px-6 bg-[#0057FF] text-white font-bold text-lg uppercase tracking-wider border-2 border-[#0057FF]/50 rounded-lg active:scale-[0.99] transition-transform shadow-[0_0_20px_rgba(0,87,255,0.3)] hover:shadow-[0_0_30px_rgba(0,87,255,0.5)] flex items-center justify-center gap-3">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
  [Action label]
</button>
```

Note the doubled-up border (2px solid primary at 50% alpha around the solid primary fill) — that subtle inner-edge contrast is what gives the button its "machined" look. Label is uppercase and `tracking-wider`. The glow halo is mandatory.

### button-secondary

```html
<button class="h-10 px-4 bg-[#1E1E1E] border border-[#333333] rounded-lg text-xs uppercase tracking-widest font-bold text-white hover:bg-[#2C2C2C] transition-colors">
  [Label]
</button>
```

### button-icon (utility / chrome icon button)

```html
<button class="size-10 p-2 border border-[#333333] rounded-lg hover:bg-[#1E1E1E] transition-colors flex items-center justify-center">
  <iconify-icon icon="solar:[icon-name]-bold" class="size-5 text-white"></iconify-icon>
</button>
```

This is the standard top-bar trailing button (notifications, settings, filter, back).

### input-text

```html
<div class="relative">
  <input type="text" class="w-full pl-12 pr-4 py-3 bg-[#2C2C2C] border border-[#333333] rounded-lg text-sm uppercase tracking-widest placeholder:text-[#A3A3A3] focus:outline-none focus:ring-2 focus:ring-[#0057FF]" placeholder="[PLACEHOLDER TEXT]" />
  <iconify-icon icon="solar:magnifer-linear" class="size-5 text-[#A3A3A3] absolute left-4 top-1/2 -translate-y-1/2"></iconify-icon>
</div>
```

Inputs use `{colors.surface-muted}` (one tonal step darker than cards) so they recede. Placeholder text is uppercase tracked.

### chip / chip-active

```html
<!-- inactive -->
<button class="px-4 py-2 bg-[#1E1E1E] text-white border border-[#333333] rounded-lg text-xs uppercase tracking-widest font-bold whitespace-nowrap hover:bg-[#2C2C2C] transition-colors">[Label]</button>
<!-- active -->
<button class="px-4 py-2 bg-[#0057FF] text-white border border-[#0057FF] rounded-lg text-xs uppercase tracking-widest font-bold whitespace-nowrap">[Label]</button>
```

Chips share the button-secondary geometry — `rounded-lg` and rectangular, never pill-shaped.

### badge-pill (semantic delta / status)

```html
<div class="px-2 py-1 bg-[#4ADE80]/10 border border-[#4ADE80]/20 rounded text-[#4ADE80] text-xs font-bold">
  [+/-N.NN%]
</div>
```

Badge recipe: 10% color tint background, 20% color tint border, 100% color foreground, weight 700, mono. Use `{colors.success}` for positive, `{colors.error}` for negative, neutral muted for zero/flat.

### badge-circle (status dot)

```html
<div class="size-3 rounded-full bg-green-500 border border-white/20"></div>
```

A 12px filled circle with a 1px white-at-20%-alpha ring. Used for "system operational" type indicators. Smaller `size-2` variants act as identity dots inside icon tiles.

### avatar

```html
<div class="size-16 border-2 border-[#0057FF] rounded-lg bg-[#1E1E1E] flex items-center justify-center">
  <iconify-icon icon="solar:user-bold" class="size-8 text-[#0057FF]"></iconify-icon>
</div>
```

Avatars are square-with-rounded-corners, NOT circles. The 2px primary border is what makes it read as "identity card slot" rather than a generic tile.

### list-row

```html
<div class="bg-[#1E1E1E] border border-[#333333] rounded-lg p-4 hover:border-[#0057FF]/50 transition-colors flex items-center justify-between">
  <div class="flex items-center gap-3">
    <div class="size-10 border border-[#333333] bg-[#1E1E1E] rounded flex items-center justify-center">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-5 text-white"></iconify-icon>
    </div>
    <div>
      <p class="font-bold text-sm">[Primary label]</p>
      <p class="text-[10px] text-[#A3A3A3] uppercase tracking-wider">[Metadata]</p>
    </div>
  </div>
  <iconify-icon icon="solar:arrow-right-linear" class="size-5 text-[#A3A3A3]"></iconify-icon>
</div>
```

The leading 40px square icon-tile (1px bordered, darker fill) is signature: it hosts either an iconify icon OR a small categorical color dot. The trailing chevron uses `solar:arrow-right-linear` — note the `linear` variant, the only place where line icons appear in this otherwise-bold-everywhere system, because chevrons need to feel light.

### top-app-bar

A flat `{colors.surface}` row, 64px tall, no border on the bottom (the page itself takes over). Pattern: `flex justify-between items-center p-6 pb-2`. Leading slot holds either an uppercase-tracked status label with a status dot OR a back button + section title. Trailing slot holds a single button-icon.

```html
<header class="flex justify-between items-center p-6 pb-2">
  <div class="flex items-center gap-2">
    <div class="size-3 rounded-full bg-green-500 border border-white/20"></div>
    <span class="text-xs text-[#A3A3A3] tracking-widest uppercase">[Status label]</span>
  </div>
  <button class="p-2 border border-[#333333] rounded-lg hover:bg-[#1E1E1E] transition-colors">
    <iconify-icon icon="solar:[icon-name]-bold" class="size-5 text-white"></iconify-icon>
  </button>
</header>
```

### tab-bar

A 5-slot bottom bar, 88px tall, with a hairline top border and a center floating FAB that overlaps upward by 24px:

```html
<nav class="fixed bottom-0 left-0 right-0 bg-[#121212] border-t border-[#333333] pb-safe pt-2 px-6 h-[88px] z-50">
  <div class="flex justify-between items-center h-full pb-4">
    <!-- inactive tab -->
    <button class="flex flex-col items-center gap-1 text-[#A3A3A3] hover:text-white transition-colors w-16">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    </button>
    <!-- active tab -->
    <button class="flex flex-col items-center gap-1 text-[#0057FF] transition-colors w-16">
      <iconify-icon icon="solar:[icon-name]-bold" class="size-6"></iconify-icon>
    </button>
    <!-- center FAB -->
    <button class="relative -top-6 bg-[#121212] p-1.5 rounded-full border border-[#333333] shadow-lg">
      <div class="size-14 bg-[#0057FF] rounded-full flex items-center justify-center text-white shadow-[0_0_15px_rgba(0,87,255,0.4)] border border-white/10">
        <iconify-icon icon="solar:[icon-name]-bold" class="size-7"></iconify-icon>
      </div>
    </button>
    <!-- ...two more tabs -->
  </div>
</nav>
```

The center FAB is a load-bearing signature — a 56px primary-fill circle ringed with a 1px white-at-10% inner border, sitting inside a 1px-bordered surface "well" that lifts it above the bar. Active state is conveyed purely by color shift to primary; no pill, no underline, no background.

### Composition recipes (compose from primitives, don't add as components)

- **Section header with anchor bar**: `{typography.headline-md}` text, prefixed with `border-l-4 border-primary pl-3`, optionally with a `button-text` ("View All") right-aligned.
- **Stat tile** (2-col grid item): a `card` with a header row containing a `size-2` categorical dot + uppercase short label, and a right-aligned bottom row containing a primary `{typography.numeric-md}` value over a `{typography.caption}` qualifier.
- **Numeric value over qualifier**: any time you show a number, render it with `{typography.body-md}` or larger weight 700, and pair with a `{typography.caption}` second line in `{colors.on-surface-variant}` for the unit/conversion ("0.045 BTC" / "$2,632").
- **Bar-chart "highlighted day"**: a row of `bg-muted/30 border border-border/50 rounded-sm` bars at varying heights, with the highlighted bar swapped to `bg-primary/20 border border-primary` and given a `text-primary font-bold` numeric label above. Day labels below in `{typography.caption}` with the highlighted day in primary.
- **Tonal recipe — destructive button**: render `button-primary` with `bg-[#FF3B30]`, `border-[#FF3B30]/50`, and `shadow-[0_0_20px_rgba(255,59,48,0.3)]`. Same geometry, different glow color.

## Iconography

`solar` icon set, `bold` (filled) variant by default everywhere — top-bar buttons, list-row icon-tiles, tab-bar items, primary-button leading icons. The one exception is **chevrons / arrows used as affordances** (right-arrow at the end of a list row, search magnifier inside an input): use `solar:[name]-linear` so the directional cue feels light. Default icon size is 20px in chrome, 24px in tab bar, 28px in the FAB, and 32px inside an avatar tile.

Active vs. inactive state in the tab bar is conveyed purely by color swap (`{colors.on-surface-variant}` → `{colors.primary}`); icons do not swap variant on selection.

When picking icons for a brief, prefer the `-bold` family for any meaningful surface and reserve `-linear` strictly for arrows, magnifiers, and chevrons.

## Illustration & Imagery

**This aesthetic does not use imagery.** Adding photos or illustrations would clash with the dense, instrument-panel, terminal-like visual system. Implement image-shaped requirements with these typographic & geometric fallbacks instead:

- **Avatars** → render as a square `{rounded.lg}` tile with `border-2 border-{primary}` on `{colors.surface-alt}`, holding a centered `solar:[icon]-bold` icon in `{colors.primary}` OR a single uppercase initial in `{typography.headline-lg}` weight 700.
- **Hero illustrations** → render as an oversized typographic block: a hero numeric using `{typography.display-lg}` paired with an uppercase-tracked `{typography.label-uppercase}` kicker above and a delta `badge-pill` below. The numbers themselves are the hero.
- **Product / item / asset thumbnails** → render as a `size-12` square 1px-bordered `rounded` tile on `{colors.surface-alt}` containing a single `size-3` filled categorical-color dot (`{accent-categorical-N}`) centered. Different items get different categorical colors for at-a-glance differentiation. This pattern explicitly replaces logos.
- **Background imagery / atmospherics** → none. The `{colors.surface}` page stays flat. Optional: a single corner glow `bg-gradient-to-bl from-white/5 to-transparent` inside a card on hover, but never as a permanent treatment.
- **Decorative graphics** → none, except for the 4px `border-l-4 border-primary` section accent bar, which IS the decorative system. No other ornamentation.
- **Charts** → bar charts use 1px-bordered tonal-grey blocks with a single primary-fill highlighted bar. No gradients, no axes lines beyond the day-labels row.

If a future brief absolutely requires a photograph (e.g. user-uploaded content, NFT artwork, product photography), present it inside a `{rounded.lg}` frame with a 1px `{colors.border}` hairline, no shadow, no filter, `object-cover`, and contain it strictly to the data slot — never use it as decoration or as a background.

## Hierarchy & Emphasis

Three levers, in order of weight:
1. **Saturated primary fill** — the loudest moment on any screen; use exactly once per screen (the CTA, OR the active tab, OR a highlighted chart bar — but the CTA dominates).
2. **Type weight contrast** — mono 700 against mono 400 inside a single row creates the value-vs-label hierarchy.
3. **Tonal layering** — page / card / input / muted-pill, four steps from `#121212` up.

Metadata always whispers: `text-[10px]` to `text-xs`, `{colors.on-surface-variant}`, uppercase, `tracking-widest`, weight 400. Primary content always shouts: weight 700, white, no tracking.

## Distinctive Details

1. **The 4px primary section anchor bar.** Every section heading is preceded by `border-l-4 border-primary pl-3`. This single device, repeated, is the strongest identity signal — replace it with anything else and the system collapses into generic dark mode.
2. **Tracked-out uppercase mono captions.** Every secondary string ("MAIN ASSETS", "24H CHANGE", "VERIFIED", "+ 450.00 / Confirmed") uses `JetBrains Mono` uppercase at `tracking-widest`. This is what gives the UI its "instrument readout" voice.
3. **Doubled-edge primary CTA.** The 2px `border-primary/50` around the solid primary fill, plus the colored box-shadow halo, gives the button a machined "indicator lamp" quality unique to this system.
4. **Floating center-tab FAB inside a bordered well.** The 56px primary disc lifted 24px above a hairline-bordered "socket" is the navigation-bar signature.

## Do's and Don'ts

### Do
- Use `solar:[icon]-bold` everywhere except for chevrons, arrows, and search magnifiers (which use `-linear`).
- Prefix every section heading with `border-l-4 border-primary pl-3` and uppercase the label.
- Render every secondary/metadata string as uppercase-tracked mono in `{colors.on-surface-variant}`.
- Use the categorical palette ONLY as small color dots inside bordered icon tiles for distinguishing list items.
- Reserve `{colors.primary}` for actions, active states, focus rings, and section anchor bars — nothing else.
- Use 1px `{colors.border}` hairlines as the primary separation method on every chrome surface.
- Pair numeric values (mono 700) with a unit/conversion caption (mono 400 muted) on the line below.
- Apply the colored glow halo only to the primary CTA and the center tab FAB.

### Don't
- Don't add drop shadows to cards, rows, inputs, or chips. The system is flat-with-borders.
- Don't paint cards, rows, or chrome surfaces with categorical colors (orange, teal, purple, etc.) — those are dot-only.
- Don't use pill-shaped (`rounded-full`) buttons or chips. Buttons and chips are always `rounded-lg` rectangles.
- Don't introduce a third or fourth weight (500, 600) into mono text — the binary 400/700 contrast is the aesthetic.
- Don't lowercase section headings or metadata captions. Uppercase + `tracking-widest` is mandatory.
- Don't put `{colors.primary}` on more than one element per screen as a fill (CTA, active tab, OR highlighted chart bar — pick one focal point).
- Don't add illustrations, photos, or character mascots. The system is image-free by design.
- Don't drop the 4px primary section anchor bar — it's load-bearing.
- Don't use Playfair Display in body, label, or caption roles. It's reserved for rare editorial display moments only.
- Don't soften corners beyond `{rounded.lg}` (8px) on chrome — this is a panel aesthetic, not a bubble aesthetic.