Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
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 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.
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.
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.
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 is paper margin, not generic emptiness. Generous outer padding (24px mobile, 40px tablet, 64-96px desktop) with deliberate quiet zones beside dense captioned panels.
Compact editorial density: high information per panel with strict captioning, offset by large paper margins so the interface stays calm and literary.
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.
lampblack
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.
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).
# 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).
---
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).
```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"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Agent-generated
produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by gpt-image-2
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.
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.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--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;
}
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 ChaseShadcnKit() {
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">Chase</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>
);
}
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "chase",
"type": "registry:theme",
"title": "Chase \u2014 Lockup",
"description": "Warm-paper editorial ink: bone-paper ground, dense lampblack rules, squared corners, offset ink-shadows, oxblood + cobalt marks. Honors the language's borders, radius, and material.",
"cssVars": {
"theme": {
"font-sans": "Source Serif 4, Georgia, serif",
"font-serif": "Libre Baskerville, Georgia, serif",
"font-mono": "IBM Plex Mono, ui-monospace, Menlo, monospace",
"radius": "2px"
},
"light": {
"background": "#F2EAD8",
"foreground": "#14120C",
"card": "#FBF4E2",
"card-foreground": "#14120C",
"popover": "#FFFBEF",
"popover-foreground": "#14120C",
"primary": "#8A2024",
"primary-foreground": "#FBF4E2",
"secondary": "#ECE2CC",
"secondary-foreground": "#14120C",
"muted": "#ECE2CC",
"muted-foreground": "#5E584B",
"accent": "#1E4E8C",
"accent-foreground": "#FBF4E2",
"destructive": "#8A2024",
"destructive-foreground": "#FBF4E2",
"border": "#14120C",
"input": "#14120C",
"ring": "#8A2024",
"chart-1": "#0B0A06",
"chart-2": "#8A2024",
"chart-3": "#1E4E8C",
"chart-4": "#9A6310",
"chart-5": "#355C3A",
"radius": "2px"
},
"dark": {
"background": "#14120C",
"foreground": "#F2EAD8",
"card": "#1C1A12",
"card-foreground": "#F2EAD8",
"popover": "#1C1A12",
"popover-foreground": "#F2EAD8",
"primary": "#C9595C",
"primary-foreground": "#14120C",
"secondary": "#26231A",
"secondary-foreground": "#F2EAD8",
"muted": "#26231A",
"muted-foreground": "#B6AE99",
"accent": "#6F97C8",
"accent-foreground": "#14120C",
"destructive": "#C9595C",
"destructive-foreground": "#14120C",
"border": "#3A362A",
"input": "#3A362A",
"ring": "#C9595C",
"chart-1": "#F2EAD8",
"chart-2": "#C9595C",
"chart-3": "#6F97C8",
"chart-4": "#C99A4A",
"chart-5": "#7FA585",
"radius": "2px"
}
}
}# Chase shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efac2-e57c-7310-8af0-b777b1af94d5`
Slug: `chase`
## Intent
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.
## 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": "#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"
}
## Visual character to preserve
- Make the source language's structural identity visible in every component state.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"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/chase/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: 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.
- Do not: 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.
## 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 ChaseShadcnKit() {
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">Chase</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 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"
}
}
{
"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-019efac2-e57c-7310-8af0-b777b1af94d5",
"name": "Chase",
"slug": "chase"
},
"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": [],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"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": "Chase 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": [
"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."
],
"dont": [
"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."
]
}
}