Phosphor

# Phosphor

## Philosophy

Phosphor is a luminous CRT operating environment where glow is liveness: the field stays near-black and only what is running glows. Cyan marks live, magenta burns for command focus, and brightness reads as how active a thing is. It evolves CRT Dream Glow into a disciplined control surface — sharp pixel geometry, terminal-mono voice, edges drawn in light rather than borders, and chromatic misregistration reserved for display type. Dark mode here is deliberate, not a theme toggle.

### Values

- Glow encodes liveness — light only what is active
- Edges are glow (box-shadow), never borders
- Sharp pixel geometry and a mono terminal voice
- RGB misregistration on display type only, never on body
- Near-black field; reserve magenta for command focus

### Anti-Values

- Gradient washes, glassmorphism, or pastel backgrounds
- Borders or grey dividers
- Neon on every element — glow loses its meaning
- Blurred body text or whole-panel blur
- Light-mode reskins that kill the cathode identity

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#050509` |
| surface | `#0B0D16` |
| surface2 | `#11141F` |
| text | `#F1F7FF` |
| muted | `#818FA8` |
| accent | `#00E7FF` |
| command | `#FF2BD6` |
| cyan | `#00E7FF` |
| magenta | `#FF2BD6` |
| mint | `#3BFFB0` |
| success | `#3BFFB0` |
| warning | `#FFD166` |
| error | `#FF4D6D` |
| info | `#66A3FF` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans
- **Heading Font**: IBM Plex Mono
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 700
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 0
- **Lg**: 0
- **Default**: 0
- **Full**: 9999px

### Shadows

- **Sm**: 0 0 0 1px rgba(0,231,255,.25)
- **Md**: 0 0 22px rgba(0,231,255,.25)
- **Lg**: 0 0 60px rgba(0,231,255,.18)

### Spacing

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

### Surfaces

- **Field**: #050509
- **Panel**: #0B0D16
- **Raised**: #11141F

### Borders

- **Default**: none
- **Note**: edges are glow (box-shadow), not borders

### Motion

- **Ease**: steps(4,end)
- **Note**: stepped CRT motion; power-on + reveals respect prefers-reduced-motion

## Rules

### Composition

Compose on a near-black field as an asymmetric terminal workbench: a command rail, a live canvas, and a telemetry column. Draw structure with dark surface panels and glow edges, never borders. Reserve the brightest cyan for the single live element and magenta for the command in focus.

### Hierarchy

Display type is IBM Plex Mono, uppercase, with a cyan/magenta RGB-misregistration split; headings are mono, body is Plex Sans kept legible and unblurred. Hierarchy is carried by glow intensity and scale, not weight alone.

### Density

Dense inside meters, tables, and telemetry; generous near-black gutters around them. Build meters and minimaps from square pixel cells. Mobile stacks into single-column panels with the glow-scale status preserved.

### Signature

The glow scale runs every status surface — off (graphite), idle (dim cyan), live (cyan glow), focus (magenta), alert (red). Scanlines are a hard-stop 1px line texture, never a gradient wash.

## Layout

### Grid

Desktop is an 8px bitmap grid: a 64-72px command rail, a flexible live canvas, and a ~220px telemetry column. Panels are dark surfaces separated by near-black gutters.

### Whitespace

Near-black gutters are active negative space — at least 16-24px between panels; titles never stuck to panel tops.

### Density

High inside readouts (meters, tables, KPIs); the surrounding field stays dark and open so live elements glow against it.

### Responsive

Tablet collapses the rail to a horizontal strip; mobile becomes one column with the glow-scale status and pixel meters preserved. Hide non-essential columns before letting tables overflow.

### Breakpoints

- **Desktop**: 1024px+ rail + canvas + telemetry
- **Tablet**: 768-1023px two-column console
- **Mobile**: 360-767px single-column panels

## Guidance

### Do

- Keep the field near-black; let glow mean liveness
- Cyan = live, magenta = command focus, mint = ready
- Draw edges with box-shadow glow, never a border property
- Use IBM Plex Mono for display + data, Plex Sans for body
- Build meters and icons from square pixel cells; keep 0 corners

### Don't

- No gradients, glassmorphism, or pastel washes
- No borders or grey dividers
- No neon on every element — glow must stay meaningful
- No RGB split or blur on body text
- No light-mode reskin — dark is the identity

### Accessibility

Phosphor-white on near-black exceeds practical contrast targets; cyan/magenta accents are backed by labels and position, never colour alone. Scanline texture stays <=0.025 opacity and never sits under small body copy. Honour prefers-reduced-motion: power-on and reveal animations are gated and degrade to the correct final state.

## Imagery Direction

### Pairs With Art Style

cathode-ray

### Summary

Macro CRT phosphor photography — luminous cyan/magenta waveforms and pixel grids, fine scanlines, soft bloom on near-black, with generous negative space for overlay type.

### Subjects

- glowing waveforms
- pixel / level-meter grids
- a single command glow

### Usage

One full-bleed hero per landing via --hero-image; never an inline <img> in compositions.

---
version: "alpha"
name: "Phosphor"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#050509"
  surface: "#0B0D16"
  surface2: "#11141F"
  text: "#F1F7FF"
  muted: "#818FA8"
  accent: "#00E7FF"
  command: "#FF2BD6"
  cyan: "#00E7FF"
  magenta: "#FF2BD6"
  mint: "#3BFFB0"
  success: "#3BFFB0"
  warning: "#FFD166"
  error: "#FF4D6D"
  info: "#66A3FF"
typography:
  headline-lg:
    fontFamily: "IBM Plex Mono"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  default: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface2:
    backgroundColor: "{colors.surface2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-command:
    backgroundColor: "{colors.command}"
  color-reference-cyan:
    backgroundColor: "{colors.cyan}"
  color-reference-magenta:
    backgroundColor: "{colors.magenta}"
  color-reference-mint:
    backgroundColor: "{colors.mint}"
  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: "#000000"
    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

## Overview

Phosphor is a luminous CRT operating environment where glow is liveness: the field stays near-black and only what is running glows. Cyan marks live, magenta burns for command focus, and brightness reads as how active a thing is. It evolves CRT Dream Glow into a disciplined control surface — sharp pixel geometry, terminal-mono voice, edges drawn in light rather than borders, and chromatic misregistration reserved for display type. Dark mode here is deliberate, not a theme toggle.

### Values

- Glow encodes liveness — light only what is active
- Edges are glow (box-shadow), never borders
- Sharp pixel geometry and a mono terminal voice
- RGB misregistration on display type only, never on body
- Near-black field; reserve magenta for command focus

### Anti-Values

- Gradient washes, glassmorphism, or pastel backgrounds
- Borders or grey dividers
- Neon on every element — glow loses its meaning
- Blurred body text or whole-panel blur
- Light-mode reskins that kill the cathode identity

## 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 | `#050509` |
| surface | `#0B0D16` |
| surface2 | `#11141F` |
| text | `#F1F7FF` |
| muted | `#818FA8` |
| accent | `#00E7FF` |
| command | `#FF2BD6` |
| cyan | `#00E7FF` |
| magenta | `#FF2BD6` |
| mint | `#3BFFB0` |
| success | `#3BFFB0` |
| warning | `#FFD166` |
| error | `#FF4D6D` |
| info | `#66A3FF` |

## Typography

- **Headline-Lg**: IBM Plex Mono, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: IBM Plex Mono, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex 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**: `128px`

### Grid

Desktop is an 8px bitmap grid: a 64-72px command rail, a flexible live canvas, and a ~220px telemetry column. Panels are dark surfaces separated by near-black gutters.

### Whitespace

Near-black gutters are active negative space — at least 16-24px between panels; titles never stuck to panel tops.

### Density

High inside readouts (meters, tables, KPIs); the surrounding field stays dark and open so live elements glow against it.

### Responsive

Tablet collapses the rail to a horizontal strip; mobile becomes one column with the glow-scale status and pixel meters preserved. Hide non-essential columns before letting tables overflow.

### Breakpoints

- **Desktop**: 1024px+ rail + canvas + telemetry
- **Tablet**: 768-1023px two-column console
- **Mobile**: 360-767px single-column panels

## Elevation & Depth

### Shadows

- **Sm**: 0 0 0 1px rgba(0,231,255,.25)
- **Md**: 0 0 22px rgba(0,231,255,.25)
- **Lg**: 0 0 60px rgba(0,231,255,.18)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Default**: `0px`
- **Full**: `9999px`

### Surfaces

- **Field**: #050509
- **Panel**: #0B0D16
- **Raised**: #11141F

### Borders

- **Default**: none
- **Note**: edges are glow (box-shadow), not borders

## Components

### Composition

Compose on a near-black field as an asymmetric terminal workbench: a command rail, a live canvas, and a telemetry column. Draw structure with dark surface panels and glow edges, never borders. Reserve the brightest cyan for the single live element and magenta for the command in focus.

### Hierarchy

Display type is IBM Plex Mono, uppercase, with a cyan/magenta RGB-misregistration split; headings are mono, body is Plex Sans kept legible and unblurred. Hierarchy is carried by glow intensity and scale, not weight alone.

### Density

Dense inside meters, tables, and telemetry; generous near-black gutters around them. Build meters and minimaps from square pixel cells. Mobile stacks into single-column panels with the glow-scale status preserved.

### Signature

The glow scale runs every status surface — off (graphite), idle (dim cyan), live (cyan glow), focus (magenta), alert (red). Scanlines are a hard-stop 1px line texture, never a gradient wash.

## 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-019ef593-437c-7592-b31b-78e006fe537e/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is 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 Keep the field near-black; let glow mean liveness
- Do Cyan = live, magenta = command focus, mint = ready
- Do Draw edges with box-shadow glow, never a border property
- Do Use IBM Plex Mono for display + data, Plex Sans for body
- Do Build meters and icons from square pixel cells; keep 0 corners
- Don't No gradients, glassmorphism, or pastel washes
- Don't No borders or grey dividers
- Don't No neon on every element — glow must stay meaningful
- Don't No RGB split or blur on body text
- Don't No light-mode reskin — dark is the identity

### Accessibility

Phosphor-white on near-black exceeds practical contrast targets; cyan/magenta accents are backed by labels and position, never colour alone. Scanline texture stays <=0.025 opacity and never sits under small body copy. Honour prefers-reduced-motion: power-on and reveal animations are gated and degrade to the correct final state.

## Imagery Direction

### Pairs With Art Style

cathode-ray

### Summary

Macro CRT phosphor photography — luminous cyan/magenta waveforms and pixel grids, fine scanlines, soft bloom on near-black, with generous negative space for overlay type.

### Subjects

- glowing waveforms
- pixel / level-meter grids
- a single command glow

### Usage

One full-bleed hero per landing via --hero-image; never an inline <img> in compositions.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "phosphor",
  "type": "registry:theme",
  "title": "Phosphor shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#050509",
      "foreground": "#F1F7FF",
      "card": "#0B0D16",
      "card-foreground": "#F1F7FF",
      "popover": "#0B0D16",
      "popover-foreground": "#F1F7FF",
      "primary": "#F1F7FF",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#818FA8",
      "muted-foreground": "#F1F7FF",
      "accent": "#00E7FF",
      "accent-foreground": "#111111",
      "destructive": "#FF4D6D",
      "border": "#e4e4e7",
      "input": "#e4e4e7",
      "ring": "#00E7FF",
      "chart-1": "#F1F7FF",
      "chart-2": "#f4f4f5",
      "chart-3": "#00E7FF",
      "chart-4": "#3BFFB0",
      "chart-5": "#FFD166",
      "sidebar": "#0B0D16",
      "sidebar-foreground": "#F1F7FF",
      "sidebar-primary": "#F1F7FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#66A3FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#e4e4e7",
      "sidebar-ring": "#00E7FF",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F1F7FF",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#00E7FF",
      "accent-foreground": "#111111",
      "destructive": "#FF4D6D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00E7FF",
      "chart-1": "#F1F7FF",
      "chart-2": "#f4f4f5",
      "chart-3": "#00E7FF",
      "chart-4": "#3BFFB0",
      "chart-5": "#FFD166",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F1F7FF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#00E7FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00E7FF",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef593-437c-7592-b31b-78e006fe537e",
    "slug": "phosphor",
    "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",
        "bg",
        "command",
        "cyan",
        "error",
        "info",
        "magenta",
        "mint",
        "muted",
        "success",
        "surface",
        "surface2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "default",
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "field",
        "panel",
        "raised"
      ],
      "borders": [
        "default",
        "note"
      ],
      "motion": [
        "ease",
        "note"
      ]
    }
  }
}
```