Galley

# Galley

## Philosophy

Galley is a fine-art editorial proofing language for publication tools, artist archives and culture desks — the interface as a marked-up galley proof. A pure white page carries off-black ink, hairline charcoal rules, paper-tone panels and crop-marked artwork frames; magazine pacing comes from asymmetry, oversized serif moments and mono proof labels. Colour is punctuation with meaning: cyan, vermilion and acid yellow arrive only as caption scraps — flat stickers that overlap frame edges — and each is a verdict. Cyan moves things, vermilion stops them, acid yellow holds them. The system stays museum-legible and disciplined while the marks steer attention through the composition.

### Values

- {"name":"Paper before chrome","explanation":"The default surface is pure white with warm paper panels and visible rule work; UI chrome reads as an edited page, not an app shell."}
- {"name":"Ink as structure","explanation":"Hairline rules, 4px ink dividers, wash underlines and crop marks define hierarchy and grouping — structure is printed, not floated on shadows."}
- {"name":"Colour as verdict","explanation":"High-chroma accents appear as caption scraps, statuses and register marks placed at decisive points; every colour states a decision and is paired with words."}
- {"name":"Editorial tension","explanation":"Asymmetry, oversized serif pull quotes, cropped artwork and offset scraps create magazine pacing across the interface."}
- {"name":"Annotated utility","explanation":"Controls, statuses, filters and notes are styled as proof marks and margin annotations, keeping dense workflows expressive and usable."}
- {"name":"Fine-art restraint","explanation":"Quiet margins, one strict type scale and material tactility keep the language gallery-adjacent rather than trendy."}

### Anti-Values

- {"name":"Generic dashboard cards","explanation":"No rounded neutral cards that would look identical after a palette swap; grouping comes from paper tones and rules."}
- {"name":"Rainbow enthusiasm","explanation":"Never many accents at equal weight; one dominant high-chroma accent per view, the others only as genuine verdicts."}
- {"name":"Crypto gloss","explanation":"No gradient buttons, glass panels, neon glows or inflated shadow stacks."}
- {"name":"Fake handwriting","explanation":"No novelty script fonts; ink character comes from rules, wash marks and crop frames, not gimmick typography."}

### Visual Character

- Pure white page with warm paper inset panels separated by 1px charcoal rules and abrupt 4px ink dividers.
- A 96px folio rail with vertical mono labels and three registration dots frames the workspace; it becomes a masthead band on tablet.
- Flat cyan, vermilion and acid-yellow caption scraps overlap frame edges as statuses, plate numbers and section marks.
- Irregular ink-wash SVG strokes underline section titles; artwork sits in crop-marked square frames.
- Sharp 0px containers, oversized Cormorant Garamond display, compact IBM Plex Sans body, IBM Plex Mono proof labels — all at -0.02em.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#F4F1EA` |
| surface_solid | `#ECE7DC` |
| text | `#101010` |
| muted | `#6E6960` |
| border | `#1A1A1A` |
| accent | `#00AEEF` |
| accent_2 | `#FF3B1F` |
| accent_soft | `#F6E800` |
| on_accent | `#FFFFFF` |
| success | `#158A4A` |
| warning | `#F6E800` |
| error | `#FF3B1F` |
| info | `#00AEEF` |

### Typography

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

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.16)
- **Md**: 0 16px 32px rgba(0,0,0,0.07)
- **Lg**: 0 28px 64px rgba(0,0,0,0.09)

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat warm paper panels and crop-marked ink frames on pure white; square corners, mono labels, caption scraps overlapping edges; no rounded neutral cards.
- **Bg Pattern**: none

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Borders behave like print rules and ink strokes: hairline charcoal separators, 1.5px ink outlines on fields and frames, abrupt 4px ink dividers before major blocks. Never soft grey box borders, never a single accent edge on a card.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: Snappy editorial proofing motion: small shifts and hard colour swaps; the settled page is the default state, reveals are gated behind a script class and respect prefers-reduced-motion.

## Rules

### Composition

- Use a 12-column editorial grid capped at 1440px with a 96px folio rail on desktop; the rail becomes a horizontal masthead band on tablet.
- Reserve at least half the screen as white or paper negative space; density arrives in edited blocks organized by rules, not everywhere.
- Crop artwork aggressively inside square crop-marked frames so images behave as composition, not thumbnail decoration.
- Place colour on edges, scraps and small blocks that punctuate reading order; never fill whole regions with accent colour.
- Let one oversized serif headline or pull quote break the grid per view to create magazine rhythm.
- Separate content families with hairline rules, 4px ink dividers and paper tone shifts instead of shadowed containers.
- Balance density across the canvas — a dense schedule block always faces a margin-note column or generous white, never a starved void.

### Hierarchy

- Cormorant Garamond display carries editorial importance and may overlap a rule or wash mark.
- IBM Plex Sans body is compact and sober at 17px minimum with -0.02em tracking.
- IBM Plex Mono acts as proof marks: dates, plate numbers, statuses, filters, breadcrumbs — 13px uppercase at +0.08em.
- Caption scraps outrank muted tags but stay small enough to read as annotations.
- One clearly primary action per view: a solid ink block; secondary actions are outlined proof boxes; quiet actions are mono labels with a highlighter hover.

### Density

Medium-high editorial workbench density: schedules, forms, notes and metadata coexist, organized by rules, gutters, paper panels and the folio rail rather than rounded cards.

### Signature Patterns

- Caption scrap (signature mechanic): a flat cyan/vermilion/yellow/ink rectangle with a mono uppercase label, absolutely offset to overlap its parent's edge — used page-wide for statuses, plate numbers, section marks and verdicts.
- Crop-mark frames: 14px ink corner marks outside artwork frames and key blocks, recurring across all compositions.
- Folio rail: fixed left gutter with vertical mono labels and three registration dots (cyan/vermilion/yellow).
- Wash-underlined titles: irregular ink-wash SVG strokes under section headings.
- Highlighter links: an ink baseline that floods acid yellow on hover — the language's link gesture everywhere.
- Register-mark tabs: the active tab carries a 4px vermilion mark under a hairline baseline.
- Ink block buttons: solid ink primary stamping cyan on hover and vermilion on active press.
- Plate schedule tables: 4px ink top rule, alternating paper-tone rows, cyan-wash hover, scrap statuses.

## Layout

### Density

Editorial workbench density: desktop shows schedule, notes and metadata at once; mobile collapses to one annotated reading stream.

### Grid

12-column grid capped at 1440px with 24px gutters and a 96px folio rail; asymmetric spans (7/4, 8/4, 6/5) for specimen, notes and controls.

### Breakpoints

- **Desktop**: 1200px and above: full grid with the vertical folio rail.
- **Tablet**: 768px to 1024px: the rail becomes a horizontal masthead band; grids drop to two considered columns — never the mobile column stretched wide.
- **Mobile**: 640px and below: single annotated stream; vertical writing mode removed, display type clamps to 38px, buttons full width, tables become scrollable proof strips, 44px touch targets.

### Whitespace

Margins around works on paper: broad outer edges, tight caption relationships, deliberate empty gutters that make the colour scraps feel placed.

### Responsive

At 1024px the rail flattens and grids drop to two columns; at 640px everything stacks; oversized display type clamps responsively and never clips at 390px; grids use minmax(0,1fr) so nothing overflows.

## Guidance

### Do

- Start every screen from pure #FFFFFF and add paper panels only where grouping is necessary.
- Let rules, crop marks and gutters do structural work before reaching for shadows.
- Give every colour a verdict — cyan moves, vermilion stops, acid yellow holds — and pair it with words.
- Offset caption scraps across frame edges to create collage depth.
- Keep ink-wash marks tied to headings and dividers, never spread across surfaces.
- Style forms as proofing instruments: square paper fields, mono labels, 2.5px cyan focus outlines, written error reasons.
- Apply -0.02em tracking to all sans text and one strict type scale to every size on the page.
- Keep the scrap + crop-mark + rule ornament recurring page-wide as one system.

### Don't

- Do not tint the page background; the canvas stays pure white.
- Do not round containers; only tiny tags and avatars are fully round.
- Do not use gradients, glass panels, neon glows or stacked shadows.
- Do not scatter the three accents equally; choose a dominant one per view.
- Do not give cards single accent edges; verdicts arrive as scraps.
- Do not use decorative handwriting fonts or faux-sketch icons.
- Do not centre everything; asymmetry and margin logic are essential.
- Do not let artwork float without captions, crop marks or editorial context.
- Do not let button or chip text wrap; layouts shrink or stack instead.

### Usage Context

Art-publication proofing tools, exhibition catalogue desks, artist archives, culture magazines and journals, design criticism platforms, and cultural-institution workflow tools that need museum seriousness with contemporary colour energy.

### Accessibility

Maintain WCAG contrast for text on accent scraps (white on cyan/vermilion, ink on yellow); pair every colour status with words; 2.5px cyan focus outlines on all interactive elements; 44px touch targets on tablet and mobile; respect prefers-reduced-motion; never place long text over wash textures.

## Imagery Direction

### Technique

Loose black India-ink line drawing with irregular grey wash fields on pure white paper, punctuated by a few flat opaque rectangles of cyan, vermilion and acid yellow collaged like printer registration stickers.

### Subjects

Proofing tables, works on paper, gallery objects, print-shop still lifes — always with generous white margins.

### Negative

no photorealism, no gradients, no text, no letters, no logos

---
version: "alpha"
name: "Galley"
description: "Galley is a fine-art editorial proofing language for publication tools, artist archives and culture desks — the interface as a marked-up galley proof. A pure white page carries off-black ink, hairline charcoal rules, paper-tone panels an..."
colors:
  bg: "#FFFFFF"
  surface: "#F4F1EA"
  surface_solid: "#ECE7DC"
  text: "#101010"
  muted: "#6E6960"
  border: "#1A1A1A"
  accent: "#00AEEF"
  accent_2: "#FF3B1F"
  accent_soft: "#F6E800"
  on_accent: "#FFFFFF"
  success: "#158A4A"
  warning: "#F6E800"
  error: "#FF3B1F"
  info: "#00AEEF"
typography:
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "2.334rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.796rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "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"
  step-9: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  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_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Galley

## Overview

Galley is a fine-art editorial proofing language for publication tools, artist archives and culture desks — the interface as a marked-up galley proof. A pure white page carries off-black ink, hairline charcoal rules, paper-tone panels and crop-marked artwork frames; magazine pacing comes from asymmetry, oversized serif moments and mono proof labels. Colour is punctuation with meaning: cyan, vermilion and acid yellow arrive only as caption scraps — flat stickers that overlap frame edges — and each is a verdict. Cyan moves things, vermilion stops them, acid yellow holds them. The system stays museum-legible and disciplined while the marks steer attention through the composition.

### Values

- {"name":"Paper before chrome","explanation":"The default surface is pure white with warm paper panels and visible rule work; UI chrome reads as an edited page, not an app shell."}
- {"name":"Ink as structure","explanation":"Hairline rules, 4px ink dividers, wash underlines and crop marks define hierarchy and grouping — structure is printed, not floated on shadows."}
- {"name":"Colour as verdict","explanation":"High-chroma accents appear as caption scraps, statuses and register marks placed at decisive points; every colour states a decision and is paired with words."}
- {"name":"Editorial tension","explanation":"Asymmetry, oversized serif pull quotes, cropped artwork and offset scraps create magazine pacing across the interface."}
- {"name":"Annotated utility","explanation":"Controls, statuses, filters and notes are styled as proof marks and margin annotations, keeping dense workflows expressive and usable."}
- {"name":"Fine-art restraint","explanation":"Quiet margins, one strict type scale and material tactility keep the language gallery-adjacent rather than trendy."}

### Anti-Values

- {"name":"Generic dashboard cards","explanation":"No rounded neutral cards that would look identical after a palette swap; grouping comes from paper tones and rules."}
- {"name":"Rainbow enthusiasm","explanation":"Never many accents at equal weight; one dominant high-chroma accent per view, the others only as genuine verdicts."}
- {"name":"Crypto gloss","explanation":"No gradient buttons, glass panels, neon glows or inflated shadow stacks."}
- {"name":"Fake handwriting","explanation":"No novelty script fonts; ink character comes from rules, wash marks and crop frames, not gimmick typography."}

### Visual Character

- Pure white page with warm paper inset panels separated by 1px charcoal rules and abrupt 4px ink dividers.
- A 96px folio rail with vertical mono labels and three registration dots frames the workspace; it becomes a masthead band on tablet.
- Flat cyan, vermilion and acid-yellow caption scraps overlap frame edges as statuses, plate numbers and section marks.
- Irregular ink-wash SVG strokes underline section titles; artwork sits in crop-marked square frames.
- Sharp 0px containers, oversized Cormorant Garamond display, compact IBM Plex Sans body, IBM Plex Mono proof labels — all at -0.02em.

## 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 | `#FFFFFF` |
| surface | `#F4F1EA` |
| surface_solid | `#ECE7DC` |
| text | `#101010` |
| muted | `#6E6960` |
| border | `#1A1A1A` |
| accent | `#00AEEF` |
| accent_2 | `#FF3B1F` |
| accent_soft | `#F6E800` |
| on_accent | `#FFFFFF` |
| success | `#158A4A` |
| warning | `#F6E800` |
| error | `#FF3B1F` |
| info | `#00AEEF` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap

- **Headline-Lg**: Cormorant Garamond, 2.334rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.796rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.55.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
- **Step-9**: `128px`

### Density

Editorial workbench density: desktop shows schedule, notes and metadata at once; mobile collapses to one annotated reading stream.

### Grid

12-column grid capped at 1440px with 24px gutters and a 96px folio rail; asymmetric spans (7/4, 8/4, 6/5) for specimen, notes and controls.

### Breakpoints

- **Desktop**: 1200px and above: full grid with the vertical folio rail.
- **Tablet**: 768px to 1024px: the rail becomes a horizontal masthead band; grids drop to two considered columns — never the mobile column stretched wide.
- **Mobile**: 640px and below: single annotated stream; vertical writing mode removed, display type clamps to 38px, buttons full width, tables become scrollable proof strips, 44px touch targets.

### Whitespace

Margins around works on paper: broad outer edges, tight caption relationships, deliberate empty gutters that make the colour scraps feel placed.

### Responsive

At 1024px the rail flattens and grids drop to two columns; at 640px everything stacks; oversized display type clamps responsively and never clips at 390px; grids use minmax(0,1fr) so nothing overflows.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(0,0,0,0.16)
- **Md**: 0 16px 32px rgba(0,0,0,0.07)
- **Lg**: 0 28px 64px rgba(0,0,0,0.09)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: Flat warm paper panels and crop-marked ink frames on pure white; square corners, mono labels, caption scraps overlapping edges; no rounded neutral cards.
- **Bg Pattern**: none

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Borders behave like print rules and ink strokes: hairline charcoal separators, 1.5px ink outlines on fields and frames, abrupt 4px ink dividers before major blocks. Never soft grey box borders, never a single accent edge on a card.

## Components

### Composition

- Use a 12-column editorial grid capped at 1440px with a 96px folio rail on desktop; the rail becomes a horizontal masthead band on tablet.
- Reserve at least half the screen as white or paper negative space; density arrives in edited blocks organized by rules, not everywhere.
- Crop artwork aggressively inside square crop-marked frames so images behave as composition, not thumbnail decoration.
- Place colour on edges, scraps and small blocks that punctuate reading order; never fill whole regions with accent colour.
- Let one oversized serif headline or pull quote break the grid per view to create magazine rhythm.
- Separate content families with hairline rules, 4px ink dividers and paper tone shifts instead of shadowed containers.
- Balance density across the canvas — a dense schedule block always faces a margin-note column or generous white, never a starved void.

### Hierarchy

- Cormorant Garamond display carries editorial importance and may overlap a rule or wash mark.
- IBM Plex Sans body is compact and sober at 17px minimum with -0.02em tracking.
- IBM Plex Mono acts as proof marks: dates, plate numbers, statuses, filters, breadcrumbs — 13px uppercase at +0.08em.
- Caption scraps outrank muted tags but stay small enough to read as annotations.
- One clearly primary action per view: a solid ink block; secondary actions are outlined proof boxes; quiet actions are mono labels with a highlighter hover.

### Density

Medium-high editorial workbench density: schedules, forms, notes and metadata coexist, organized by rules, gutters, paper panels and the folio rail rather than rounded cards.

### Signature Patterns

- Caption scrap (signature mechanic): a flat cyan/vermilion/yellow/ink rectangle with a mono uppercase label, absolutely offset to overlap its parent's edge — used page-wide for statuses, plate numbers, section marks and verdicts.
- Crop-mark frames: 14px ink corner marks outside artwork frames and key blocks, recurring across all compositions.
- Folio rail: fixed left gutter with vertical mono labels and three registration dots (cyan/vermilion/yellow).
- Wash-underlined titles: irregular ink-wash SVG strokes under section headings.
- Highlighter links: an ink baseline that floods acid yellow on hover — the language's link gesture everywhere.
- Register-mark tabs: the active tab carries a 4px vermilion mark under a hairline baseline.
- Ink block buttons: solid ink primary stamping cyan on hover and vermilion on active press.
- Plate schedule tables: 4px ink top rule, alternating paper-tone rows, cyan-wash hover, scrap statuses.

## 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-019f2e78-8711-7072-b72d-200b095d9a51/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-019f2e78-8711-7072-b72d-200b095d9a51/shadcn.json` (registry theme), `/language/en-019f2e78-8711-7072-b72d-200b095d9a51/shadcn-components.md` (component recipes) and `/language/en-019f2e78-8711-7072-b72d-200b095d9a51/shadcn-shots.json` (preview shots). The human-facing handoff is still DESIGN.md with shadcn.

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

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Start every screen from pure #FFFFFF and add paper panels only where grouping is necessary.
- Do Let rules, crop marks and gutters do structural work before reaching for shadows.
- Do Give every colour a verdict — cyan moves, vermilion stops, acid yellow holds — and pair it with words.
- Do Offset caption scraps across frame edges to create collage depth.
- Do Keep ink-wash marks tied to headings and dividers, never spread across surfaces.
- Do Style forms as proofing instruments: square paper fields, mono labels, 2.5px cyan focus outlines, written error reasons.
- Do Apply -0.02em tracking to all sans text and one strict type scale to every size on the page.
- Do Keep the scrap + crop-mark + rule ornament recurring page-wide as one system.
- Don't Do not tint the page background; the canvas stays pure white.
- Don't Do not round containers; only tiny tags and avatars are fully round.
- Don't Do not use gradients, glass panels, neon glows or stacked shadows.
- Don't Do not scatter the three accents equally; choose a dominant one per view.
- Don't Do not give cards single accent edges; verdicts arrive as scraps.
- Don't Do not use decorative handwriting fonts or faux-sketch icons.
- Don't Do not centre everything; asymmetry and margin logic are essential.
- Don't Do not let artwork float without captions, crop marks or editorial context.
- Don't Do not let button or chip text wrap; layouts shrink or stack instead.

### Usage Context

Art-publication proofing tools, exhibition catalogue desks, artist archives, culture magazines and journals, design criticism platforms, and cultural-institution workflow tools that need museum seriousness with contemporary colour energy.

### Accessibility

Maintain WCAG contrast for text on accent scraps (white on cyan/vermilion, ink on yellow); pair every colour status with words; 2.5px cyan focus outlines on all interactive elements; 44px touch targets on tablet and mobile; respect prefers-reduced-motion; never place long text over wash textures.

## Imagery Direction

### Technique

Loose black India-ink line drawing with irregular grey wash fields on pure white paper, punctuated by a few flat opaque rectangles of cyan, vermilion and acid yellow collaged like printer registration stickers.

### Subjects

Proofing tables, works on paper, gallery objects, print-shop still lifes — always with generous white margins.

### Negative

no photorealism, no gradients, no text, no letters, no logos

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "galley",
  "type": "registry:theme",
  "title": "Galley shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#101010",
      "card": "#F4F1EA",
      "card-foreground": "#101010",
      "popover": "#F4F1EA",
      "popover-foreground": "#101010",
      "primary": "#101010",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6E6960",
      "muted-foreground": "#101010",
      "accent": "#00AEEF",
      "accent-foreground": "#ffffff",
      "destructive": "#FF3B1F",
      "border": "#1A1A1A",
      "input": "#1A1A1A",
      "ring": "#00AEEF",
      "chart-1": "#101010",
      "chart-2": "#f4f4f5",
      "chart-3": "#00AEEF",
      "chart-4": "#158A4A",
      "chart-5": "#F6E800",
      "sidebar": "#F4F1EA",
      "sidebar-foreground": "#101010",
      "sidebar-primary": "#101010",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00AEEF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1A1A1A",
      "sidebar-ring": "#00AEEF",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#101010",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#00AEEF",
      "accent-foreground": "#ffffff",
      "destructive": "#FF3B1F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00AEEF",
      "chart-1": "#101010",
      "chart-2": "#f4f4f5",
      "chart-3": "#00AEEF",
      "chart-4": "#158A4A",
      "chart-5": "#F6E800",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#101010",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00AEEF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00AEEF",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f2e78-8711-7072-b72d-200b095d9a51",
    "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",
        "accent_2",
        "accent_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "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"
      ]
    }
  }
}
```