design language·tactile-pixel-craft

Tactile Pixel Craft

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

UnderReview

Download DESIGN.md

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

the spec

specification

philosophy

summary

Tactile Pixel Craft treats low-resolution interface structure as something stitched, beaded, tiled, and handled: a warm product language where every module snaps to a visible craft grid and every status reads like a small handmade marker rather than a synthetic glow.

values

visible constructionwarm handmade precisionlow-resolution clarityscreen-to-textile translationkid-friendly but disciplined color

anti-values

×glossy gamer nostalgia×generic white SaaS dashboards×random pixel confetti×soft glassmorphism×unstructured retro pastiche

tokens

borders4 items

accent width: 4px
character: hard pixel edges aligned to the 8px grid; no hairline glass borders
default width: 2px
style: solid double-edge with occasional dashed stitch seams

colors12 items

accent

#F2B93B

background

#F7E7C6

border

#3A251C

error

#B8322A

info

#2F75C8

muted

#7E5E48

primary

#D9452F

secondary

#2567B8

success

#3D8C55

surface

#FFF5D8

text

#2A1D17

warning

#D88724

motion3 items

duration: 120ms
easing: steps(2, end)
philosophy: interactions hop by one grid unit with stepped translation and shadow changes, never smooth floating fades

radii5 items

full: 9999px
lg: 8px
md: 4px
none: 0
sm: 2px

shadows3 items

lg: 8px 8px 0 rgba(58,37,28,0.85)
md: 4px 4px 0 #3A251C
sm: 2px 2px 0 #3A251C

spacing2 items

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

surfaces3 items

bg pattern: layered linear gradients forming a pale craft grid plus sparse single-pixel color knots
card style: square tile panels with double dark border, inset cream field, and offset pixel shadow
treatment: warm uncoated paper base with visible 8px grid and woven dot intersections

typography8 items

base size: 16px
body font: Atkinson Hyperlegible
google fonts url: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Fraunces:opsz,wght@9..144,700;9..144,900&family=IBM+Plex+Mono:wght@500;700&display=swap
heading font: Fraunces
letter spacing: -0.015em
line height: 1.48
mono font: IBM Plex Mono
scale ratio: 1.22

rules

composition

Compose screens as quilt blocks: one dominant work mat, a narrow tool rail, and gridded supporting panels that all align to the same 8px substrate.

density

Moderately dense like a maker table: many small cells are allowed, but every cluster must be grouped into named patches with generous 24px seams.

hierarchy

Lead with large warm serif instructions, then monospaced tile coordinates and bead labels; color is reserved for workflow state and craft material categories.

signature patterns

Bead-meter rows show progress and status as individual 12px square cells, changing by dither pattern and color rather than by fluid bars.Quilt seam dividers use alternating two-color square ticks along section borders to connect panels into one continuous substrate.Sprite-stamp buttons combine a 16px mosaic glyph, uppercase mono label, hard double border, and a one-cell pressed translation on interaction.Tile callouts place a colored corner bead matrix in the upper-left of cards to identify category, priority, and ownership without extra badges.Dithered selection fields use checkerboard background masks and black pixel focus brackets so forms feel stitched into the grid.

layout

breakpoints

mobile 0-639px, tablet 640-1023px, desktop 1024px and up with a 280px side rail and 1fr work mat

grid

8px base grid with 24px quilt seams; desktop uses 12 columns plus a fixed craft rail, while small screens stack panels as full-width patches.

whitespace

Whitespace appears as cream fabric seams in multiples of 8px; never use arbitrary gaps or centered floating islands.

guidance

Align every panel, icon, and shadow to the 8px grid.
Use warm primary colors as material swatches with dark ink borders.
Turn data into discrete cells, beads, stitch ticks, or tile coordinates.
Keep controls square, tactile, and visibly pressed on interaction.

avoid

Do not use neon cyberpunk palettes or glossy arcade chrome.
Do not scatter random pixel art decorations outside the layout grid.
Do not use blurred shadows, translucent glass cards, or pill-heavy SaaS defaults.
Do not let status colors replace the bead, seam, and tile structure.

katagami spec

# Tactile Pixel Craft

## Philosophy

Tactile Pixel Craft treats low-resolution interface structure as something stitched, beaded, tiled, and handled: a warm product language where every module snaps to a visible craft grid and every status reads like a small handmade marker rather than a synthetic glow.

### Values

- visible construction
- warm handmade precision
- low-resolution clarity
- screen-to-textile translation
- kid-friendly but disciplined color

### Anti-Values

- glossy gamer nostalgia
- generic white SaaS dashboards
- random pixel confetti
- soft glassmorphism
- unstructured retro pastiche

### Visual Character

- Use an 8px visible substrate grid on the page background and on major cards, with faint stitch intersections aligned to component edges.
- Render cards and controls as square tile slabs: 0-4px radii, double borders, and offset pixel-shadow steps instead of blurred shadows.
- Build emphasis from small bead mosaics, color-block strips, and checker seams that occupy real grid columns rather than decorative floating icons.
- Use serif craft headings paired with monospaced bitmap labels so hierarchy alternates between human instruction and machine-readable tile coordinates.
- Represent progress, ratings, and statuses as discrete square cells with dithered two-color fills instead of continuous gradients or circular gauges.

## Tokens

### Borders

- **Accent Width**: 4px
- **Character**: hard pixel edges aligned to the 8px grid; no hairline glass borders
- **Default Width**: 2px
- **Style**: solid double-edge with occasional dashed stitch seams

### Colors

| Name | Value |
|------|-------|
| accent | `#F2B93B` |
| background | `#F7E7C6` |
| border | `#3A251C` |
| error | `#B8322A` |
| info | `#2F75C8` |
| muted | `#7E5E48` |
| primary | `#D9452F` |
| secondary | `#2567B8` |
| success | `#3D8C55` |
| surface | `#FFF5D8` |
| text | `#2A1D17` |
| warning | `#D88724` |

### Motion

- **Duration**: 120ms
- **Easing**: steps(2, end)
- **Philosophy**: interactions hop by one grid unit with stepped translation and shadow changes, never smooth floating fades

### Radii

- **Full**: 9999px
- **Lg**: 8px
- **Md**: 4px
- **None**: 0
- **Sm**: 2px

### Shadows

- **Lg**: 8px 8px 0 rgba(58,37,28,0.85)
- **Md**: 4px 4px 0 #3A251C
- **Sm**: 2px 2px 0 #3A251C

### Spacing

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

### Surfaces

- **Bg Pattern**: layered linear gradients forming a pale craft grid plus sparse single-pixel color knots
- **Card Style**: square tile panels with double dark border, inset cream field, and offset pixel shadow
- **Treatment**: warm uncoated paper base with visible 8px grid and woven dot intersections

### Typography

- **Base Size**: 16px
- **Body Font**: Atkinson Hyperlegible
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Fraunces:opsz,wght@9..144,700;9..144,900&family=IBM+Plex+Mono:wght@500;700&display=swap
- **Heading Font**: Fraunces
- **Letter Spacing**: -0.015em
- **Line Height**: 1.48
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Compose screens as quilt blocks: one dominant work mat, a narrow tool rail, and gridded supporting panels that all align to the same 8px substrate.

### Density

Moderately dense like a maker table: many small cells are allowed, but every cluster must be grouped into named patches with generous 24px seams.

### Hierarchy

Lead with large warm serif instructions, then monospaced tile coordinates and bead labels; color is reserved for workflow state and craft material categories.

### Signature Patterns

- Bead-meter rows show progress and status as individual 12px square cells, changing by dither pattern and color rather than by fluid bars.
- Quilt seam dividers use alternating two-color square ticks along section borders to connect panels into one continuous substrate.
- Sprite-stamp buttons combine a 16px mosaic glyph, uppercase mono label, hard double border, and a one-cell pressed translation on interaction.
- Tile callouts place a colored corner bead matrix in the upper-left of cards to identify category, priority, and ownership without extra badges.
- Dithered selection fields use checkerboard background masks and black pixel focus brackets so forms feel stitched into the grid.

## Layout

### Breakpoints

mobile 0-639px, tablet 640-1023px, desktop 1024px and up with a 280px side rail and 1fr work mat

### Grid

8px base grid with 24px quilt seams; desktop uses 12 columns plus a fixed craft rail, while small screens stack panels as full-width patches.

### Whitespace

Whitespace appears as cream fabric seams in multiples of 8px; never use arbitrary gaps or centered floating islands.

## Guidance

### Do

- Align every panel, icon, and shadow to the 8px grid.
- Use warm primary colors as material swatches with dark ink borders.
- Turn data into discrete cells, beads, stitch ticks, or tile coordinates.
- Keep controls square, tactile, and visibly pressed on interaction.

### Don't

- Do not use neon cyberpunk palettes or glossy arcade chrome.
- Do not scatter random pixel art decorations outside the layout grid.
- Do not use blurred shadows, translucent glass cards, or pill-heavy SaaS defaults.
- Do not let status colors replace the bead, seam, and tile structure.

DESIGN.md

---
version: "alpha"
name: "Tactile Pixel Craft"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#F2B93B"
  background: "#F7E7C6"
  border: "#3A251C"
  error: "#B8322A"
  info: "#2F75C8"
  muted: "#7E5E48"
  primary: "#D9452F"
  secondary: "#2567B8"
  success: "#3D8C55"
  surface: "#FFF5D8"
  text: "#2A1D17"
  warning: "#D88724"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  body-md:
    fontFamily: "Atkinson Hyperlegible"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: "-0.015em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  full: "9999px"
  lg: "8px"
  md: "4px"
  none: "0px"
  sm: "2px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  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"
---

# Tactile Pixel Craft

## Overview

Tactile Pixel Craft treats low-resolution interface structure as something stitched, beaded, tiled, and handled: a warm product language where every module snaps to a visible craft grid and every status reads like a small handmade marker rather than a synthetic glow.

### Values

- visible construction
- warm handmade precision
- low-resolution clarity
- screen-to-textile translation
- kid-friendly but disciplined color

### Anti-Values

- glossy gamer nostalgia
- generic white SaaS dashboards
- random pixel confetti
- soft glassmorphism
- unstructured retro pastiche

### Visual Character

- Use an 8px visible substrate grid on the page background and on major cards, with faint stitch intersections aligned to component edges.
- Render cards and controls as square tile slabs: 0-4px radii, double borders, and offset pixel-shadow steps instead of blurred shadows.
- Build emphasis from small bead mosaics, color-block strips, and checker seams that occupy real grid columns rather than decorative floating icons.
- Use serif craft headings paired with monospaced bitmap labels so hierarchy alternates between human instruction and machine-readable tile coordinates.
- Represent progress, ratings, and statuses as discrete square cells with dithered two-color fills instead of continuous gradients or circular gauges.

## 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 | `#F2B93B` |
| background | `#F7E7C6` |
| border | `#3A251C` |
| error | `#B8322A` |
| info | `#2F75C8` |
| muted | `#7E5E48` |
| primary | `#D9452F` |
| secondary | `#2567B8` |
| success | `#3D8C55` |
| surface | `#FFF5D8` |
| text | `#2A1D17` |
| warning | `#D88724` |

## Typography

- **Headline-Lg**: Fraunces, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Atkinson Hyperlegible, 16px, weight 400, line-height 1.48.
- **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`

### Breakpoints

mobile 0-639px, tablet 640-1023px, desktop 1024px and up with a 280px side rail and 1fr work mat

### Grid

8px base grid with 24px quilt seams; desktop uses 12 columns plus a fixed craft rail, while small screens stack panels as full-width patches.

### Whitespace

Whitespace appears as cream fabric seams in multiples of 8px; never use arbitrary gaps or centered floating islands.

## Elevation & Depth

### Shadows

- **Lg**: 8px 8px 0 rgba(58,37,28,0.85)
- **Md**: 4px 4px 0 #3A251C
- **Sm**: 2px 2px 0 #3A251C

## Shapes

### Rounded

- **Full**: `9999px`
- **Lg**: `8px`
- **Md**: `4px`
- **None**: `0px`
- **Sm**: `2px`

### Surfaces

- **Bg Pattern**: layered linear gradients forming a pale craft grid plus sparse single-pixel color knots
- **Card Style**: square tile panels with double dark border, inset cream field, and offset pixel shadow
- **Treatment**: warm uncoated paper base with visible 8px grid and woven dot intersections

### Borders

- **Accent Width**: 4px
- **Character**: hard pixel edges aligned to the 8px grid; no hairline glass borders
- **Default Width**: 2px
- **Style**: solid double-edge with occasional dashed stitch seams

## Components

### Composition

Compose screens as quilt blocks: one dominant work mat, a narrow tool rail, and gridded supporting panels that all align to the same 8px substrate.

### Density

Moderately dense like a maker table: many small cells are allowed, but every cluster must be grouped into named patches with generous 24px seams.

### Hierarchy

Lead with large warm serif instructions, then monospaced tile coordinates and bead labels; color is reserved for workflow state and craft material categories.

### Signature Patterns

- Bead-meter rows show progress and status as individual 12px square cells, changing by dither pattern and color rather than by fluid bars.
- Quilt seam dividers use alternating two-color square ticks along section borders to connect panels into one continuous substrate.
- Sprite-stamp buttons combine a 16px mosaic glyph, uppercase mono label, hard double border, and a one-cell pressed translation on interaction.
- Tile callouts place a colored corner bead matrix in the upper-left of cards to identify category, priority, and ownership without extra badges.
- Dithered selection fields use checkerboard background masks and black pixel focus brackets so forms feel stitched into the grid.

## 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-019e66f7-7754-7c73-9365-007b9e314c16/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 Align every panel, icon, and shadow to the 8px grid.
- Do Use warm primary colors as material swatches with dark ink borders.
- Do Turn data into discrete cells, beads, stitch ticks, or tile coordinates.
- Do Keep controls square, tactile, and visibly pressed on interaction.
- Don't Do not use neon cyberpunk palettes or glossy arcade chrome.
- Don't Do not scatter random pixel art decorations outside the layout grid.
- Don't Do not use blurred shadows, translucent glass cards, or pill-heavy SaaS defaults.
- Don't Do not let status colors replace the bead, seam, and tile structure.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tactile-pixel-craft",
  "type": "registry:theme",
  "title": "Tactile Pixel Craft shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7E7C6",
      "foreground": "#2A1D17",
      "card": "#FFF5D8",
      "card-foreground": "#2A1D17",
      "popover": "#FFF5D8",
      "popover-foreground": "#2A1D17",
      "primary": "#D9452F",
      "primary-foreground": "#ffffff",
      "secondary": "#2567B8",
      "secondary-foreground": "#ffffff",
      "muted": "#7E5E48",
      "muted-foreground": "#2A1D17",
      "accent": "#F2B93B",
      "accent-foreground": "#ffffff",
      "destructive": "#B8322A",
      "border": "#3A251C",
      "input": "#3A251C",
      "ring": "#F2B93B",
      "chart-1": "#D9452F",
      "chart-2": "#2567B8",
      "chart-3": "#F2B93B",
      "chart-4": "#3D8C55",
      "chart-5": "#D88724",
      "sidebar": "#FFF5D8",
      "sidebar-foreground": "#2A1D17",
      "sidebar-primary": "#D9452F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F75C8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#3A251C",
      "sidebar-ring": "#F2B93B",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#D9452F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F2B93B",
      "accent-foreground": "#ffffff",
      "destructive": "#B8322A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F2B93B",
      "chart-1": "#D9452F",
      "chart-2": "#2567B8",
      "chart-3": "#F2B93B",
      "chart-4": "#3D8C55",
      "chart-5": "#D88724",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#D9452F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F2B93B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F2B93B",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e66f7-7754-7c73-9365-007b9e314c16",
    "slug": "tactile-pixel-craft",
    "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",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}
```

in the wild

embodiments

the full element showcase

embodiment · tactile-pixel-craft

DESIGN.md

at a glance

Palette

Typography

headline-lgFraunces · 29px · 700

The quick brown fox jumps

headline-mdFraunces · 24px · 600

The quick brown fox jumps

body-mdAtkinson Hyperlegible · 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

Shape

full9999px

lg8px

md4px

none0px

sm2px

shadcn/ui

implementation kit

needs agent-authored kitstored

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.

primaryaccentsurfacemutedwarningerror

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: #F7E7C6;
  --foreground: #2A1D17;
  --card: #FFF5D8;
  --card-foreground: #2A1D17;
  --popover: #FFF5D8;
  --popover-foreground: #2A1D17;
  --primary: #D9452F;
  --primary-foreground: #ffffff;
  --secondary: #2567B8;
  --secondary-foreground: #ffffff;
  --muted: #7E5E48;
  --muted-foreground: #2A1D17;
  --accent: #F2B93B;
  --accent-foreground: #ffffff;
  --destructive: #B8322A;
  --border: #3A251C;
  --input: #3A251C;
  --ring: #F2B93B;
  --chart-1: #D9452F;
  --chart-2: #2567B8;
  --chart-3: #F2B93B;
  --chart-4: #3D8C55;
  --chart-5: #D88724;
  --sidebar: #FFF5D8;
  --sidebar-foreground: #2A1D17;
  --sidebar-primary: #D9452F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2F75C8;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #3A251C;
  --sidebar-ring: #F2B93B;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #D9452F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #F2B93B;
  --accent-foreground: #ffffff;
  --destructive: #B8322A;
  --border: #303642;
  --input: #303642;
  --ring: #F2B93B;
  --chart-1: #D9452F;
  --chart-2: #2567B8;
  --chart-3: #F2B93B;
  --chart-4: #3D8C55;
  --chart-5: #D88724;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #D9452F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #F2B93B;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #F2B93B;
  --radius: 4px;
}

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 TactilePixelCraftShadcnKit() {
  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">Tactile Pixel Craft</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": "tactile-pixel-craft",
  "type": "registry:theme",
  "title": "Tactile Pixel Craft shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7E7C6",
      "foreground": "#2A1D17",
      "card": "#FFF5D8",
      "card-foreground": "#2A1D17",
      "popover": "#FFF5D8",
      "popover-foreground": "#2A1D17",
      "primary": "#D9452F",
      "primary-foreground": "#ffffff",
      "secondary": "#2567B8",
      "secondary-foreground": "#ffffff",
      "muted": "#7E5E48",
      "muted-foreground": "#2A1D17",
      "accent": "#F2B93B",
      "accent-foreground": "#ffffff",
      "destructive": "#B8322A",
      "border": "#3A251C",
      "input": "#3A251C",
      "ring": "#F2B93B",
      "chart-1": "#D9452F",
      "chart-2": "#2567B8",
      "chart-3": "#F2B93B",
      "chart-4": "#3D8C55",
      "chart-5": "#D88724",
      "sidebar": "#FFF5D8",
      "sidebar-foreground": "#2A1D17",
      "sidebar-primary": "#D9452F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F75C8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#3A251C",
      "sidebar-ring": "#F2B93B",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#D9452F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F2B93B",
      "accent-foreground": "#ffffff",
      "destructive": "#B8322A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F2B93B",
      "chart-1": "#D9452F",
      "chart-2": "#2567B8",
      "chart-3": "#F2B93B",
      "chart-4": "#3D8C55",
      "chart-5": "#D88724",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#D9452F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F2B93B",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F2B93B",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e66f7-7754-7c73-9365-007b9e314c16",
    "slug": "tactile-pixel-craft",
    "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",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    }
  }
}

component recipesstored

# shadcn/ui Components — Tactile Pixel Craft
Author: `katagami-agent`

## ShadSync visual profile
Family: tactile pixel craft. Material: warm uncoated paper and stitched textile substrate. Contour: square tile slabs. Border: hard 2px ink plus double-edge seams. Underlay/grain: pale 8px substrate grid with sparse pixel knots. Motion: 120ms stepped one-cell hop. Density: moderately dense maker-table patches with 24px cream seams. Accents: primary red, blueprint blue, and bead-gold material swatches.

## Signature component recipes
### button
Use Button with inline 16px mosaic glyph, uppercase IBM Plex Mono label, 2px dark border, 0-2px radius, background primary/accent, and active: translate(4px,4px) with shadow collapse.
### card
Use Card as a square cream tile slab with double dark border, inset grid field, corner bead matrix, quilt seam divider, and 4px/8px offset pixel shadow.
### input
Use Input with dithered checker background, black pixel focus brackets via focus-visible outline/box-shadow, 2px border, and mono coordinate placeholder.
### textarea
Use Textarea as stitched note cloth: cream field, dashed stitch seam on top edge, mono helper row, and no rounded glass treatment.
### select
Use SelectTrigger as a tile control with bead-chevron square, double border, and dropdown items separated by alternating seam ticks.
### dialog
Use DialogContent as a centered quilt patch with cream inset, heavy ink frame, bead header strip, and stepped entrance rather than fade/scale blur.
### sheet
Use SheetContent as a tool rail patch with vertical stitch ticks, named material groups, and grid-aligned controls.
### tabs
Use TabsList as joined square tile tabs; active tab receives red/gold checker cap and one-cell raised shadow.
### badge
Use Badge as a compact square-cell marker, mono uppercase, dither fill or corner bead encoding; avoid generic pills unless role is a tiny count chip.
### separator
Use Separator as quilt seam: alternating two-color square ticks aligned to the 8px grid.
### checkbox
Use Checkbox as a 16px bead cell with hard ink border and checker tick fill.
### switch
Use Switch as a short row of square cells with stepped thumb movement, not a glossy capsule.
### slider
Use Slider as discrete bead-meter cells, 12px squares, with dithered filled cells and dark tick marks.
### tooltip
Use TooltipContent as a small stitched label card with mono coordinate prefix and 2px ink border.
### dropdown-menu
Use DropdownMenuContent as stacked tile menu rows with seam separators, glyph squares, and hover checker underlay.
### table
Use Table with gridded rows, mono coordinate first column, bead status cells, and thick section separators.

## Preview shots
- `application-shell`: quilted workspace with fixed craft rail, bead-meter project status, and large work mat cards.
- `detail-editor`: stitched form editor with dithered fields, pixel focus brackets, tabs, dialog/sheet examples.
- `data-operations`: gridded table, dropdown actions, bead status column, slider and switch controls.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"

export function TactilePixelCraftPanel() {
  return (
    <Card className="rounded-[2px] border-2 border-[#3A251C] bg-[#FFF5D8] shadow-[4px_4px_0_#3A251C] [background-image:linear-gradient(rgba(58,37,28,.08)_1px,transparent_1px),linear-gradient(90deg,rgba(58,37,28,.08)_1px,transparent_1px)] [background-size:8px_8px]">
      <CardHeader className="border-b-2 border-dashed border-[#3A251C]">
        <Badge className="rounded-[2px] border-2 border-[#3A251C] bg-[#F2B93B] font-mono uppercase text-[#2A1D17]">Patch A-08</Badge>
        <CardTitle className="font-serif text-3xl text-[#2A1D17]">Stitch the next tile run</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-6">
        <Input className="rounded-none border-2 border-[#3A251C] bg-[#F7E7C6] font-mono focus-visible:ring-0 focus-visible:shadow-[0_0_0_4px_#F2B93B]" placeholder="TILE-COORD" />
        <Button className="rounded-[2px] border-2 border-[#3A251C] bg-[#D9452F] font-mono uppercase shadow-[4px_4px_0_#3A251C] active:translate-x-1 active:translate-y-1 active:shadow-none">▦ Lock seam</Button>
      </CardContent>
    </Card>
  )
}
```

preview shotsstored

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use Button with inline 16px mosaic glyph, uppercase IBM Plex Mono label, 2px dark border, 0-2px radius, background primary/accent, and active: translate(4px,4px) with shadow collapse."
    },
    {
      "component": "card",
      "recipe": "Use Card as a square cream tile slab with double dark border, inset grid field, corner bead matrix, quilt seam divider, and 4px/8px offset pixel shadow."
    },
    {
      "component": "input",
      "recipe": "Use Input with dithered checker background, black pixel focus brackets via focus-visible outline/box-shadow, 2px border, and mono coordinate placeholder."
    },
    {
      "component": "textarea",
      "recipe": "Use Textarea as stitched note cloth: cream field, dashed stitch seam on top edge, mono helper row, and no rounded glass treatment."
    },
    {
      "component": "select",
      "recipe": "Use SelectTrigger as a tile control with bead-chevron square, double border, and dropdown items separated by alternating seam ticks."
    },
    {
      "component": "dialog",
      "recipe": "Use DialogContent as a centered quilt patch with cream inset, heavy ink frame, bead header strip, and stepped entrance rather than fade/scale blur."
    },
    {
      "component": "sheet",
      "recipe": "Use SheetContent as a tool rail patch with vertical stitch ticks, named material groups, and grid-aligned controls."
    },
    {
      "component": "tabs",
      "recipe": "Use TabsList as joined square tile tabs; active tab receives red/gold checker cap and one-cell raised shadow."
    },
    {
      "component": "badge",
      "recipe": "Use Badge as a compact square-cell marker, mono uppercase, dither fill or corner bead encoding; avoid generic pills unless role is a tiny count chip."
    },
    {
      "component": "separator",
      "recipe": "Use Separator as quilt seam: alternating two-color square ticks aligned to the 8px grid."
    },
    {
      "component": "checkbox",
      "recipe": "Use Checkbox as a 16px bead cell with hard ink border and checker tick fill."
    },
    {
      "component": "switch",
      "recipe": "Use Switch as a short row of square cells with stepped thumb movement, not a glossy capsule."
    },
    {
      "component": "slider",
      "recipe": "Use Slider as discrete bead-meter cells, 12px squares, with dithered filled cells and dark tick marks."
    },
    {
      "component": "tooltip",
      "recipe": "Use TooltipContent as a small stitched label card with mono coordinate prefix and 2px ink border."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use DropdownMenuContent as stacked tile menu rows with seam separators, glyph squares, and hover checker underlay."
    },
    {
      "component": "table",
      "recipe": "Use Table with gridded rows, mono coordinate first column, bead status cells, and thick section separators."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "id": "application-shell",
      "scene": {
        "actions": [
          "Lock seam",
          "Add bead row"
        ],
        "description": "A fixed craft rail, bead-meter progress, and gridded work mat show project state as handmade square cells.",
        "eyebrow": "PATCH BOARD / A-08",
        "headline": "Assemble today’s tile run",
        "rows": [
          {
            "owner": "Mira",
            "patch": "Header quilt",
            "status": "gold bead"
          },
          {
            "owner": "Noor",
            "patch": "Tool rail",
            "status": "blue bead"
          }
        ],
        "stats": [
          {
            "label": "tiles stitched",
            "value": "128"
          },
          {
            "label": "open seams",
            "value": "06"
          },
          {
            "label": "quality beads",
            "value": "92%"
          }
        ]
      },
      "title": "Quilted Maker Workspace"
    },
    {
      "id": "detail-editor",
      "scene": {
        "actions": [
          "Save patch",
          "Preview stitch"
        ],
        "description": "Dithered inputs, tab tiles, checkbox bead cells, and a sheet-like rail keep editing tactile and grid-true.",
        "eyebrow": "FORM PATCH / B-12",
        "fields": [
          {
            "label": "Tile coordinate",
            "value": "B-12-04"
          },
          {
            "label": "Thread color",
            "value": "Primary red"
          },
          {
            "label": "Seam density",
            "value": "24px"
          }
        ],
        "headline": "Tune bead matrix settings",
        "stats": [
          {
            "label": "focus cells",
            "value": "04"
          },
          {
            "label": "warnings",
            "value": "01"
          }
        ]
      },
      "title": "Stitched Detail Editor"
    },
    {
      "id": "data-operations",
      "scene": {
        "actions": [
          "Route selected",
          "Open menu"
        ],
        "description": "Rows use mono coordinates, dropdown tile actions, discrete sliders, switches, and bead-coded states.",
        "eyebrow": "OPS TABLE / C-03",
        "headline": "Route craft batches by bead status",
        "rows": [
          {
            "batch": "Corner beads",
            "id": "C-03",
            "score": "8/10",
            "state": "ready"
          },
          {
            "batch": "Checker seams",
            "id": "C-04",
            "score": "6/10",
            "state": "review"
          },
          {
            "batch": "Ink border",
            "id": "C-05",
            "score": "10/10",
            "state": "done"
          }
        ],
        "stats": [
          {
            "label": "ready cells",
            "value": "18"
          },
          {
            "label": "review cells",
            "value": "05"
          }
        ]
      },
      "title": "Gridded Operations Table"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "#D9452F",
      "#2567B8",
      "#F2B93B",
      "#3A251C"
    ],
    "border": "2px ink double-edge with dashed stitch seams",
    "contour": "square tile slabs",
    "density": "moderately dense maker-table patches",
    "family": "tactile-pixel-craft",
    "grain": true,
    "material": "warm paper textile grid",
    "motion": "stepped one-cell hop",
    "stickerBadges": true,
    "underlay": true
  }
}