Gantry

# Gantry

## Philosophy

Gantry is a restrained cockpit-diagnostic language for working close to a machine that should not be a hero. Thick black gutters frame warm off-white technical sheets against one matte-graphite aperture; pale blue-white HUD hairlines and a single amber callout describe systems part by part, and large fields of quiet dark carry the sense of scale and machine distance. It treats the operator screen as a place of measured judgement, not spectacle.

### Values

- Restraint before information density: only the marks required for orientation, state, and consequence stay visible.
- Human-centred cockpit readability: grouped instruments, predictable scan paths, and high-contrast labels support operator task performance.
- Manga panel discipline: warm off-white frames and thick black gutters create narrative sequencing without character illustration.
- Machine-body distance: the machine appears as segmented silhouette, exploded annotation, and telemetry rather than heroic fan art.
- Late-1990s hardware materiality: graphite bezels, small serial labels, LCD fields, and terminal fragments ground the speculative interface.
- HUD restraint: arcs, reticles, and vectors are thin, pale, and subordinate to status hierarchy rather than decorative glow.

### Anti-Values

- No green matrix rain, generic hacker dashboards, saturated cyberpunk glow, or decorative neon atmosphere.
- No crowded SaaS card grids, marketing component catalogs, or arbitrary rounded white panels.
- No character fan art, mascot cockpit pilots, or anime spectacle that overwhelms the operational interface.
- No fake complexity through unreadable microtext; every terminal fragment and label must look placed for a reason.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#050607` |
| surface | `#1B1E21` |
| surface_sheet | `#F1EDE2` |
| lcd | `#0E1417` |
| text | `#F6F1E7` |
| muted | `#8E9498` |
| accent | `#D9822B` |
| on_accent | `#0A0B0D` |
| hud | `#BFDDE8` |
| border | `#34383C` |
| success | `#7C8F75` |
| warning | `#D9822B` |
| error | `#B84A3A` |
| info | `#BFDDE8` |

### Typography

- **Base Size**: 17px
- **Body Font**: IBM Plex Sans Condensed
- **Heading Font**: Azeret Mono
- **Mono Font**: Share Tech Mono
- **Heading Weight**: 600
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Line Height**: 1.5
- **Scale Ratio**: 1.22
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@500;600;700&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=Share+Tech+Mono&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(255,255,255,0.05)
- **Md**: 0 18px 50px rgba(0,0,0,0.45)
- **Lg**: 0 40px 120px rgba(0,0,0,0.62)

### Spacing

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

### Surfaces

- **Bg Pattern**: deep near-black void with sparse panel registration ticks and low-contrast hardware seam lines
- **Card Style**: matte graphite panels with 16px or 24px radius, hairline seams, inset serial plates, no decorative drop shadows on light sheets
- **Treatment**: matte graphite shells interrupted by warm off-white technical sheets and desaturated LCD-gray fields

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid hairline seams with occasional dotted leader lines for exploded notation
- **Character**: graphite seams tuned to the dark ground, pale HUD hairlines, amber callout rules used only for mechanical attention; never a single accent edge on a card

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0, 0.1, 1)
- **Philosophy**: subtle LCD state changes and one intent-carrying reveal; the settled state is the default and renders with no JavaScript; respects prefers-reduced-motion; no continuous spectacle, no scroll cues

## Rules

### Composition

Scene-first cockpit-diagnostic layout: one large off-centre aperture inside thick black gutters, two or three warm technical sheets, a low terminal rail, and generous quiet dark. Annotations align to a strict orthogonal grid while dotted amber leaders cross to separated fragments. Keep the machine distant and segmented rather than centred like a poster.

### Hierarchy

Primary hierarchy belongs to mission state and aperture scale; secondary to panel titles, terminal bands, and amber callouts. Azeret Mono uppercase for headings, IBM Plex Sans Condensed for operational copy, Share Tech Mono for serials and LCD readings, negative tracking applied consistently.

### Density

Medium-low density with local high-density annotation clusters: most of the screen stays quiet while exact systems, reticle arcs, and diagnostic fields cluster only where the operator scans.

### Signature

Manga gutter cockpit frame; hairline HUD aperture arcs; exploded amber leader notation; hardware label rail; negative-space machine distance.

## Layout

### Grid

Desktop 12-column, 24px gutters, max-width 1360px (1480 at ultra-wide); the aperture spans the wide track while document sheets stack across the narrow track.

### Whitespace

The deep void is active layout material; keep at least one empty dark corridor visible at every viewport.

### Density

A ~60/40 split between void and instrumentation keeps the interface readable while preserving the quiet cockpit mood.

### Responsive

On tablet the terminal rail moves below the aperture; on mobile the panels become sequential single-column frames with annotations simplified but not removed; grids shrink with minmax(0,1fr)+min-width:0 and never overflow.

### Breakpoints

- **Mobile**: 390px single-column stacked panels
- **Tablet**: 768px two-zone cockpit then diagnostics
- **Desktop**: 1200px and up asymmetric 12-column frame
- **Wide**: 2560px+ capped and centred content; only the hero spans 100vw

## Guidance

### Do

- Let thick black gutters make the frame structure visible before any UI detail.
- Keep HUD arcs one-pixel thin, pale, and clipped by the aperture.
- Group instruments into labeled clusters that shorten the operator's scan.
- Reserve amber for callout numbers, leader endpoints, faults, and the single primary action.
- Let off-white panels read like printed technical sheets rather than glossy cards.
- Write terminal text as real mission state, serials, and calibration logs.
- Preserve empty dark space to communicate scale and machine distance.

### Don't

- Don't use green matrix rain, neon glow, or saturated cyberpunk gradients.
- Don't fill the void with generic SaaS metric cards or decorative widgets.
- Don't add anime characters, pilots, mascots, or heroic mecha poster poses.
- Don't make HUD elements decorative if they don't support orientation or status.
- Don't introduce a second saturated accent competing with amber.
- Don't round every surface; square hardware edges are the default.
- Don't use unreadable fake microtext as texture.

### Accessibility

Maintain high contrast between text and the matte graphite ground; keep terminal text 12px or larger; never rely on amber alone for state (pair with a label); preserve a clear reading order when panels stack on mobile; honour prefers-reduced-motion.

## Imagery Direction

### Pairs With

plumbline

### Summary

Distant exploded diagnostic plates of machine modules in deep matte-black void, pale one-pixel reticle hairlines, amber numbered leader callouts, sparse mono serial labels. Quiet operational distance; never heroic spectacle.

### Subjects

- mecha torso and spine modules on a gantry
- exploded cockpit subsystems
- segmented hardware components
- diagnostic apertures and reticles

### Usage

Use as full-bleed hero plates or section feature images; keep the subject distant and small in a large void, segmented into a few pulled-apart graphite fragments, one pale reticle ring, three to five amber numbered leaders. No text, no glow.

---
version: "alpha"
name: "Gantry"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#050607"
  surface: "#1B1E21"
  surface_sheet: "#F1EDE2"
  lcd: "#0E1417"
  text: "#F6F1E7"
  muted: "#8E9498"
  accent: "#D9822B"
  on_accent: "#0A0B0D"
  hud: "#BFDDE8"
  border: "#34383C"
  success: "#7C8F75"
  warning: "#D9822B"
  error: "#B84A3A"
  info: "#BFDDE8"
typography:
  headline-lg:
    fontFamily: "Azeret Mono"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Azeret Mono"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans Condensed"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Share Tech Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "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_sheet:
    backgroundColor: "{colors.surface_sheet}"
  color-reference-lcd:
    backgroundColor: "{colors.lcd}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-hud:
    backgroundColor: "{colors.hud}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  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"
---

# Gantry

## Overview

Gantry is a restrained cockpit-diagnostic language for working close to a machine that should not be a hero. Thick black gutters frame warm off-white technical sheets against one matte-graphite aperture; pale blue-white HUD hairlines and a single amber callout describe systems part by part, and large fields of quiet dark carry the sense of scale and machine distance. It treats the operator screen as a place of measured judgement, not spectacle.

### Values

- Restraint before information density: only the marks required for orientation, state, and consequence stay visible.
- Human-centred cockpit readability: grouped instruments, predictable scan paths, and high-contrast labels support operator task performance.
- Manga panel discipline: warm off-white frames and thick black gutters create narrative sequencing without character illustration.
- Machine-body distance: the machine appears as segmented silhouette, exploded annotation, and telemetry rather than heroic fan art.
- Late-1990s hardware materiality: graphite bezels, small serial labels, LCD fields, and terminal fragments ground the speculative interface.
- HUD restraint: arcs, reticles, and vectors are thin, pale, and subordinate to status hierarchy rather than decorative glow.

### Anti-Values

- No green matrix rain, generic hacker dashboards, saturated cyberpunk glow, or decorative neon atmosphere.
- No crowded SaaS card grids, marketing component catalogs, or arbitrary rounded white panels.
- No character fan art, mascot cockpit pilots, or anime spectacle that overwhelms the operational interface.
- No fake complexity through unreadable microtext; every terminal fragment and label must look placed for a reason.

## 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 | `#050607` |
| surface | `#1B1E21` |
| surface_sheet | `#F1EDE2` |
| lcd | `#0E1417` |
| text | `#F6F1E7` |
| muted | `#8E9498` |
| accent | `#D9822B` |
| on_accent | `#0A0B0D` |
| hud | `#BFDDE8` |
| border | `#34383C` |
| success | `#7C8F75` |
| warning | `#D9822B` |
| error | `#B84A3A` |
| info | `#BFDDE8` |

## Typography

- **Headline-Lg**: Azeret Mono, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Azeret Mono, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans Condensed, 17px, weight 400, line-height 1.5.
- **Label-Md**: Share Tech 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 12-column, 24px gutters, max-width 1360px (1480 at ultra-wide); the aperture spans the wide track while document sheets stack across the narrow track.

### Whitespace

The deep void is active layout material; keep at least one empty dark corridor visible at every viewport.

### Density

A ~60/40 split between void and instrumentation keeps the interface readable while preserving the quiet cockpit mood.

### Responsive

On tablet the terminal rail moves below the aperture; on mobile the panels become sequential single-column frames with annotations simplified but not removed; grids shrink with minmax(0,1fr)+min-width:0 and never overflow.

### Breakpoints

- **Mobile**: 390px single-column stacked panels
- **Tablet**: 768px two-zone cockpit then diagnostics
- **Desktop**: 1200px and up asymmetric 12-column frame
- **Wide**: 2560px+ capped and centred content; only the hero spans 100vw

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(255,255,255,0.05)
- **Md**: 0 18px 50px rgba(0,0,0,0.45)
- **Lg**: 0 40px 120px rgba(0,0,0,0.62)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: deep near-black void with sparse panel registration ticks and low-contrast hardware seam lines
- **Card Style**: matte graphite panels with 16px or 24px radius, hairline seams, inset serial plates, no decorative drop shadows on light sheets
- **Treatment**: matte graphite shells interrupted by warm off-white technical sheets and desaturated LCD-gray fields

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid hairline seams with occasional dotted leader lines for exploded notation
- **Character**: graphite seams tuned to the dark ground, pale HUD hairlines, amber callout rules used only for mechanical attention; never a single accent edge on a card

## Components

### Composition

Scene-first cockpit-diagnostic layout: one large off-centre aperture inside thick black gutters, two or three warm technical sheets, a low terminal rail, and generous quiet dark. Annotations align to a strict orthogonal grid while dotted amber leaders cross to separated fragments. Keep the machine distant and segmented rather than centred like a poster.

### Hierarchy

Primary hierarchy belongs to mission state and aperture scale; secondary to panel titles, terminal bands, and amber callouts. Azeret Mono uppercase for headings, IBM Plex Sans Condensed for operational copy, Share Tech Mono for serials and LCD readings, negative tracking applied consistently.

### Density

Medium-low density with local high-density annotation clusters: most of the screen stays quiet while exact systems, reticle arcs, and diagnostic fields cluster only where the operator scans.

### Signature

Manga gutter cockpit frame; hairline HUD aperture arcs; exploded amber leader notation; hardware label rail; negative-space machine distance.

## 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-019ef9d6-867d-7e32-8f71-2832dcb5d73e/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 Let thick black gutters make the frame structure visible before any UI detail.
- Do Keep HUD arcs one-pixel thin, pale, and clipped by the aperture.
- Do Group instruments into labeled clusters that shorten the operator's scan.
- Do Reserve amber for callout numbers, leader endpoints, faults, and the single primary action.
- Do Let off-white panels read like printed technical sheets rather than glossy cards.
- Do Write terminal text as real mission state, serials, and calibration logs.
- Do Preserve empty dark space to communicate scale and machine distance.
- Don't Don't use green matrix rain, neon glow, or saturated cyberpunk gradients.
- Don't Don't fill the void with generic SaaS metric cards or decorative widgets.
- Don't Don't add anime characters, pilots, mascots, or heroic mecha poster poses.
- Don't Don't make HUD elements decorative if they don't support orientation or status.
- Don't Don't introduce a second saturated accent competing with amber.
- Don't Don't round every surface; square hardware edges are the default.
- Don't Don't use unreadable fake microtext as texture.

### Accessibility

Maintain high contrast between text and the matte graphite ground; keep terminal text 12px or larger; never rely on amber alone for state (pair with a label); preserve a clear reading order when panels stack on mobile; honour prefers-reduced-motion.

## Imagery Direction

### Pairs With

plumbline

### Summary

Distant exploded diagnostic plates of machine modules in deep matte-black void, pale one-pixel reticle hairlines, amber numbered leader callouts, sparse mono serial labels. Quiet operational distance; never heroic spectacle.

### Subjects

- mecha torso and spine modules on a gantry
- exploded cockpit subsystems
- segmented hardware components
- diagnostic apertures and reticles

### Usage

Use as full-bleed hero plates or section feature images; keep the subject distant and small in a large void, segmented into a few pulled-apart graphite fragments, one pale reticle ring, three to five amber numbered leaders. No text, no glow.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gantry",
  "type": "registry:theme",
  "title": "Gantry shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#050607",
      "foreground": "#F6F1E7",
      "card": "#1B1E21",
      "card-foreground": "#F6F1E7",
      "popover": "#1B1E21",
      "popover-foreground": "#F6F1E7",
      "primary": "#F6F1E7",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8E9498",
      "muted-foreground": "#F6F1E7",
      "accent": "#D9822B",
      "accent-foreground": "#ffffff",
      "destructive": "#B84A3A",
      "border": "#34383C",
      "input": "#34383C",
      "ring": "#D9822B",
      "chart-1": "#F6F1E7",
      "chart-2": "#f4f4f5",
      "chart-3": "#D9822B",
      "chart-4": "#7C8F75",
      "chart-5": "#D9822B",
      "sidebar": "#1B1E21",
      "sidebar-foreground": "#F6F1E7",
      "sidebar-primary": "#F6F1E7",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#BFDDE8",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#34383C",
      "sidebar-ring": "#D9822B",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F6F1E7",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D9822B",
      "accent-foreground": "#ffffff",
      "destructive": "#B84A3A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D9822B",
      "chart-1": "#F6F1E7",
      "chart-2": "#f4f4f5",
      "chart-3": "#D9822B",
      "chart-4": "#7C8F75",
      "chart-5": "#D9822B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F6F1E7",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#D9822B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D9822B",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef9d6-867d-7e32-8f71-2832dcb5d73e",
    "slug": "gantry",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "bg",
        "border",
        "error",
        "hud",
        "info",
        "lcd",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_sheet",
        "text",
        "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"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```