design language·editorial-ink-fine-art

Editorial Ink Fine Art

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

Published

Download DESIGN.md

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

the spec

specification

philosophy

summary

Editorial Ink Fine Art treats the interface as a curated printed page where drawing is the primary intelligence. It uses decisive black line, handmade evidence, high-contrast silhouette, paper-toned space, and selective oxidized-red editorial annotation to turn ordinary product states into reader-facing visual commentary. The language is not a sketchbook skin: each mark must carry a conceptual job, each panel must feel set on tactile paper, and text must negotiate with image rather than simply caption it.

values

Decisive line as structureVisible hand with editorial disciplineConcept before ornamentPaper as active spaceImage-text tensionRestrained accent authority

anti-values

×Generic sketch aesthetics with casual doodles, wobbly icons, or faux creative clutter.×Sterile monochrome minimalism that removes paper tactility and handmade evidence.×Decorative ink splatter, random stains, or distressed effects not tied to meaning.×Stock illustration softness, rounded mascot forms, or pastel friendliness.×Dense UI chrome that crowds out the breathing room of an editorial page.

tokens

borders4 items

accent width: 4px
character: decisive black editorial rulework with occasional doubled, offset, or hand-notched edges to mimic ink registration
default width: 2px
style: solid

colors19 items

accent

#9B2F24

background

#F4EBDD

bone_paper

#F4EBDD

border

#171412

charcoal_black

#111111

error

#9B2F24

info

#243E59

ink_blue_black

#1B2224

muted

#746D62

pale_oxide

#C45F50

paper_shadow

#D8CBB7

primary

#111111

secondary

#1B2224

soft_graphite

#403B35

success

#2F6B52

surface

#FFF8EA

text

#141210

warm_ivory

#FFF8EA

warning

#B77822

motion3 items

duration: 180ms
easing: cubic-bezier(0.2, 0.7, 0.2, 1)
philosophy: deliberate and print-like: small shifts, underline draws, and pressed paper movements rather than bouncy digital animation

radii3 items

full: 9999px
none: 0px
primary: 0px

shadows3 items

lg: 14px 18px 0 rgba(23,20,18,0.12)
md: 7px 7px 0 rgba(23,20,18,0.18)
sm: 3px 3px 0 #171412

spacing2 items

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

surfaces3 items

bg pattern: noise
card style: warm ivory cards with ink-line frames, offset registration shadows, and subtle paper grain instead of glossy depth
treatment: paper

typography12 items

base size: 16px
body font: Source Sans 3
display letter spacing: -0.035em
display line height: 1.12
google fonts url: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap
heading font: Cormorant Garamond
letter spacing: -0.02em
line height: 1.55
mono font: IBM Plex Mono
scale ratio: 1.25
sizes: body 16px·caption 12px·h1 58px·h2 34px·h3 25px·lead 19px
weights: bold 700·medium 500·regular 400·semibold 600

rules

composition

Use a publication spread rather than a neutral app grid: oversized title blocks, a dominant drawn figure or silhouette, one strong left or top folio rail, and content cards arranged as editorial arguments. Prefer asymmetry, strong vertical rules, and image-text overlap. Keep red marks rare and placed as annotation, not decoration. Let large empty paper areas remain empty. Use black masses to anchor the page and thin hatching to create secondary texture.

density

Moderate editorial density: components may be compact inside a card, but the canvas must retain wide paper margins and clear pauses between arguments. Never fill every column simply because space exists.

hierarchy

Lead with a high-contrast serif headline, then a folio label or deck in monospace, then compact sans-serif body copy. Important actions receive drawn red underlines or circled counters. Secondary controls use black outline buttons and paper-fill fields. Data is framed like editorial evidence: numbers are large, captions are small, and comments sit in marginal note blocks.

signature patterns

Every major panel uses an ink-frame pseudo-element: a 2px solid black border plus an offset second border or shadow to create imperfect hand registration.Interactive selections use oxidized-red editorial annotation: drawn underline, side rule, circled badge, or pin mark built with borders and pseudo-elements.Hero and feature areas include black silhouette blocks with white contour lines and repeating hatch gradients to make drawing the primary visual language.Section headers combine a monospace folio label, a serif title, and a short horizontal ink rule that intentionally intrudes into nearby image or copy.Paper surfaces use layered radial/linear noise gradients and no glossy blur, so depth comes from ink offsets and printed-stock texture.

layout

breakpoints

Mobile <= 640px becomes a single-column reading stack with full-width controls; tablet 641-1024px uses a 6-column grid and stacks the folio rail above content; desktop >= 1025px uses the full 12-column spread.

density

Editorial, not dashboard-dense: one dominant concept image, three to six evidence panels, and generous gutters. UI details live within framed cards while the page keeps breathing room.

grid

Desktop uses a 12-column max-width grid at 1320px with 24px gutters, a narrow folio rail, and asymmetrical spans (5/7, 4/8, 3/6/3). Cards align to column edges but may overlap imagery by 16-32px.

whitespace

Whitespace should feel like margins in an art magazine: broad, warm, and intentional. Leave at least 48px between major arguments on desktop and 24px on mobile; avoid boxed-in catalog sections.

guidance

Use real black lines as layout architecture: borders, rules, frames, and focus outlines should be visible and purposeful.
Make at least one drawn or silhouette element carry the central concept of the screen.
Keep the accent red scarce and meaningful for active, urgent, edited, or selected states.
Apply paper texture subtly across the background and cards rather than adding random stains.
Pair serif headlines with concise sans body copy and monospace labels for folio/editorial metadata.
Use offset border shadows and slight registration shifts to suggest a visible hand without losing precision.
Write microcopy as curated editorial language: intelligent, specific, and reader-facing.
Maintain high contrast for all text and controls against ivory or black surfaces.

avoid

Do not use generic doodle icons, casual scribbles, or playful sketch UI clichés.
Do not add decorative splatter, drips, stains, or grunge unless the content explicitly calls for them.
Do not reduce the language to sterile black-and-white minimalism with no paper texture or mark-making.
Do not overuse red; if everything is annotated, nothing is editorially important.
Do not round every corner or use soft stock-illustration friendliness.
Do not center every section; asymmetry and tension are essential.
Do not use glossy gradients, glassmorphism, neon colors, or low-contrast gray UI chrome.

katagami spec

# Editorial Ink Fine Art

## Philosophy

### Values

- {"description":"Black ink lines establish hierarchy, borders, dividers, focus states, and iconography; line weight changes are semantic rather than decorative.","name":"Decisive line as structure"}
- {"description":"Irregularity appears in hatching, underline offsets, and drawn masks, but the grid remains controlled and publication-grade.","name":"Visible hand with editorial discipline"}
- {"description":"Illustration, silhouette, and annotation explain the content or argument; no splatter, flourish, or doodle is allowed without a narrative purpose.","name":"Concept before ornament"}
- {"description":"Warm ivory negative space is a compositional material with subtle fiber texture, wide margins, and quiet contrast against ink.","name":"Paper as active space"}
- {"description":"Headlines, notes, captions, and drawn figures overlap or bracket each other to create an editorial argument rather than a neutral dashboard.","name":"Image-text tension"}
- {"description":"Oxidized red appears only for edits, alerts, selections, and marginalia so it feels curated and consequential.","name":"Restrained accent authority"}

### Anti-Values

- Generic sketch aesthetics with casual doodles, wobbly icons, or faux creative clutter.
- Sterile monochrome minimalism that removes paper tactility and handmade evidence.
- Decorative ink splatter, random stains, or distressed effects not tied to meaning.
- Stock illustration softness, rounded mascot forms, or pastel friendliness.
- Dense UI chrome that crowds out the breathing room of an editorial page.

### Visual Character

- Containers use black ink-line frames with uneven double-edge accents made from pseudo-elements, including slight rotation or offset to show handmade registration.
- Large warm ivory paper fields carry a subtle fiber/noise background and generous margins so negative space reads as tactile editorial stock.
- Primary imagery and key cards use high-contrast black silhouette blocks with white cutout line drawing and controlled hatching patterns.
- Section labels, alerts, active tabs, and selected controls use sparse oxidized-red annotation marks such as underlines, pins, margin rules, and circled counters.
- Typography pairs sharp editorial serif headlines with humanist sans body text and small monospace folio labels, arranged with deliberate image-text overlap.

## Tokens

### Borders

- **Accent Width**: 4px
- **Character**: decisive black editorial rulework with occasional doubled, offset, or hand-notched edges to mimic ink registration
- **Default Width**: 2px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#9B2F24` |
| background | `#F4EBDD` |
| bone_paper | `#F4EBDD` |
| border | `#171412` |
| charcoal_black | `#111111` |
| error | `#9B2F24` |
| info | `#243E59` |
| ink_blue_black | `#1B2224` |
| muted | `#746D62` |
| pale_oxide | `#C45F50` |
| paper_shadow | `#D8CBB7` |
| primary | `#111111` |
| secondary | `#1B2224` |
| soft_graphite | `#403B35` |
| success | `#2F6B52` |
| surface | `#FFF8EA` |
| text | `#141210` |
| warm_ivory | `#FFF8EA` |
| warning | `#B77822` |

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2, 0.7, 0.2, 1)
- **Philosophy**: deliberate and print-like: small shifts, underline draws, and pressed paper movements rather than bouncy digital animation

### Radii

- **Full**: 9999px
- **None**: 0px
- **Primary**: 0px

### Shadows

- **Lg**: 14px 18px 0 rgba(23,20,18,0.12)
- **Md**: 7px 7px 0 rgba(23,20,18,0.18)
- **Sm**: 3px 3px 0 #171412

### Spacing

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

### Surfaces

- **Bg Pattern**: noise
- **Card Style**: warm ivory cards with ink-line frames, offset registration shadows, and subtle paper grain instead of glossy depth
- **Treatment**: paper

### Typography

- **Base Size**: 16px
- **Body Font**: Source Sans 3
- **Display Letter Spacing**: -0.035em
- **Display Line Height**: 1.12
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap
- **Heading Font**: Cormorant Garamond
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.25
- **Sizes**: {"body":"16px","caption":"12px","h1":"58px","h2":"34px","h3":"25px","lead":"19px"}
- **Weights**: {"bold":700,"medium":500,"regular":400,"semibold":600}

## Rules

### Composition

Use a publication spread rather than a neutral app grid: oversized title blocks, a dominant drawn figure or silhouette, one strong left or top folio rail, and content cards arranged as editorial arguments. Prefer asymmetry, strong vertical rules, and image-text overlap. Keep red marks rare and placed as annotation, not decoration. Let large empty paper areas remain empty. Use black masses to anchor the page and thin hatching to create secondary texture.

### Density

Moderate editorial density: components may be compact inside a card, but the canvas must retain wide paper margins and clear pauses between arguments. Never fill every column simply because space exists.

### Hierarchy

Lead with a high-contrast serif headline, then a folio label or deck in monospace, then compact sans-serif body copy. Important actions receive drawn red underlines or circled counters. Secondary controls use black outline buttons and paper-fill fields. Data is framed like editorial evidence: numbers are large, captions are small, and comments sit in marginal note blocks.

### Signature Patterns

- Every major panel uses an ink-frame pseudo-element: a 2px solid black border plus an offset second border or shadow to create imperfect hand registration.
- Interactive selections use oxidized-red editorial annotation: drawn underline, side rule, circled badge, or pin mark built with borders and pseudo-elements.
- Hero and feature areas include black silhouette blocks with white contour lines and repeating hatch gradients to make drawing the primary visual language.
- Section headers combine a monospace folio label, a serif title, and a short horizontal ink rule that intentionally intrudes into nearby image or copy.
- Paper surfaces use layered radial/linear noise gradients and no glossy blur, so depth comes from ink offsets and printed-stock texture.

## Layout

### Breakpoints

Mobile <= 640px becomes a single-column reading stack with full-width controls; tablet 641-1024px uses a 6-column grid and stacks the folio rail above content; desktop >= 1025px uses the full 12-column spread.

### Density

Editorial, not dashboard-dense: one dominant concept image, three to six evidence panels, and generous gutters. UI details live within framed cards while the page keeps breathing room.

### Grid

Desktop uses a 12-column max-width grid at 1320px with 24px gutters, a narrow folio rail, and asymmetrical spans (5/7, 4/8, 3/6/3). Cards align to column edges but may overlap imagery by 16-32px.

### Whitespace

Whitespace should feel like margins in an art magazine: broad, warm, and intentional. Leave at least 48px between major arguments on desktop and 24px on mobile; avoid boxed-in catalog sections.

## Guidance

### Do

- Use real black lines as layout architecture: borders, rules, frames, and focus outlines should be visible and purposeful.
- Make at least one drawn or silhouette element carry the central concept of the screen.
- Keep the accent red scarce and meaningful for active, urgent, edited, or selected states.
- Apply paper texture subtly across the background and cards rather than adding random stains.
- Pair serif headlines with concise sans body copy and monospace labels for folio/editorial metadata.
- Use offset border shadows and slight registration shifts to suggest a visible hand without losing precision.
- Write microcopy as curated editorial language: intelligent, specific, and reader-facing.
- Maintain high contrast for all text and controls against ivory or black surfaces.

### Don't

- Do not use generic doodle icons, casual scribbles, or playful sketch UI clichés.
- Do not add decorative splatter, drips, stains, or grunge unless the content explicitly calls for them.
- Do not reduce the language to sterile black-and-white minimalism with no paper texture or mark-making.
- Do not overuse red; if everything is annotated, nothing is editorially important.
- Do not round every corner or use soft stock-illustration friendliness.
- Do not center every section; asymmetry and tension are essential.
- Do not use glossy gradients, glassmorphism, neon colors, or low-contrast gray UI chrome.

### Accessibility

Maintain WCAG AA contrast on ivory and black surfaces; use red only with shape, underline, text, or icon cues; keep touch targets at least 44px; preserve focus outlines as 2px black or red annotation rings; avoid relying on texture for meaning.

### Usage Context

Best for editorial tools, cultural magazines, research notebooks, critique platforms, curatorial dashboards, publishing workflows, portfolio essays, and products where interpretation and commentary are part of the experience.

DESIGN.md

---
version: "alpha"
name: "Editorial Ink Fine Art"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#9B2F24"
  background: "#F4EBDD"
  bone_paper: "#F4EBDD"
  border: "#171412"
  charcoal_black: "#111111"
  error: "#9B2F24"
  info: "#243E59"
  ink_blue_black: "#1B2224"
  muted: "#746D62"
  pale_oxide: "#C45F50"
  paper_shadow: "#D8CBB7"
  primary: "#111111"
  secondary: "#1B2224"
  soft_graphite: "#403B35"
  success: "#2F6B52"
  surface: "#FFF8EA"
  text: "#141210"
  warm_ivory: "#FFF8EA"
  warning: "#B77822"
typography:
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Source Sans 3"
    fontSize: "16px"
    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:
  full: "9999px"
  none: "0px"
  primary: "0px"
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-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-bone_paper:
    backgroundColor: "{colors.bone_paper}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-charcoal_black:
    backgroundColor: "{colors.charcoal_black}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-ink_blue_black:
    backgroundColor: "{colors.ink_blue_black}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-pale_oxide:
    backgroundColor: "{colors.pale_oxide}"
  color-reference-paper_shadow:
    backgroundColor: "{colors.paper_shadow}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-soft_graphite:
    backgroundColor: "{colors.soft_graphite}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warm_ivory:
    backgroundColor: "{colors.warm_ivory}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Editorial Ink Fine Art

## Overview

Editorial Ink Fine Art treats the interface as a curated printed page where drawing is the primary intelligence. It uses decisive black line, handmade evidence, high-contrast silhouette, paper-toned space, and selective oxidized-red editorial annotation to turn ordinary product states into reader-facing visual commentary. The language is not a sketchbook skin: each mark must carry a conceptual job, each panel must feel set on tactile paper, and text must negotiate with image rather than simply caption it.

### Values

- {"description":"Black ink lines establish hierarchy, borders, dividers, focus states, and iconography; line weight changes are semantic rather than decorative.","name":"Decisive line as structure"}
- {"description":"Irregularity appears in hatching, underline offsets, and drawn masks, but the grid remains controlled and publication-grade.","name":"Visible hand with editorial discipline"}
- {"description":"Illustration, silhouette, and annotation explain the content or argument; no splatter, flourish, or doodle is allowed without a narrative purpose.","name":"Concept before ornament"}
- {"description":"Warm ivory negative space is a compositional material with subtle fiber texture, wide margins, and quiet contrast against ink.","name":"Paper as active space"}
- {"description":"Headlines, notes, captions, and drawn figures overlap or bracket each other to create an editorial argument rather than a neutral dashboard.","name":"Image-text tension"}
- {"description":"Oxidized red appears only for edits, alerts, selections, and marginalia so it feels curated and consequential.","name":"Restrained accent authority"}

### Anti-Values

- Generic sketch aesthetics with casual doodles, wobbly icons, or faux creative clutter.
- Sterile monochrome minimalism that removes paper tactility and handmade evidence.
- Decorative ink splatter, random stains, or distressed effects not tied to meaning.
- Stock illustration softness, rounded mascot forms, or pastel friendliness.
- Dense UI chrome that crowds out the breathing room of an editorial page.

### Visual Character

- Containers use black ink-line frames with uneven double-edge accents made from pseudo-elements, including slight rotation or offset to show handmade registration.
- Large warm ivory paper fields carry a subtle fiber/noise background and generous margins so negative space reads as tactile editorial stock.
- Primary imagery and key cards use high-contrast black silhouette blocks with white cutout line drawing and controlled hatching patterns.
- Section labels, alerts, active tabs, and selected controls use sparse oxidized-red annotation marks such as underlines, pins, margin rules, and circled counters.
- Typography pairs sharp editorial serif headlines with humanist sans body text and small monospace folio labels, arranged with deliberate image-text overlap.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| accent | `#9B2F24` |
| background | `#F4EBDD` |
| bone_paper | `#F4EBDD` |
| border | `#171412` |
| charcoal_black | `#111111` |
| error | `#9B2F24` |
| info | `#243E59` |
| ink_blue_black | `#1B2224` |
| muted | `#746D62` |
| pale_oxide | `#C45F50` |
| paper_shadow | `#D8CBB7` |
| primary | `#111111` |
| secondary | `#1B2224` |
| soft_graphite | `#403B35` |
| success | `#2F6B52` |
| surface | `#FFF8EA` |
| text | `#141210` |
| warm_ivory | `#FFF8EA` |
| warning | `#B77822` |

## Typography

- **Headline-Lg**: Cormorant Garamond, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: Source Sans 3, 16px, 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`

### Breakpoints

Mobile <= 640px becomes a single-column reading stack with full-width controls; tablet 641-1024px uses a 6-column grid and stacks the folio rail above content; desktop >= 1025px uses the full 12-column spread.

### Density

Editorial, not dashboard-dense: one dominant concept image, three to six evidence panels, and generous gutters. UI details live within framed cards while the page keeps breathing room.

### Grid

Desktop uses a 12-column max-width grid at 1320px with 24px gutters, a narrow folio rail, and asymmetrical spans (5/7, 4/8, 3/6/3). Cards align to column edges but may overlap imagery by 16-32px.

### Whitespace

Whitespace should feel like margins in an art magazine: broad, warm, and intentional. Leave at least 48px between major arguments on desktop and 24px on mobile; avoid boxed-in catalog sections.

## Elevation & Depth

### Shadows

- **Lg**: 14px 18px 0 rgba(23,20,18,0.12)
- **Md**: 7px 7px 0 rgba(23,20,18,0.18)
- **Sm**: 3px 3px 0 #171412

## Shapes

### Rounded

- **Full**: `9999px`
- **None**: `0px`
- **Primary**: `0px`

### Surfaces

- **Bg Pattern**: noise
- **Card Style**: warm ivory cards with ink-line frames, offset registration shadows, and subtle paper grain instead of glossy depth
- **Treatment**: paper

### Borders

- **Accent Width**: 4px
- **Character**: decisive black editorial rulework with occasional doubled, offset, or hand-notched edges to mimic ink registration
- **Default Width**: 2px
- **Style**: solid

## Components

### Composition

Use a publication spread rather than a neutral app grid: oversized title blocks, a dominant drawn figure or silhouette, one strong left or top folio rail, and content cards arranged as editorial arguments. Prefer asymmetry, strong vertical rules, and image-text overlap. Keep red marks rare and placed as annotation, not decoration. Let large empty paper areas remain empty. Use black masses to anchor the page and thin hatching to create secondary texture.

### Density

Moderate editorial density: components may be compact inside a card, but the canvas must retain wide paper margins and clear pauses between arguments. Never fill every column simply because space exists.

### Hierarchy

Lead with a high-contrast serif headline, then a folio label or deck in monospace, then compact sans-serif body copy. Important actions receive drawn red underlines or circled counters. Secondary controls use black outline buttons and paper-fill fields. Data is framed like editorial evidence: numbers are large, captions are small, and comments sit in marginal note blocks.

### Signature Patterns

- Every major panel uses an ink-frame pseudo-element: a 2px solid black border plus an offset second border or shadow to create imperfect hand registration.
- Interactive selections use oxidized-red editorial annotation: drawn underline, side rule, circled badge, or pin mark built with borders and pseudo-elements.
- Hero and feature areas include black silhouette blocks with white contour lines and repeating hatch gradients to make drawing the primary visual language.
- Section headers combine a monospace folio label, a serif title, and a short horizontal ink rule that intentionally intrudes into nearby image or copy.
- Paper surfaces use layered radial/linear noise gradients and no glossy blur, so depth comes from ink offsets and printed-stock texture.

## 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/editorial-ink-fine-art/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 Use real black lines as layout architecture: borders, rules, frames, and focus outlines should be visible and purposeful.
- Do Make at least one drawn or silhouette element carry the central concept of the screen.
- Do Keep the accent red scarce and meaningful for active, urgent, edited, or selected states.
- Do Apply paper texture subtly across the background and cards rather than adding random stains.
- Do Pair serif headlines with concise sans body copy and monospace labels for folio/editorial metadata.
- Do Use offset border shadows and slight registration shifts to suggest a visible hand without losing precision.
- Do Write microcopy as curated editorial language: intelligent, specific, and reader-facing.
- Do Maintain high contrast for all text and controls against ivory or black surfaces.
- Don't Do not use generic doodle icons, casual scribbles, or playful sketch UI clichés.
- Don't Do not add decorative splatter, drips, stains, or grunge unless the content explicitly calls for them.
- Don't Do not reduce the language to sterile black-and-white minimalism with no paper texture or mark-making.
- Don't Do not overuse red; if everything is annotated, nothing is editorially important.
- Don't Do not round every corner or use soft stock-illustration friendliness.
- Don't Do not center every section; asymmetry and tension are essential.
- Don't Do not use glossy gradients, glassmorphism, neon colors, or low-contrast gray UI chrome.

### Accessibility

Maintain WCAG AA contrast on ivory and black surfaces; use red only with shape, underline, text, or icon cues; keep touch targets at least 44px; preserve focus outlines as 2px black or red annotation rings; avoid relying on texture for meaning.

### Usage Context

Best for editorial tools, cultural magazines, research notebooks, critique platforms, curatorial dashboards, publishing workflows, portfolio essays, and products where interpretation and commentary are part of the experience.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "editorial-ink-fine-art",
  "type": "registry:theme",
  "title": "Editorial Ink Fine Art shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EBDD",
      "foreground": "#141210",
      "card": "#FFF8EA",
      "card-foreground": "#141210",
      "popover": "#FFF8EA",
      "popover-foreground": "#141210",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#1B2224",
      "secondary-foreground": "#ffffff",
      "muted": "#746D62",
      "muted-foreground": "#141210",
      "accent": "#9B2F24",
      "accent-foreground": "#ffffff",
      "destructive": "#9B2F24",
      "border": "#171412",
      "input": "#171412",
      "ring": "#9B2F24",
      "chart-1": "#111111",
      "chart-2": "#1B2224",
      "chart-3": "#9B2F24",
      "chart-4": "#2F6B52",
      "chart-5": "#B77822",
      "sidebar": "#FFF8EA",
      "sidebar-foreground": "#141210",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#243E59",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#171412",
      "sidebar-ring": "#9B2F24",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#9B2F24",
      "accent-foreground": "#ffffff",
      "destructive": "#9B2F24",
      "border": "#303642",
      "input": "#303642",
      "ring": "#9B2F24",
      "chart-1": "#111111",
      "chart-2": "#1B2224",
      "chart-3": "#9B2F24",
      "chart-4": "#2F6B52",
      "chart-5": "#B77822",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#9B2F24",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#9B2F24",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "editorial-ink-fine-art",
    "slug": "editorial-ink-fine-art",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "bone_paper",
        "border",
        "charcoal_black",
        "error",
        "info",
        "ink_blue_black",
        "muted",
        "pale_oxide",
        "paper_shadow",
        "primary",
        "secondary",
        "soft_graphite",
        "success",
        "surface",
        "text",
        "warm_ivory",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "none",
        "primary"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_letter_spacing",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "weights"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · editorial-ink-fine-art

DESIGN.md

at a glance

Palette

Typography

headline-lgCormorant Garamond · 31px · 700

The quick brown fox jumps

headline-mdCormorant Garamond · 25px · 600

The quick brown fox jumps

body-mdSource Sans 3 · 16px · 400

The quick brown fox jumps

label-mdIBM Plex Mono · 12px · 600

The quick brown fox jumps

Components

New

Card title

Components rendered with this language’s tokens — colors, type, and rounded corners as specified.

Spacing

base8px
xs4px
sm8px
md12px
lg16px
xl24px
2xl32px
3xl48px
4xl64px
step-896px
step-9128px

Shape

full9999px

none0px

primary0px

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

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

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutedwarning

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

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

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

shadcn add

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

theme css

:root {
  --background: #F4EBDD;
  --foreground: #141210;
  --card: #FFF8EA;
  --card-foreground: #141210;
  --popover: #FFF8EA;
  --popover-foreground: #141210;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #1B2224;
  --secondary-foreground: #ffffff;
  --muted: #746D62;
  --muted-foreground: #141210;
  --accent: #9B2F24;
  --accent-foreground: #ffffff;
  --destructive: #9B2F24;
  --border: #171412;
  --input: #171412;
  --ring: #9B2F24;
  --chart-1: #111111;
  --chart-2: #1B2224;
  --chart-3: #9B2F24;
  --chart-4: #2F6B52;
  --chart-5: #B77822;
  --sidebar: #FFF8EA;
  --sidebar-foreground: #141210;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #243E59;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #171412;
  --sidebar-ring: #9B2F24;
  --radius: 0.625rem;
}

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

tsx starter

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

export function EditorialInkFineArtShadcnKit() {
  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">Editorial Ink Fine Art</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

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

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

theme JSONcompatibility fallback

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "editorial-ink-fine-art",
  "type": "registry:theme",
  "title": "Editorial Ink Fine Art shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4EBDD",
      "foreground": "#141210",
      "card": "#FFF8EA",
      "card-foreground": "#141210",
      "popover": "#FFF8EA",
      "popover-foreground": "#141210",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#1B2224",
      "secondary-foreground": "#ffffff",
      "muted": "#746D62",
      "muted-foreground": "#141210",
      "accent": "#9B2F24",
      "accent-foreground": "#ffffff",
      "destructive": "#9B2F24",
      "border": "#171412",
      "input": "#171412",
      "ring": "#9B2F24",
      "chart-1": "#111111",
      "chart-2": "#1B2224",
      "chart-3": "#9B2F24",
      "chart-4": "#2F6B52",
      "chart-5": "#B77822",
      "sidebar": "#FFF8EA",
      "sidebar-foreground": "#141210",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#243E59",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#171412",
      "sidebar-ring": "#9B2F24",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#9B2F24",
      "accent-foreground": "#ffffff",
      "destructive": "#9B2F24",
      "border": "#303642",
      "input": "#303642",
      "ring": "#9B2F24",
      "chart-1": "#111111",
      "chart-2": "#1B2224",
      "chart-3": "#9B2F24",
      "chart-4": "#2F6B52",
      "chart-5": "#B77822",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#9B2F24",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#9B2F24",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "editorial-ink-fine-art",
    "slug": "editorial-ink-fine-art",
    "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": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "bone_paper",
        "border",
        "charcoal_black",
        "error",
        "info",
        "ink_blue_black",
        "muted",
        "pale_oxide",
        "paper_shadow",
        "primary",
        "secondary",
        "soft_graphite",
        "success",
        "surface",
        "text",
        "warm_ivory",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "none",
        "primary"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_letter_spacing",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "weights"
      ]
    }
  }
}

component recipescompatibility fallback

# Editorial Ink Fine Art shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `editorial-ink-fine-art`
Slug: `editorial-ink-fine-art`

## Intent

Editorial Ink Fine Art treats the interface as a curated printed page where drawing is the primary intelligence. It uses decisive black line, handmade evidence, high-contrast silhouette, paper-toned space, and selective oxidized-red editorial annotation to turn ordinary product states into reader-facing visual commentary. The language is not a sketchbook skin: each mark must carry a conceptual job, each panel must feel set on tactile paper, and text must negotiate with image rather than simply caption it.

## 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:

{
  "accent": "#9B2F24",
  "background": "#F4EBDD",
  "bone_paper": "#F4EBDD",
  "border": "#171412",
  "charcoal_black": "#111111",
  "error": "#9B2F24",
  "info": "#243E59",
  "ink_blue_black": "#1B2224",
  "muted": "#746D62",
  "pale_oxide": "#C45F50",
  "paper_shadow": "#D8CBB7",
  "primary": "#111111",
  "secondary": "#1B2224",
  "soft_graphite": "#403B35",
  "success": "#2F6B52",
  "surface": "#FFF8EA",
  "text": "#141210",
  "warm_ivory": "#FFF8EA",
  "warning": "#B77822"
}

Typography:

{
  "base_size": "16px",
  "body_font": "Source Sans 3",
  "display_letter_spacing": "-0.035em",
  "display_line_height": "1.12",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Sans+3:wght@400;500;600;700&display=swap",
  "heading_font": "Cormorant Garamond",
  "letter_spacing": "-0.02em",
  "line_height": 1.55,
  "mono_font": "IBM Plex Mono",
  "scale_ratio": 1.25,
  "sizes": {
    "body": "16px",
    "caption": "12px",
    "h1": "58px",
    "h2": "34px",
    "h3": "25px",
    "lead": "19px"
  },
  "weights": {
    "bold": 700,
    "medium": 500,
    "regular": 400,
    "semibold": 600
  }
}

## Visual character to preserve

- Containers use black ink-line frames with uneven double-edge accents made from pseudo-elements, including slight rotation or offset to show handmade registration.
- Large warm ivory paper fields carry a subtle fiber/noise background and generous margins so negative space reads as tactile editorial stock.
- Primary imagery and key cards use high-contrast black silhouette blocks with white cutout line drawing and controlled hatching patterns.
- Section labels, alerts, active tabs, and selected controls use sparse oxidized-red annotation marks such as underlines, pins, margin rules, and circled counters.
- Typography pairs sharp editorial serif headlines with humanist sans body text and small monospace folio labels, arranged with deliberate image-text overlap.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "solid",
  "underlay": true,
  "grain": true,
  "stickerBadges": true,
  "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/editorial-ink-fine-art/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: Use real black lines as layout architecture: borders, rules, frames, and focus outlines should be visible and purposeful.; Make at least one drawn or silhouette element carry the central concept of the screen.; Keep the accent red scarce and meaningful for active, urgent, edited, or selected states.; Apply paper texture subtly across the background and cards rather than adding random stains.; Pair serif headlines with concise sans body copy and monospace labels for folio/editorial metadata.; Use offset border shadows and slight registration shifts to suggest a visible hand without losing precision.; Write microcopy as curated editorial language: intelligent, specific, and reader-facing.; Maintain high contrast for all text and controls against ivory or black surfaces.
- Do not: Do not use generic doodle icons, casual scribbles, or playful sketch UI clichés.; Do not add decorative splatter, drips, stains, or grunge unless the content explicitly calls for them.; Do not reduce the language to sterile black-and-white minimalism with no paper texture or mark-making.; Do not overuse red; if everything is annotated, nothing is editorially important.; Do not round every corner or use soft stock-illustration friendliness.; Do not center every section; asymmetry and tension are essential.; Do not use glossy gradients, glassmorphism, neon colors, or low-contrast gray UI chrome.

## 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 EditorialInkFineArtShadcnKit() {
  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">Editorial Ink Fine Art</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

{
  "breakpoints": "Mobile <= 640px becomes a single-column reading stack with full-width controls; tablet 641-1024px uses a 6-column grid and stacks the folio rail above content; desktop >= 1025px uses the full 12-column spread.",
  "density": "Editorial, not dashboard-dense: one dominant concept image, three to six evidence panels, and generous gutters. UI details live within framed cards while the page keeps breathing room.",
  "grid": "Desktop uses a 12-column max-width grid at 1320px with 24px gutters, a narrow folio rail, and asymmetrical spans (5/7, 4/8, 3/6/3). Cards align to column edges but may overlap imagery by 16-32px.",
  "whitespace": "Whitespace should feel like margins in an art magazine: broad, warm, and intentional. Leave at least 48px between major arguments on desktop and 24px on mobile; avoid boxed-in catalog sections."
}

preview shotscompatibility fallback

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "editorial-ink-fine-art",
    "name": "Editorial Ink Fine Art",
    "slug": "editorial-ink-fine-art"
  },
  "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": [
    "Containers use black ink-line frames with uneven double-edge accents made from pseudo-elements, including slight rotation or offset to show handmade registration.",
    "Large warm ivory paper fields carry a subtle fiber/noise background and generous margins so negative space reads as tactile editorial stock.",
    "Primary imagery and key cards use high-contrast black silhouette blocks with white cutout line drawing and controlled hatching patterns.",
    "Section labels, alerts, active tabs, and selected controls use sparse oxidized-red annotation marks such as underlines, pins, margin rules, and circled counters.",
    "Typography pairs sharp editorial serif headlines with humanist sans body text and small monospace folio labels, arranged with deliberate image-text overlap."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": true,
    "grain": true,
    "stickerBadges": true,
    "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": "Editorial Ink Fine Art 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": [
      "Use real black lines as layout architecture: borders, rules, frames, and focus outlines should be visible and purposeful.",
      "Make at least one drawn or silhouette element carry the central concept of the screen.",
      "Keep the accent red scarce and meaningful for active, urgent, edited, or selected states.",
      "Apply paper texture subtly across the background and cards rather than adding random stains.",
      "Pair serif headlines with concise sans body copy and monospace labels for folio/editorial metadata.",
      "Use offset border shadows and slight registration shifts to suggest a visible hand without losing precision.",
      "Write microcopy as curated editorial language: intelligent, specific, and reader-facing.",
      "Maintain high contrast for all text and controls against ivory or black surfaces."
    ],
    "dont": [
      "Do not use generic doodle icons, casual scribbles, or playful sketch UI clichés.",
      "Do not add decorative splatter, drips, stains, or grunge unless the content explicitly calls for them.",
      "Do not reduce the language to sterile black-and-white minimalism with no paper texture or mark-making.",
      "Do not overuse red; if everything is annotated, nothing is editorially important.",
      "Do not round every corner or use soft stock-illustration friendliness.",
      "Do not center every section; asymmetry and tension are essential.",
      "Do not use glossy gradients, glassmorphism, neon colors, or low-contrast gray UI chrome."
    ]
  }
}

More like this

Compact Editorial Ink Fine Artshares ink-wash · brush-gesture · void-composition Editorial Ink Atelier with Electric Accentsshares ink-wash · brush-gesture · void-composition Crossover Editorial Ink Fine Artshares ink-wash · brush-gesture · monochrome-contrast Digital Watercolor Texture Systemshares ink-wash · brush-gesture · void-composition E-Ink Neurography Manualsshares ink-wash · brush-gesture · void-composition Enterprise Mono-Grid Interfacesshares ink-wash · brush-gesture · monochrome-contrast