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 every region as a counted-stitch chart on a 26px pierce-grid: generous margins, charted blocks that snap to the grid, stitched coordinate tabs protruding from panel edges, and the open margin left for mono annotations.
Hierarchy comes from stitched tabs, running-stitch subdivisions, a quiet grotesque, mono coordinates, and one madder floss on the live element — not from large scale shifts.
Moderately dense. Information can be plentiful, but every cluster sits inside a charted panel with visible spacing, a coordinate, and stitched micro-labels.
The counted-cell stitch chart: every panel snaps to the pierce-grid and carries a row·col coordinate; dividers, the headline highlighter and chart lines are dashed running stitches; one madder floss marks the live element.
A counted desk-page grid capped at ~1180-1200px on desktop, collapsing to a single column under 640-760px while preserving margin gutters and the 26px pierce-grid inside modules.
Generous perimeter margins, moderate inter-panel spacing, small internal padding always padded above titles; the open margin carries mono coordinates and timestamps.
comfortable-to-moderate
Single column under 640-760px; the pierce-grid, stitched tabs and coordinates persist at every width; tables scroll inside their panel; hoops and framed windows move below primary content; the hero headline uses clamp(2rem,6.6vw,4rem) and wraps, rendering at the 32px floor at 390px without clipping.
woven-sampler-embroidery
Subjects rendered as hand-embroidered woven textile — directional satin and long-and-short fills, couched outlines, french knots on a visible linen warp-weft weave — worked in the Aizome Skein flosses (ecru, madder, gold) on a deep indigo ground.
One full-bleed hero per landing; spot illustration bounded inside an embroidery hoop or a 16:10 framed window, driven by --hero-image, never bleeding across controls.
# Sashiko ## Philosophy Sashiko reads the source brief — a disciplined, ruled, captioned planner page that makes room for bounded illustration — as the most disciplined page of all: a counted-thread stitch chart, dyed in aizome indigo rather than printed on paper. A fine pierce-grid of stitch points runs through the dark ground and every panel, so each module reads as charted cloth. Dividers are dashed running stitches in ecru thread, never hard borders. One madder floss marks the element you can act on; gold flags what to read next. Structure is stitched in, never drawn on. ### Values - the screen is a counted-stitch chart: every region snaps to one pierce-grid - dividers and marks are running stitches in ecru thread, never borders - a deep aizome-indigo ground, dark and saturated, never paper-white - illustration bounded inside an embroidery hoop or a framed window - one madder floss on the live element; gold for tags and knots ### Anti-Values - the generic SaaS hero: an eyebrow tag, a button pair, a three-stat row - hard borders or a single accent edge stamped on a card - imagery bleeding across the controls that drive the studio - the serif/italic headline swap, or an oversized italic serif - soft blobs and arbitrary radii that erase the counted, charted feel ### Visual Character - a counted pierce-grid shows through the indigo ground and every panel, so the module reads as charted cloth - section labels are short stitched tabs (gold, madder or indigo) protruding from a panel's top edge - dividers, the headline highlighter and chart lines are dashed running stitches in ecru thread - illustration is bounded inside an embroidery hoop or a 16:10 framed window, never bleeding across controls - timestamps, owners and row·col coordinates tuck into the open margin as quiet mono annotations ## Tokens ### Colors | Name | Value | |------|-------| | primary | `#D24A3C` | | secondary | `#5E86B8` | | accent | `#D24A3C` | | bg | `#0F2038` | | background | `#0F2038` | | surface | `#16294A` | | surface_raised | `#1E3658` | | text | `#EFE7D3` | | muted | `#9FB0C9` | | border | `#2C4470` | | on_accent | `#FBF6E7` | | ecru | `#EDE6D2` | | madder | `#D24A3C` | | gold | `#DBA844` | | error | `#D24A3C` | | success | `#82AA6B` | | warning | `#DBA844` | | info | `#5E86B8` | ### Typography - **Heading Font**: Space Grotesk - **Body Font**: Inter - **Mono Font**: Spline Sans Mono - **Base Size**: 17px - **Scale Ratio**: 1.2 - **Line Height**: 1.62 - **Letter Spacing**: -0.01em - **Heading Weight**: 700 - **Heading Transform**: none - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Radii - **None**: 0 - **Sm**: 16px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 1px 0 rgba(237,230,210,0.05) inset, 0 8px 20px rgba(0,0,0,0.30) - **Md**: 0 1px 0 rgba(237,230,210,0.05) inset, 0 16px 36px rgba(0,0,0,0.36) - **Lg**: 0 28px 60px rgba(0,0,0,0.46) ### Surfaces - **Treatment**: woven-textile - **Card Style**: a charted block: aizome-indigo cloth under a 26px pierce-grid dot fill, lifted by soft shadow, with a stitched coordinate tab; no border ring - **Bg Pattern**: pierce-grid ### Borders - **Default Width**: 0 - **Accent Width**: 0 - **Style**: none - **Character**: no borders; separation comes from dashed running-stitch dividers, the pierce-grid, and soft shadow ### Motion - **Duration**: 720ms - **Easing**: cubic-bezier(0.22,0.78,0.2,1) - **Philosophy**: deliberate: running stitches plot in cell by cell (stroke-dashoffset) and panels rise slightly; the settled state is the no-JS default ## Rules ### Composition Compose every region as a counted-stitch chart on a 26px pierce-grid: generous margins, charted blocks that snap to the grid, stitched coordinate tabs protruding from panel edges, and the open margin left for mono annotations. ### Hierarchy Hierarchy comes from stitched tabs, running-stitch subdivisions, a quiet grotesque, mono coordinates, and one madder floss on the live element — not from large scale shifts. ### Density Moderately dense. Information can be plentiful, but every cluster sits inside a charted panel with visible spacing, a coordinate, and stitched micro-labels. ### Signature The counted-cell stitch chart: every panel snaps to the pierce-grid and carries a row·col coordinate; dividers, the headline highlighter and chart lines are dashed running stitches; one madder floss marks the live element. ## Layout ### Grid A counted desk-page grid capped at ~1180-1200px on desktop, collapsing to a single column under 640-760px while preserving margin gutters and the 26px pierce-grid inside modules. ### Whitespace Generous perimeter margins, moderate inter-panel spacing, small internal padding always padded above titles; the open margin carries mono coordinates and timestamps. ### Density comfortable-to-moderate ### Responsive Single column under 640-760px; the pierce-grid, stitched tabs and coordinates persist at every width; tables scroll inside their panel; hoops and framed windows move below primary content; the hero headline uses clamp(2rem,6.6vw,4rem) and wraps, rendering at the 32px floor at 390px without clipping. ### Breakpoints - **Sm**: 390px - **Md**: 640px - **Lg**: 900px - **Xl**: 1440px ## Guidance ### Do - Let the 26px pierce-grid show through the indigo ground and every panel. - Label sections with short stitched tabs and a row·col coordinate. - Divide rows and frames with dashed running stitches in ecru; keep illustration inside a hoop or framed window. - Reserve one madder floss for the live element of a view; use gold for tags and knots. - Leave the margin open for timestamps, owners and coordinates. ### Don't - Open on the generic SaaS hero (eyebrow tag, button pair, three-stat row) or swap a serif headline to italic. - Put a hard border or a single accent edge on a card, or trap navigation in a floating pill bar. - Let imagery bleed across functional controls. - Spread all three flosses across the chrome in the same view. - Round everything into soft blobs or use arbitrary radii that erase the counted, charted feel. ### Accessibility Body 17px+; ecru text #EFE7D3 on aizome indigo #0F2038 clears 4.5:1; status never relies on colour alone (every status thread carries a mono label and a dot); the hero headline wraps and never clips at 390px; motion respects prefers-reduced-motion and the settled state renders with no JavaScript. ## Imagery Direction ### Pairs With woven-sampler-embroidery ### Summary Subjects rendered as hand-embroidered woven textile — directional satin and long-and-short fills, couched outlines, french knots on a visible linen warp-weft weave — worked in the Aizome Skein flosses (ecru, madder, gold) on a deep indigo ground. ### Subjects - a counted sashiko motif of asanoha and seven-treasure patterns on indigo - an embroidered carp bounded in a hoop - a stitched wave band - a woven map of an order ledger ### Usage One full-bleed hero per landing; spot illustration bounded inside an embroidery hoop or a 16:10 framed window, driven by --hero-image, never bleeding across controls.
---
version: "alpha"
name: "Sashiko"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
primary: "#D24A3C"
secondary: "#5E86B8"
accent: "#D24A3C"
bg: "#0F2038"
background: "#0F2038"
surface: "#16294A"
surface_raised: "#1E3658"
text: "#EFE7D3"
muted: "#9FB0C9"
border: "#2C4470"
on_accent: "#FBF6E7"
ecru: "#EDE6D2"
madder: "#D24A3C"
gold: "#DBA844"
error: "#D24A3C"
success: "#82AA6B"
warning: "#DBA844"
info: "#5E86B8"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "1.836rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.01em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.53rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.01em"
body-md:
fontFamily: "Inter"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.62
letterSpacing: "-0.01em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "16px"
md: "16px"
lg: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
components:
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_raised:
backgroundColor: "{colors.surface_raised}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-ecru:
backgroundColor: "{colors.ecru}"
color-reference-madder:
backgroundColor: "{colors.madder}"
color-reference-gold:
backgroundColor: "{colors.gold}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#000000"
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"
---
# Sashiko
## Overview
Sashiko reads the source brief — a disciplined, ruled, captioned planner page that makes room for bounded illustration — as the most disciplined page of all: a counted-thread stitch chart, dyed in aizome indigo rather than printed on paper. A fine pierce-grid of stitch points runs through the dark ground and every panel, so each module reads as charted cloth. Dividers are dashed running stitches in ecru thread, never hard borders. One madder floss marks the element you can act on; gold flags what to read next. Structure is stitched in, never drawn on.
### Values
- the screen is a counted-stitch chart: every region snaps to one pierce-grid
- dividers and marks are running stitches in ecru thread, never borders
- a deep aizome-indigo ground, dark and saturated, never paper-white
- illustration bounded inside an embroidery hoop or a framed window
- one madder floss on the live element; gold for tags and knots
### Anti-Values
- the generic SaaS hero: an eyebrow tag, a button pair, a three-stat row
- hard borders or a single accent edge stamped on a card
- imagery bleeding across the controls that drive the studio
- the serif/italic headline swap, or an oversized italic serif
- soft blobs and arbitrary radii that erase the counted, charted feel
### Visual Character
- a counted pierce-grid shows through the indigo ground and every panel, so the module reads as charted cloth
- section labels are short stitched tabs (gold, madder or indigo) protruding from a panel's top edge
- dividers, the headline highlighter and chart lines are dashed running stitches in ecru thread
- illustration is bounded inside an embroidery hoop or a 16:10 framed window, never bleeding across controls
- timestamps, owners and row·col coordinates tuck into the open margin as quiet mono annotations
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| primary | `#D24A3C` |
| secondary | `#5E86B8` |
| accent | `#D24A3C` |
| bg | `#0F2038` |
| background | `#0F2038` |
| surface | `#16294A` |
| surface_raised | `#1E3658` |
| text | `#EFE7D3` |
| muted | `#9FB0C9` |
| border | `#2C4470` |
| on_accent | `#FBF6E7` |
| ecru | `#EDE6D2` |
| madder | `#D24A3C` |
| gold | `#DBA844` |
| error | `#D24A3C` |
| success | `#82AA6B` |
| warning | `#DBA844` |
| info | `#5E86B8` |
## Typography
- **Headline-Lg**: Space Grotesk, 1.836rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.53rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.62.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
### Grid
A counted desk-page grid capped at ~1180-1200px on desktop, collapsing to a single column under 640-760px while preserving margin gutters and the 26px pierce-grid inside modules.
### Whitespace
Generous perimeter margins, moderate inter-panel spacing, small internal padding always padded above titles; the open margin carries mono coordinates and timestamps.
### Density
comfortable-to-moderate
### Responsive
Single column under 640-760px; the pierce-grid, stitched tabs and coordinates persist at every width; tables scroll inside their panel; hoops and framed windows move below primary content; the hero headline uses clamp(2rem,6.6vw,4rem) and wraps, rendering at the 32px floor at 390px without clipping.
### Breakpoints
- **Sm**: 390px
- **Md**: 640px
- **Lg**: 900px
- **Xl**: 1440px
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(237,230,210,0.05) inset, 0 8px 20px rgba(0,0,0,0.30)
- **Md**: 0 1px 0 rgba(237,230,210,0.05) inset, 0 16px 36px rgba(0,0,0,0.36)
- **Lg**: 0 28px 60px rgba(0,0,0,0.46)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `16px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: woven-textile
- **Card Style**: a charted block: aizome-indigo cloth under a 26px pierce-grid dot fill, lifted by soft shadow, with a stitched coordinate tab; no border ring
- **Bg Pattern**: pierce-grid
### Borders
- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: no borders; separation comes from dashed running-stitch dividers, the pierce-grid, and soft shadow
## Components
### Composition
Compose every region as a counted-stitch chart on a 26px pierce-grid: generous margins, charted blocks that snap to the grid, stitched coordinate tabs protruding from panel edges, and the open margin left for mono annotations.
### Hierarchy
Hierarchy comes from stitched tabs, running-stitch subdivisions, a quiet grotesque, mono coordinates, and one madder floss on the live element — not from large scale shifts.
### Density
Moderately dense. Information can be plentiful, but every cluster sits inside a charted panel with visible spacing, a coordinate, and stitched micro-labels.
### Signature
The counted-cell stitch chart: every panel snaps to the pierce-grid and carries a row·col coordinate; dividers, the headline highlighter and chart lines are dashed running stitches; one madder floss marks the live element.
## 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-019efdee-0edb-7430-97f1-ce4299b05a04/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 Let the 26px pierce-grid show through the indigo ground and every panel.
- Do Label sections with short stitched tabs and a row·col coordinate.
- Do Divide rows and frames with dashed running stitches in ecru; keep illustration inside a hoop or framed window.
- Do Reserve one madder floss for the live element of a view; use gold for tags and knots.
- Do Leave the margin open for timestamps, owners and coordinates.
- Don't Open on the generic SaaS hero (eyebrow tag, button pair, three-stat row) or swap a serif headline to italic.
- Don't Put a hard border or a single accent edge on a card, or trap navigation in a floating pill bar.
- Don't Let imagery bleed across functional controls.
- Don't Spread all three flosses across the chrome in the same view.
- Don't Round everything into soft blobs or use arbitrary radii that erase the counted, charted feel.
### Accessibility
Body 17px+; ecru text #EFE7D3 on aizome indigo #0F2038 clears 4.5:1; status never relies on colour alone (every status thread carries a mono label and a dot); the hero headline wraps and never clips at 390px; motion respects prefers-reduced-motion and the settled state renders with no JavaScript.
## Imagery Direction
### Pairs With
woven-sampler-embroidery
### Summary
Subjects rendered as hand-embroidered woven textile — directional satin and long-and-short fills, couched outlines, french knots on a visible linen warp-weft weave — worked in the Aizome Skein flosses (ecru, madder, gold) on a deep indigo ground.
### Subjects
- a counted sashiko motif of asanoha and seven-treasure patterns on indigo
- an embroidered carp bounded in a hoop
- a stitched wave band
- a woven map of an order ledger
### Usage
One full-bleed hero per landing; spot illustration bounded inside an embroidery hoop or a 16:10 framed window, driven by --hero-image, never bleeding across controls.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "sashiko",
"type": "registry:theme",
"title": "Sashiko shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#0F2038",
"foreground": "#EFE7D3",
"card": "#16294A",
"card-foreground": "#EFE7D3",
"popover": "#16294A",
"popover-foreground": "#EFE7D3",
"primary": "#D24A3C",
"primary-foreground": "#ffffff",
"secondary": "#5E86B8",
"secondary-foreground": "#ffffff",
"muted": "#9FB0C9",
"muted-foreground": "#EFE7D3",
"accent": "#D24A3C",
"accent-foreground": "#ffffff",
"destructive": "#D24A3C",
"border": "#2C4470",
"input": "#2C4470",
"ring": "#D24A3C",
"chart-1": "#D24A3C",
"chart-2": "#5E86B8",
"chart-3": "#D24A3C",
"chart-4": "#82AA6B",
"chart-5": "#DBA844",
"sidebar": "#16294A",
"sidebar-foreground": "#EFE7D3",
"sidebar-primary": "#D24A3C",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#5E86B8",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#2C4470",
"sidebar-ring": "#D24A3C",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#D24A3C",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#D24A3C",
"accent-foreground": "#ffffff",
"destructive": "#D24A3C",
"border": "#303642",
"input": "#303642",
"ring": "#D24A3C",
"chart-1": "#D24A3C",
"chart-2": "#5E86B8",
"chart-3": "#D24A3C",
"chart-4": "#82AA6B",
"chart-5": "#DBA844",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#D24A3C",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#D24A3C",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#D24A3C",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efdee-0edb-7430-97f1-ce4299b05a04",
"slug": "sashiko",
"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",
"background",
"bg",
"border",
"ecru",
"error",
"gold",
"info",
"madder",
"muted",
"on_accent",
"primary",
"secondary",
"success",
"surface",
"surface_raised",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"spacing": [
"base",
"scale"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"shadows": [
"lg",
"md",
"sm"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_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
Keep Sashikoand 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: #0F2038;
--foreground: #EFE7D3;
--card: #16294A;
--card-foreground: #EFE7D3;
--popover: #16294A;
--popover-foreground: #EFE7D3;
--primary: #D24A3C;
--primary-foreground: #ffffff;
--secondary: #5E86B8;
--secondary-foreground: #ffffff;
--muted: #9FB0C9;
--muted-foreground: #EFE7D3;
--accent: #D24A3C;
--accent-foreground: #ffffff;
--destructive: #D24A3C;
--border: #2C4470;
--input: #2C4470;
--ring: #D24A3C;
--chart-1: #D24A3C;
--chart-2: #5E86B8;
--chart-3: #D24A3C;
--chart-4: #82AA6B;
--chart-5: #DBA844;
--sidebar: #16294A;
--sidebar-foreground: #EFE7D3;
--sidebar-primary: #D24A3C;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #5E86B8;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #2C4470;
--sidebar-ring: #D24A3C;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #D24A3C;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #D24A3C;
--accent-foreground: #ffffff;
--destructive: #D24A3C;
--border: #303642;
--input: #303642;
--ring: #D24A3C;
--chart-1: #D24A3C;
--chart-2: #5E86B8;
--chart-3: #D24A3C;
--chart-4: #82AA6B;
--chart-5: #DBA844;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #D24A3C;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #D24A3C;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #D24A3C;
--radius: 16px;
}
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 SashikoShadcnKit() {
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">Sashiko</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": "sashiko",
"type": "registry:theme",
"author": "katagami-agent",
"title": "Sashiko — counted running-stitch on aizome indigo",
"cssVars": {
"theme": {
"font-sans": "Inter, system-ui, sans-serif",
"font-serif": "Space Grotesk, system-ui, sans-serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"radius": "16px"
},
"light": {
"background": "#0F2038",
"foreground": "#EFE7D3",
"card": "#16294A",
"card-foreground": "#EFE7D3",
"popover": "#1E3658",
"popover-foreground": "#EFE7D3",
"primary": "#D24A3C",
"primary-foreground": "#FBF6E7",
"secondary": "#1E3658",
"secondary-foreground": "#EFE7D3",
"muted": "#16294A",
"muted-foreground": "#9FB0C9",
"accent": "#DBA844",
"accent-foreground": "#23180A",
"destructive": "#D24A3C",
"destructive-foreground": "#FBF6E7",
"border": "#2C4470",
"input": "#2C4470",
"ring": "#DBA844",
"chart-1": "#EDE6D2",
"chart-2": "#DBA844",
"chart-3": "#D24A3C",
"chart-4": "#5E86B8",
"chart-5": "#82AA6B",
"radius": "16px"
},
"dark": {
"background": "#0B182C",
"foreground": "#EFE7D3",
"card": "#13243F",
"card-foreground": "#EFE7D3",
"popover": "#1A3050",
"popover-foreground": "#EFE7D3",
"primary": "#D24A3C",
"primary-foreground": "#FBF6E7",
"secondary": "#1A3050",
"secondary-foreground": "#EFE7D3",
"muted": "#13243F",
"muted-foreground": "#9FB0C9",
"accent": "#DBA844",
"accent-foreground": "#23180A",
"destructive": "#D24A3C",
"destructive-foreground": "#FBF6E7",
"border": "#274069",
"input": "#274069",
"ring": "#DBA844",
"chart-1": "#EDE6D2",
"chart-2": "#DBA844",
"chart-3": "#D24A3C",
"chart-4": "#5E86B8",
"chart-5": "#82AA6B",
"radius": "16px"
}
},
"visualProfile": {
"mode": "dark",
"ground": "aizome indigo (#0F2038)",
"surface_treatment": "panels of dyed cloth under a 26px pierce-grid dot fill, lifted by soft shadow; no border ring",
"separation": "dashed running-stitch dividers in ecru, never hard borders or accent edges",
"radius_scale": [0, 16, 24, 9999],
"accent_use": "one madder floss on the live element; gold for tags and knots; ecru is the dominant mark",
"typography": "Space Grotesk headings, Inter body, Spline Sans Mono for coordinates and counts",
"signature": "counted-cell stitch chart: every surface snaps to the pierce-grid and carries a row·col coordinate"
}
}
# Sashiko shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efdee-0edb-7430-97f1-ce4299b05a04`
Slug: `sashiko`
## Intent
Sashiko reads the source brief — a disciplined, ruled, captioned planner page that makes room for bounded illustration — as the most disciplined page of all: a counted-thread stitch chart, dyed in aizome indigo rather than printed on paper. A fine pierce-grid of stitch points runs through the dark ground and every panel, so each module reads as charted cloth. Dividers are dashed running stitches in ecru thread, never hard borders. One madder floss marks the element you can act on; gold flags what to read next. Structure is stitched in, never drawn on.
## 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:
{
"primary": "#D24A3C",
"secondary": "#5E86B8",
"accent": "#D24A3C",
"bg": "#0F2038",
"background": "#0F2038",
"surface": "#16294A",
"surface_raised": "#1E3658",
"text": "#EFE7D3",
"muted": "#9FB0C9",
"border": "#2C4470",
"on_accent": "#FBF6E7",
"ecru": "#EDE6D2",
"madder": "#D24A3C",
"gold": "#DBA844",
"error": "#D24A3C",
"success": "#82AA6B",
"warning": "#DBA844",
"info": "#5E86B8"
}
Typography:
{
"heading_font": "Space Grotesk",
"body_font": "Inter",
"mono_font": "Spline Sans Mono",
"base_size": "17px",
"scale_ratio": 1.2,
"line_height": 1.62,
"letter_spacing": "-0.01em",
"heading_weight": "700",
"heading_transform": "none",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap"
}
## Visual character to preserve
- a counted pierce-grid shows through the indigo ground and every panel, so the module reads as charted cloth
- section labels are short stitched tabs (gold, madder or indigo) protruding from a panel's top edge
- dividers, the headline highlighter and chart lines are dashed running stitches in ecru thread
- illustration is bounded inside an embroidery hoop or a 16:10 framed window, never bleeding across controls
- timestamps, owners and row·col coordinates tuck into the open margin as quiet mono annotations
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "dashed",
"underlay": true,
"grain": false,
"stickerBadges": true,
"motion": "lift",
"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/sashiko/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: Let the 26px pierce-grid show through the indigo ground and every panel.; Label sections with short stitched tabs and a row·col coordinate.; Divide rows and frames with dashed running stitches in ecru; keep illustration inside a hoop or framed window.; Reserve one madder floss for the live element of a view; use gold for tags and knots.; Leave the margin open for timestamps, owners and coordinates.
- Do not: Open on the generic SaaS hero (eyebrow tag, button pair, three-stat row) or swap a serif headline to italic.; Put a hard border or a single accent edge on a card, or trap navigation in a floating pill bar.; Let imagery bleed across functional controls.; Spread all three flosses across the chrome in the same view.; Round everything into soft blobs or use arbitrary radii that erase the counted, charted feel.
## 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 SashikoShadcnKit() {
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">Sashiko</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": "A counted desk-page grid capped at ~1180-1200px on desktop, collapsing to a single column under 640-760px while preserving margin gutters and the 26px pierce-grid inside modules.",
"whitespace": "Generous perimeter margins, moderate inter-panel spacing, small internal padding always padded above titles; the open margin carries mono coordinates and timestamps.",
"density": "comfortable-to-moderate",
"responsive": "Single column under 640-760px; the pierce-grid, stitched tabs and coordinates persist at every width; tables scroll inside their panel; hoops and framed windows move below primary content; the hero headline uses clamp(2rem,6.6vw,4rem) and wraps, rendering at the 32px floor at 390px without clipping.",
"breakpoints": {
"sm": "390px",
"md": "640px",
"lg": "900px",
"xl": "1440px"
}
}
{
"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-019efdee-0edb-7430-97f1-ce4299b05a04",
"name": "Sashiko",
"slug": "sashiko"
},
"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": [
"a counted pierce-grid shows through the indigo ground and every panel, so the module reads as charted cloth",
"section labels are short stitched tabs (gold, madder or indigo) protruding from a panel's top edge",
"dividers, the headline highlighter and chart lines are dashed running stitches in ecru thread",
"illustration is bounded inside an embroidery hoop or a 16:10 framed window, never bleeding across controls",
"timestamps, owners and row·col coordinates tuck into the open margin as quiet mono annotations"
],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "dashed",
"underlay": false,
"grain": false,
"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": "Sashiko 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": [
"Let the 26px pierce-grid show through the indigo ground and every panel.",
"Label sections with short stitched tabs and a row·col coordinate.",
"Divide rows and frames with dashed running stitches in ecru; keep illustration inside a hoop or framed window.",
"Reserve one madder floss for the live element of a view; use gold for tags and knots.",
"Leave the margin open for timestamps, owners and coordinates."
],
"dont": [
"Open on the generic SaaS hero (eyebrow tag, button pair, three-stat row) or swap a serif headline to italic.",
"Put a hard border or a single accent edge on a card, or trap navigation in a floating pill bar.",
"Let imagery bleed across functional controls.",
"Spread all three flosses across the chrome in the same view.",
"Round everything into soft blobs or use arbitrary radii that erase the counted, charted feel."
]
}
}