design language·galley

Galley

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Published

Download DESIGN.md

Portable DESIGN.md source of truth for most agents and apps.

the spec

specification

philosophy

summary

Galley reads software like a front page held open at press time: every panel a dispatch, datelined and prioritised, every claim filed with its source down the galley measure. A late-night newswire on an ink-charcoal press-room ground, where hierarchy is filed, not decorated, and information arrives authored, paced, and cited.

values

a screen should read like a wire at four in the morningevery block opens on a wire-slug — priority, dateline, byline, sourcethe dominant story takes the column it earns; briefs hold their measure beside ittwo accents used like highlighters, never a flood

anti-values

×white or warm-paper defaults and generic SaaS card farms×delicate display-serif startup headlines without a press voice×uniform sans that flattens the expanded-masthead and mono contrast×gadget chrome, loud gradients, and one-sided accent edges

tokens

colors15 items

#13151a

surface

#1b1e25

surface_2

#21252e

text

#eef1f5

muted

#98a0ad

border

#2c3038

accent

#f5a623

on_accent

#13151a

wire

#4ec9d6

primary

#f5a623

secondary

#4ec9d6

success

#5bbf8a

warning

#f5a623

error

#e2615a

info

#4ec9d6

typography13 items

base size: 17px
body font: Inter
heading font: Archivo
mono font: Space Mono
heading weight: 800
heading transform: uppercase
letter spacing: -0.02em
display letter spacing: -0.035em
display width axis: wdth 125 (expanded)
body line height: 1.6
display line height: 0.9
scale ratio: 1.25
google fonts url: https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62.5..125,400..900&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap

radii4 items

none: 0px
panel: 16px
control: 0px
pill: 9999px

shadows3 items

sm: 0 10px 24px rgba(3,8,18,0.40)
md: 0 20px 48px rgba(3,8,18,0.50)
lg: 0 36px 90px rgba(3,8,18,0.60)

spacing2 items

base: 8px
scale: 4, 8, 12, 16, 24, 32, 48, 64, 96

surfaces3 items

treatment: flat ink-charcoal press-room panels
card style: raised dispatch panel (#1b1e25), 16px rounded silhouette, near-invisible cool hairline border, one three-step shadow scale; the ledger and inputs are square (0px)
bg pattern: very faint horizontal scanline grain (low-opacity repeating rule), no washes

borders4 items

default width: 1px
accent width: 2px
style: solid
character: near-invisible cool charcoal hairlines (#2c3038); a separate signal-amber rule carries the wire-slug and section underlines — never a one-sided edge on a rounded card

motion3 items

duration: 300ms
easing: cubic-bezier(0.2,0.7,0.2,1)
philosophy: page pacing — a sliding wire ticker, a cyan live pulse, and a reveal-on-scroll on the landing; the settled state is the no-JS default, motion added behind a class an inline script sets on <html>; respects prefers-reduced-motion

rules

composition

Compose every screen as a front page at press time: a sticky wire ticker, a centred masthead, a dominant lead dispatch beside a stack of briefs, a metric rail, a pull dispatch, the ledger table, a composer, and a running feed. Asymmetric where the lede earns it, never a uniform card row.

hierarchy

Expanded uppercase grotesque (Archivo widened) for the masthead and section titles, tracked uppercase mono (Space Mono) for slugs, datelines, captions, figures and labels, Inter for body. The expanded-display and mono contrast is the rhythm.

density

Reading-first and breathable; high-information zones (the ledger, metric rail) get margin, hairline separators, and mono labels so the page still reads as edited.

signature

The wire-slug — a monospace dateline strip (priority dot, dateline, byline, press time) riding a hairline signal-amber rule that opens every block; paired with the galley measure (a thin column rule with an amber head-tick) and the sticky wire ticker. The same convention drives the ledger, composer, and feed, and recolours on palette swap because it is built from the role vars.

layout

grid

Desktop uses a front-page bulletin grid — a dominant ~1.7fr lead dispatch beside a ~1fr brief stack, a four-up metric rail, and a split ledger-and-feed; interior panels use nested split grids.

whitespace

Generous and directional — large vertical spacing around the masthead and section titles, measured gutters between dispatches to preserve newswire pacing.

density

Reading-first; data is allowed but always typeset, captioned, and slugged.

responsive

desktop: front-page bulletin grid (ticker + masthead + lead + briefs + ledger)
tablet: stacked sections with two-column internals
mobile: single reading column, full-width modules, non-essential nav hidden, tables compress

breakpoints

desktop: 1440px+ keeps the multi-column front page; ultra-wide caps the measure at 1440px and lets only the hero span 100vw
tablet: 900px collapses to stacked sections
mobile: 390px becomes one reading column; grids use minmax(0,1fr) so children shrink, never overflow

guidance

Open every block with a wire-slug; let the priority dot state the weight before the words.
Keep one button clearly primary (amber fill); the rest share one pill shape and height.
File every claim with a figure reference; treat captions, datelines and slugs as first-class.
Let the rail and nav breathe as part of the page; never trap them in a floating pill bar.
Style every form control — input, select, segmented radio, toggle, textarea — as a typographic element with a mono uppercase label and an amber focus ring.
Run the galley measure down a reading body and keep the ticker moving along the top rule.

avoid

Default to a white or warm-paper ground, or turn the page into a generic analytics dashboard.
Replace the expanded-masthead-and-mono contrast with uniform sans or a delicate display serif.
Flood panels with amber, give a card a single one-sided accent edge, or nest cards.
Use browser-default form controls or unstyled tables.
Mix arbitrary radii (10px, 18px, 28px) or use symbol glyphs in copy — use SVG primitives.
Put emoji on buttons.

imagery

pairs with

gravure

summary

Documentary technology photography printed as a two-tone halftone duotone — cool ash-grey highlights into deep ink-black shadows on the charcoal ground, dressed with a signal-amber hairline rule, crop-mark brackets, and a short uppercase mono FIG. NN caption. The landing hero is a full-bleed gravure plate of a newspaper press at press time, with the deck overlay anchored low-left; inline figures are smaller plates with their own captions.

subjects

newspaper presses and the newsprint webwire-service teletypes and machine detailhands-on inspection scenesprinted matter and typesettingabstracted systems diagrams

usage

The landing hero is a full-bleed gravure press plate (FIG. 01 — WIRE SERVICE UNIT) with a dark lower-left for the deck overlay. Inline figures are smaller plates with their own FIG. captions and signal-amber rules.

katagami spec

# Galley

## Philosophy

Galley reads software like a front page held open at press time: every panel a dispatch, datelined and prioritised, every claim filed with its source down the galley measure. A late-night newswire on an ink-charcoal press-room ground, where hierarchy is filed, not decorated, and information arrives authored, paced, and cited.

### Values

- a screen should read like a wire at four in the morning
- every block opens on a wire-slug — priority, dateline, byline, source
- the dominant story takes the column it earns; briefs hold their measure beside it
- two accents used like highlighters, never a flood

### Anti-Values

- white or warm-paper defaults and generic SaaS card farms
- delicate display-serif startup headlines without a press voice
- uniform sans that flattens the expanded-masthead and mono contrast
- gadget chrome, loud gradients, and one-sided accent edges

### Visual Character

- An expanded grotesque masthead (Archivo widened on its variable width axis) sits in uppercase over an ink-charcoal ground while compact tracked mono microtype forms a newswire rhythm across the page.
- Every block opens on the wire-slug: a monospace dateline strip riding a hairline signal-amber rule, with a coloured priority dot (amber bulletin, cyan wire, red flash), a dateline, a byline, and a press time.
- The galley measure runs a thin rule down the reading body with a short amber tick at its head, like type set in a printer's tray.
- A sticky wire ticker keeps the latest figures moving along the top rule; a cyan live pulse marks open dispatches.
- Signal amber carries the wire — slug rules, the primary button, the ticker tag, holding status; wire cyan carries links, active marks, and fresh dispatches. Semantic colours stay small and never go primary.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#13151a` |
| surface | `#1b1e25` |
| surface_2 | `#21252e` |
| text | `#eef1f5` |
| muted | `#98a0ad` |
| border | `#2c3038` |
| accent | `#f5a623` |
| on_accent | `#13151a` |
| wire | `#4ec9d6` |
| primary | `#f5a623` |
| secondary | `#4ec9d6` |
| success | `#5bbf8a` |
| warning | `#f5a623` |
| error | `#e2615a` |
| info | `#4ec9d6` |

### Typography

- **Base Size**: 17px
- **Body Font**: Inter
- **Heading Font**: Archivo
- **Mono Font**: Space Mono
- **Heading Weight**: 800
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Display Letter Spacing**: -0.035em
- **Display Width Axis**: wdth 125 (expanded)
- **Body Line Height**: 1.6
- **Display Line Height**: 0.9
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62.5..125,400..900&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap

### Radii

- **None**: 0px
- **Panel**: 16px
- **Control**: 0px
- **Pill**: 9999px

### Shadows

- **Sm**: 0 10px 24px rgba(3,8,18,0.40)
- **Md**: 0 20px 48px rgba(3,8,18,0.50)
- **Lg**: 0 36px 90px rgba(3,8,18,0.60)

### Spacing

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

### Surfaces

- **Treatment**: flat ink-charcoal press-room panels
- **Card Style**: raised dispatch panel (#1b1e25), 16px rounded silhouette, near-invisible cool hairline border, one three-step shadow scale; the ledger and inputs are square (0px)
- **Bg Pattern**: very faint horizontal scanline grain (low-opacity repeating rule), no washes

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: near-invisible cool charcoal hairlines (#2c3038); a separate signal-amber rule carries the wire-slug and section underlines — never a one-sided edge on a rounded card

### Motion

- **Duration**: 300ms
- **Easing**: cubic-bezier(0.2,0.7,0.2,1)
- **Philosophy**: page pacing — a sliding wire ticker, a cyan live pulse, and a reveal-on-scroll on the landing; the settled state is the no-JS default, motion added behind a class an inline script sets on <html>; respects prefers-reduced-motion

## Rules

### Composition

Compose every screen as a front page at press time: a sticky wire ticker, a centred masthead, a dominant lead dispatch beside a stack of briefs, a metric rail, a pull dispatch, the ledger table, a composer, and a running feed. Asymmetric where the lede earns it, never a uniform card row.

### Hierarchy

Expanded uppercase grotesque (Archivo widened) for the masthead and section titles, tracked uppercase mono (Space Mono) for slugs, datelines, captions, figures and labels, Inter for body. The expanded-display and mono contrast is the rhythm.

### Density

Reading-first and breathable; high-information zones (the ledger, metric rail) get margin, hairline separators, and mono labels so the page still reads as edited.

### Signature

The wire-slug — a monospace dateline strip (priority dot, dateline, byline, press time) riding a hairline signal-amber rule that opens every block; paired with the galley measure (a thin column rule with an amber head-tick) and the sticky wire ticker. The same convention drives the ledger, composer, and feed, and recolours on palette swap because it is built from the role vars.

## Layout

### Grid

Desktop uses a front-page bulletin grid — a dominant ~1.7fr lead dispatch beside a ~1fr brief stack, a four-up metric rail, and a split ledger-and-feed; interior panels use nested split grids.

### Whitespace

Generous and directional — large vertical spacing around the masthead and section titles, measured gutters between dispatches to preserve newswire pacing.

### Density

Reading-first; data is allowed but always typeset, captioned, and slugged.

### Responsive

- **Desktop**: front-page bulletin grid (ticker + masthead + lead + briefs + ledger)
- **Tablet**: stacked sections with two-column internals
- **Mobile**: single reading column, full-width modules, non-essential nav hidden, tables compress

### Breakpoints

- **Desktop**: 1440px+ keeps the multi-column front page; ultra-wide caps the measure at 1440px and lets only the hero span 100vw
- **Tablet**: 900px collapses to stacked sections
- **Mobile**: 390px becomes one reading column; grids use minmax(0,1fr) so children shrink, never overflow

## Guidance

### Do

- Open every block with a wire-slug; let the priority dot state the weight before the words.
- Keep one button clearly primary (amber fill); the rest share one pill shape and height.
- File every claim with a figure reference; treat captions, datelines and slugs as first-class.
- Let the rail and nav breathe as part of the page; never trap them in a floating pill bar.
- Style every form control — input, select, segmented radio, toggle, textarea — as a typographic element with a mono uppercase label and an amber focus ring.
- Run the galley measure down a reading body and keep the ticker moving along the top rule.

### Don't

- Default to a white or warm-paper ground, or turn the page into a generic analytics dashboard.
- Replace the expanded-masthead-and-mono contrast with uniform sans or a delicate display serif.
- Flood panels with amber, give a card a single one-sided accent edge, or nest cards.
- Use browser-default form controls or unstyled tables.
- Mix arbitrary radii (10px, 18px, 28px) or use symbol glyphs in copy — use SVG primitives.
- Put emoji on buttons.

### Accessibility

Paper-white ink on ink-charcoal holds WCAG AA; amber and cyan are used at AA-legible sizes. Visible amber focus rings on every control, 17px body copy, table rows 14.5px+, keyboard-usable controls with clear mono labels, and prefers-reduced-motion honoured (ticker and reveals stop).

## Imagery Direction

### Pairs With

gravure

### Summary

Documentary technology photography printed as a two-tone halftone duotone — cool ash-grey highlights into deep ink-black shadows on the charcoal ground, dressed with a signal-amber hairline rule, crop-mark brackets, and a short uppercase mono FIG. NN caption. The landing hero is a full-bleed gravure plate of a newspaper press at press time, with the deck overlay anchored low-left; inline figures are smaller plates with their own captions.

### Subjects

- newspaper presses and the newsprint web
- wire-service teletypes and machine detail
- hands-on inspection scenes
- printed matter and typesetting
- abstracted systems diagrams

### Usage

The landing hero is a full-bleed gravure press plate (FIG. 01 — WIRE SERVICE UNIT) with a dark lower-left for the deck overlay. Inline figures are smaller plates with their own FIG. captions and signal-amber rules.

DESIGN.md

---
version: "alpha"
name: "Galley"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#13151a"
  surface: "#1b1e25"
  surface_2: "#21252e"
  text: "#eef1f5"
  muted: "#98a0ad"
  border: "#2c3038"
  accent: "#f5a623"
  on_accent: "#13151a"
  wire: "#4ec9d6"
  primary: "#f5a623"
  secondary: "#4ec9d6"
  success: "#5bbf8a"
  warning: "#f5a623"
  error: "#e2615a"
  info: "#4ec9d6"
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: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  panel: "16px"
  control: "0px"
  pill: "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-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-wire:
    backgroundColor: "{colors.wire}"
  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.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Galley

## Overview

Galley reads software like a front page held open at press time: every panel a dispatch, datelined and prioritised, every claim filed with its source down the galley measure. A late-night newswire on an ink-charcoal press-room ground, where hierarchy is filed, not decorated, and information arrives authored, paced, and cited.

### Values

- a screen should read like a wire at four in the morning
- every block opens on a wire-slug — priority, dateline, byline, source
- the dominant story takes the column it earns; briefs hold their measure beside it
- two accents used like highlighters, never a flood

### Anti-Values

- white or warm-paper defaults and generic SaaS card farms
- delicate display-serif startup headlines without a press voice
- uniform sans that flattens the expanded-masthead and mono contrast
- gadget chrome, loud gradients, and one-sided accent edges

### Visual Character

- An expanded grotesque masthead (Archivo widened on its variable width axis) sits in uppercase over an ink-charcoal ground while compact tracked mono microtype forms a newswire rhythm across the page.
- Every block opens on the wire-slug: a monospace dateline strip riding a hairline signal-amber rule, with a coloured priority dot (amber bulletin, cyan wire, red flash), a dateline, a byline, and a press time.
- The galley measure runs a thin rule down the reading body with a short amber tick at its head, like type set in a printer's tray.
- A sticky wire ticker keeps the latest figures moving along the top rule; a cyan live pulse marks open dispatches.
- Signal amber carries the wire — slug rules, the primary button, the ticker tag, holding status; wire cyan carries links, active marks, and fresh dispatches. Semantic colours stay small and never go primary.

## 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 | `#13151a` |
| surface | `#1b1e25` |
| surface_2 | `#21252e` |
| text | `#eef1f5` |
| muted | `#98a0ad` |
| border | `#2c3038` |
| accent | `#f5a623` |
| on_accent | `#13151a` |
| wire | `#4ec9d6` |
| primary | `#f5a623` |
| secondary | `#4ec9d6` |
| success | `#5bbf8a` |
| warning | `#f5a623` |
| error | `#e2615a` |
| info | `#4ec9d6` |

## 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**: Inter, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space 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 uses a front-page bulletin grid — a dominant ~1.7fr lead dispatch beside a ~1fr brief stack, a four-up metric rail, and a split ledger-and-feed; interior panels use nested split grids.

### Whitespace

Generous and directional — large vertical spacing around the masthead and section titles, measured gutters between dispatches to preserve newswire pacing.

### Density

Reading-first; data is allowed but always typeset, captioned, and slugged.

### Responsive

- **Desktop**: front-page bulletin grid (ticker + masthead + lead + briefs + ledger)
- **Tablet**: stacked sections with two-column internals
- **Mobile**: single reading column, full-width modules, non-essential nav hidden, tables compress

### Breakpoints

- **Desktop**: 1440px+ keeps the multi-column front page; ultra-wide caps the measure at 1440px and lets only the hero span 100vw
- **Tablet**: 900px collapses to stacked sections
- **Mobile**: 390px becomes one reading column; grids use minmax(0,1fr) so children shrink, never overflow

## Elevation & Depth

### Shadows

- **Sm**: 0 10px 24px rgba(3,8,18,0.40)
- **Md**: 0 20px 48px rgba(3,8,18,0.50)
- **Lg**: 0 36px 90px rgba(3,8,18,0.60)

## Shapes

### Rounded

- **None**: `0px`
- **Panel**: `16px`
- **Control**: `0px`
- **Pill**: `9999px`

### Surfaces

- **Treatment**: flat ink-charcoal press-room panels
- **Card Style**: raised dispatch panel (#1b1e25), 16px rounded silhouette, near-invisible cool hairline border, one three-step shadow scale; the ledger and inputs are square (0px)
- **Bg Pattern**: very faint horizontal scanline grain (low-opacity repeating rule), no washes

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: near-invisible cool charcoal hairlines (#2c3038); a separate signal-amber rule carries the wire-slug and section underlines — never a one-sided edge on a rounded card

## Components

### Composition

Compose every screen as a front page at press time: a sticky wire ticker, a centred masthead, a dominant lead dispatch beside a stack of briefs, a metric rail, a pull dispatch, the ledger table, a composer, and a running feed. Asymmetric where the lede earns it, never a uniform card row.

### Hierarchy

Expanded uppercase grotesque (Archivo widened) for the masthead and section titles, tracked uppercase mono (Space Mono) for slugs, datelines, captions, figures and labels, Inter for body. The expanded-display and mono contrast is the rhythm.

### Density

Reading-first and breathable; high-information zones (the ledger, metric rail) get margin, hairline separators, and mono labels so the page still reads as edited.

### Signature

The wire-slug — a monospace dateline strip (priority dot, dateline, byline, press time) riding a hairline signal-amber rule that opens every block; paired with the galley measure (a thin column rule with an amber head-tick) and the sticky wire ticker. The same convention drives the ledger, composer, and feed, and recolours on palette swap because it is built from the role vars.

## 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-019efa5b-acfd-7732-b46d-46f6d8c705de/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 Open every block with a wire-slug; let the priority dot state the weight before the words.
- Do Keep one button clearly primary (amber fill); the rest share one pill shape and height.
- Do File every claim with a figure reference; treat captions, datelines and slugs as first-class.
- Do Let the rail and nav breathe as part of the page; never trap them in a floating pill bar.
- Do Style every form control — input, select, segmented radio, toggle, textarea — as a typographic element with a mono uppercase label and an amber focus ring.
- Do Run the galley measure down a reading body and keep the ticker moving along the top rule.
- Don't Default to a white or warm-paper ground, or turn the page into a generic analytics dashboard.
- Don't Replace the expanded-masthead-and-mono contrast with uniform sans or a delicate display serif.
- Don't Flood panels with amber, give a card a single one-sided accent edge, or nest cards.
- Don't Use browser-default form controls or unstyled tables.
- Don't Mix arbitrary radii (10px, 18px, 28px) or use symbol glyphs in copy — use SVG primitives.
- Don't Put emoji on buttons.

### Accessibility

Paper-white ink on ink-charcoal holds WCAG AA; amber and cyan are used at AA-legible sizes. Visible amber focus rings on every control, 17px body copy, table rows 14.5px+, keyboard-usable controls with clear mono labels, and prefers-reduced-motion honoured (ticker and reveals stop).

## Imagery Direction

### Pairs With

gravure

### Summary

Documentary technology photography printed as a two-tone halftone duotone — cool ash-grey highlights into deep ink-black shadows on the charcoal ground, dressed with a signal-amber hairline rule, crop-mark brackets, and a short uppercase mono FIG. NN caption. The landing hero is a full-bleed gravure plate of a newspaper press at press time, with the deck overlay anchored low-left; inline figures are smaller plates with their own captions.

### Subjects

- newspaper presses and the newsprint web
- wire-service teletypes and machine detail
- hands-on inspection scenes
- printed matter and typesetting
- abstracted systems diagrams

### Usage

The landing hero is a full-bleed gravure press plate (FIG. 01 — WIRE SERVICE UNIT) with a dark lower-left for the deck overlay. Inline figures are smaller plates with their own FIG. captions and signal-amber rules.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "galley",
  "type": "registry:theme",
  "title": "Galley shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#13151a",
      "foreground": "#eef1f5",
      "card": "#1b1e25",
      "card-foreground": "#eef1f5",
      "popover": "#1b1e25",
      "popover-foreground": "#eef1f5",
      "primary": "#f5a623",
      "primary-foreground": "#ffffff",
      "secondary": "#4ec9d6",
      "secondary-foreground": "#ffffff",
      "muted": "#98a0ad",
      "muted-foreground": "#eef1f5",
      "accent": "#f5a623",
      "accent-foreground": "#ffffff",
      "destructive": "#e2615a",
      "border": "#2c3038",
      "input": "#2c3038",
      "ring": "#f5a623",
      "chart-1": "#f5a623",
      "chart-2": "#4ec9d6",
      "chart-3": "#f5a623",
      "chart-4": "#5bbf8a",
      "chart-5": "#f5a623",
      "sidebar": "#1b1e25",
      "sidebar-foreground": "#eef1f5",
      "sidebar-primary": "#f5a623",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4ec9d6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2c3038",
      "sidebar-ring": "#f5a623",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#f5a623",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#f5a623",
      "accent-foreground": "#ffffff",
      "destructive": "#e2615a",
      "border": "#303642",
      "input": "#303642",
      "ring": "#f5a623",
      "chart-1": "#f5a623",
      "chart-2": "#4ec9d6",
      "chart-3": "#f5a623",
      "chart-4": "#5bbf8a",
      "chart-5": "#f5a623",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#f5a623",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#f5a623",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#f5a623",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efa5b-acfd-7732-b46d-46f6d8c705de",
    "slug": "galley",
    "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",
        "info",
        "muted",
        "on_accent",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning",
        "wire"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_line_height",
        "display_letter_spacing",
        "display_line_height",
        "display_width_axis",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "control",
        "none",
        "panel",
        "pill"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```

in the wild

embodiments

bespoke marketing landingopen full page ↗

landing · galley

DESIGN.md

at a glance

Typography

headline-lgArchivo · 33px · 700

The quick brown fox jumps

headline-mdArchivo · 27px · 600

The quick brown fox jumps

body-mdInter · 17px · 400

The quick brown fox jumps

label-mdSpace Mono · 12px · 600

The quick brown fox jumps

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primarysurfacemutederror

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.

advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #13151a;
  --foreground: #eef1f5;
  --card: #1b1e25;
  --card-foreground: #eef1f5;
  --popover: #1b1e25;
  --popover-foreground: #eef1f5;
  --primary: #f5a623;
  --primary-foreground: #ffffff;
  --secondary: #4ec9d6;
  --secondary-foreground: #ffffff;
  --muted: #98a0ad;
  --muted-foreground: #eef1f5;
  --accent: #f5a623;
  --accent-foreground: #ffffff;
  --destructive: #e2615a;
  --border: #2c3038;
  --input: #2c3038;
  --ring: #f5a623;
  --chart-1: #f5a623;
  --chart-2: #4ec9d6;
  --chart-3: #f5a623;
  --chart-4: #5bbf8a;
  --chart-5: #f5a623;
  --sidebar: #1b1e25;
  --sidebar-foreground: #eef1f5;
  --sidebar-primary: #f5a623;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #4ec9d6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #2c3038;
  --sidebar-ring: #f5a623;
  --radius: 0.625rem;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #f5a623;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #f5a623;
  --accent-foreground: #ffffff;
  --destructive: #e2615a;
  --border: #303642;
  --input: #303642;
  --ring: #f5a623;
  --chart-1: #f5a623;
  --chart-2: #4ec9d6;
  --chart-3: #f5a623;
  --chart-4: #5bbf8a;
  --chart-5: #f5a623;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #f5a623;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f5a623;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #f5a623;
  --radius: 0.625rem;
}

tsx starter

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function GalleyShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Galley</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

theme JSONstored + verified

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "galley",
  "type": "registry:theme",
  "cssVars": {
    "theme": {
      "font-sans": "Inter, system-ui, sans-serif",
      "font-mono": "Space Mono, ui-monospace, monospace",
      "font-display": "Archivo, Arial Narrow, sans-serif",
      "radius": "16px"
    },
    "dark": {
      "background": "#13151a",
      "foreground": "#eef1f5",
      "card": "#1b1e25",
      "card-foreground": "#eef1f5",
      "popover": "#1b1e25",
      "popover-foreground": "#eef1f5",
      "primary": "#f5a623",
      "primary-foreground": "#13151a",
      "secondary": "#21252e",
      "secondary-foreground": "#eef1f5",
      "muted": "#21252e",
      "muted-foreground": "#98a0ad",
      "accent": "#4ec9d6",
      "accent-foreground": "#13151a",
      "destructive": "#e2615a",
      "destructive-foreground": "#eef1f5",
      "border": "#2c3038",
      "input": "#2c3038",
      "ring": "#f5a623",
      "chart-1": "#f5a623",
      "chart-2": "#4ec9d6",
      "chart-3": "#5bbf8a",
      "chart-4": "#e2615a",
      "chart-5": "#98a0ad"
    },
    "light": {
      "background": "#13151a",
      "foreground": "#eef1f5",
      "card": "#1b1e25",
      "card-foreground": "#eef1f5",
      "popover": "#1b1e25",
      "popover-foreground": "#eef1f5",
      "primary": "#f5a623",
      "primary-foreground": "#13151a",
      "secondary": "#21252e",
      "secondary-foreground": "#eef1f5",
      "muted": "#21252e",
      "muted-foreground": "#98a0ad",
      "accent": "#4ec9d6",
      "accent-foreground": "#13151a",
      "destructive": "#e2615a",
      "destructive-foreground": "#eef1f5",
      "border": "#2c3038",
      "input": "#2c3038",
      "ring": "#f5a623"
    }
  },
  "visualProfile": {
    "mode": "dark",
    "ground": "#13151a",
    "material": "flat ink-charcoal panels, no glass, no gradient washes; faint scanline grain only",
    "radius": { "panel": "16px", "control": "0px", "pill": "9999px" },
    "border": "1px near-invisible cool hairline (#2c3038); never a one-sided accent edge",
    "accentUsage": "two accents like highlighters — signal amber (#f5a623) primary, wire cyan (#4ec9d6) for links/active; semantic colours stay small",
    "typography": "Archivo widened (wdth 125) uppercase masthead, Inter body 17px, Space Mono tracked labels/slugs",
    "signature": "wire-slug dateline strip on a hairline amber rule with a priority dot; ticker; galley column measure",
    "shadow": "single three-step shadow scale, restrained",
    "motion": "sliding ticker + cyan live pulse; reveal-on-scroll; settled state is the no-JS default"
  }
}

component recipescompatibility fallback

# Galley shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efa5b-acfd-7732-b46d-46f6d8c705de`
Slug: `galley`

## Intent

Galley reads software like a front page held open at press time: every panel a dispatch, datelined and prioritised, every claim filed with its source down the galley measure. A late-night newswire on an ink-charcoal press-room ground, where hierarchy is filed, not decorated, and information arrives authored, paced, and cited.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

## Token cues

Colors:

{
  "bg": "#13151a",
  "surface": "#1b1e25",
  "surface_2": "#21252e",
  "text": "#eef1f5",
  "muted": "#98a0ad",
  "border": "#2c3038",
  "accent": "#f5a623",
  "on_accent": "#13151a",
  "wire": "#4ec9d6",
  "primary": "#f5a623",
  "secondary": "#4ec9d6",
  "success": "#5bbf8a",
  "warning": "#f5a623",
  "error": "#e2615a",
  "info": "#4ec9d6"
}

Typography:

{
  "base_size": "17px",
  "body_font": "Inter",
  "heading_font": "Archivo",
  "mono_font": "Space Mono",
  "heading_weight": "800",
  "heading_transform": "uppercase",
  "letter_spacing": "-0.02em",
  "display_letter_spacing": "-0.035em",
  "display_width_axis": "wdth 125 (expanded)",
  "body_line_height": "1.6",
  "display_line_height": "0.9",
  "scale_ratio": 1.25,
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62.5..125,400..900&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap"
}

## Visual character to preserve

- An expanded grotesque masthead (Archivo widened on its variable width axis) sits in uppercase over an ink-charcoal ground while compact tracked mono microtype forms a newswire rhythm across the page.
- Every block opens on the wire-slug: a monospace dateline strip riding a hairline signal-amber rule, with a coloured priority dot (amber bulletin, cyan wire, red flash), a dateline, a byline, and a press time.
- The galley measure runs a thin rule down the reading body with a short amber tick at its head, like type set in a printer's tray.
- A sticky wire ticker keeps the latest figures moving along the top rule; a cyan live pulse marks open dispatches.
- Signal amber carries the wire — slug rules, the primary button, the ticker tag, holding status; wire cyan carries links, active marks, and fresh dispatches. Semantic colours stay small and never go primary.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": true,
  "stickerBadges": false,
  "motion": "still",
  "density": "dense",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/galley/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Open every block with a wire-slug; let the priority dot state the weight before the words.; Keep one button clearly primary (amber fill); the rest share one pill shape and height.; File every claim with a figure reference; treat captions, datelines and slugs as first-class.; Let the rail and nav breathe as part of the page; never trap them in a floating pill bar.; Style every form control — input, select, segmented radio, toggle, textarea — as a typographic element with a mono uppercase label and an amber focus ring.; Run the galley measure down a reading body and keep the ticker moving along the top rule.
- Do not: Default to a white or warm-paper ground, or turn the page into a generic analytics dashboard.; Replace the expanded-masthead-and-mono contrast with uniform sans or a delicate display serif.; Flood panels with amber, give a card a single one-sided accent edge, or nest cards.; Use browser-default form controls or unstyled tables.; Mix arbitrary radii (10px, 18px, 28px) or use symbol glyphs in copy — use SVG primitives.; Put emoji on buttons.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function GalleyShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Galley</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}
```

## Layout notes

{
  "grid": "Desktop uses a front-page bulletin grid — a dominant ~1.7fr lead dispatch beside a ~1fr brief stack, a four-up metric rail, and a split ledger-and-feed; interior panels use nested split grids.",
  "whitespace": "Generous and directional — large vertical spacing around the masthead and section titles, measured gutters between dispatches to preserve newswire pacing.",
  "density": "Reading-first; data is allowed but always typeset, captioned, and slugged.",
  "responsive": {
    "desktop": "front-page bulletin grid (ticker + masthead + lead + briefs + ledger)",
    "tablet": "stacked sections with two-column internals",
    "mobile": "single reading column, full-width modules, non-essential nav hidden, tables compress"
  },
  "breakpoints": {
    "desktop": "1440px+ keeps the multi-column front page; ultra-wide caps the measure at 1440px and lets only the hero span 100vw",
    "tablet": "900px collapses to stacked sections",
    "mobile": "390px becomes one reading column; grids use minmax(0,1fr) so children shrink, never overflow"
  }
}

preview shotscompatibility fallback

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019efa5b-acfd-7732-b46d-46f6d8c705de",
    "name": "Galley",
    "slug": "galley"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "An expanded grotesque masthead (Archivo widened on its variable width axis) sits in uppercase over an ink-charcoal ground while compact tracked mono microtype forms a newswire rhythm across the page.",
    "Every block opens on the wire-slug: a monospace dateline strip riding a hairline signal-amber rule, with a coloured priority dot (amber bulletin, cyan wire, red flash), a dateline, a byline, and a press time.",
    "The galley measure runs a thin rule down the reading body with a short amber tick at its head, like type set in a printer's tray.",
    "A sticky wire ticker keeps the latest figures moving along the top rule; a cyan live pulse marks open dispatches.",
    "Signal amber carries the wire — slug rules, the primary button, the ticker tag, holding status; wire cyan carries links, active marks, and fresh dispatches. Semantic colours stay small and never go primary."
  ],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "dense",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Galley launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Open every block with a wire-slug; let the priority dot state the weight before the words.",
      "Keep one button clearly primary (amber fill); the rest share one pill shape and height.",
      "File every claim with a figure reference; treat captions, datelines and slugs as first-class.",
      "Let the rail and nav breathe as part of the page; never trap them in a floating pill bar.",
      "Style every form control — input, select, segmented radio, toggle, textarea — as a typographic element with a mono uppercase label and an amber focus ring.",
      "Run the galley measure down a reading body and keep the ticker moving along the top rule."
    ],
    "dont": [
      "Default to a white or warm-paper ground, or turn the page into a generic analytics dashboard.",
      "Replace the expanded-masthead-and-mono contrast with uniform sans or a delicate display serif.",
      "Flood panels with amber, give a card a single one-sided accent edge, or nest cards.",
      "Use browser-default form controls or unstyled tables.",
      "Mix arbitrary radii (10px, 18px, 28px) or use symbol glyphs in copy — use SVG primitives.",
      "Put emoji on buttons."
    ]
  }
}

built with

Art styleGravurephotogravure plateView art style

Palette

Agent-generated

remix lane

try a remix

Keep Galleyand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.

UI language · fixed

Galley

Palette

Art style

Landing PageGalley · Transformative teal + Adaptive violet · Cyanotype

live preview · recolored + filled

lineage

Family

Evolved from

CiceroPublished

More like this

Datumnearest in taste Folionearest in taste Galleynearest in taste Dossiernearest in taste Signal Pressnearest in taste Lampblacknearest in taste