Beamline

# Beamline

## Philosophy

Beamline is a signal-analysis interface language for the reverse-engineer's bench. It reads a screen the way an oscilloscope reads a wire: a glowing mint waveform is the spine of every layout, channels are armed by hand, and one warm amber beam-dot rides the trace to mark the only record that is locked right now. A parallel reimagination of Retro Terminal Hacker — it keeps the hacker-bench subject and the phosphor-green Lumiphore technique, but trades the stacked terminal-window metaphor for a calibrated instrument-bench one: a calm scope face, not a console of nested windows.

### Values

- the trace is the hierarchy — a glowing waveform divides sections, plots numbers, and carries the live marker
- a deep petrol-graphite ground (never true black, never white) so the phosphor traces are the brightest thing on screen
- one warm amber beam-dot per view marks what is locked; everything else stays cool mint and teal
- instrument-bench honesty: expose frames, offsets, CRC, lock state, and live channels
- dense but legible — high-contrast phosphor text, exact alignment, body never below 17px
- soft 16px scope panels with corner ticks and inner glow, never hard terminal windows or heavy borders

### Anti-Values

- true-black or white grounds; cyan-neon, purple, or synthwave gradients
- stacked terminal windows, chrome title strips, and left signal bars (the refinement's look)
- mint or amber spread as a decorative flood instead of a highlighter
- single-side accent edges on cards, nested cards, or navigation boxed into a pill
- state hidden behind ambiguous icons instead of a labelled channel or readout

### Visual Character

- A glowing mint waveform is the ownable spine of every layout — it is the section divider, the chart, and the backdrop to headline numbers, drawn as inline SVG so it recolours on palette swap.
- One warm amber beam-dot rides the peak of the live trace, often with a faint halo ring — the electron beam caught mid-sweep on the only locked record, and the single saturated colour in view.
- Panels are soft-cornered (16px) phosphor scope modules on a deep petrol-graphite ground, each with a 1px inset hairline, a faint inner phosphor glow, and small teal corner registration ticks — calm scope faces, never hard windows.
- Display type is Chakra Petch, a squared instrument-panel sans, paired with IBM Plex Mono for hex frames, offsets, timestamps, and readout straps; hard typographic contrast carries hierarchy.
- Channels read like scope probes: a lit mint or teal chip is a folded live trace, a dark chip is parked, so the interface always shows what is being captured.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0A1311` |
| surface | `#0E1A16` |
| surface_2 | `#13241E` |
| panel_hi | `#173026` |
| text | `#DDF5E6` |
| text_dim | `#93BBA6` |
| muted | `#6A917F` |
| muted_2 | `#4C6B5C` |
| accent | `#54F0A8` |
| accent_2 | `#3FD6C4` |
| peak | `#FFC24B` |
| on_accent | `#04130C` |
| border | `#1E3A30` |
| border_hi | `#2C5A47` |
| success | `#54F0A8` |
| warning | `#FFC24B` |
| error | `#FF6B5A` |
| info | `#3FD6C4` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Mono
- **Heading Font**: Chakra Petch
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: 0.01em
- **Line Height**: 1.55
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: inset 0 0 0 1px rgba(30,58,48,1)
- **Md**: inset 0 0 0 1px #1E3A30, inset 0 0 48px rgba(84,240,168,0.03)
- **Lg**: inset 0 0 0 1px #1E3A30, inset 0 0 70px rgba(84,240,168,0.04)
- **Glow**: 0 0 18px rgba(84,240,168,0.28)
- **Glow Amber**: 0 0 16px rgba(255,194,75,0.40)

### Spacing

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

### Surfaces

- **Bg Pattern**: Deep petrol-graphite field carrying a very faint phosphor measurement grid (opacity below 5%) so the waveform traces read as the brightest light, never a flat web canvas.
- **Card Style**: Soft-cornered 16px phosphor scope panels: a 1px inset hairline border, a faint inner phosphor glow, and small teal corner registration ticks. Captions are uppercase Plex Mono [ LABEL ] straps in amber above a Chakra Petch heading. No chrome title strips, no nested cards, no single-side accent edge.
- **Treatment**: Cool mint-and-teal phosphor traces on a deep petrol ground, with one warm amber beam-dot for the live element and a soft electron-beam glow on live controls.

### Borders

- **Default Width**: 1px
- **Accent Width**: 1.5px
- **Style**: solid
- **Character**: Inset phosphor hairlines and near-invisible interior rules; teal corner registration ticks instead of full borders; focus is a 1.5px mint ring plus glow. Never a heavy border, never a single decorative edge.

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Philosophy**: Motion is the electron beam settling: a one-step reveal as sections enter, a cursor-quiet feel, no parallax or looping decoration. The fully-settled state renders with no JavaScript — the reveal is layered on behind a class on <html> and always falls back to visible, and respects prefers-reduced-motion.

## Rules

### Composition

Compose the screen as a calibrated signal bench: a readout strap or sidebar rail of scope settings, a dominant trace/scope window, and supporting capture-log and channel panels. The glowing mint waveform is the spine — it divides sections and backs the numbers. Layouts differ per artifact (single bench, image hero + sections, sidebar dashboard); never three equal cards.

### Hierarchy

Hierarchy comes from the trace first, then large Chakra Petch headings, then uppercase Plex Mono [ LABEL ] straps, then fixed-width monospace data. Cool mint carries structure and live state; teal carries the reference channel; one amber beam-dot marks the single locked element per view.

### Density

Medium-high density with compact monospace rows and exact alignment, paired with calmer petrol-field pauses so dense data reads as instrumented, not chaotic.

### Signature

- The beam trace: a glowing mint waveform drawn as inline SVG is the spine of every layout — the section divider, the chart, and the backdrop to headline numbers.
- The sweeping beam-dot: one warm amber dot rides the peak of the live trace, often with a halo ring, marking the only locked record and the single saturated colour in view.
- Soft scope panels: 16px phosphor modules on a petrol ground with an inset hairline, inner glow, and teal corner registration ticks — calm scope faces, never hard terminal windows.
- Armed channels: inputs read like scope probes; a lit mint/teal chip is a folded live trace, a dark chip is parked, so capture state is always visible.

## Layout

### Grid

Desktop contained content caps at ~1280-1320px with 24px gutters; the embodiment is a single scrolling bench, the dashboard a 232px sidebar rail plus an asymmetric main grid (a 1.85fr live-scope window beside 1fr daemon panes). Grids use minmax(0,1fr) columns and min-width:0 children so they never blow out their container.

### Whitespace

Deliberate and tight inside panels (compact monospace rows) with larger gaps between major sections; consistent 8px-based spacing and always padding above titles.

### Density

Tight scope rows alternate with calmer petrol-field pauses; visual energy localises to the live trace and the amber beam-dot.

### Responsive

Renders from ~390px to 2560px+. Mobile stacks to one column, collapses the rail to a top nav, hides non-essential readouts and table columns, scrolls wide tables inside their own panel, and never overflows horizontally. Ultra-wide caps and centres contained content; only the hero spans 100vw.

### Breakpoints

- **Mobile**: < 640px single column, rail collapses, non-essential readouts hidden
- **Tablet**: 640-1024px reduced multi-column
- **Desktop**: >= 1024px full bench / sidebar layout
- **Ultrawide**: >= 1600px caps and centres contained content; only the hero spans 100vw

## Guidance

### Do

- Keep the deep petrol-graphite ground dominant and let the phosphor traces be the light.
- Make the glowing mint waveform the structural spine — divider, chart, and metric backdrop.
- Reserve the warm amber beam-dot for the single live or locked element per view.
- Expose frames, offsets, CRC, lock state, and armed channels so the interface reads like an instrument.
- Frame panels with a soft inset hairline, an inner phosphor glow, and teal corner ticks.
- Keep body copy at 17px+ phosphor text and pair every status colour with a glowing dot or label.

### Don't

- Do not use true-black or white grounds, or add cyan-neon, purple, or synthwave gradients.
- Do not reproduce stacked terminal windows, chrome title strips, or left signal bars.
- Do not let mint or amber become a decorative flood instead of a highlighter.
- Do not put a single accent edge on a card, nest cards, or box navigation into a floating pill.
- Do not hide controls behind ambiguous icons when a labelled channel or readout is clearer.
- Do not set body below 17px or microcopy below 11px; do not use glyph arrows in copy — draw inline SVG.

### Accessibility

Maintain WCAG AA contrast with phosphor #DDF5E6 text on the petrol field; keep mint and amber supplemental to a label or glowing dot, never colour alone; provide a visible mint focus ring plus glow; never set monospace microcopy below 11px; respect prefers-reduced-motion for the reveal.

## Imagery Direction

### Pairs With

lumiphore

### Summary

Subjects rendered as glowing phosphor-green CRT oscilloscope vector traces on a true-black field — luminous monochrome scan-strokes that bloom and halate, with scanline texture and a gentle vignette. The landing hero is a wide composite waveform on a measurement grid, the active trace weighted right with a warm beam-peak, and the left third receding into calm dark phosphor haze for the overlay headline.

### Subjects

- composite oscilloscope waveform
- Lissajous figure
- signal constellation
- swept sine-and-square trace
- phosphor decay envelope

### Usage

Full-viewport landing hero driven by background-image: var(--hero-image); the waveform fills the frame edge to edge, weighted to the right, with a graduated petrol haze carrying the left-side overlay rather than a solid scrim.

---
version: "alpha"
name: "Beamline"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0A1311"
  surface: "#0E1A16"
  surface_2: "#13241E"
  panel_hi: "#173026"
  text: "#DDF5E6"
  text_dim: "#93BBA6"
  muted: "#6A917F"
  muted_2: "#4C6B5C"
  accent: "#54F0A8"
  accent_2: "#3FD6C4"
  peak: "#FFC24B"
  on_accent: "#04130C"
  border: "#1E3A30"
  border_hi: "#2C5A47"
  success: "#54F0A8"
  warning: "#FFC24B"
  error: "#FF6B5A"
  info: "#3FD6C4"
typography:
  headline-lg:
    fontFamily: "Chakra Petch"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "0.01em"
  headline-md:
    fontFamily: "Chakra Petch"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "0.01em"
  body-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    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: "16px"
  lg: "24px"
  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-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-panel_hi:
    backgroundColor: "{colors.panel_hi}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-text_dim:
    backgroundColor: "{colors.text_dim}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-muted_2:
    backgroundColor: "{colors.muted_2}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-peak:
    backgroundColor: "{colors.peak}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-border_hi:
    backgroundColor: "{colors.border_hi}"
  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"
---

# Beamline

## Overview

Beamline is a signal-analysis interface language for the reverse-engineer's bench. It reads a screen the way an oscilloscope reads a wire: a glowing mint waveform is the spine of every layout, channels are armed by hand, and one warm amber beam-dot rides the trace to mark the only record that is locked right now. A parallel reimagination of Retro Terminal Hacker — it keeps the hacker-bench subject and the phosphor-green Lumiphore technique, but trades the stacked terminal-window metaphor for a calibrated instrument-bench one: a calm scope face, not a console of nested windows.

### Values

- the trace is the hierarchy — a glowing waveform divides sections, plots numbers, and carries the live marker
- a deep petrol-graphite ground (never true black, never white) so the phosphor traces are the brightest thing on screen
- one warm amber beam-dot per view marks what is locked; everything else stays cool mint and teal
- instrument-bench honesty: expose frames, offsets, CRC, lock state, and live channels
- dense but legible — high-contrast phosphor text, exact alignment, body never below 17px
- soft 16px scope panels with corner ticks and inner glow, never hard terminal windows or heavy borders

### Anti-Values

- true-black or white grounds; cyan-neon, purple, or synthwave gradients
- stacked terminal windows, chrome title strips, and left signal bars (the refinement's look)
- mint or amber spread as a decorative flood instead of a highlighter
- single-side accent edges on cards, nested cards, or navigation boxed into a pill
- state hidden behind ambiguous icons instead of a labelled channel or readout

### Visual Character

- A glowing mint waveform is the ownable spine of every layout — it is the section divider, the chart, and the backdrop to headline numbers, drawn as inline SVG so it recolours on palette swap.
- One warm amber beam-dot rides the peak of the live trace, often with a faint halo ring — the electron beam caught mid-sweep on the only locked record, and the single saturated colour in view.
- Panels are soft-cornered (16px) phosphor scope modules on a deep petrol-graphite ground, each with a 1px inset hairline, a faint inner phosphor glow, and small teal corner registration ticks — calm scope faces, never hard windows.
- Display type is Chakra Petch, a squared instrument-panel sans, paired with IBM Plex Mono for hex frames, offsets, timestamps, and readout straps; hard typographic contrast carries hierarchy.
- Channels read like scope probes: a lit mint or teal chip is a folded live trace, a dark chip is parked, so the interface always shows what is being captured.

## 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 | `#0A1311` |
| surface | `#0E1A16` |
| surface_2 | `#13241E` |
| panel_hi | `#173026` |
| text | `#DDF5E6` |
| text_dim | `#93BBA6` |
| muted | `#6A917F` |
| muted_2 | `#4C6B5C` |
| accent | `#54F0A8` |
| accent_2 | `#3FD6C4` |
| peak | `#FFC24B` |
| on_accent | `#04130C` |
| border | `#1E3A30` |
| border_hi | `#2C5A47` |
| success | `#54F0A8` |
| warning | `#FFC24B` |
| error | `#FF6B5A` |
| info | `#3FD6C4` |

## Typography

- **Headline-Lg**: Chakra Petch, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Chakra Petch, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Mono, 17px, weight 400, line-height 1.55.
- **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 contained content caps at ~1280-1320px with 24px gutters; the embodiment is a single scrolling bench, the dashboard a 232px sidebar rail plus an asymmetric main grid (a 1.85fr live-scope window beside 1fr daemon panes). Grids use minmax(0,1fr) columns and min-width:0 children so they never blow out their container.

### Whitespace

Deliberate and tight inside panels (compact monospace rows) with larger gaps between major sections; consistent 8px-based spacing and always padding above titles.

### Density

Tight scope rows alternate with calmer petrol-field pauses; visual energy localises to the live trace and the amber beam-dot.

### Responsive

Renders from ~390px to 2560px+. Mobile stacks to one column, collapses the rail to a top nav, hides non-essential readouts and table columns, scrolls wide tables inside their own panel, and never overflows horizontally. Ultra-wide caps and centres contained content; only the hero spans 100vw.

### Breakpoints

- **Mobile**: < 640px single column, rail collapses, non-essential readouts hidden
- **Tablet**: 640-1024px reduced multi-column
- **Desktop**: >= 1024px full bench / sidebar layout
- **Ultrawide**: >= 1600px caps and centres contained content; only the hero spans 100vw

## Elevation & Depth

### Shadows

- **Sm**: inset 0 0 0 1px rgba(30,58,48,1)
- **Md**: inset 0 0 0 1px #1E3A30, inset 0 0 48px rgba(84,240,168,0.03)
- **Lg**: inset 0 0 0 1px #1E3A30, inset 0 0 70px rgba(84,240,168,0.04)
- **Glow**: 0 0 18px rgba(84,240,168,0.28)
- **Glow Amber**: 0 0 16px rgba(255,194,75,0.40)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: Deep petrol-graphite field carrying a very faint phosphor measurement grid (opacity below 5%) so the waveform traces read as the brightest light, never a flat web canvas.
- **Card Style**: Soft-cornered 16px phosphor scope panels: a 1px inset hairline border, a faint inner phosphor glow, and small teal corner registration ticks. Captions are uppercase Plex Mono [ LABEL ] straps in amber above a Chakra Petch heading. No chrome title strips, no nested cards, no single-side accent edge.
- **Treatment**: Cool mint-and-teal phosphor traces on a deep petrol ground, with one warm amber beam-dot for the live element and a soft electron-beam glow on live controls.

### Borders

- **Default Width**: 1px
- **Accent Width**: 1.5px
- **Style**: solid
- **Character**: Inset phosphor hairlines and near-invisible interior rules; teal corner registration ticks instead of full borders; focus is a 1.5px mint ring plus glow. Never a heavy border, never a single decorative edge.

## Components

### Composition

Compose the screen as a calibrated signal bench: a readout strap or sidebar rail of scope settings, a dominant trace/scope window, and supporting capture-log and channel panels. The glowing mint waveform is the spine — it divides sections and backs the numbers. Layouts differ per artifact (single bench, image hero + sections, sidebar dashboard); never three equal cards.

### Hierarchy

Hierarchy comes from the trace first, then large Chakra Petch headings, then uppercase Plex Mono [ LABEL ] straps, then fixed-width monospace data. Cool mint carries structure and live state; teal carries the reference channel; one amber beam-dot marks the single locked element per view.

### Density

Medium-high density with compact monospace rows and exact alignment, paired with calmer petrol-field pauses so dense data reads as instrumented, not chaotic.

### Signature

- The beam trace: a glowing mint waveform drawn as inline SVG is the spine of every layout — the section divider, the chart, and the backdrop to headline numbers.
- The sweeping beam-dot: one warm amber dot rides the peak of the live trace, often with a halo ring, marking the only locked record and the single saturated colour in view.
- Soft scope panels: 16px phosphor modules on a petrol ground with an inset hairline, inner glow, and teal corner registration ticks — calm scope faces, never hard terminal windows.
- Armed channels: inputs read like scope probes; a lit mint/teal chip is a folded live trace, a dark chip is parked, so capture state is always visible.

## 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-019efb6c-d15f-7653-9d40-f170a87a04da/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 deep petrol-graphite ground dominant and let the phosphor traces be the light.
- Do Make the glowing mint waveform the structural spine — divider, chart, and metric backdrop.
- Do Reserve the warm amber beam-dot for the single live or locked element per view.
- Do Expose frames, offsets, CRC, lock state, and armed channels so the interface reads like an instrument.
- Do Frame panels with a soft inset hairline, an inner phosphor glow, and teal corner ticks.
- Do Keep body copy at 17px+ phosphor text and pair every status colour with a glowing dot or label.
- Don't Do not use true-black or white grounds, or add cyan-neon, purple, or synthwave gradients.
- Don't Do not reproduce stacked terminal windows, chrome title strips, or left signal bars.
- Don't Do not let mint or amber become a decorative flood instead of a highlighter.
- Don't Do not put a single accent edge on a card, nest cards, or box navigation into a floating pill.
- Don't Do not hide controls behind ambiguous icons when a labelled channel or readout is clearer.
- Don't Do not set body below 17px or microcopy below 11px; do not use glyph arrows in copy — draw inline SVG.

### Accessibility

Maintain WCAG AA contrast with phosphor #DDF5E6 text on the petrol field; keep mint and amber supplemental to a label or glowing dot, never colour alone; provide a visible mint focus ring plus glow; never set monospace microcopy below 11px; respect prefers-reduced-motion for the reveal.

## Imagery Direction

### Pairs With

lumiphore

### Summary

Subjects rendered as glowing phosphor-green CRT oscilloscope vector traces on a true-black field — luminous monochrome scan-strokes that bloom and halate, with scanline texture and a gentle vignette. The landing hero is a wide composite waveform on a measurement grid, the active trace weighted right with a warm beam-peak, and the left third receding into calm dark phosphor haze for the overlay headline.

### Subjects

- composite oscilloscope waveform
- Lissajous figure
- signal constellation
- swept sine-and-square trace
- phosphor decay envelope

### Usage

Full-viewport landing hero driven by background-image: var(--hero-image); the waveform fills the frame edge to edge, weighted to the right, with a graduated petrol haze carrying the left-side overlay rather than a solid scrim.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "beamline",
  "type": "registry:theme",
  "title": "Beamline shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A1311",
      "foreground": "#DDF5E6",
      "card": "#0E1A16",
      "card-foreground": "#DDF5E6",
      "popover": "#0E1A16",
      "popover-foreground": "#DDF5E6",
      "primary": "#DDF5E6",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6A917F",
      "muted-foreground": "#DDF5E6",
      "accent": "#54F0A8",
      "accent-foreground": "#111111",
      "destructive": "#FF6B5A",
      "border": "#1E3A30",
      "input": "#1E3A30",
      "ring": "#54F0A8",
      "chart-1": "#DDF5E6",
      "chart-2": "#f4f4f5",
      "chart-3": "#54F0A8",
      "chart-4": "#54F0A8",
      "chart-5": "#FFC24B",
      "sidebar": "#0E1A16",
      "sidebar-foreground": "#DDF5E6",
      "sidebar-primary": "#DDF5E6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#3FD6C4",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1E3A30",
      "sidebar-ring": "#54F0A8",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#DDF5E6",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#54F0A8",
      "accent-foreground": "#111111",
      "destructive": "#FF6B5A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#54F0A8",
      "chart-1": "#DDF5E6",
      "chart-2": "#f4f4f5",
      "chart-3": "#54F0A8",
      "chart-4": "#54F0A8",
      "chart-5": "#FFC24B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#DDF5E6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#54F0A8",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#54F0A8",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efb6c-d15f-7653-9d40-f170a87a04da",
    "slug": "beamline",
    "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",
        "bg",
        "border",
        "border_hi",
        "error",
        "info",
        "muted",
        "muted_2",
        "on_accent",
        "panel_hi",
        "peak",
        "success",
        "surface",
        "surface_2",
        "text",
        "text_dim",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "glow",
        "glow_amber",
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```