design language·bitmap-packaging-minimal

Bitmap Packaging Minimal

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

Bitmap Packaging Minimal treats pixel art as a luxury registration system: single-color micro marks, carton-diecut spacing, and quiet bitmap grids make a product interface feel like premium paper packaging rather than a retro game skin.

values

One-color confidence with tonal paper depthTiny bitmap marks used as registration, not decorationGenerous negative space that makes small pixels feel valuablePackaging-grade hierarchy, labels, seals, and batch codes

anti-values

×Neon arcade nostalgia or noisy full-screen sprites×Generic SaaS dashboards with pixel icons pasted on top×Overfilled dithering that destroys the premium paper calm

tokens

borders4 items

accent width: 2px
character: hairline carton rules interrupted by 4px stepped pixel ticks at selected corners
default width: 1px
style: solid

colors12 items

accent

#243B2F

background

#F8F4EA

border

#CFC6B6

error

#8B3A32

info

#3F6170

muted

#8C8476

primary

#243B2F

secondary

#E7E0D2

success

#3E6B4F

surface

#FFFDF6

text

#1F2A22

warning

#9B6A2A

motion3 items

duration: 160ms
easing: steps(2, end)
philosophy: interactions snap in two bitmap increments like print registration aligning, never bounce or float

radii5 items

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

shadows3 items

lg: 0 30px 90px rgba(36,59,47,.12)
md: 0 18px 50px rgba(36,59,47,.08)
sm: 0 1px 0 rgba(36,59,47,.08)

spacing2 items

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

surfaces3 items

bg pattern: bare paper field with occasional 4px registration marks and faint fold-line rules
card style: flat carton panels with hairline ink borders, oversized gutters, clipped label tabs, and sparse pixel seals
treatment: premium warm paper with subtle fiber speckle made from tiny single-ink radial gradients

typography8 items

base size: 16px
body font: Literata
google fonts url: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap
heading font: Cormorant Garamond
letter spacing: -0.02em
line height: 1.48
mono font: IBM Plex Mono
scale ratio: 1.22

rules

composition

Compose like a premium sample box: one dominant package panel, small label islands, barcode-like data strips, and more empty paper than content.

density

Low density overall with dense 4px bitmap clusters only at seals, corners, and ingredient/status strips.

hierarchy

Let scale changes be dramatic: a large quiet serif headline, tiny mono batch metadata, and compact product controls grouped as printed label blocks.

signature patterns

Pixel seals are constructed from 4px CSS squares and box-shadows, appearing as tiny verification stamps beside labels and calls to action.Stepped carton corners use linear-gradient masks and 2px ink ticks so panels feel die-cut without becoming playful arcade frames.Dither swatches appear as sparse single-color dot matrices inside product material cards, never as full backgrounds.Batch-code navigation uses mono uppercase labels, hairline separators, and small filled square bullets as the primary UI chrome.

layout

breakpoints

mobile 375px, tablet 768px, desktop 1200px with gutters scaling from 16px to 48px

grid

Desktop uses a 12-column packaging sheet with a dominant 7-column hero carton and narrow label rail; mobile stacks as sealed paper slips.

whitespace

Whitespace is the signature material: largest gaps are 96px paper fields, while label internals compress to 4px and 8px increments.

guidance

Use one ink color plus paper tints before introducing any extra accent.
Keep pixel marks physically small and aligned to a 4px bitmap grid.
Make every screen a plausible label, carton, insert, seal, or premium sample sheet.
Use empty paper to make controls and icons feel deliberately printed.

avoid

Do not use rainbow pixel art, game characters, or neon CRT glow.
Do not fill backgrounds with dense dithering or decorative sprites.
Do not round components into friendly app bubbles; keep the packaging geometry crisp.
Do not use generic dashboard widgets when product-package content can carry the scene.

katagami spec

# Bitmap Packaging Minimal

## Philosophy

Bitmap Packaging Minimal treats pixel art as a luxury registration system: single-color micro marks, carton-diecut spacing, and quiet bitmap grids make a product interface feel like premium paper packaging rather than a retro game skin.

### Values

- One-color confidence with tonal paper depth
- Tiny bitmap marks used as registration, not decoration
- Generous negative space that makes small pixels feel valuable
- Packaging-grade hierarchy, labels, seals, and batch codes

### Anti-Values

- Neon arcade nostalgia or noisy full-screen sprites
- Generic SaaS dashboards with pixel icons pasted on top
- Overfilled dithering that destroys the premium paper calm

### Visual Character

- Use a warm off-white page with one ink color and very pale paper tints, reserving the saturated ink for micro icons, seals, and focus outlines.
- Build cards as packaging panels with hairline borders, square 2px radii, clipped label tabs, and large unprinted margins around compact content blocks.
- Render ornament through CSS pixel masks: 4px square box-shadow constellations, step-like corner ticks, and small bitmap product symbols instead of illustrations.
- Use mono-like batch labels and condensed serif display type with tight tracking so typography feels printed on premium stock rather than screen-native.

## Tokens

### Borders

- **Accent Width**: 2px
- **Character**: hairline carton rules interrupted by 4px stepped pixel ticks at selected corners
- **Default Width**: 1px
- **Style**: solid

### Colors

| Name | Value |
|------|-------|
| accent | `#243B2F` |
| background | `#F8F4EA` |
| border | `#CFC6B6` |
| error | `#8B3A32` |
| info | `#3F6170` |
| muted | `#8C8476` |
| primary | `#243B2F` |
| secondary | `#E7E0D2` |
| success | `#3E6B4F` |
| surface | `#FFFDF6` |
| text | `#1F2A22` |
| warning | `#9B6A2A` |

### Motion

- **Duration**: 160ms
- **Easing**: steps(2, end)
- **Philosophy**: interactions snap in two bitmap increments like print registration aligning, never bounce or float

### Radii

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

### Shadows

- **Lg**: 0 30px 90px rgba(36,59,47,.12)
- **Md**: 0 18px 50px rgba(36,59,47,.08)
- **Sm**: 0 1px 0 rgba(36,59,47,.08)

### Spacing

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

### Surfaces

- **Bg Pattern**: bare paper field with occasional 4px registration marks and faint fold-line rules
- **Card Style**: flat carton panels with hairline ink borders, oversized gutters, clipped label tabs, and sparse pixel seals
- **Treatment**: premium warm paper with subtle fiber speckle made from tiny single-ink radial gradients

### Typography

- **Base Size**: 16px
- **Body Font**: Literata
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap
- **Heading Font**: Cormorant Garamond
- **Letter Spacing**: -0.02em
- **Line Height**: 1.48
- **Mono Font**: IBM Plex Mono
- **Scale Ratio**: 1.22

## Rules

### Composition

Compose like a premium sample box: one dominant package panel, small label islands, barcode-like data strips, and more empty paper than content.

### Density

Low density overall with dense 4px bitmap clusters only at seals, corners, and ingredient/status strips.

### Hierarchy

Let scale changes be dramatic: a large quiet serif headline, tiny mono batch metadata, and compact product controls grouped as printed label blocks.

### Signature Patterns

- Pixel seals are constructed from 4px CSS squares and box-shadows, appearing as tiny verification stamps beside labels and calls to action.
- Stepped carton corners use linear-gradient masks and 2px ink ticks so panels feel die-cut without becoming playful arcade frames.
- Dither swatches appear as sparse single-color dot matrices inside product material cards, never as full backgrounds.
- Batch-code navigation uses mono uppercase labels, hairline separators, and small filled square bullets as the primary UI chrome.

## Layout

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px with gutters scaling from 16px to 48px

### Grid

Desktop uses a 12-column packaging sheet with a dominant 7-column hero carton and narrow label rail; mobile stacks as sealed paper slips.

### Whitespace

Whitespace is the signature material: largest gaps are 96px paper fields, while label internals compress to 4px and 8px increments.

## Guidance

### Do

- Use one ink color plus paper tints before introducing any extra accent.
- Keep pixel marks physically small and aligned to a 4px bitmap grid.
- Make every screen a plausible label, carton, insert, seal, or premium sample sheet.
- Use empty paper to make controls and icons feel deliberately printed.

### Don't

- Do not use rainbow pixel art, game characters, or neon CRT glow.
- Do not fill backgrounds with dense dithering or decorative sprites.
- Do not round components into friendly app bubbles; keep the packaging geometry crisp.
- Do not use generic dashboard widgets when product-package content can carry the scene.

DESIGN.md

---
version: "alpha"
name: "Bitmap Packaging Minimal"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  accent: "#243B2F"
  background: "#F8F4EA"
  border: "#CFC6B6"
  error: "#8B3A32"
  info: "#3F6170"
  muted: "#8C8476"
  primary: "#243B2F"
  secondary: "#E7E0D2"
  success: "#3E6B4F"
  surface: "#FFFDF6"
  text: "#1F2A22"
  warning: "#9B6A2A"
typography:
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.816rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.488rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Literata"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.48
    letterSpacing: "-0.02em"
  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"
  step-8: "96px"
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: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Bitmap Packaging Minimal

## Overview

Bitmap Packaging Minimal treats pixel art as a luxury registration system: single-color micro marks, carton-diecut spacing, and quiet bitmap grids make a product interface feel like premium paper packaging rather than a retro game skin.

### Values

- One-color confidence with tonal paper depth
- Tiny bitmap marks used as registration, not decoration
- Generous negative space that makes small pixels feel valuable
- Packaging-grade hierarchy, labels, seals, and batch codes

### Anti-Values

- Neon arcade nostalgia or noisy full-screen sprites
- Generic SaaS dashboards with pixel icons pasted on top
- Overfilled dithering that destroys the premium paper calm

### Visual Character

- Use a warm off-white page with one ink color and very pale paper tints, reserving the saturated ink for micro icons, seals, and focus outlines.
- Build cards as packaging panels with hairline borders, square 2px radii, clipped label tabs, and large unprinted margins around compact content blocks.
- Render ornament through CSS pixel masks: 4px square box-shadow constellations, step-like corner ticks, and small bitmap product symbols instead of illustrations.
- Use mono-like batch labels and condensed serif display type with tight tracking so typography feels printed on premium stock rather than screen-native.

## 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 | `#243B2F` |
| background | `#F8F4EA` |
| border | `#CFC6B6` |
| error | `#8B3A32` |
| info | `#3F6170` |
| muted | `#8C8476` |
| primary | `#243B2F` |
| secondary | `#E7E0D2` |
| success | `#3E6B4F` |
| surface | `#FFFDF6` |
| text | `#1F2A22` |
| warning | `#9B6A2A` |

## Typography

- **Headline-Lg**: Cormorant Garamond, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Literata, 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`
- **Step-8**: `96px`

### Breakpoints

mobile 375px, tablet 768px, desktop 1200px with gutters scaling from 16px to 48px

### Grid

Desktop uses a 12-column packaging sheet with a dominant 7-column hero carton and narrow label rail; mobile stacks as sealed paper slips.

### Whitespace

Whitespace is the signature material: largest gaps are 96px paper fields, while label internals compress to 4px and 8px increments.

## Elevation & Depth

### Shadows

- **Lg**: 0 30px 90px rgba(36,59,47,.12)
- **Md**: 0 18px 50px rgba(36,59,47,.08)
- **Sm**: 0 1px 0 rgba(36,59,47,.08)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: bare paper field with occasional 4px registration marks and faint fold-line rules
- **Card Style**: flat carton panels with hairline ink borders, oversized gutters, clipped label tabs, and sparse pixel seals
- **Treatment**: premium warm paper with subtle fiber speckle made from tiny single-ink radial gradients

### Borders

- **Accent Width**: 2px
- **Character**: hairline carton rules interrupted by 4px stepped pixel ticks at selected corners
- **Default Width**: 1px
- **Style**: solid

## Components

### Composition

Compose like a premium sample box: one dominant package panel, small label islands, barcode-like data strips, and more empty paper than content.

### Density

Low density overall with dense 4px bitmap clusters only at seals, corners, and ingredient/status strips.

### Hierarchy

Let scale changes be dramatic: a large quiet serif headline, tiny mono batch metadata, and compact product controls grouped as printed label blocks.

### Signature Patterns

- Pixel seals are constructed from 4px CSS squares and box-shadows, appearing as tiny verification stamps beside labels and calls to action.
- Stepped carton corners use linear-gradient masks and 2px ink ticks so panels feel die-cut without becoming playful arcade frames.
- Dither swatches appear as sparse single-color dot matrices inside product material cards, never as full backgrounds.
- Batch-code navigation uses mono uppercase labels, hairline separators, and small filled square bullets as the primary UI chrome.

## 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-019e6c90-6ffd-7010-b906-9905ab9ee70e/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 one ink color plus paper tints before introducing any extra accent.
- Do Keep pixel marks physically small and aligned to a 4px bitmap grid.
- Do Make every screen a plausible label, carton, insert, seal, or premium sample sheet.
- Do Use empty paper to make controls and icons feel deliberately printed.
- Don't Do not use rainbow pixel art, game characters, or neon CRT glow.
- Don't Do not fill backgrounds with dense dithering or decorative sprites.
- Don't Do not round components into friendly app bubbles; keep the packaging geometry crisp.
- Don't Do not use generic dashboard widgets when product-package content can carry the scene.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bitmap-packaging-minimal",
  "type": "registry:theme",
  "title": "Bitmap Packaging Minimal shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F8F4EA",
      "foreground": "#1F2A22",
      "card": "#FFFDF6",
      "card-foreground": "#1F2A22",
      "popover": "#FFFDF6",
      "popover-foreground": "#1F2A22",
      "primary": "#243B2F",
      "primary-foreground": "#ffffff",
      "secondary": "#E7E0D2",
      "secondary-foreground": "#111111",
      "muted": "#8C8476",
      "muted-foreground": "#1F2A22",
      "accent": "#243B2F",
      "accent-foreground": "#ffffff",
      "destructive": "#8B3A32",
      "border": "#CFC6B6",
      "input": "#CFC6B6",
      "ring": "#243B2F",
      "chart-1": "#243B2F",
      "chart-2": "#E7E0D2",
      "chart-3": "#243B2F",
      "chart-4": "#3E6B4F",
      "chart-5": "#9B6A2A",
      "sidebar": "#FFFDF6",
      "sidebar-foreground": "#1F2A22",
      "sidebar-primary": "#243B2F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F6170",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CFC6B6",
      "sidebar-ring": "#243B2F",
      "radius": "4px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#243B2F",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#243B2F",
      "accent-foreground": "#ffffff",
      "destructive": "#8B3A32",
      "border": "#303642",
      "input": "#303642",
      "ring": "#243B2F",
      "chart-1": "#243B2F",
      "chart-2": "#E7E0D2",
      "chart-3": "#243B2F",
      "chart-4": "#3E6B4F",
      "chart-5": "#9B6A2A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#243B2F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#243B2F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#243B2F",
      "radius": "4px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019e6c90-6ffd-7010-b906-9905ab9ee70e",
    "slug": "bitmap-packaging-minimal",
    "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 · bitmap-packaging-minimal

DESIGN.md

at a glance

Palette

Typography

headline-lgCormorant Garamond · 29px · 700

The quick brown fox jumps

headline-mdCormorant Garamond · 24px · 600

The quick brown fox jumps

body-mdLiterata · 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

Shape

full9999px

lg8px

md4px

none0px

sm2px

shadcn/ui

implementation kit

agent-authored kitstored + verified

shadcn implementation kit

These scenes and recipes came from the Katagami review agent and can be copied as the shadcn implementation layer.

shadsync shotsstored + verifiedpaper-collage

Bitmap Packaging Minimal

Agent-authored scenes, component recipes, and visual profile rendered on local shadcn-style primitives.

flat carton panels with hairline ink borders, oversized gutters, clipped label tabs, and sparse pixel seals

PKG-MIN-28application-shell

Tea carton proof is ready for press

Review fold lines, ink density, and micro registration marks before the limited batch prints.

buttoncardtabsbadgeseparatortooltipdropdown-menu

Bitmap Packaging Minimal

shadcn layer

Overview

Components

Reviews

Exports

primarysurfacemutedwarningerror

cartons

480

ink colors

grid

4px

Component coverage

Filters, state, and row density rendered with the generated theme.

Surface	State	Status
Primary flow	mapped	active
Token coverage	semantic	synced
Responsive proof	queued	review

Must show

Avoid

generic dashboard cards

rainbow pixel art

Label copydetail-editor

Adjust the paper note and seal density

Edit tactile packaging copy while preserving the one-ink bitmap seal system.

inputtextareaselectcheckboxswitchsliderdialogsheet

Recipe details

Labels, validation, written guidance, and controls stay visible.

Component familyState treatment

Guidance copy

Require keyboard stateAgent-authored shot

Density68

FocusInvalidConfirmed

Context sheet

Generated with the language job

sheet

Stock

Warm uncoated 320gsm

Seal density

42%

Paper note

Pixel seal holds at small sizes.

Must show

Avoid

rounded app bubbles

dense forms

Press queuedata-operations

Three carton runs awaiting registration lock

Operations view for premium sample packaging production.

tablecardbadgeseparatorbuttonswitchtooltip

Three carton runs awaiting registration lock

Operations view for premium sample packaging production.

lockedreviewqueued

Check	Finding	Status
Button hierarchy	approved	locked
Table rhythm	needs pass	review
Empty state	designed	queued

Responsive table, menu, tooltip, and badge proof.

Must show

Avoid

spreadsheet clutter

chart junk

recommendedagent kit includedverified

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: #F8F4EA;
  --foreground: #1F2A22;
  --card: #FFFDF6;
  --card-foreground: #1F2A22;
  --popover: #FFFDF6;
  --popover-foreground: #1F2A22;
  --primary: #243B2F;
  --primary-foreground: #ffffff;
  --secondary: #E7E0D2;
  --secondary-foreground: #111111;
  --muted: #8C8476;
  --muted-foreground: #1F2A22;
  --accent: #243B2F;
  --accent-foreground: #ffffff;
  --destructive: #8B3A32;
  --border: #CFC6B6;
  --input: #CFC6B6;
  --ring: #243B2F;
  --chart-1: #243B2F;
  --chart-2: #E7E0D2;
  --chart-3: #243B2F;
  --chart-4: #3E6B4F;
  --chart-5: #9B6A2A;
  --sidebar: #FFFDF6;
  --sidebar-foreground: #1F2A22;
  --sidebar-primary: #243B2F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #3F6170;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #CFC6B6;
  --sidebar-ring: #243B2F;
  --radius: 4px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #243B2F;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #243B2F;
  --accent-foreground: #ffffff;
  --destructive: #8B3A32;
  --border: #303642;
  --input: #303642;
  --ring: #243B2F;
  --chart-1: #243B2F;
  --chart-2: #E7E0D2;
  --chart-3: #243B2F;
  --chart-4: #3E6B4F;
  --chart-5: #9B6A2A;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #243B2F;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #243B2F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #243B2F;
  --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 BitmapPackagingMinimalShadcnKit() {
  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">Bitmap Packaging Minimal</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 JSONstored + verified

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "cssVars": {
    "dark": {
      "accent": "#243B2F",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#243B2F",
      "chart-2": "#E7E0D2",
      "chart-3": "#243B2F",
      "chart-4": "#3E6B4F",
      "chart-5": "#9B6A2A",
      "destructive": "#8B3A32",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#243B2F",
      "primary-foreground": "#ffffff",
      "radius": "4px",
      "ring": "#243B2F",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#243B2F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#243B2F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#243B2F"
    },
    "light": {
      "accent": "#243B2F",
      "accent-foreground": "#ffffff",
      "background": "#F8F4EA",
      "border": "#CFC6B6",
      "card": "#FFFDF6",
      "card-foreground": "#1F2A22",
      "chart-1": "#243B2F",
      "chart-2": "#E7E0D2",
      "chart-3": "#243B2F",
      "chart-4": "#3E6B4F",
      "chart-5": "#9B6A2A",
      "destructive": "#8B3A32",
      "foreground": "#1F2A22",
      "input": "#CFC6B6",
      "muted": "#8C8476",
      "muted-foreground": "#1F2A22",
      "popover": "#FFFDF6",
      "popover-foreground": "#1F2A22",
      "primary": "#243B2F",
      "primary-foreground": "#ffffff",
      "radius": "4px",
      "ring": "#243B2F",
      "secondary": "#E7E0D2",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFDF6",
      "sidebar-accent": "#3F6170",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#CFC6B6",
      "sidebar-foreground": "#1F2A22",
      "sidebar-primary": "#243B2F",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#243B2F"
    },
    "theme": {}
  },
  "meta": {
    "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",
    "languageId": "en-019e6c90-6ffd-7010-b906-9905ab9ee70e",
    "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"
      ]
    },
    "slug": "bitmap-packaging-minimal",
    "source": "katagami"
  },
  "name": "bitmap-packaging-minimal",
  "title": "Bitmap Packaging Minimal shadcn Theme",
  "type": "registry:theme"
}

component recipesstored + verified

# Bitmap Packaging Minimal shadcn/ui Components

Author: `katagami-agent`

## Intent
Translate the language into local shadcn primitives that feel like premium paper packaging: quiet carton panels, single-ink pixel seals, tiny batch-code labels, and large unprinted margins.

## Required primitives
button, card, input, textarea, select, dialog, sheet, tabs, badge, separator, checkbox, switch, slider, tooltip, dropdown-menu, table.

## Token cues
Use {colors.background} as warm paper, {colors.surface} as carton face, {colors.primary} as sole ink, {colors.border} as fold/hairline rule, {typography.heading_font} for large package names, {typography.mono_font} for labels. Radius scale: card 2px, controls 2px, badge pill only when indicating a seal.

## Visual character to preserve
Oversized negative space; micro 4px bitmap marks; clipped label tabs; single-color focus states; sparse dither swatches.

## ShadSync visual profile
family: bitmap-packaging; material: premium-paper; contour: square-stepped; border: hairline-with-pixel-ticks; underlay: false; grain: true; stickerBadges: true; motion: two-step-registration; density: sparse.

## Signature component recipes
- `button`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `card`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `input`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `textarea`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `select`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `dialog`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `sheet`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `tabs`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `badge`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `separator`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `checkbox`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `switch`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `slider`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `tooltip`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `dropdown-menu`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.
- `table`: keep square 2px/4px geometry, hairline #CFC6B6 rules, IBM Plex Mono micro labels, one #243B2F ink accent, stepped focus outline, and generous paper whitespace; avoid rounded SaaS gloss.

## Preview shots
application-shell, detail-editor, data-operations should render realistic packaging approval scenes, not component catalogs.

## Implementation contract
Import local primitives from `@/components/ui/*`. Do not invent a second component system. Preserve the one-ink palette and 4px registration logic in className composition.

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

export function ProofCard(){
  return <Card className="rounded-[2px] border border-[#CFC6B6] bg-[#FFFDF6] shadow-none">
    <CardHeader className="space-y-3 p-6">
      <Badge className="w-fit rounded-[2px] bg-[#243B2F] font-mono text-[10px] uppercase tracking-[0.08em] text-[#FFFDF6]">PKG-MIN-28</Badge>
      <CardTitle className="font-serif text-4xl tracking-[-0.04em] text-[#1F2A22]">Carton proof ready</CardTitle>
    </CardHeader>
    <CardContent className="p-6 pt-0">
      <Button className="rounded-[2px] border-2 border-[#243B2F] bg-[#243B2F] font-mono text-[11px] uppercase tracking-[0.08em] text-[#FFFDF6] shadow-[4px_4px_0_#E7E0D2]">Approve proof</Button>
    </CardContent>
  </Card>
}
```

preview shotsstored + verified

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "component": "button",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "card",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "input",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "textarea",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "select",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "dialog",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "sheet",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "tabs",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "badge",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "separator",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "checkbox",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "switch",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "slider",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "tooltip",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "dropdown-menu",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    },
    {
      "component": "table",
      "recipe": "Use square paper geometry, hairline borders, mono batch labels, one-ink pixel focus ticks, and restrained spacing appropriate to packaging approval workflows."
    }
  ],
  "generatedBy": "katagami-agent",
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "generic dashboard cards",
        "rainbow pixel art"
      ],
      "composition": "A packaging proof approval shell with left batch rail, dominant carton card, and sparse action strip.",
      "id": "application-shell",
      "mustShowStates": [
        "primary approval button hover/focus",
        "active tab as dark clipped label",
        "pixel seal badge"
      ],
      "primitives": [
        "button",
        "card",
        "tabs",
        "badge",
        "separator",
        "tooltip",
        "dropdown-menu"
      ],
      "scene": {
        "actions": [
          "Approve proof",
          "Inspect marks"
        ],
        "description": "Review fold lines, ink density, and micro registration marks before the limited batch prints.",
        "eyebrow": "PKG-MIN-28",
        "headline": "Tea carton proof is ready for press",
        "stats": [
          {
            "label": "cartons",
            "value": "480"
          },
          {
            "label": "ink colors",
            "value": "1"
          },
          {
            "label": "grid",
            "value": "4px"
          }
        ]
      }
    },
    {
      "avoid": [
        "rounded app bubbles",
        "dense forms"
      ],
      "composition": "A quiet label copy editor on a paper sheet, with controls grouped like printed ingredient blocks.",
      "id": "detail-editor",
      "mustShowStates": [
        "focused input with stepped outline",
        "checked square checkbox",
        "slider as registration density"
      ],
      "primitives": [
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet",
        "button",
        "badge"
      ],
      "scene": {
        "actions": [
          "Save label",
          "Open proof sheet"
        ],
        "description": "Edit tactile packaging copy while preserving the one-ink bitmap seal system.",
        "eyebrow": "Label copy",
        "fields": [
          {
            "label": "Stock",
            "value": "Warm uncoated 320gsm"
          },
          {
            "label": "Seal density",
            "value": "42%"
          },
          {
            "label": "Paper note",
            "value": "Pixel seal holds at small sizes."
          }
        ],
        "headline": "Adjust the paper note and seal density"
      }
    },
    {
      "avoid": [
        "spreadsheet clutter",
        "chart junk"
      ],
      "composition": "A batch operations table treated like a barcode insert with mono rows and one dominant status card.",
      "id": "data-operations",
      "mustShowStates": [
        "selected row with ink square bullet",
        "status badges as tiny seals",
        "table hairlines only"
      ],
      "primitives": [
        "table",
        "card",
        "badge",
        "separator",
        "button",
        "switch",
        "tooltip"
      ],
      "scene": {
        "actions": [
          "Lock selected",
          "Export insert"
        ],
        "description": "Operations view for premium sample packaging production.",
        "eyebrow": "Press queue",
        "headline": "Three carton runs awaiting registration lock",
        "rows": [
          {
            "batch": "SAGE-04",
            "status": "locked",
            "stock": "warm fiber"
          },
          {
            "batch": "MIST-11",
            "status": "review",
            "stock": "cotton rag"
          },
          {
            "batch": "BARK-02",
            "status": "queued",
            "stock": "kraft tint"
          }
        ]
      }
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "single sage ink micro pixels",
      "clipped dark label tabs",
      "sparse dither swatches"
    ],
    "border": "hairline-solid-with-4px-corner-ticks",
    "contour": "square-stepped",
    "density": "sparse",
    "family": "bitmap-packaging",
    "grain": true,
    "material": "premium-paper",
    "motion": "two-step-registration-snap",
    "stickerBadges": true,
    "underlay": false
  }
}