back to gallery
design language·chase

Chase

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

Download DESIGN.md

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

the spec

specification

philosophy
summary
Chase treats software like a hand-set page locked in its iron frame. A warm bone-paper field carries dense lampblack ink, ruled grids, captioned panels, and authored marginalia. A chase is the rigid frame a compositor locks a set page into with quoins so the whole form lifts as one; that lockup is the one ownable idea — content is set, then locked, every panel a captioned block aligned to black rules, the whole spread lifting as one rigid object. Ink carries the decisions; colour is reserved for one mark at a time.
values
Ink as authority — decisions are set in dense black, never merely tinted.The page is the interface — columns, gutters, captions, folios, and rules instead of floating app chrome.Line weight before colour — 4px decision strokes, 2px frames, 1px hairlines set order first.Two ink marks, no more — oxblood for one active correction, cobalt for one reference, like a proofreader's pencil.Restraint over ornament — large quiet paper zones; whitespace is margin, not absence.Fine-art tactility — generated paper grain and squared offset ink-shadows give material presence while controls stay precise.
anti-values
×Generic SaaS cards with soft shadows, large radii, pastel washes, or glass.×Defaulting to a white ground; leaving loose, unframed, uncaptioned content.×Colour-only hierarchy, or a third and fourth accent crowding the two ink marks.×Decorative doodles, fake hand-drawn scribbles, or symbol glyphs in copy.×A single accent edge stamped on a card, nested cards, or navigation trapped in a pill bar.
tokens
colors18 items
bg
#F2EAD8
surface
#FBF4E2
surface_2
#ECE2CC
paper_white
#FFFBEF
text
#14120C
ink
#0B0A06
muted
#5E584B
faint
#8C8472
border
#14120C
accent
#8A2024
accent_strong
#6E181B
on_accent
#FBF4E2
cobalt
#1E4E8C
cobalt_strong
#173C6C
success
#355C3A
warning
#9A6310
error
#8A2024
info
#1E4E8C
typography11 items
base size
17px
body font
Source Serif 4, Georgia, serif
heading font
Libre Baskerville, Georgia, serif
mono font
IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace
caption font
IBM Plex Mono, ui-monospace, monospace
heading weight
700
heading transform
none
letter spacing
-0.02em
caption letter spacing
0.14em
line height
1.55
google fonts url
https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap
radii4 items
none
0
sm
1px
md
2px
full
9999px
shadows2 items
sm
2px 2px 0 #0B0A06
md
4px 4px 0 #0B0A06
spacing2 items
base
8px
scale
4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
surfaces3 items
bg pattern
generated paper grain (layered radial + linear gradients, no image)
card style
Flat warm paper panels with visible grain, squared 2px corners, black editorial rules, emphasis via a 4px top stroke and an offset registration ink-shadow.
treatment
paper
borders5 items
default width
1px
frame width
2px
accent width
4px
style
solid
character
Borders are printed rules: 1px hairlines divide reading, 2px lines frame decisions, 4px strokes mark primary editorial emphasis. Black, never grey; never a single decorative accent edge.
motion3 items
duration
150ms
easing
cubic-bezier(0.2, 0, 0.1, 1)
philosophy
Deliberate, near print-static — the settled page is the default and shows with no JavaScript; JS adds a one-shot CSS entrance that always finishes on its own. Respects prefers-reduced-motion.
rules
composition
Compose on an editorial grid before any component decisions: a narrow folio rail, a main authored column, and a marginalia annotation column, aligned to black vertical rules; let at least one quadrant stay quiet paper. Prefer horizontal rules, vertical gutters, and caption tabs over rounded cards. Iconography is scarce and text-led.
hierarchy
Hierarchy runs from 4px black decision strokes to 2px frames to 1px hairline rules, then typography. Headings use Libre Baskerville with tight leading; captions and data use IBM Plex Mono uppercase; body uses Source Serif 4. Oxblood marks one active item and cobalt one reference — never decorate multiple unrelated elements.
density
Compact inside panels (8-16px internal rhythm), spacious between them (48-96px desktop gutters). A screen reads like an edited broadsheet proof: precise islands of information on a quiet paper ground.
signature
The lockup: every major panel carries a uppercase-mono caption tab pinned to its top-left, started by a 4px ink stub and carried to the gutter by a 1px hairline; emphasis panels add a 4px top stroke and a squared offset ink-shadow; the folio/main/marginalia spread collapses to one ruled column on mobile.
layout
grid
Desktop uses a max-width ~1320px spread: a ~72px folio rail, a 1fr main column, and a ~320px marginalia column separated by 24-32px gutters and black vertical rules. Panels use internal editorial subgrids when needed.
whitespace
Whitespace is paper margin, not generic emptiness. Generous outer padding (24px mobile, 40px tablet, 64-96px desktop) with deliberate quiet zones beside dense captioned panels.
density

Compact editorial density: high information per panel with strict captioning, offset by large paper margins so the interface stays calm and literary.

responsive
390px: one ruled column, 16-24px gutters, 44px+ controls, captions stay visible, decorative rail hidden. 768px: two columns with marginalia beneath. 1440px+: full folio/main/margin spread; only the hero spans 100vw, contained content caps and centres.
breakpoints
mobile
<=640px
tablet
641-1024px
desktop
>=1025px
guidance
do
  • Set the page on a warm paper ground with dense black ink before any accent.
  • Give every panel an authored caption tab; write microcopy like proof notes.
  • Build hierarchy with 4px / 2px / 1px black rules, then typography, then one ink mark.
  • Reserve oxblood for one active state and cobalt for one reference; keep quiet paper zones.
  • Use squared 2px corners and offset ink-shadows for printed materiality.
  • Style every form control explicitly in the ruled-paper grammar — no browser defaults showing.
avoid
  • Do not default to white or use pastel washes, soft shadows, large radii, or glass.
  • Do not put a single accent edge on a card, nest cards, or trap navigation in a pill bar.
  • Do not rely on colour alone for hierarchy or add a third and fourth accent.
  • Do not add decorative doodles, fake hand-drawn icons, or symbol glyphs in copy.
  • Do not centre every block; preserve editorial asymmetry and quiet margins.
imagery
pairs with

lampblack

summary
Dense fine-art lampblack ink drawing on a warm bone-paper field with visible fiber grain: loaded sumi-e brush masses with crisp pen-and-nib contour and cross-hatching, one small restrained accent ink mark, severe editorial restraint and generous quiet negative space. Subjects come from the composing room and the printed page.
subjects
letterpress composing stick with loose metal typean open hand-set page proof with column rulesa wooden quoin locking a type chasea type case draweran inked press platena galley of standing matter
usage
One full-bleed landing hero in the Lampblack technique, with quiet negative space reserved for the overlay. Imagery is fine-art ink, never used for the thumbnail (the embodiment is).
katagami spec
# Chase

## Philosophy

Chase treats software like a hand-set page locked in its iron frame. A warm bone-paper field carries dense lampblack ink, ruled grids, captioned panels, and authored marginalia. A chase is the rigid frame a compositor locks a set page into with quoins so the whole form lifts as one; that lockup is the one ownable idea — content is set, then locked, every panel a captioned block aligned to black rules, the whole spread lifting as one rigid object. Ink carries the decisions; colour is reserved for one mark at a time.

### Values

- Ink as authority — decisions are set in dense black, never merely tinted.
- The page is the interface — columns, gutters, captions, folios, and rules instead of floating app chrome.
- Line weight before colour — 4px decision strokes, 2px frames, 1px hairlines set order first.
- Two ink marks, no more — oxblood for one active correction, cobalt for one reference, like a proofreader's pencil.
- Restraint over ornament — large quiet paper zones; whitespace is margin, not absence.
- Fine-art tactility — generated paper grain and squared offset ink-shadows give material presence while controls stay precise.

### Anti-Values

- Generic SaaS cards with soft shadows, large radii, pastel washes, or glass.
- Defaulting to a white ground; leaving loose, unframed, uncaptioned content.
- Colour-only hierarchy, or a third and fourth accent crowding the two ink marks.
- Decorative doodles, fake hand-drawn scribbles, or symbol glyphs in copy.
- A single accent edge stamped on a card, nested cards, or navigation trapped in a pill bar.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F2EAD8` |
| surface | `#FBF4E2` |
| surface_2 | `#ECE2CC` |
| paper_white | `#FFFBEF` |
| text | `#14120C` |
| ink | `#0B0A06` |
| muted | `#5E584B` |
| faint | `#8C8472` |
| border | `#14120C` |
| accent | `#8A2024` |
| accent_strong | `#6E181B` |
| on_accent | `#FBF4E2` |
| cobalt | `#1E4E8C` |
| cobalt_strong | `#173C6C` |
| success | `#355C3A` |
| warning | `#9A6310` |
| error | `#8A2024` |
| info | `#1E4E8C` |

### Typography

- **Base Size**: 17px
- **Body Font**: Source Serif 4, Georgia, serif
- **Heading Font**: Libre Baskerville, Georgia, serif
- **Mono Font**: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace
- **Caption Font**: IBM Plex Mono, ui-monospace, monospace
- **Heading Weight**: 700
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Caption Letter Spacing**: 0.14em
- **Line Height**: 1.55
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap

### Radii

- **None**: 0
- **Sm**: 1px
- **Md**: 2px
- **Full**: 9999px

### Shadows

- **Sm**: 2px 2px 0 #0B0A06
- **Md**: 4px 4px 0 #0B0A06

### Spacing

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

### Surfaces

- **Bg Pattern**: generated paper grain (layered radial + linear gradients, no image)
- **Card Style**: Flat warm paper panels with visible grain, squared 2px corners, black editorial rules, emphasis via a 4px top stroke and an offset registration ink-shadow.
- **Treatment**: paper

### Borders

- **Default Width**: 1px
- **Frame Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Borders are printed rules: 1px hairlines divide reading, 2px lines frame decisions, 4px strokes mark primary editorial emphasis. Black, never grey; never a single decorative accent edge.

### Motion

- **Duration**: 150ms
- **Easing**: cubic-bezier(0.2, 0, 0.1, 1)
- **Philosophy**: Deliberate, near print-static — the settled page is the default and shows with no JavaScript; JS adds a one-shot CSS entrance that always finishes on its own. Respects prefers-reduced-motion.

## Rules

### Composition

Compose on an editorial grid before any component decisions: a narrow folio rail, a main authored column, and a marginalia annotation column, aligned to black vertical rules; let at least one quadrant stay quiet paper. Prefer horizontal rules, vertical gutters, and caption tabs over rounded cards. Iconography is scarce and text-led.

### Hierarchy

Hierarchy runs from 4px black decision strokes to 2px frames to 1px hairline rules, then typography. Headings use Libre Baskerville with tight leading; captions and data use IBM Plex Mono uppercase; body uses Source Serif 4. Oxblood marks one active item and cobalt one reference — never decorate multiple unrelated elements.

### Density

Compact inside panels (8-16px internal rhythm), spacious between them (48-96px desktop gutters). A screen reads like an edited broadsheet proof: precise islands of information on a quiet paper ground.

### Signature

The lockup: every major panel carries a uppercase-mono caption tab pinned to its top-left, started by a 4px ink stub and carried to the gutter by a 1px hairline; emphasis panels add a 4px top stroke and a squared offset ink-shadow; the folio/main/marginalia spread collapses to one ruled column on mobile.

## Layout

### Grid

Desktop uses a max-width ~1320px spread: a ~72px folio rail, a 1fr main column, and a ~320px marginalia column separated by 24-32px gutters and black vertical rules. Panels use internal editorial subgrids when needed.

### Whitespace

Whitespace is paper margin, not generic emptiness. Generous outer padding (24px mobile, 40px tablet, 64-96px desktop) with deliberate quiet zones beside dense captioned panels.

### Density

Compact editorial density: high information per panel with strict captioning, offset by large paper margins so the interface stays calm and literary.

### Responsive

390px: one ruled column, 16-24px gutters, 44px+ controls, captions stay visible, decorative rail hidden. 768px: two columns with marginalia beneath. 1440px+: full folio/main/margin spread; only the hero spans 100vw, contained content caps and centres.

### Breakpoints

- **Mobile**: <=640px
- **Tablet**: 641-1024px
- **Desktop**: >=1025px

## Guidance

### Do

- Set the page on a warm paper ground with dense black ink before any accent.
- Give every panel an authored caption tab; write microcopy like proof notes.
- Build hierarchy with 4px / 2px / 1px black rules, then typography, then one ink mark.
- Reserve oxblood for one active state and cobalt for one reference; keep quiet paper zones.
- Use squared 2px corners and offset ink-shadows for printed materiality.
- Style every form control explicitly in the ruled-paper grammar — no browser defaults showing.

### Don't

- Do not default to white or use pastel washes, soft shadows, large radii, or glass.
- Do not put a single accent edge on a card, nest cards, or trap navigation in a pill bar.
- Do not rely on colour alone for hierarchy or add a third and fourth accent.
- Do not add decorative doodles, fake hand-drawn icons, or symbol glyphs in copy.
- Do not centre every block; preserve editorial asymmetry and quiet margins.

### Accessibility

Maintain high contrast between black ink and warm paper. Accent states also carry border weight and a label, never colour alone. Body text 17px+, table rows 14.5px+, controls 44px+ tall on touch, focus states a visible 2px or 4px ink ring with offset. Respect prefers-reduced-motion.

## Imagery Direction

### Pairs With

lampblack

### Summary

Dense fine-art lampblack ink drawing on a warm bone-paper field with visible fiber grain: loaded sumi-e brush masses with crisp pen-and-nib contour and cross-hatching, one small restrained accent ink mark, severe editorial restraint and generous quiet negative space. Subjects come from the composing room and the printed page.

### Subjects

- letterpress composing stick with loose metal type
- an open hand-set page proof with column rules
- a wooden quoin locking a type chase
- a type case drawer
- an inked press platen
- a galley of standing matter

### Usage

One full-bleed landing hero in the Lampblack technique, with quiet negative space reserved for the overlay. Imagery is fine-art ink, never used for the thumbnail (the embodiment is).
DESIGN.md
---
version: "alpha"
name: "Chase"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F2EAD8"
  surface: "#FBF4E2"
  surface_2: "#ECE2CC"
  paper_white: "#FFFBEF"
  text: "#14120C"
  ink: "#0B0A06"
  muted: "#5E584B"
  faint: "#8C8472"
  border: "#14120C"
  accent: "#8A2024"
  accent_strong: "#6E181B"
  on_accent: "#FBF4E2"
  cobalt: "#1E4E8C"
  cobalt_strong: "#173C6C"
  success: "#355C3A"
  warning: "#9A6310"
  error: "#8A2024"
  info: "#1E4E8C"
typography:
  headline-lg:
    fontFamily: "Libre Baskerville, Georgia, serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Libre Baskerville, Georgia, serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Source Serif 4, Georgia, serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "1px"
  md: "2px"
  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_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-paper_white:
    backgroundColor: "{colors.paper_white}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-ink:
    backgroundColor: "{colors.ink}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-faint:
    backgroundColor: "{colors.faint}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_strong:
    backgroundColor: "{colors.accent_strong}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-cobalt:
    backgroundColor: "{colors.cobalt}"
  color-reference-cobalt_strong:
    backgroundColor: "{colors.cobalt_strong}"
  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: "#ffffff"
    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"
---

# Chase

## Overview

Chase treats software like a hand-set page locked in its iron frame. A warm bone-paper field carries dense lampblack ink, ruled grids, captioned panels, and authored marginalia. A chase is the rigid frame a compositor locks a set page into with quoins so the whole form lifts as one; that lockup is the one ownable idea — content is set, then locked, every panel a captioned block aligned to black rules, the whole spread lifting as one rigid object. Ink carries the decisions; colour is reserved for one mark at a time.

### Values

- Ink as authority — decisions are set in dense black, never merely tinted.
- The page is the interface — columns, gutters, captions, folios, and rules instead of floating app chrome.
- Line weight before colour — 4px decision strokes, 2px frames, 1px hairlines set order first.
- Two ink marks, no more — oxblood for one active correction, cobalt for one reference, like a proofreader's pencil.
- Restraint over ornament — large quiet paper zones; whitespace is margin, not absence.
- Fine-art tactility — generated paper grain and squared offset ink-shadows give material presence while controls stay precise.

### Anti-Values

- Generic SaaS cards with soft shadows, large radii, pastel washes, or glass.
- Defaulting to a white ground; leaving loose, unframed, uncaptioned content.
- Colour-only hierarchy, or a third and fourth accent crowding the two ink marks.
- Decorative doodles, fake hand-drawn scribbles, or symbol glyphs in copy.
- A single accent edge stamped on a card, nested cards, or navigation trapped in a pill bar.

## 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 | `#F2EAD8` |
| surface | `#FBF4E2` |
| surface_2 | `#ECE2CC` |
| paper_white | `#FFFBEF` |
| text | `#14120C` |
| ink | `#0B0A06` |
| muted | `#5E584B` |
| faint | `#8C8472` |
| border | `#14120C` |
| accent | `#8A2024` |
| accent_strong | `#6E181B` |
| on_accent | `#FBF4E2` |
| cobalt | `#1E4E8C` |
| cobalt_strong | `#173C6C` |
| success | `#355C3A` |
| warning | `#9A6310` |
| error | `#8A2024` |
| info | `#1E4E8C` |

## Typography

- **Headline-Lg**: Libre Baskerville, Georgia, serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Libre Baskerville, Georgia, serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Source Serif 4, Georgia, serif, 17px, weight 400, line-height 1.55.
- **Label-Md**: IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace, 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 uses a max-width ~1320px spread: a ~72px folio rail, a 1fr main column, and a ~320px marginalia column separated by 24-32px gutters and black vertical rules. Panels use internal editorial subgrids when needed.

### Whitespace

Whitespace is paper margin, not generic emptiness. Generous outer padding (24px mobile, 40px tablet, 64-96px desktop) with deliberate quiet zones beside dense captioned panels.

### Density

Compact editorial density: high information per panel with strict captioning, offset by large paper margins so the interface stays calm and literary.

### Responsive

390px: one ruled column, 16-24px gutters, 44px+ controls, captions stay visible, decorative rail hidden. 768px: two columns with marginalia beneath. 1440px+: full folio/main/margin spread; only the hero spans 100vw, contained content caps and centres.

### Breakpoints

- **Mobile**: <=640px
- **Tablet**: 641-1024px
- **Desktop**: >=1025px

## Elevation & Depth

### Shadows

- **Sm**: 2px 2px 0 #0B0A06
- **Md**: 4px 4px 0 #0B0A06

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `1px`
- **Md**: `2px`
- **Full**: `9999px`

### Surfaces

- **Bg Pattern**: generated paper grain (layered radial + linear gradients, no image)
- **Card Style**: Flat warm paper panels with visible grain, squared 2px corners, black editorial rules, emphasis via a 4px top stroke and an offset registration ink-shadow.
- **Treatment**: paper

### Borders

- **Default Width**: 1px
- **Frame Width**: 2px
- **Accent Width**: 4px
- **Style**: solid
- **Character**: Borders are printed rules: 1px hairlines divide reading, 2px lines frame decisions, 4px strokes mark primary editorial emphasis. Black, never grey; never a single decorative accent edge.

## Components

### Composition

Compose on an editorial grid before any component decisions: a narrow folio rail, a main authored column, and a marginalia annotation column, aligned to black vertical rules; let at least one quadrant stay quiet paper. Prefer horizontal rules, vertical gutters, and caption tabs over rounded cards. Iconography is scarce and text-led.

### Hierarchy

Hierarchy runs from 4px black decision strokes to 2px frames to 1px hairline rules, then typography. Headings use Libre Baskerville with tight leading; captions and data use IBM Plex Mono uppercase; body uses Source Serif 4. Oxblood marks one active item and cobalt one reference — never decorate multiple unrelated elements.

### Density

Compact inside panels (8-16px internal rhythm), spacious between them (48-96px desktop gutters). A screen reads like an edited broadsheet proof: precise islands of information on a quiet paper ground.

### Signature

The lockup: every major panel carries a uppercase-mono caption tab pinned to its top-left, started by a 4px ink stub and carried to the gutter by a 1px hairline; emphasis panels add a 4px top stroke and a squared offset ink-shadow; the folio/main/marginalia spread collapses to one ruled column on mobile.

## 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-019efac2-e57c-7310-8af0-b777b1af94d5/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 Set the page on a warm paper ground with dense black ink before any accent.
- Do Give every panel an authored caption tab; write microcopy like proof notes.
- Do Build hierarchy with 4px / 2px / 1px black rules, then typography, then one ink mark.
- Do Reserve oxblood for one active state and cobalt for one reference; keep quiet paper zones.
- Do Use squared 2px corners and offset ink-shadows for printed materiality.
- Do Style every form control explicitly in the ruled-paper grammar — no browser defaults showing.
- Don't Do not default to white or use pastel washes, soft shadows, large radii, or glass.
- Don't Do not put a single accent edge on a card, nest cards, or trap navigation in a pill bar.
- Don't Do not rely on colour alone for hierarchy or add a third and fourth accent.
- Don't Do not add decorative doodles, fake hand-drawn icons, or symbol glyphs in copy.
- Don't Do not centre every block; preserve editorial asymmetry and quiet margins.

### Accessibility

Maintain high contrast between black ink and warm paper. Accent states also carry border weight and a label, never colour alone. Body text 17px+, table rows 14.5px+, controls 44px+ tall on touch, focus states a visible 2px or 4px ink ring with offset. Respect prefers-reduced-motion.

## Imagery Direction

### Pairs With

lampblack

### Summary

Dense fine-art lampblack ink drawing on a warm bone-paper field with visible fiber grain: loaded sumi-e brush masses with crisp pen-and-nib contour and cross-hatching, one small restrained accent ink mark, severe editorial restraint and generous quiet negative space. Subjects come from the composing room and the printed page.

### Subjects

- letterpress composing stick with loose metal type
- an open hand-set page proof with column rules
- a wooden quoin locking a type chase
- a type case drawer
- an inked press platen
- a galley of standing matter

### Usage

One full-bleed landing hero in the Lampblack technique, with quiet negative space reserved for the overlay. Imagery is fine-art ink, never used for the thumbnail (the embodiment is).
shadcn/ui theme
```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chase",
  "type": "registry:theme",
  "title": "Chase shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F2EAD8",
      "foreground": "#14120C",
      "card": "#FBF4E2",
      "card-foreground": "#14120C",
      "popover": "#FBF4E2",
      "popover-foreground": "#14120C",
      "primary": "#14120C",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5E584B",
      "muted-foreground": "#14120C",
      "accent": "#8A2024",
      "accent-foreground": "#ffffff",
      "destructive": "#8A2024",
      "border": "#14120C",
      "input": "#14120C",
      "ring": "#8A2024",
      "chart-1": "#14120C",
      "chart-2": "#f4f4f5",
      "chart-3": "#8A2024",
      "chart-4": "#355C3A",
      "chart-5": "#9A6310",
      "sidebar": "#FBF4E2",
      "sidebar-foreground": "#14120C",
      "sidebar-primary": "#14120C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1E4E8C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#14120C",
      "sidebar-ring": "#8A2024",
      "radius": "2px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#14120C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#8A2024",
      "accent-foreground": "#ffffff",
      "destructive": "#8A2024",
      "border": "#303642",
      "input": "#303642",
      "ring": "#8A2024",
      "chart-1": "#14120C",
      "chart-2": "#f4f4f5",
      "chart-3": "#8A2024",
      "chart-4": "#355C3A",
      "chart-5": "#9A6310",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#14120C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#8A2024",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#8A2024",
      "radius": "2px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efac2-e57c-7310-8af0-b777b1af94d5",
    "slug": "chase",
    "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_strong",
        "bg",
        "border",
        "cobalt",
        "cobalt_strong",
        "error",
        "faint",
        "info",
        "ink",
        "muted",
        "on_accent",
        "paper_white",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "caption_font",
        "caption_letter_spacing",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "full",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "frame_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```
in the wild

embodiments

bespoke marketing landingopen full page ↗
landing · chase
DESIGN.md

at a glance

Typography

headline-lgLibre Baskerville · 33px · 700

The quick brown fox jumps

headline-mdLibre Baskerville · 27px · 600

The quick brown fox jumps

body-mdSource Serif 4 · 17px · 400

The quick brown fox jumps

label-mdIBM Plex Mono · 12px · 600

The quick brown fox jumps

shadcn/ui

implementation kit

built with

Agent-generated

produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by gpt-image-2

remix lane

try a remix

Keep Chaseand 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
Chase
Palette
Art style
Landing Page
live preview · recolored + filled
lineage

Family

1 descendant
related

More like this