Phosphor Deck

# Phosphor Deck

## Philosophy

Phosphor Deck is a mission-console design language for the moment the numbers move. Dense telemetry sits on near-black green glass: one resting green carries live data, cyan is the secondary channel, amber claims emphasis, and red is held for the one alarm that matters. Colour carries state and nothing else, and everything that matters is mounted in an instrument housing: a chamfered phosphor face opened by a status rail, with a scanline display zone and a vector-grid underlay wherever a trace needs depth.

### Values

- Colour carries state and nothing else: green rests, amber claims, red is held.
- Every signal has a job, a hex value and a contrast ratio against the ground, and none does another's work.
- The value reads before the label: numerics are the largest, brightest thing in a bay.
- Mount what matters in a housing and leave the rest on the glass.
- Tight inside a bay, generous between bays, the same deck from a 390px handset to a wall of 2560px glass.

### Anti-Values

- Rounded consumer pills: controls are cut, not rounded.
- Glass and blur: a borderless, blurred card hides where one reading ends and the next begins.
- Slow or bouncy motion: the bloom brightens and nothing drifts.
- Small tracked uppercase labels, status chips that claim all systems green, and invented testimonials.
- A line on any edge of a housing: no seam, outline or highlight rule around or across a card.

### Visual Character

- A near-black green ground #07110E with phosphor-face housings #0C1B17, parted by tint and space and never by a line.
- Chamfered geometry: a 14px cut on the top-left and bottom-right corners of every housing, radius 0 on everything else.
- Status rails: the title on the left in green and the signal code on the right in amber, with nothing drawn between them.
- Scanline display zones with a vector-grid or horizon underlay, used for charts and instruments only.
- Numerics in Share Tech Mono at 32 to 51px with a soft green or cyan bloom, the brightest thing in any bay.
- A hero captured off a CRT in the Cathode style: a green wireframe globe with a cyan ascent arc, and a calm field on the left for the headline.

### Lineage

> Revised in place from arni's approved range-9 specimen (phosphor-deck-i, 2026-10-07). It keeps the deck-black ground, phosphor green, cyan and amber, Orbitron, Chakra Petch and Share Tech Mono, the page order (hero, grammar, deck, close) and the chamfered housing with its status rail. It replaces icon cards and invented quotes with facts, regenerates the hero with a calm left field and no veil, moves success to a mint and error to a coral, sets labels at 17px in sentence case, and removes the housing seam and the rule on the rail.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#07110E` |
| surface | `#0C1B17` |
| surface_2 | `#102521` |
| text | `#D8FFD7` |
| muted | `#82A89B` |
| border | `#35584F` |
| accent | `#7CFF72` |
| accent_2 | `#6BE7FF` |
| accent_3 | `#FFB347` |
| on_accent | `#07110E` |
| success | `#5FE3A1` |
| warning | `#FFB347` |
| error | `#FF7A6E` |
| info | `#6BE7FF` |

### Typography

- **Heading Font**: Orbitron
- **Body Font**: Chakra Petch
- **Mono Font**: Share Tech Mono
- **Heading Weight**: 800
- **Body Weight**: 400
- **Button Weight**: 700
- **Mono Weight**: 400
- **Heading Transform**: none
- **Letter Spacing**: 0.02em on Orbitron titles, 0 on Chakra Petch and Share Tech Mono
- **Base Size**: 17px
- **Line Height**: 1.55
- **Scale**: ["14.5px","17px","20px","26px","38px","46px","59px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

### Radii

- **None**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 0px

### Geometry

- **Chamfer**: 14px on housings, 10px on buttons, 8px on fields, 5px on small marks, always the top-left and bottom-right corners cut by clip-path

### Shadows

- **Bloom Green**: drop-shadow(0 0 16px rgba(124,255,114,0.45)) on a wrapper, because a clip-path cuts a shadow on its own element
- **Bloom Text**: text-shadow 0 0 26px rgba(124,255,114,0.4) on numerics, cyan at 0.35 on a secondary reading
- **Lift**: drop-shadow(0 14px 28px rgba(0,0,0,0.6)) plus a green bloom at 0.16, only on an open menu, dialog or toast
- **None**: housings and fields carry no outline, seam or shadow at rest

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px","96px","112px"]

### Surfaces

- **Treatment**: near-black green glass with mounted instrument housings
- **Card Style**: a chamfered #0C1B17 face on the #07110E ground, opened by a status rail; no outline, no seam, no bar on any side
- **Display Zone**: #102521 under a 3px horizontal scanline field at 26% black, with a vector-grid or horizon underlay for charts
- **Bg Pattern**: none on the ground; scanlines live only inside display zones

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, seams or edge rules. A housing is parted from the ground by its tint and by space. The border colour #35584F is used only for vector-grid strokes inside a display zone.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: Snappy. Hover and focus brighten the bloom or the face; nothing bounces, drifts or reshapes. Reduced motion removes every transition and the settled page is complete without script.

### Controls

- **Height**: 54px buttons, 54px fields, 28px switch track
- **Radius**: 0px, chamfered by clip-path
- **Focus**: an inner 3px ring on a button, a stacked phosphor ring plus bloom on a field

## Rules

### Composition

- Order a page hero, grammar, deck, close: a full-bleed Cathode hero with the headline on its calm left field, the three signals with their hex values and contrast ratios, one deck section holding the numerics, a trace and the bay status, then one closing action.
- Mount anything that matters in one housing. Never nest a housing in a housing, and leave plain copy on the glass.
- Set the headline on the picture pixels of the calm left field. Never add a veil, scrim or panel over the hero.
- Give a view one primary action. A second action is a text link.

### Hierarchy

- Numerics first: Share Tech Mono at 32 to 51px with a bloom is the brightest and largest thing in a bay.
- Orbitron 800 for titles at 0.02em, Chakra Petch 400 for prose at 17px, Share Tech Mono for readings, codes and times.
- Labels are 17px in sentence case. A signal code in a status rail may be mono caps.
- Amber arrives as a block or a code, never as a coloured word inside a paragraph.

### Density

Moderately high inside a bay, generous between bays: 48 to 64px between housings, 20 to 30px inside one, and 64 to 112px between sections. Density reads as engineered, not crowded.

### Signature Patterns

- Instrument housing: a chamfered #0C1B17 face with a 14px cut on two opposite corners, opened by a status rail, framed by tint and space and never by a line.
- Status rail: the title on the left in green and a signal code on the right in amber, with nothing between them.
- Scanline display zone with a vector-grid underlay: where a trace, a plot or a gauge lives.
- Phosphor bloom: numerics and traces glow, and hover and focus brighten the glow or the face. Nothing moves.
- Signal roles: three lights, each with a job, a hex value and a contrast ratio against the ground.

## Layout

### Grid

- **Type**: hero, grammar, deck, close
- **Max Width**: 1180px content, centred above 1440px; only the hero spans the viewport
- **Gutter**: 64px desktop, 5vw tablet, 20px phone
- **Column Behavior**: Three-up lists and a 5fr/7fr deck split use minmax(0,1fr) columns with min-width:0 on every child; everything stacks to one column below 1000px.

### Whitespace

- **Section Gap**: 112px desktop, 64px phone
- **Card Gap**: 48 to 72px between housings, 24 to 56px between columns
- **Content Padding**: 20 to 30px inside a housing under its rail
- **Approach**: Tight inside a bay, generous between bays. Tint and space do the separating.

### Density

- **Default**: engineered
- **Comfortable**: {"button_height":"54px","input_height":"54px","row_height":"44 to 56px table rows"}

### Responsive

From 390px to 2560px. Below 1000px the hero stacks: the headline first, then the Cathode picture at 300 to 500px tall. Tablets (600 to 1000px) keep the single column with larger measure and two-up numerics; non-essential table columns drop on phones. Above 1440px the content caps at 1180px and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Stack**: 1000px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Guidance

### Do

- Let green be the resting data state, amber the emphasis and red the one alarm held in reserve.
- State each signal's job, hex value and contrast ratio where it is introduced.
- Mount every important region as a chamfered housing opened by a status rail.
- Set numerics in Share Tech Mono, large and glowing, with the label under them in muted 17px.
- Brighten the bloom or the face on hover and focus, and ring a focused button on the inside.
- Pair every status colour with a word and an SVG icon.

### Don't

- Don't draw a seam, outline or highlight rule on any side of a housing, and don't draw a rule inside its rail.
- Don't add rounded pills, blurred glass cards or gradient washes over the hero.
- Don't use tiny tracked uppercase labels, status chips or invented testimonials.
- Don't let amber or red read as a coloured word in a paragraph.
- Don't use slow, bouncy or drifting motion.
- Don't wash the ground toward white or pastel.

### Accessibility

Luminous text on near-black throughout: body #D8FFD7 is 17.5:1 on #07110E, muted #82A89B 7.3:1, green #7CFF72 15.0:1, cyan #6BE7FF 13.2:1, amber #FFB347 10.8:1, mint #5FE3A1 11.9:1 and coral #FF7A6E 7.5:1; the dark label on a green button is 15.0:1. Body is 17px or larger and table rows 14.5px or larger. Status is never colour alone: each state pairs its colour with a word and an SVG icon. Every control is explicitly styled with a visible hover and focus state (a brighter face, an inner 3px ring on buttons, a phosphor ring on fields). Motion respects prefers-reduced-motion and the settled page renders with no script.

### Usage Context

Mission and operations consoles, telemetry dashboards, developer and infrastructure tools, hardware control panels, launch and flight software, and any product where dense live numbers must read at a glance.

## Imagery Direction

### Pairs With

cathode

### Art Style Id

en-019efa09-e80f-7032-af0d-074c0f36d645

### Summary

Imagery captured off a glowing cathode-ray tube in the Cathode style: baked-in scanlines, phosphor bloom, a little chromatic fringing and a gentle barrel curve, luminous green with cyan and amber on near-black. The landing hero is one wireframe globe with a cyan ascent arc, composed to the right with a calm, dark left 42% for the headline, edge to edge with no bezel and no veil.

### Subjects

- a green vector wireframe globe with a cyan ascent arc
- orbital trajectory and telemetry displays
- oscilloscope waveforms and readout panels
- instrument clusters and gauges

### Usage

The landing hero is painted with background-image: var(--hero-image) on a real element, never an img tag, with the picture's subject on the right and the headline set on its calm left field. On phones the picture drops below the headline at 300 to 500px tall.

### Avoid

A monitor bezel or TV set; a gradient veil or panel over the hero; text baked into the picture; a centred tiny subject on blank space; pastel or muddy tones.

---
version: "alpha"
name: "Phosphor Deck"
description: "Phosphor Deck is a mission-console design language for the moment the numbers move. Dense telemetry sits on near-black green glass: one resting green carries live data, cyan is the secondary channel, amber claims emphasis, and red is hel..."
colors:
  bg: "#07110E"
  surface: "#0C1B17"
  surface_2: "#102521"
  text: "#D8FFD7"
  muted: "#82A89B"
  border: "#35584F"
  accent: "#7CFF72"
  accent_2: "#6BE7FF"
  accent_3: "#FFB347"
  on_accent: "#07110E"
  success: "#5FE3A1"
  warning: "#FFB347"
  error: "#FF7A6E"
  info: "#6BE7FF"
typography:
  headline-lg:
    fontFamily: "Orbitron"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Orbitron"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Chakra Petch"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Share Tech Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "0px"
  lg: "0px"
  full: "0px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "112px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Phosphor Deck

## Overview

Phosphor Deck is a mission-console design language for the moment the numbers move. Dense telemetry sits on near-black green glass: one resting green carries live data, cyan is the secondary channel, amber claims emphasis, and red is held for the one alarm that matters. Colour carries state and nothing else, and everything that matters is mounted in an instrument housing: a chamfered phosphor face opened by a status rail, with a scanline display zone and a vector-grid underlay wherever a trace needs depth.

### Values

- Colour carries state and nothing else: green rests, amber claims, red is held.
- Every signal has a job, a hex value and a contrast ratio against the ground, and none does another's work.
- The value reads before the label: numerics are the largest, brightest thing in a bay.
- Mount what matters in a housing and leave the rest on the glass.
- Tight inside a bay, generous between bays, the same deck from a 390px handset to a wall of 2560px glass.

### Anti-Values

- Rounded consumer pills: controls are cut, not rounded.
- Glass and blur: a borderless, blurred card hides where one reading ends and the next begins.
- Slow or bouncy motion: the bloom brightens and nothing drifts.
- Small tracked uppercase labels, status chips that claim all systems green, and invented testimonials.
- A line on any edge of a housing: no seam, outline or highlight rule around or across a card.

### Visual Character

- A near-black green ground #07110E with phosphor-face housings #0C1B17, parted by tint and space and never by a line.
- Chamfered geometry: a 14px cut on the top-left and bottom-right corners of every housing, radius 0 on everything else.
- Status rails: the title on the left in green and the signal code on the right in amber, with nothing drawn between them.
- Scanline display zones with a vector-grid or horizon underlay, used for charts and instruments only.
- Numerics in Share Tech Mono at 32 to 51px with a soft green or cyan bloom, the brightest thing in any bay.
- A hero captured off a CRT in the Cathode style: a green wireframe globe with a cyan ascent arc, and a calm field on the left for the headline.

### Lineage

> Revised in place from arni's approved range-9 specimen (phosphor-deck-i, 2026-10-07). It keeps the deck-black ground, phosphor green, cyan and amber, Orbitron, Chakra Petch and Share Tech Mono, the page order (hero, grammar, deck, close) and the chamfered housing with its status rail. It replaces icon cards and invented quotes with facts, regenerates the hero with a calm left field and no veil, moves success to a mint and error to a coral, sets labels at 17px in sentence case, and removes the housing seam and the rule on the rail.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#07110E` |
| surface | `#0C1B17` |
| surface_2 | `#102521` |
| text | `#D8FFD7` |
| muted | `#82A89B` |
| border | `#35584F` |
| accent | `#7CFF72` |
| accent_2 | `#6BE7FF` |
| accent_3 | `#FFB347` |
| on_accent | `#07110E` |
| success | `#5FE3A1` |
| warning | `#FFB347` |
| error | `#FF7A6E` |
| info | `#6BE7FF` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;800&family=Chakra+Petch:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

- **Headline-Lg**: Orbitron, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Orbitron, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Chakra Petch, 17px, weight 400, line-height 1.5.
- **Label-Md**: Share Tech Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
- **Step-9**: `112px`

### Grid

- **Type**: hero, grammar, deck, close
- **Max Width**: 1180px content, centred above 1440px; only the hero spans the viewport
- **Gutter**: 64px desktop, 5vw tablet, 20px phone
- **Column Behavior**: Three-up lists and a 5fr/7fr deck split use minmax(0,1fr) columns with min-width:0 on every child; everything stacks to one column below 1000px.

### Whitespace

- **Section Gap**: 112px desktop, 64px phone
- **Card Gap**: 48 to 72px between housings, 24 to 56px between columns
- **Content Padding**: 20 to 30px inside a housing under its rail
- **Approach**: Tight inside a bay, generous between bays. Tint and space do the separating.

### Density

- **Default**: engineered
- **Comfortable**: {"button_height":"54px","input_height":"54px","row_height":"44 to 56px table rows"}

### Responsive

From 390px to 2560px. Below 1000px the hero stacks: the headline first, then the Cathode picture at 300 to 500px tall. Tablets (600 to 1000px) keep the single column with larger measure and two-up numerics; non-essential table columns drop on phones. Above 1440px the content caps at 1180px and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Stack**: 1000px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Bloom Green**: drop-shadow(0 0 16px rgba(124,255,114,0.45)) on a wrapper, because a clip-path cuts a shadow on its own element
- **Bloom Text**: text-shadow 0 0 26px rgba(124,255,114,0.4) on numerics, cyan at 0.35 on a secondary reading
- **Lift**: drop-shadow(0 14px 28px rgba(0,0,0,0.6)) plus a green bloom at 0.16, only on an open menu, dialog or toast
- **None**: housings and fields carry no outline, seam or shadow at rest

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `0px`

### Surfaces

- **Treatment**: near-black green glass with mounted instrument housings
- **Card Style**: a chamfered #0C1B17 face on the #07110E ground, opened by a status rail; no outline, no seam, no bar on any side
- **Display Zone**: #102521 under a 3px horizontal scanline field at 26% black, with a vector-grid or horizon underlay for charts
- **Bg Pattern**: none on the ground; scanlines live only inside display zones

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, seams or edge rules. A housing is parted from the ground by its tint and by space. The border colour #35584F is used only for vector-grid strokes inside a display zone.

## Components

### Composition

- Order a page hero, grammar, deck, close: a full-bleed Cathode hero with the headline on its calm left field, the three signals with their hex values and contrast ratios, one deck section holding the numerics, a trace and the bay status, then one closing action.
- Mount anything that matters in one housing. Never nest a housing in a housing, and leave plain copy on the glass.
- Set the headline on the picture pixels of the calm left field. Never add a veil, scrim or panel over the hero.
- Give a view one primary action. A second action is a text link.

### Hierarchy

- Numerics first: Share Tech Mono at 32 to 51px with a bloom is the brightest and largest thing in a bay.
- Orbitron 800 for titles at 0.02em, Chakra Petch 400 for prose at 17px, Share Tech Mono for readings, codes and times.
- Labels are 17px in sentence case. A signal code in a status rail may be mono caps.
- Amber arrives as a block or a code, never as a coloured word inside a paragraph.

### Density

Moderately high inside a bay, generous between bays: 48 to 64px between housings, 20 to 30px inside one, and 64 to 112px between sections. Density reads as engineered, not crowded.

### Signature Patterns

- Instrument housing: a chamfered #0C1B17 face with a 14px cut on two opposite corners, opened by a status rail, framed by tint and space and never by a line.
- Status rail: the title on the left in green and a signal code on the right in amber, with nothing between them.
- Scanline display zone with a vector-grid underlay: where a trace, a plot or a gauge lives.
- Phosphor bloom: numerics and traces glow, and hover and focus brighten the glow or the face. Nothing moves.
- Signal roles: three lights, each with a job, a hex value and a contrast ratio against the ground.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-01a1379b-40d4-7d61-a231-a49ed8eedf8f/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a1379b-40d4-7d61-a231-a49ed8eedf8f/shadcn.json` (registry theme), `/language/en-01a1379b-40d4-7d61-a231-a49ed8eedf8f/shadcn-components.md` (component recipes) and `/language/en-01a1379b-40d4-7d61-a231-a49ed8eedf8f/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Let green be the resting data state, amber the emphasis and red the one alarm held in reserve.
- Do State each signal's job, hex value and contrast ratio where it is introduced.
- Do Mount every important region as a chamfered housing opened by a status rail.
- Do Set numerics in Share Tech Mono, large and glowing, with the label under them in muted 17px.
- Do Brighten the bloom or the face on hover and focus, and ring a focused button on the inside.
- Do Pair every status colour with a word and an SVG icon.
- Don't Don't draw a seam, outline or highlight rule on any side of a housing, and don't draw a rule inside its rail.
- Don't Don't add rounded pills, blurred glass cards or gradient washes over the hero.
- Don't Don't use tiny tracked uppercase labels, status chips or invented testimonials.
- Don't Don't let amber or red read as a coloured word in a paragraph.
- Don't Don't use slow, bouncy or drifting motion.
- Don't Don't wash the ground toward white or pastel.

### Accessibility

Luminous text on near-black throughout: body #D8FFD7 is 17.5:1 on #07110E, muted #82A89B 7.3:1, green #7CFF72 15.0:1, cyan #6BE7FF 13.2:1, amber #FFB347 10.8:1, mint #5FE3A1 11.9:1 and coral #FF7A6E 7.5:1; the dark label on a green button is 15.0:1. Body is 17px or larger and table rows 14.5px or larger. Status is never colour alone: each state pairs its colour with a word and an SVG icon. Every control is explicitly styled with a visible hover and focus state (a brighter face, an inner 3px ring on buttons, a phosphor ring on fields). Motion respects prefers-reduced-motion and the settled page renders with no script.

### Usage Context

Mission and operations consoles, telemetry dashboards, developer and infrastructure tools, hardware control panels, launch and flight software, and any product where dense live numbers must read at a glance.

## Imagery Direction

### Pairs With

cathode

### Art Style Id

en-019efa09-e80f-7032-af0d-074c0f36d645

### Summary

Imagery captured off a glowing cathode-ray tube in the Cathode style: baked-in scanlines, phosphor bloom, a little chromatic fringing and a gentle barrel curve, luminous green with cyan and amber on near-black. The landing hero is one wireframe globe with a cyan ascent arc, composed to the right with a calm, dark left 42% for the headline, edge to edge with no bezel and no veil.

### Subjects

- a green vector wireframe globe with a cyan ascent arc
- orbital trajectory and telemetry displays
- oscilloscope waveforms and readout panels
- instrument clusters and gauges

### Usage

The landing hero is painted with background-image: var(--hero-image) on a real element, never an img tag, with the picture's subject on the right and the headline set on its calm left field. On phones the picture drops below the headline at 300 to 500px tall.

### Avoid

A monitor bezel or TV set; a gradient veil or panel over the hero; text baked into the picture; a centred tiny subject on blank space; pastel or muddy tones.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "phosphor-deck",
  "type": "registry:theme",
  "title": "Phosphor Deck shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#07110E",
      "foreground": "#D8FFD7",
      "card": "#0C1B17",
      "card-foreground": "#D8FFD7",
      "popover": "#0C1B17",
      "popover-foreground": "#D8FFD7",
      "primary": "#D8FFD7",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#82A89B",
      "muted-foreground": "#D8FFD7",
      "accent": "#7CFF72",
      "accent-foreground": "#111111",
      "destructive": "#FF7A6E",
      "border": "#35584F",
      "input": "#35584F",
      "ring": "#7CFF72",
      "chart-1": "#D8FFD7",
      "chart-2": "#f4f4f5",
      "chart-3": "#7CFF72",
      "chart-4": "#5FE3A1",
      "chart-5": "#FFB347",
      "sidebar": "#0C1B17",
      "sidebar-foreground": "#D8FFD7",
      "sidebar-primary": "#D8FFD7",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#6BE7FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#35584F",
      "sidebar-ring": "#7CFF72",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#D8FFD7",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#7CFF72",
      "accent-foreground": "#111111",
      "destructive": "#FF7A6E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#7CFF72",
      "chart-1": "#D8FFD7",
      "chart-2": "#f4f4f5",
      "chart-3": "#7CFF72",
      "chart-4": "#5FE3A1",
      "chart-5": "#FFB347",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#D8FFD7",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#7CFF72",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#7CFF72",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a1379b-40d4-7d61-a231-a49ed8eedf8f",
    "slug": "phosphor-deck",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "accent_3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "mono_weight",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "geometry": [
        "chamfer"
      ],
      "shadows": [
        "bloom_green",
        "bloom_text",
        "lift",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "display_zone",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "focus",
        "height",
        "radius"
      ]
    }
  }
}
```