CRT Phosphor Command Interface

# CRT Phosphor Command Interface

## Philosophy

CRT Phosphor Command Interface treats the product screen as a living glass terminal: terse, exact, and operational, but disciplined enough for modern enterprise software. It borrows the green-on-black phosphor glow, raster scan rhythm, fixed-cell typography, prompt grammar, and square hardware-like control geometry of DEC-era terminals, then tempers them with IBM-like hierarchy, clear grids, accessible contrast, and restrained component behavior. The result is not a novelty shell; it is a command center for technical decisions where data, alerts, and actions feel immediate and trustworthy.

### Values

- {"description":"Every label reads like a system message or command output; interfaces prioritize status, state, and next action over decorative brand language.","name":"Operational directness"}
- {"description":"The language exposes the pixel grid through scanlines, fine grid backgrounds, fixed character cells, and visible alignment instead of pretending the screen is materially smooth.","name":"Raster honesty"}
- {"description":"Green is dominant but not sprayed indiscriminately; amber, red, cyan, and dim gray appear only as semantic states and instrument-grade highlights.","name":"Phosphor restraint"}
- {"description":"Typography uses fixed-width fonts for navigation, headings, data, controls, and annotations so rhythm and alignment become the primary hierarchy.","name":"Monospace authority"}
- {"description":"A blinking cursor, prompt marks, focused fields, and small pulse states imply that the interface is listening without adding ornamental animation.","name":"System alive"}
- {"description":"Historic terminal cues are organized through modern product patterns: dashboards, tables, tabs, filters, command palettes, and accessible state tokens.","name":"Enterprise clarity"}

### Anti-Values

- {"description":"Avoid neon gradients, diagonal sci-fi panels, excessive bloom, and theatrical HUD decoration that obscure functional reading.","name":"Cyberpunk clutter"}
- {"description":"Avoid pill buttons, card rounding, bubbly icons, and friendly SaaS softness; controls should feel machined and square.","name":"Rounded consumer softness"}
- {"description":"Do not reduce the style to green text on black; the grid, prompt syntax, raster texture, typed hierarchy, and product structure must all be present.","name":"Fake terminal cosplay"}
- {"description":"Never sacrifice contrast, spacing, or touch targets for historically accurate cramped displays.","name":"Unreadable nostalgia"}

### Visual Character

- Deep black and near-black panels carry phosphor-green text with subtle layered text-shadow glow, while amber and red appear only for warning and failure states.
- Every container, button, input, tab, and modal uses zero border radius with 1px to 2px square phosphor borders and inset terminal-frame outlines.
- Screen surfaces include CSS scanline overlays, a faint technical grid, and vignette glow so panels feel like luminous CRT glass rather than flat cards.
- Headings, labels, and section dividers use command prompt prefixes such as $, >, ./, and bracketed numeric tags aligned to a strict monospace character rhythm.
- Primary interactions expose a blinking block cursor or caret motif through CSS keyframes on command fields, active tabs, and status prompts.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: Square phosphor strokes that read as terminal frames: thin on quiet panels, doubled or inset on active modules, amber on warnings.
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#FFB000` |
| amber_dim | `#8A5E00` |
| background | `#020403` |
| blackout | `#000000` |
| border | `#168A45` |
| error | `#FF3B30` |
| grid | `#0B3A1D` |
| info | `#40CFFF` |
| muted | `#5D8F6C` |
| panel_deep | `#031007` |
| panel_lift | `#092012` |
| phosphor_dim | `#7CFF9A` |
| primary | `#00FF66` |
| red_dim | `#611515` |
| secondary | `#39FF14` |
| success | `#00D084` |
| surface | `#07110B` |
| text | `#C8FFD8` |
| warning | `#FFB000` |

### Motion

- **Duration**: 160ms
- **Easing**: steps(2, end)
- **Philosophy**: snappy terminal-state changes with cursor blink, minimal fades, and no elastic movement

### Radii

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

### Shadows

- **Lg**: 0 0 48px rgba(0,255,102,0.22), inset 0 0 32px rgba(0,255,102,0.08)
- **Md**: 0 0 22px rgba(0,255,102,0.20), inset 0 0 18px rgba(0,255,102,0.05)
- **Sm**: 0 0 10px rgba(0,255,102,0.18)

### Spacing

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

### Surfaces

- **Bg Pattern**: grid
- **Card Style**: Near-black glass-terminal plates with scanline overlay, inset glow, square borders, and dim grid texture behind command content.
- **Overlays**: ["repeating-linear-gradient scanlines","radial vignette at screen edges","linear technical grid at 24px intervals"]
- **Treatment**: noise

### Typography

- **Base Size**: 16px
- **Body Font**: IBM Plex Mono
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap
- **Heading Font**: IBM Plex Mono
- **Letter Spacing**: 0.01em
- **Line Height**: 1.45
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.2
- **Sizes**: {"base":"16px","lg":"22px","md":"18px","sm":"14px","xl":"28px","xs":"12px","xxl":"40px"}
- **Weights**: {"bold":700,"medium":500,"regular":400,"semibold":600}

## Rules

### Composition

Compose screens as command centers: persistent left rail, top prompt/status line, central telemetry workspace, and right-side diagnostics on desktop. Use nested square panels, explicit module IDs, and rows aligned to an 8px spacing scale. Keep most surfaces flat and let borders, grid lines, and text hierarchy create separation. Reserve amber for warning modules and destructive confirmations. Use tables, command palettes, logs, toggles, and forms as first-class product patterns, not decorative props.

### Density

Medium-high technical density is appropriate, but preserve modern readability: 16px base type, 44px minimum controls, 16-24px panel padding, and scrollable tables rather than microscopic text.

### Hierarchy

Hierarchy is produced by command syntax, brightness, border weight, and alignment. Page titles are large monospace prompt statements; section headings are uppercase with ./ or $ prefixes; metadata is dim green; urgent state uses amber or red with no additional hue mixing. Data columns align on the character grid. Primary actions are outlined green blocks with inverse hover states; secondary actions are dim bordered blocks.

### Signature Patterns

- Apply a full-screen CRT texture using CSS pseudo-elements with repeating-linear-gradient scanlines, faint 24px grid lines, and a radial vignette overlay.
- Use zero-radius bordered modules with an inset 0 0 0 1px secondary frame and phosphor box-shadow so every panel resembles a terminal viewport.
- Prefix headings, nav items, tabs, and status messages with command syntax markers ($, >, ./, [00]) created as text or ::before content.
- Implement a blinking block cursor with steps() keyframes on the active command input, active tab label, and live status line.
- Render warning states as amber bordered panels with amber glow while preserving the same square terminal geometry rather than using rounded alert components.

## Layout

### Breakpoints

Mobile <= 639px becomes a single-column terminal feed with full-width controls. Tablet 640px-1023px uses a 4-column grid, collapses rail to top command tabs, and stacks diagnostics below. Desktop >= 1024px restores the 12-column command-center composition.

### Density

Medium-high operator density with compact metadata and spacious control hit areas; dashboards may show many data streams but never below readable monospace sizes.

### Grid

Desktop uses a 12-column grid with 24px gutters and max-width 1440px; canonical app layout is 220px rail, flexible central 6-7 columns, and 320px diagnostics column. Panels align to an 8px baseline and a visible 24px raster grid.

### Whitespace

Whitespace is measured and mechanical, not airy: 8px between related rows, 16px inside dense panels, 24px between modules, 48px for major screen zones. Blank space should feel like unused terminal cells.

## Guidance

### Do

- Use IBM Plex Mono or another highly legible monospace font for all text, including forms and tables.
- Keep all corners square and reinforce important areas with 2px borders, inset outlines, or bracket-like dividers.
- Add scanlines and glow subtly through overlays; text must remain crisp and accessible.
- Write headings and labels in command grammar such as $ deploy, ./diagnostics, > awaiting input, and [03] alerts.
- Reserve amber for warnings and red for destructive or failed system states; never use them as decoration.
- Provide visible focus states using phosphor outlines and cursor-like markers.
- Use modern responsive behavior so terminal density collapses into readable single-column flows on phones.
- Make tables horizontally scrollable only when necessary and keep key status labels visible.

### Don't

- Do not use rounded pills, soft shadows, pastel fills, or consumer-app card styling.
- Do not layer heavy bloom over body text or make scanlines so strong that reading becomes tiring.
- Do not introduce multiple decorative neon hues; keep the palette semantic and restrained.
- Do not center everything like a splash screen; operational interfaces need grids, rails, and aligned data.
- Do not use proportional fonts for data, controls, or navigation.
- Do not mimic a terminal by leaving the product unstructured; include real components, forms, states, and hierarchy.
- Do not rely on animation beyond cursor blink, small state pulses, and immediate hover/focus transitions.

### Accessibility

Maintain WCAG contrast by using bright phosphor text on black but dimming secondary text only to safe levels. Provide reduced-motion support that disables blink and pulse animations. Ensure every interactive element has at least 44px height on touch devices, clear focus outlines, semantic labels, and non-color state labels such as WARN, FAIL, OK.

### Usage Context

Best for developer tools, infrastructure dashboards, observability products, security consoles, robotics controls, AI ops workbenches, and internal enterprise systems that benefit from an expert command-line tone.

---
version: "alpha"
name: "CRT Phosphor Command Interface"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#FFB000"
  amber_dim: "#8A5E00"
  background: "#020403"
  blackout: "#000000"
  border: "#168A45"
  error: "#FF3B30"
  grid: "#0B3A1D"
  info: "#40CFFF"
  muted: "#5D8F6C"
  panel_deep: "#031007"
  panel_lift: "#092012"
  phosphor_dim: "#7CFF9A"
  primary: "#00FF66"
  red_dim: "#611515"
  secondary: "#39FF14"
  success: "#00D084"
  surface: "#07110B"
  text: "#C8FFD8"
  warning: "#FFB000"
typography:
  headline-lg:
    fontFamily: "IBM Plex Mono"
    fontSize: "1.728rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "0.01em"
  headline-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "1.44rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "0.01em"
  body-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: "0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "0px"
  lg: "0px"
  md: "0px"
  none: "0px"
  sm: "0px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-amber_dim:
    backgroundColor: "{colors.amber_dim}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-blackout:
    backgroundColor: "{colors.blackout}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-grid:
    backgroundColor: "{colors.grid}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-panel_deep:
    backgroundColor: "{colors.panel_deep}"
  color-reference-panel_lift:
    backgroundColor: "{colors.panel_lift}"
  color-reference-phosphor_dim:
    backgroundColor: "{colors.phosphor_dim}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-red_dim:
    backgroundColor: "{colors.red_dim}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  button-primary:
    backgroundColor: "{colors.primary}"
    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"
---

# CRT Phosphor Command Interface

## Overview

CRT Phosphor Command Interface treats the product screen as a living glass terminal: terse, exact, and operational, but disciplined enough for modern enterprise software. It borrows the green-on-black phosphor glow, raster scan rhythm, fixed-cell typography, prompt grammar, and square hardware-like control geometry of DEC-era terminals, then tempers them with IBM-like hierarchy, clear grids, accessible contrast, and restrained component behavior. The result is not a novelty shell; it is a command center for technical decisions where data, alerts, and actions feel immediate and trustworthy.

### Values

- {"description":"Every label reads like a system message or command output; interfaces prioritize status, state, and next action over decorative brand language.","name":"Operational directness"}
- {"description":"The language exposes the pixel grid through scanlines, fine grid backgrounds, fixed character cells, and visible alignment instead of pretending the screen is materially smooth.","name":"Raster honesty"}
- {"description":"Green is dominant but not sprayed indiscriminately; amber, red, cyan, and dim gray appear only as semantic states and instrument-grade highlights.","name":"Phosphor restraint"}
- {"description":"Typography uses fixed-width fonts for navigation, headings, data, controls, and annotations so rhythm and alignment become the primary hierarchy.","name":"Monospace authority"}
- {"description":"A blinking cursor, prompt marks, focused fields, and small pulse states imply that the interface is listening without adding ornamental animation.","name":"System alive"}
- {"description":"Historic terminal cues are organized through modern product patterns: dashboards, tables, tabs, filters, command palettes, and accessible state tokens.","name":"Enterprise clarity"}

### Anti-Values

- {"description":"Avoid neon gradients, diagonal sci-fi panels, excessive bloom, and theatrical HUD decoration that obscure functional reading.","name":"Cyberpunk clutter"}
- {"description":"Avoid pill buttons, card rounding, bubbly icons, and friendly SaaS softness; controls should feel machined and square.","name":"Rounded consumer softness"}
- {"description":"Do not reduce the style to green text on black; the grid, prompt syntax, raster texture, typed hierarchy, and product structure must all be present.","name":"Fake terminal cosplay"}
- {"description":"Never sacrifice contrast, spacing, or touch targets for historically accurate cramped displays.","name":"Unreadable nostalgia"}

### Visual Character

- Deep black and near-black panels carry phosphor-green text with subtle layered text-shadow glow, while amber and red appear only for warning and failure states.
- Every container, button, input, tab, and modal uses zero border radius with 1px to 2px square phosphor borders and inset terminal-frame outlines.
- Screen surfaces include CSS scanline overlays, a faint technical grid, and vignette glow so panels feel like luminous CRT glass rather than flat cards.
- Headings, labels, and section dividers use command prompt prefixes such as $, >, ./, and bracketed numeric tags aligned to a strict monospace character rhythm.
- Primary interactions expose a blinking block cursor or caret motif through CSS keyframes on command fields, active tabs, and status prompts.

## Colors

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

| Token | Value |
|-------|-------|
| accent | `#FFB000` |
| amber_dim | `#8A5E00` |
| background | `#020403` |
| blackout | `#000000` |
| border | `#168A45` |
| error | `#FF3B30` |
| grid | `#0B3A1D` |
| info | `#40CFFF` |
| muted | `#5D8F6C` |
| panel_deep | `#031007` |
| panel_lift | `#092012` |
| phosphor_dim | `#7CFF9A` |
| primary | `#00FF66` |
| red_dim | `#611515` |
| secondary | `#39FF14` |
| success | `#00D084` |
| surface | `#07110B` |
| text | `#C8FFD8` |
| warning | `#FFB000` |

## Typography

- **Headline-Lg**: IBM Plex Mono, 1.728rem, weight 700, line-height 1.1.
- **Headline-Md**: IBM Plex Mono, 1.44rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Mono, 16px, weight 400, line-height 1.45.
- **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`

### Breakpoints

Mobile <= 639px becomes a single-column terminal feed with full-width controls. Tablet 640px-1023px uses a 4-column grid, collapses rail to top command tabs, and stacks diagnostics below. Desktop >= 1024px restores the 12-column command-center composition.

### Density

Medium-high operator density with compact metadata and spacious control hit areas; dashboards may show many data streams but never below readable monospace sizes.

### Grid

Desktop uses a 12-column grid with 24px gutters and max-width 1440px; canonical app layout is 220px rail, flexible central 6-7 columns, and 320px diagnostics column. Panels align to an 8px baseline and a visible 24px raster grid.

### Whitespace

Whitespace is measured and mechanical, not airy: 8px between related rows, 16px inside dense panels, 24px between modules, 48px for major screen zones. Blank space should feel like unused terminal cells.

## Elevation & Depth

### Shadows

- **Lg**: 0 0 48px rgba(0,255,102,0.22), inset 0 0 32px rgba(0,255,102,0.08)
- **Md**: 0 0 22px rgba(0,255,102,0.20), inset 0 0 18px rgba(0,255,102,0.05)
- **Sm**: 0 0 10px rgba(0,255,102,0.18)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: grid
- **Card Style**: Near-black glass-terminal plates with scanline overlay, inset glow, square borders, and dim grid texture behind command content.
- **Overlays**: ["repeating-linear-gradient scanlines","radial vignette at screen edges","linear technical grid at 24px intervals"]
- **Treatment**: noise

### Borders

- **Accent Width**: 2px
- **Character**: Square phosphor strokes that read as terminal frames: thin on quiet panels, doubled or inset on active modules, amber on warnings.
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Compose screens as command centers: persistent left rail, top prompt/status line, central telemetry workspace, and right-side diagnostics on desktop. Use nested square panels, explicit module IDs, and rows aligned to an 8px spacing scale. Keep most surfaces flat and let borders, grid lines, and text hierarchy create separation. Reserve amber for warning modules and destructive confirmations. Use tables, command palettes, logs, toggles, and forms as first-class product patterns, not decorative props.

### Density

Medium-high technical density is appropriate, but preserve modern readability: 16px base type, 44px minimum controls, 16-24px panel padding, and scrollable tables rather than microscopic text.

### Hierarchy

Hierarchy is produced by command syntax, brightness, border weight, and alignment. Page titles are large monospace prompt statements; section headings are uppercase with ./ or $ prefixes; metadata is dim green; urgent state uses amber or red with no additional hue mixing. Data columns align on the character grid. Primary actions are outlined green blocks with inverse hover states; secondary actions are dim bordered blocks.

### Signature Patterns

- Apply a full-screen CRT texture using CSS pseudo-elements with repeating-linear-gradient scanlines, faint 24px grid lines, and a radial vignette overlay.
- Use zero-radius bordered modules with an inset 0 0 0 1px secondary frame and phosphor box-shadow so every panel resembles a terminal viewport.
- Prefix headings, nav items, tabs, and status messages with command syntax markers ($, >, ./, [00]) created as text or ::before content.
- Implement a blinking block cursor with steps() keyframes on the active command input, active tab label, and live status line.
- Render warning states as amber bordered panels with amber glow while preserving the same square terminal geometry rather than using rounded alert components.

## 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/crt-phosphor-command-interface/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 Use IBM Plex Mono or another highly legible monospace font for all text, including forms and tables.
- Do Keep all corners square and reinforce important areas with 2px borders, inset outlines, or bracket-like dividers.
- Do Add scanlines and glow subtly through overlays; text must remain crisp and accessible.
- Do Write headings and labels in command grammar such as $ deploy, ./diagnostics, > awaiting input, and [03] alerts.
- Do Reserve amber for warnings and red for destructive or failed system states; never use them as decoration.
- Do Provide visible focus states using phosphor outlines and cursor-like markers.
- Do Use modern responsive behavior so terminal density collapses into readable single-column flows on phones.
- Do Make tables horizontally scrollable only when necessary and keep key status labels visible.
- Don't Do not use rounded pills, soft shadows, pastel fills, or consumer-app card styling.
- Don't Do not layer heavy bloom over body text or make scanlines so strong that reading becomes tiring.
- Don't Do not introduce multiple decorative neon hues; keep the palette semantic and restrained.
- Don't Do not center everything like a splash screen; operational interfaces need grids, rails, and aligned data.
- Don't Do not use proportional fonts for data, controls, or navigation.
- Don't Do not mimic a terminal by leaving the product unstructured; include real components, forms, states, and hierarchy.
- Don't Do not rely on animation beyond cursor blink, small state pulses, and immediate hover/focus transitions.

### Accessibility

Maintain WCAG contrast by using bright phosphor text on black but dimming secondary text only to safe levels. Provide reduced-motion support that disables blink and pulse animations. Ensure every interactive element has at least 44px height on touch devices, clear focus outlines, semantic labels, and non-color state labels such as WARN, FAIL, OK.

### Usage Context

Best for developer tools, infrastructure dashboards, observability products, security consoles, robotics controls, AI ops workbenches, and internal enterprise systems that benefit from an expert command-line tone.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "crt-phosphor-command-interface",
  "type": "registry:theme",
  "title": "CRT Phosphor Command Interface shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#020403",
      "foreground": "#C8FFD8",
      "card": "#07110B",
      "card-foreground": "#C8FFD8",
      "popover": "#07110B",
      "popover-foreground": "#C8FFD8",
      "primary": "#00FF66",
      "primary-foreground": "#111111",
      "secondary": "#39FF14",
      "secondary-foreground": "#111111",
      "muted": "#5D8F6C",
      "muted-foreground": "#C8FFD8",
      "accent": "#FFB000",
      "accent-foreground": "#ffffff",
      "destructive": "#FF3B30",
      "border": "#168A45",
      "input": "#168A45",
      "ring": "#FFB000",
      "chart-1": "#00FF66",
      "chart-2": "#39FF14",
      "chart-3": "#FFB000",
      "chart-4": "#00D084",
      "chart-5": "#FFB000",
      "sidebar": "#07110B",
      "sidebar-foreground": "#C8FFD8",
      "sidebar-primary": "#00FF66",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#40CFFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#168A45",
      "sidebar-ring": "#FFB000",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#00FF66",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FFB000",
      "accent-foreground": "#ffffff",
      "destructive": "#FF3B30",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FFB000",
      "chart-1": "#00FF66",
      "chart-2": "#39FF14",
      "chart-3": "#FFB000",
      "chart-4": "#00D084",
      "chart-5": "#FFB000",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#00FF66",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#FFB000",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FFB000",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "crt-phosphor-command-interface",
    "slug": "crt-phosphor-command-interface",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "amber_dim",
        "background",
        "blackout",
        "border",
        "error",
        "grid",
        "info",
        "muted",
        "panel_deep",
        "panel_lift",
        "phosphor_dim",
        "primary",
        "red_dim",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "overlays",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "weights"
      ]
    }
  }
}
```