Greenbar

# Greenbar

## Philosophy

Greenbar is a console language for a recognition daemon, printed like a photocopied hacker zine: a flat sumi-black ground, bone paper manga plates, and one green phosphor beam that marks only what the daemon locked on and the one thing you can do next. Its signature is the lock-on: one reticle per screen, on the one thing found, labelled with the real pixel it sits on and how sure it is. Long logs band every three rows like the green-and-white fanfold the language is named after, so rows need no rules. Everything you read sits on flat black or flat bone; the dots stay in the plates.

### Values

- One green: the accent #00ff66 marks the lock and the one action, and nothing else.
- The lock-on is the signature: one reticle per screen, on the one thing found, with a label that gives its measured pixel and confidence.
- Every mark carries a fact: log rows give the measured value, the limit, the result and the time.
- Greenbar banding separates long tables every three rows, the way line-printer fanfold does, so there are no rules.
- Halftone lives in the plates; copy sits on flat black or flat bone paper, crisp and aligned.

### Anti-Values

- Neon glow shadows, scanline veils and green radial bloom over the surface.
- A reticle on everything, and invented coordinates with no data behind them.
- Hairline card borders, bracket corner ticks on cards and boxed nav buttons.
- Status colours used as decoration, and invented stat bands.
- Blinking cursors as punctuation, unicode play triangles and HUD readouts with nothing behind them.

### Visual Character

- Flat sumi-black #0a0b09 ground with bone text #f8f1e4 and green-grey muted #8f978b; nothing glows.
- A full-bleed Phosphor Press face plate as the hero, lit green from the left, with one reticle on the left eye and a caption-strip label.
- The headline in Barlow Condensed 700 uppercase on an ink #050505 press block that sits on the plate's own black.
- A bone paper #f5efe2 manga plate band with a clipped DotGothic16 caption strip hanging off the image.
- Greenbar banding: band #121a14 on three rows of every six in the scan log.
- Square geometry: radius 0 on every button, well, segment, menu and dialog.

### Lineage

> Generation 2 of Greenbar, revised in place from arni's approved range take (.p-greenbar-i, 2026-09-29). It keeps the sumi-black ground, bone paper, green #00ff66, amber and red, Barlow Condensed and Sometype Mono, the headline and the page order, and removes the glow, scanlines, hairline cards, HUD readouts, Share Tech Mono and the reticle on everything.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0a0b09` |
| surface | `#f5efe2` |
| text | `#f8f1e4` |
| muted | `#8f978b` |
| border | `#262c26` |
| accent | `#00ff66` |
| on_accent | `#050505` |
| success | `#00ff66` |
| warning | `#d79921` |
| error | `#ff5b3d` |
| info | `#9aa49a` |
| ink | `#050505` |
| band | `#121a14` |

### Derived

- **Press Block**: ink #050505 behind display type on the plate, cloned per line with 10px side padding
- **Band Rows**: band #121a14 on rows 1 to 3 of every six in a long table, flat, no rules
- **Caption Strip**: DotGothic16 13.7px on ink #050505, 5 to 6px by 10 to 12px padding, clipped to the plate edge

### Typography

- **Heading Font**: Barlow Condensed
- **Body Font**: Sometype Mono
- **Mono Font**: Sometype Mono
- **Caption Font**: DotGothic16
- **Heading Weight**: 700
- **Body Weight**: 400
- **Button Weight**: 500
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em on display; -0.01em on the wordmark and rule titles; 0 on Sometype Mono and DotGothic16
- **Base Size**: 17px
- **Line Height**: 1.52
- **Scale Ratio**: 1.24
- **Scale**: ["13.7px","17px","26.1px","40.2px","49.8px","76.6px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Sometype+Mono:wght@400;500&family=DotGothic16&display=swap

### Radii

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

### Shadows

- **None**: none
- **Md**: none
- **Lg**: none

### Spacing

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

### Surfaces

- **Treatment**: sumi-console-with-bone-plates
- **Material**: Flat sumi-black #0a0b09 for everything you read and operate; bone paper #f5efe2 only for the manga plate band and the open dialog. Halftone dots live inside the plates and never under copy.
- **Card Style**: No cards. The system rules, the scan log and the patch form sit straight on the ground, parted by space; inputs and segments are flat ink #050505 wells.
- **Wells**: Ink #050505 wells for inputs and unchosen segments; the chosen segment inverts to bone text colour with ink label.
- **Bg Pattern**: none; the ground is flat. The only pattern is greenbar banding: band #121a14 on rows 1 to 3 of every six.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, hairlines, corner ticks or card frames. The only drawn lines are the reticle's four green corner brackets and ticks on the one thing the daemon locked on, and the 1.5px link sweep. Rows separate by greenbar bands, sections by space and the bone plate. Focus is a 2px outline: text colour on buttons, accent on fields.

### Motion

- **Duration**: 140ms
- **Easing**: steps(2, jump-none)
- **Lock**: 720ms steps(6, jump-end): the reticle brackets start at the plate edges and step in onto the eye; the label hides until the lock lands
- **Replay**: the scan log hides each result and prints it back one row every 140ms, stamping the time
- **Philosophy**: Motion behaves like terminal state changes: stepped, never eased. The settled page is complete with no JavaScript, and prefers-reduced-motion stamps the new times with no motion.

### Controls

- **Height**: 50px (16px padding on a 17px label)
- **Radius**: 0px
- **Well Height**: 50px

## Rules

### Composition

- Open on the full-bleed face plate with the nav and the headline press block on its black left side; the reticle sits on the eye, never on the copy.
- Below the hero, return to a contained grid on flat black: a 5fr and 7fr two-column head, then one bone plate band, then the scan log, then the patch form.
- Give each view one reticle, on the one thing the daemon found.
- Sections separate by 80px of space and the bone plate; nothing is boxed.

### Hierarchy

- Display in Barlow Condensed 700 uppercase at -0.02em: 76.6px hero line, 49.8px section titles, 26.1px rule titles and the wordmark.
- Body in Sometype Mono 400 at 17px, line-height 1.52; labels, table heads and the nav at 13.7px in muted.
- DotGothic16 only for caption strips: the reticle label and the plate caption.
- State is a word: pass in text colour, warn in amber, fail in red, locked in green.

### Density

Medium-high: 80px between sections, 8px table row padding with banding every three rows, 22px between form fields, prose held to about 44 characters.

### Signature Patterns

- Lock-on: one reticle per screen, four green corner brackets and four ticks on the one thing found, with a DotGothic16 caption strip giving the real pixel and the confidence (x:1010 y:0307, lock 0.87).
- Run the daemon: the brackets start at the plate edges and step in onto the eye in six steps, while the scan log prints its results back one row at a time and stamps new times.
- Greenbar banding: long tables band every three rows in #121a14, like line-printer fanfold, with no rules.
- Press block: display type on an ink #050505 block cloned per line, sitting on the plate's own black.
- Caption strip: DotGothic16 on ink, clipped off the edge of a plate.
- Patch loop: a failing check names its fix, the form executes it, and the log row turns to pass with its new measured value.

## Layout

### Grid

- **Type**: full-bleed plate hero, then a contained two-column console grid
- **Max Width**: 1600px from 1601px wide; below that the page scales with the viewport from a 1280px design
- **Gutter**: 48px desktop, 16px phone
- **Column Behavior**: Two-column heads use minmax(0,5fr) minmax(0,7fr); the plate uses minmax(0,6fr) minmax(0,5fr); every grid child has min-width:0.

### Whitespace

- **Section Gap**: 80px desktop, 64px phone
- **Card Gap**: no cards; 28px between rules, 22px between fields, 8px table row padding
- **Content Padding**: the bone plate pads 48px top and bottom; the image bleeds to the left edge
- **Approach**: Space and the bone plate separate sections; greenbar bands separate rows.

### Density

- **Default**: medium-high
- **Comfortable**: {"button_height":"50px","input_height":"50px","row_height":"42px table rows"}

### Responsive

Phones (390px) stack everything to one column: the plate hero becomes a square crop above the copy, the nav collapses to the wordmark, the reticle label moves to the right of the eye, and the scan log hides Measured, Limit and At. Tablets keep the two-column heads at scale. From 1601px the content caps at 1600px and centres; only the hero spans the viewport.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Wide**: 1601px
- **Ultrawide**: 2560px

## Guidance

### Do

- Keep green singular: the lock and the one action per view.
- Put one reticle on the one thing found, and label it with the measured pixel and confidence.
- Give every log row a measured value, a limit, a result and a time.
- Band long tables every three rows in #121a14 instead of drawing rules.
- Keep halftone inside the plates; set copy on flat black or flat bone.
- Style every control explicitly: flat ink wells, square, with a 2px focus outline.

### Don't

- Don't add glow, scanlines, bloom or a texture over the surface.
- Don't put reticles on everything or print coordinates that aren't measured.
- Don't frame cards with hairlines or corner ticks, and don't box the nav.
- Don't use amber, red or green as decoration; they are warn, fail and lock.
- Don't round corners, add a second green, or use emoji or symbol glyphs on buttons.

### Accessibility

On #0a0b09: text #f8f1e4 is 17.6:1, muted #8f978b 6.5:1, green 14.6:1, amber 8.0:1, red 6.4:1, info 7.7:1, and all stay above 5.8:1 on the band #121a14; ink on bone paper 17.8:1; the button label #050505 on green 15.0:1. Muted is never set on bone paper (2.6:1). Focus is a 2px outline in text colour on buttons and green on fields. The reticle is aria-hidden; the settled page renders with no JavaScript and reduced motion stamps the new times without the lock or the replay.

### Usage Context

Security and recognition consoles, monitoring and batch-job logs, developer tools and night-shift operator screens that want an underground-zine voice with an honest, measured log.

## Imagery Direction

### Pairs With

phosphor-press

### Art Style Id

en-019ef80e-e7e0-7133-aa63-14b2302810b3

### Summary

Phosphor Press plates: high-contrast photocopied zine images in bone white and sumi black with manga halftone screentone and xerox grain, lit by one green phosphor light. No baked reticles, coordinate labels or scanlines: the one reticle is drawn in HTML at a measured position.

### Subjects

- a human face in profile lit green from the left
- a night-shift operator at a monochrome console
- a line printer feeding greenbar fanfold
- a catalogued specimen plate

### Usage

One full-bleed hero face plate per landing through var(--hero-image), background-position right center, with the left 45 percent left sumi-black for the headline press block. One bone-band feature plate with a caption strip. The embodiment reuses the face plate for the lock-on specimen only.

### Avoid

Baked reticles, coordinate labels, scanline veils, laser lines, borders, text in the image, a second colour, and busy art under copy.

---
version: "alpha"
name: "Greenbar"
description: "Greenbar is a console language for a recognition daemon, printed like a photocopied hacker zine: a flat sumi-black ground, bone paper manga plates, and one green phosphor beam that marks only what the daemon locked on and the one thing y..."
colors:
  bg: "#0a0b09"
  surface: "#f5efe2"
  text: "#f8f1e4"
  muted: "#8f978b"
  border: "#262c26"
  accent: "#00ff66"
  on_accent: "#050505"
  success: "#00ff66"
  warning: "#d79921"
  error: "#ff5b3d"
  info: "#9aa49a"
  ink: "#050505"
  band: "#121a14"
typography:
  headline-lg:
    fontFamily: "Barlow Condensed"
    fontSize: "2.026rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Barlow Condensed"
    fontSize: "1.634rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Sometype Mono"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Sometype 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: "80px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  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-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}"
  color-reference-ink:
    backgroundColor: "{colors.ink}"
  color-reference-band:
    backgroundColor: "{colors.band}"
  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"
---

# Greenbar

## Overview

Greenbar is a console language for a recognition daemon, printed like a photocopied hacker zine: a flat sumi-black ground, bone paper manga plates, and one green phosphor beam that marks only what the daemon locked on and the one thing you can do next. Its signature is the lock-on: one reticle per screen, on the one thing found, labelled with the real pixel it sits on and how sure it is. Long logs band every three rows like the green-and-white fanfold the language is named after, so rows need no rules. Everything you read sits on flat black or flat bone; the dots stay in the plates.

### Values

- One green: the accent #00ff66 marks the lock and the one action, and nothing else.
- The lock-on is the signature: one reticle per screen, on the one thing found, with a label that gives its measured pixel and confidence.
- Every mark carries a fact: log rows give the measured value, the limit, the result and the time.
- Greenbar banding separates long tables every three rows, the way line-printer fanfold does, so there are no rules.
- Halftone lives in the plates; copy sits on flat black or flat bone paper, crisp and aligned.

### Anti-Values

- Neon glow shadows, scanline veils and green radial bloom over the surface.
- A reticle on everything, and invented coordinates with no data behind them.
- Hairline card borders, bracket corner ticks on cards and boxed nav buttons.
- Status colours used as decoration, and invented stat bands.
- Blinking cursors as punctuation, unicode play triangles and HUD readouts with nothing behind them.

### Visual Character

- Flat sumi-black #0a0b09 ground with bone text #f8f1e4 and green-grey muted #8f978b; nothing glows.
- A full-bleed Phosphor Press face plate as the hero, lit green from the left, with one reticle on the left eye and a caption-strip label.
- The headline in Barlow Condensed 700 uppercase on an ink #050505 press block that sits on the plate's own black.
- A bone paper #f5efe2 manga plate band with a clipped DotGothic16 caption strip hanging off the image.
- Greenbar banding: band #121a14 on three rows of every six in the scan log.
- Square geometry: radius 0 on every button, well, segment, menu and dialog.

### Lineage

> Generation 2 of Greenbar, revised in place from arni's approved range take (.p-greenbar-i, 2026-09-29). It keeps the sumi-black ground, bone paper, green #00ff66, amber and red, Barlow Condensed and Sometype Mono, the headline and the page order, and removes the glow, scanlines, hairline cards, HUD readouts, Share Tech Mono and the reticle on everything.

## 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 | `#0a0b09` |
| surface | `#f5efe2` |
| text | `#f8f1e4` |
| muted | `#8f978b` |
| border | `#262c26` |
| accent | `#00ff66` |
| on_accent | `#050505` |
| success | `#00ff66` |
| warning | `#d79921` |
| error | `#ff5b3d` |
| info | `#9aa49a` |
| ink | `#050505` |
| band | `#121a14` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Sometype+Mono:wght@400;500&family=DotGothic16&display=swap

- **Headline-Lg**: Barlow Condensed, 2.026rem, weight 700, line-height 1.1.
- **Headline-Md**: Barlow Condensed, 1.634rem, weight 600, line-height 1.15.
- **Body-Md**: Sometype Mono, 17px, weight 400, line-height 1.5.
- **Label-Md**: Sometype 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**: `80px`

### Grid

- **Type**: full-bleed plate hero, then a contained two-column console grid
- **Max Width**: 1600px from 1601px wide; below that the page scales with the viewport from a 1280px design
- **Gutter**: 48px desktop, 16px phone
- **Column Behavior**: Two-column heads use minmax(0,5fr) minmax(0,7fr); the plate uses minmax(0,6fr) minmax(0,5fr); every grid child has min-width:0.

### Whitespace

- **Section Gap**: 80px desktop, 64px phone
- **Card Gap**: no cards; 28px between rules, 22px between fields, 8px table row padding
- **Content Padding**: the bone plate pads 48px top and bottom; the image bleeds to the left edge
- **Approach**: Space and the bone plate separate sections; greenbar bands separate rows.

### Density

- **Default**: medium-high
- **Comfortable**: {"button_height":"50px","input_height":"50px","row_height":"42px table rows"}

### Responsive

Phones (390px) stack everything to one column: the plate hero becomes a square crop above the copy, the nav collapses to the wordmark, the reticle label moves to the right of the eye, and the scan log hides Measured, Limit and At. Tablets keep the two-column heads at scale. From 1601px the content caps at 1600px and centres; only the hero spans the viewport.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Wide**: 1601px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **None**: none
- **Md**: none
- **Lg**: none

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: sumi-console-with-bone-plates
- **Material**: Flat sumi-black #0a0b09 for everything you read and operate; bone paper #f5efe2 only for the manga plate band and the open dialog. Halftone dots live inside the plates and never under copy.
- **Card Style**: No cards. The system rules, the scan log and the patch form sit straight on the ground, parted by space; inputs and segments are flat ink #050505 wells.
- **Wells**: Ink #050505 wells for inputs and unchosen segments; the chosen segment inverts to bone text colour with ink label.
- **Bg Pattern**: none; the ground is flat. The only pattern is greenbar banding: band #121a14 on rows 1 to 3 of every six.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, hairlines, corner ticks or card frames. The only drawn lines are the reticle's four green corner brackets and ticks on the one thing the daemon locked on, and the 1.5px link sweep. Rows separate by greenbar bands, sections by space and the bone plate. Focus is a 2px outline: text colour on buttons, accent on fields.

## Components

### Composition

- Open on the full-bleed face plate with the nav and the headline press block on its black left side; the reticle sits on the eye, never on the copy.
- Below the hero, return to a contained grid on flat black: a 5fr and 7fr two-column head, then one bone plate band, then the scan log, then the patch form.
- Give each view one reticle, on the one thing the daemon found.
- Sections separate by 80px of space and the bone plate; nothing is boxed.

### Hierarchy

- Display in Barlow Condensed 700 uppercase at -0.02em: 76.6px hero line, 49.8px section titles, 26.1px rule titles and the wordmark.
- Body in Sometype Mono 400 at 17px, line-height 1.52; labels, table heads and the nav at 13.7px in muted.
- DotGothic16 only for caption strips: the reticle label and the plate caption.
- State is a word: pass in text colour, warn in amber, fail in red, locked in green.

### Density

Medium-high: 80px between sections, 8px table row padding with banding every three rows, 22px between form fields, prose held to about 44 characters.

### Signature Patterns

- Lock-on: one reticle per screen, four green corner brackets and four ticks on the one thing found, with a DotGothic16 caption strip giving the real pixel and the confidence (x:1010 y:0307, lock 0.87).
- Run the daemon: the brackets start at the plate edges and step in onto the eye in six steps, while the scan log prints its results back one row at a time and stamps new times.
- Greenbar banding: long tables band every three rows in #121a14, like line-printer fanfold, with no rules.
- Press block: display type on an ink #050505 block cloned per line, sitting on the plate's own black.
- Caption strip: DotGothic16 on ink, clipped off the edge of a plate.
- Patch loop: a failing check names its fix, the form executes it, and the log row turns to pass with its new measured value.

## 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-01a0ee81-e40b-7781-95c1-cfc0b063edbe/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0ee81-e40b-7781-95c1-cfc0b063edbe/shadcn.json` (registry theme), `/language/en-01a0ee81-e40b-7781-95c1-cfc0b063edbe/shadcn-components.md` (component recipes) and `/language/en-01a0ee81-e40b-7781-95c1-cfc0b063edbe/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 Keep green singular: the lock and the one action per view.
- Do Put one reticle on the one thing found, and label it with the measured pixel and confidence.
- Do Give every log row a measured value, a limit, a result and a time.
- Do Band long tables every three rows in #121a14 instead of drawing rules.
- Do Keep halftone inside the plates; set copy on flat black or flat bone.
- Do Style every control explicitly: flat ink wells, square, with a 2px focus outline.
- Don't Don't add glow, scanlines, bloom or a texture over the surface.
- Don't Don't put reticles on everything or print coordinates that aren't measured.
- Don't Don't frame cards with hairlines or corner ticks, and don't box the nav.
- Don't Don't use amber, red or green as decoration; they are warn, fail and lock.
- Don't Don't round corners, add a second green, or use emoji or symbol glyphs on buttons.

### Accessibility

On #0a0b09: text #f8f1e4 is 17.6:1, muted #8f978b 6.5:1, green 14.6:1, amber 8.0:1, red 6.4:1, info 7.7:1, and all stay above 5.8:1 on the band #121a14; ink on bone paper 17.8:1; the button label #050505 on green 15.0:1. Muted is never set on bone paper (2.6:1). Focus is a 2px outline in text colour on buttons and green on fields. The reticle is aria-hidden; the settled page renders with no JavaScript and reduced motion stamps the new times without the lock or the replay.

### Usage Context

Security and recognition consoles, monitoring and batch-job logs, developer tools and night-shift operator screens that want an underground-zine voice with an honest, measured log.

## Imagery Direction

### Pairs With

phosphor-press

### Art Style Id

en-019ef80e-e7e0-7133-aa63-14b2302810b3

### Summary

Phosphor Press plates: high-contrast photocopied zine images in bone white and sumi black with manga halftone screentone and xerox grain, lit by one green phosphor light. No baked reticles, coordinate labels or scanlines: the one reticle is drawn in HTML at a measured position.

### Subjects

- a human face in profile lit green from the left
- a night-shift operator at a monochrome console
- a line printer feeding greenbar fanfold
- a catalogued specimen plate

### Usage

One full-bleed hero face plate per landing through var(--hero-image), background-position right center, with the left 45 percent left sumi-black for the headline press block. One bone-band feature plate with a caption strip. The embodiment reuses the face plate for the lock-on specimen only.

### Avoid

Baked reticles, coordinate labels, scanline veils, laser lines, borders, text in the image, a second colour, and busy art under copy.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "greenbar",
  "type": "registry:theme",
  "title": "Greenbar shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0a0b09",
      "foreground": "#f8f1e4",
      "card": "#f5efe2",
      "card-foreground": "#f8f1e4",
      "popover": "#f5efe2",
      "popover-foreground": "#f8f1e4",
      "primary": "#f8f1e4",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8f978b",
      "muted-foreground": "#f8f1e4",
      "accent": "#00ff66",
      "accent-foreground": "#111111",
      "destructive": "#ff5b3d",
      "border": "#262c26",
      "input": "#262c26",
      "ring": "#00ff66",
      "chart-1": "#f8f1e4",
      "chart-2": "#f4f4f5",
      "chart-3": "#00ff66",
      "chart-4": "#00ff66",
      "chart-5": "#d79921",
      "sidebar": "#f5efe2",
      "sidebar-foreground": "#f8f1e4",
      "sidebar-primary": "#f8f1e4",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#9aa49a",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#262c26",
      "sidebar-ring": "#00ff66",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#f8f1e4",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#00ff66",
      "accent-foreground": "#111111",
      "destructive": "#ff5b3d",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00ff66",
      "chart-1": "#f8f1e4",
      "chart-2": "#f4f4f5",
      "chart-3": "#00ff66",
      "chart-4": "#00ff66",
      "chart-5": "#d79921",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#f8f1e4",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#00ff66",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00ff66",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0ee81-e40b-7781-95c1-cfc0b063edbe",
    "slug": "greenbar",
    "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",
        "band",
        "bg",
        "border",
        "error",
        "info",
        "ink",
        "muted",
        "on_accent",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "derived": [
        "band_rows",
        "caption_strip",
        "press_block"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "caption_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "material",
        "treatment",
        "wells"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "lock",
        "philosophy",
        "replay"
      ],
      "controls": [
        "height",
        "radius",
        "well_height"
      ]
    }
  }
}
```