Hertz

# Hertz

## Philosophy

Hertz is a broadcast signal language: it takes a finished woodblock print, transmits it down a wire, and keeps the moment the signal drops. Flat poster planes in cyan, magenta and amber ride a deep indigo void; whole scan rows shear sideways like a dropped frame; one luminous cursor sweeps each band edge. Where a woodblock printer aligns every color block to a registration mark, Hertz lets the rows slip out of sync on purpose. The glitch is the craft, never noise.

### Values

- Treat the dark void as an active broadcast ground, not absence — light glyphs read on it like a transmitter readout.
- Carry the identity in the slice-shift: display type and layout bands split into stacked strips that jog out of sync.
- Keep color planes poster-flat in three signal phosphors; let one dominate each region.
- Make every artifact deliberate: the sweep cursor and band shear sharpen identity, never reduce clarity.
- Read the page top-to-bottom as a transmission stack, numbered down a timecode gutter.
- Reserve corruption for display type and band edges so body copy stays crisp on the void.

### Anti-Values

- A light or white default ground that drops the broadcast-void identity.
- Drop-shadows, nested cards, or stepped/clipped corners as decoration.
- Random illegible glitch damage with no system behind it.
- Wallpapering scanlines or channel offsets until the subject is lost.
- Boxing the nav in a floating pill instead of an open masthead band.
- Tiny low-contrast controls that disappear into the void.

### Visual Character

- deep indigo broadcast void ground with light glyphs and three flat signal phosphors
- the slice-shift: display titles split into stacked horizontal strips, top ghosting cyan and pulling left, bottom ghosting magenta and pushing right, the middle holding true
- a luminous cyan sweep cursor riding the top edge of every transmission band
- a horizontal-band stack layout numbered down a left timecode gutter, cells split by hairline rules — never boxed, never shadowed
- flat poster planes in carrier cyan, signal magenta, and sync amber, one dominating each region
- square geometry (radius 0), mono numerics and labels, wide grotesque display type

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0E1320` |
| surface | `#161D2E` |
| surface_2 | `#1E2740` |
| void | `#080B14` |
| text | `#EDEFF5` |
| muted | `#8893AD` |
| border | `#2C3858` |
| accent | `#16E0E6` |
| accent_2 | `#FF2E88` |
| accent_3 | `#FFB627` |
| on_accent | `#0A0E18` |
| primary | `#16E0E6` |
| secondary | `#FF2E88` |
| success | `#37D29A` |
| warning | `#FFB627` |
| error | `#FF5A6E` |
| info | `#16E0E6` |

### Typography

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

### Radii

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

### Shadows

- **None**: none
- **Focus**: 0 0 0 1px #16E0E6

### Spacing

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

### Surfaces

- **Treatment**: flat planes on a dark broadcast void
- **Card Style**: flush cells split by luminous hairline rules; no shadows, no nesting, no stepped corners
- **Bg Pattern**: fine horizontal scanline grain under the void

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: hairline ink borders and a 2px luminous band rule that doubles as the sweep cursor edge

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.16,0.84,0.30,1)
- **Philosophy**: snappy; hover jogs a cell sideways like a frame slipping out of sync; settled state is the no-JS default

## Rules

### Composition

Stack the screen as full-width transmission bands separated by luminous hairline rules, numbered down a left timecode gutter; reading order runs straight down. One phosphor plane dominates each band, the void carries the rest. Never a sidebar shell.

### Hierarchy

Wide Archivo-900 display titles carry the slice-shift and dominate by scale; IBM Plex Sans body stays crisp on the void; JetBrains Mono carries every numeric, label, timecode and status in uppercase microtype.

### Density

Balanced: operational data in mono tables and meters, with deep void margins between bands so the broadcast calm survives.

### Signature

The slice-shift — a single reusable primitive that splits display type and layout bands into three stacked strips offset sideways (cyan up-left, magenta down-right, middle true), like a dropped broadcast frame held still. Supported by a luminous cyan sweep cursor on every band edge and flat phosphor planes on the void.

## Layout

### Grid

Desktop is a horizontal-band stack: full-width transmission rows, a left timecode gutter, and flush cells split by the grid's hairline background (commonly 3- or 4-up). Tablet collapses multi-column cell rows to two-up. Mobile becomes a single-column stack with full-width actions.

### Whitespace

Deep void margins between bands; padding generous for narrative bands, tighter for data meters. The void is the breathing space.

### Density

balanced

### Responsive

Single-column stack on mobile; the slice-shift collapses to a solid readable headline; non-essential nav hides; minmax(0,1fr) columns and min-width:0 children so grids never overflow; cap and center contained content on ultra-wide while the hero spans 100vw.

### Breakpoints

- **Mobile**: 0-759px
- **Tablet**: 760-1000px
- **Desktop**: 1001px+

## Guidance

### Do

- Keep the deep indigo void as the ground; read light glyphs on it like a transmitter readout.
- Reserve the slice-shift for display type and band edges so body copy stays crisp.
- Let one phosphor plane dominate each band; keep amber and magenta highlighter-rare.
- Give every transmission band a single luminous cyan sweep cursor on its top edge.
- Style every form control as a square inked frame on the void; light the cyan ring on focus.
- Number bands down the timecode gutter and read the page straight down the stack.

### Don't

- Default to a light, white, or parchment ground that drops the broadcast-void identity.
- Add drop-shadows, nest cards, or use stepped/clipped corners as decoration.
- Wallpaper scanlines or channel offsets until the subject is lost.
- Box the nav in a floating pill instead of an open masthead band.
- Treat the glitch as random illegible damage.
- Center every band; the stack reads down while the planes pull sideways.

### Accessibility

Body 17px in IBM Plex Sans on high-contrast light-on-void; reserve the slice-shift offset for large display type so body copy stays crisp; respect prefers-reduced-motion by settling all reveals immediately; every control shows a visible cyan focus ring; phosphor accents meet contrast against the void.

## Imagery Direction

### Pairs With

surimono-signal

### Summary

Glitched woodblock prints transmitted on a dark void: flat poster planes in cyan, magenta and amber on deep indigo, sliced into horizontal transmission bands with datamosh displacement and RGB channel offset, a luminous scan-line sweeping across.

### Subjects

- a leaping carp dissolving into scan bands
- a cresting wave looped frame by frame
- a single object filling the frame on the void
- a test-pattern of flat phosphor bars

### Usage

Hero and feature imagery only; keep one phosphor plane dominant, reserve quiet void space for the slice-shift to read against, and never wallpaper the glitch.

---
version: "alpha"
name: "Hertz"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0E1320"
  surface: "#161D2E"
  surface_2: "#1E2740"
  void: "#080B14"
  text: "#EDEFF5"
  muted: "#8893AD"
  border: "#2C3858"
  accent: "#16E0E6"
  accent_2: "#FF2E88"
  accent_3: "#FFB627"
  on_accent: "#0A0E18"
  primary: "#16E0E6"
  secondary: "#FF2E88"
  success: "#37D29A"
  warning: "#FFB627"
  error: "#FF5A6E"
  info: "#16E0E6"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "JetBrains Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "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"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-void:
    backgroundColor: "{colors.void}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  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.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"
---

# Hertz

## Overview

Hertz is a broadcast signal language: it takes a finished woodblock print, transmits it down a wire, and keeps the moment the signal drops. Flat poster planes in cyan, magenta and amber ride a deep indigo void; whole scan rows shear sideways like a dropped frame; one luminous cursor sweeps each band edge. Where a woodblock printer aligns every color block to a registration mark, Hertz lets the rows slip out of sync on purpose. The glitch is the craft, never noise.

### Values

- Treat the dark void as an active broadcast ground, not absence — light glyphs read on it like a transmitter readout.
- Carry the identity in the slice-shift: display type and layout bands split into stacked strips that jog out of sync.
- Keep color planes poster-flat in three signal phosphors; let one dominate each region.
- Make every artifact deliberate: the sweep cursor and band shear sharpen identity, never reduce clarity.
- Read the page top-to-bottom as a transmission stack, numbered down a timecode gutter.
- Reserve corruption for display type and band edges so body copy stays crisp on the void.

### Anti-Values

- A light or white default ground that drops the broadcast-void identity.
- Drop-shadows, nested cards, or stepped/clipped corners as decoration.
- Random illegible glitch damage with no system behind it.
- Wallpapering scanlines or channel offsets until the subject is lost.
- Boxing the nav in a floating pill instead of an open masthead band.
- Tiny low-contrast controls that disappear into the void.

### Visual Character

- deep indigo broadcast void ground with light glyphs and three flat signal phosphors
- the slice-shift: display titles split into stacked horizontal strips, top ghosting cyan and pulling left, bottom ghosting magenta and pushing right, the middle holding true
- a luminous cyan sweep cursor riding the top edge of every transmission band
- a horizontal-band stack layout numbered down a left timecode gutter, cells split by hairline rules — never boxed, never shadowed
- flat poster planes in carrier cyan, signal magenta, and sync amber, one dominating each region
- square geometry (radius 0), mono numerics and labels, wide grotesque display type

## 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 | `#0E1320` |
| surface | `#161D2E` |
| surface_2 | `#1E2740` |
| void | `#080B14` |
| text | `#EDEFF5` |
| muted | `#8893AD` |
| border | `#2C3858` |
| accent | `#16E0E6` |
| accent_2 | `#FF2E88` |
| accent_3 | `#FFB627` |
| on_accent | `#0A0E18` |
| primary | `#16E0E6` |
| secondary | `#FF2E88` |
| success | `#37D29A` |
| warning | `#FFB627` |
| error | `#FF5A6E` |
| info | `#16E0E6` |

## Typography

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

### Grid

Desktop is a horizontal-band stack: full-width transmission rows, a left timecode gutter, and flush cells split by the grid's hairline background (commonly 3- or 4-up). Tablet collapses multi-column cell rows to two-up. Mobile becomes a single-column stack with full-width actions.

### Whitespace

Deep void margins between bands; padding generous for narrative bands, tighter for data meters. The void is the breathing space.

### Density

balanced

### Responsive

Single-column stack on mobile; the slice-shift collapses to a solid readable headline; non-essential nav hides; minmax(0,1fr) columns and min-width:0 children so grids never overflow; cap and center contained content on ultra-wide while the hero spans 100vw.

### Breakpoints

- **Mobile**: 0-759px
- **Tablet**: 760-1000px
- **Desktop**: 1001px+

## Elevation & Depth

### Shadows

- **None**: none
- **Focus**: 0 0 0 1px #16E0E6

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: flat planes on a dark broadcast void
- **Card Style**: flush cells split by luminous hairline rules; no shadows, no nesting, no stepped corners
- **Bg Pattern**: fine horizontal scanline grain under the void

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: hairline ink borders and a 2px luminous band rule that doubles as the sweep cursor edge

## Components

### Composition

Stack the screen as full-width transmission bands separated by luminous hairline rules, numbered down a left timecode gutter; reading order runs straight down. One phosphor plane dominates each band, the void carries the rest. Never a sidebar shell.

### Hierarchy

Wide Archivo-900 display titles carry the slice-shift and dominate by scale; IBM Plex Sans body stays crisp on the void; JetBrains Mono carries every numeric, label, timecode and status in uppercase microtype.

### Density

Balanced: operational data in mono tables and meters, with deep void margins between bands so the broadcast calm survives.

### Signature

The slice-shift — a single reusable primitive that splits display type and layout bands into three stacked strips offset sideways (cyan up-left, magenta down-right, middle true), like a dropped broadcast frame held still. Supported by a luminous cyan sweep cursor on every band edge and flat phosphor planes on the void.

## 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-019ef8cb-df79-7210-a651-945f3ea79c2b/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 indigo void as the ground; read light glyphs on it like a transmitter readout.
- Do Reserve the slice-shift for display type and band edges so body copy stays crisp.
- Do Let one phosphor plane dominate each band; keep amber and magenta highlighter-rare.
- Do Give every transmission band a single luminous cyan sweep cursor on its top edge.
- Do Style every form control as a square inked frame on the void; light the cyan ring on focus.
- Do Number bands down the timecode gutter and read the page straight down the stack.
- Don't Default to a light, white, or parchment ground that drops the broadcast-void identity.
- Don't Add drop-shadows, nest cards, or use stepped/clipped corners as decoration.
- Don't Wallpaper scanlines or channel offsets until the subject is lost.
- Don't Box the nav in a floating pill instead of an open masthead band.
- Don't Treat the glitch as random illegible damage.
- Don't Center every band; the stack reads down while the planes pull sideways.

### Accessibility

Body 17px in IBM Plex Sans on high-contrast light-on-void; reserve the slice-shift offset for large display type so body copy stays crisp; respect prefers-reduced-motion by settling all reveals immediately; every control shows a visible cyan focus ring; phosphor accents meet contrast against the void.

## Imagery Direction

### Pairs With

surimono-signal

### Summary

Glitched woodblock prints transmitted on a dark void: flat poster planes in cyan, magenta and amber on deep indigo, sliced into horizontal transmission bands with datamosh displacement and RGB channel offset, a luminous scan-line sweeping across.

### Subjects

- a leaping carp dissolving into scan bands
- a cresting wave looped frame by frame
- a single object filling the frame on the void
- a test-pattern of flat phosphor bars

### Usage

Hero and feature imagery only; keep one phosphor plane dominant, reserve quiet void space for the slice-shift to read against, and never wallpaper the glitch.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hertz",
  "type": "registry:theme",
  "title": "Hertz shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0E1320",
      "foreground": "#EDEFF5",
      "card": "#161D2E",
      "card-foreground": "#EDEFF5",
      "popover": "#161D2E",
      "popover-foreground": "#EDEFF5",
      "primary": "#16E0E6",
      "primary-foreground": "#111111",
      "secondary": "#FF2E88",
      "secondary-foreground": "#ffffff",
      "muted": "#8893AD",
      "muted-foreground": "#EDEFF5",
      "accent": "#16E0E6",
      "accent-foreground": "#111111",
      "destructive": "#FF5A6E",
      "border": "#2C3858",
      "input": "#2C3858",
      "ring": "#16E0E6",
      "chart-1": "#16E0E6",
      "chart-2": "#FF2E88",
      "chart-3": "#16E0E6",
      "chart-4": "#37D29A",
      "chart-5": "#FFB627",
      "sidebar": "#161D2E",
      "sidebar-foreground": "#EDEFF5",
      "sidebar-primary": "#16E0E6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#16E0E6",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#2C3858",
      "sidebar-ring": "#16E0E6",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#16E0E6",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#16E0E6",
      "accent-foreground": "#111111",
      "destructive": "#FF5A6E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#16E0E6",
      "chart-1": "#16E0E6",
      "chart-2": "#FF2E88",
      "chart-3": "#16E0E6",
      "chart-4": "#37D29A",
      "chart-5": "#FFB627",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#16E0E6",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#16E0E6",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#16E0E6",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef8cb-df79-7210-a651-945f3ea79c2b",
    "slug": "hertz",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "accent_3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_2",
        "text",
        "void",
        "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": [
        "focus",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```