design language·origama

Origama

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

tokens

color17 items

bg: #FFFFFF
surface: #F5F6F4
surface 2: #FFFFFF
text: #14181C
muted: #5E6A70
border: #14181C
accent: #2FB4F2
accent deep: #127FB4
accent wash: #E2F4FD
on accent: #FFFFFF
success: #5FD98C
warning: #FFB42E
error: #E15B4C
info: #2FB4F2
crease hi: rgba(255,255,255,.95)
crease sh: rgba(20,24,28,.10)
crease sh cool: rgba(18,127,180,.16)

type5 items

display: Fraunces, Georgia, serif
body: Space Grotesk, system-ui, sans-serif
mono: Space Mono, ui-monospace, monospace
body size: 17px
display tracking: -0.02em

radius3 items

md: 16px
lg: 24px
full: 9999px

space9 items

s1: 4px
s2: 8px
s3: 12px
s4: 16px
s5: 24px
s6: 32px
s7: 48px
s8: 64px
s9: 96px

elevation1 items

sheet: 0 1px 0 var(--crease-hi), 0 18px 44px rgba(20,24,28,.07)

rules

Every surface is a single folded sheet; structure is a fold-seam (1px highlight over 1px shadow), never a border.

State is a folded dog-ear corner carrying the role accent (sky active, leaf confirmed, marigold the single hero state).

Accents are highlighters: each colour only ever marks a single fold or dog-ear — never a full-bleed flood.

Crease light is near-white highlight + faint cool shadow; never grey borders, never decorative sidelines.

Buttons are pressed-paper tabs of one height: primary a solid sky sheet with knockout, secondary a folded outline tab with a creased leading corner.

Forms are fold-slips: label embossed on the upper fold, input on the lower panel, focus deepening the crease shadow in accent.

Tables are folded ledgers: row groups share a fold-band; headers mono, names serif, separation by fold-shadow not rule.

Nav is a folded ribbon: section tabs of one continuous creased strip, the active tab folded forward with a raised highlight; never a boxed pill bar.

Radii only from {0,16,24,9999}; body 17px+; high contrast ink on paper; light mode is the ground.

No emoji or glyph symbols on controls; icons are inline SVG.

layout

A modular sheet grid where panels tessellate like a fold pattern; 1240px content cap.

Very generous whitespace so each folded sheet has air; always pad above titles.

Asymmetric two/three-up sheet rows alternate with wide unfolded calm bands (80px+).

Hero is a full-bleed single great folded sheet spanning 100vw, with the headline over the calm unfolded zone.

Mobile stacks sheets vertically; each card keeps its single fold-seam; non-essential ledger columns fold away; never overflow horizontally.

On ultra-wide, cap and centre the content; only the hero spans 100vw.

guidance

voice

Calm, concrete, grown-up. Real exhibition copy — venues, times, workshop names — never lorem or AI clichés.

signature mechanic

The Crease: sheets with a fold-seam, a state-carrying dog-ear, pressed-paper tabs, fold-slip forms, folded-ledger tables, and a folded-ribbon nav.

imagery

Real, tactile folded-paper material under a single soft key light (the Origata style); subjects built from folds, never printed flat.

motion

The settled folded page is the default and renders with no JS; a gentle rise reveals sheets; respect prefers-reduced-motion.

imagery

pairs with

origata

hero

A single enormous folded sheet of warm-white matte stationery from which a faceted koinobori carp is constructed entirely from mountain/valley creases, under a soft directional key light; calm unfolded paper on the left for the headline; accents only as a few highlighter folds (sky, leaf, one marigold).

treatment

Studio still-life material photography: single soft key light catching each crease edge, ambient-occlusion valleys, real paper grain, atmospheric depth — never a flat loud silhouette.

subjects

koinobori carp built from foldsfolded day-panelsfold-pattern floor mapspaper streamer installation

engine hints

model: gpt-image-2
provider: openai
tool: openai-image MCP

katagami spec

# Origama

## Philosophy

## Tokens

### Color

- **Bg**: #FFFFFF
- **Surface**: #F5F6F4
- **Surface 2**: #FFFFFF
- **Text**: #14181C
- **Muted**: #5E6A70
- **Border**: #14181C
- **Accent**: #2FB4F2
- **Accent Deep**: #127FB4
- **Accent Wash**: #E2F4FD
- **On Accent**: #FFFFFF
- **Success**: #5FD98C
- **Warning**: #FFB42E
- **Error**: #E15B4C
- **Info**: #2FB4F2
- **Crease Hi**: rgba(255,255,255,.95)
- **Crease Sh**: rgba(20,24,28,.10)
- **Crease Sh Cool**: rgba(18,127,180,.16)

### Type

- **Display**: Fraunces, Georgia, serif
- **Body**: Space Grotesk, system-ui, sans-serif
- **Mono**: Space Mono, ui-monospace, monospace
- **Body Size**: 17px
- **Display Tracking**: -0.02em

### Radius

- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Space

- **S1**: 4px
- **S2**: 8px
- **S3**: 12px
- **S4**: 16px
- **S5**: 24px
- **S6**: 32px
- **S7**: 48px
- **S8**: 64px
- **S9**: 96px

### Elevation

- **Sheet**: 0 1px 0 var(--crease-hi), 0 18px 44px rgba(20,24,28,.07)

## Rules

### 0

Every surface is a single folded sheet; structure is a fold-seam (1px highlight over 1px shadow), never a border.

### 1

State is a folded dog-ear corner carrying the role accent (sky active, leaf confirmed, marigold the single hero state).

### 2

Accents are highlighters: each colour only ever marks a single fold or dog-ear — never a full-bleed flood.

### 3

Crease light is near-white highlight + faint cool shadow; never grey borders, never decorative sidelines.

### 4

Buttons are pressed-paper tabs of one height: primary a solid sky sheet with knockout, secondary a folded outline tab with a creased leading corner.

### 5

Forms are fold-slips: label embossed on the upper fold, input on the lower panel, focus deepening the crease shadow in accent.

### 6

Tables are folded ledgers: row groups share a fold-band; headers mono, names serif, separation by fold-shadow not rule.

### 7

Nav is a folded ribbon: section tabs of one continuous creased strip, the active tab folded forward with a raised highlight; never a boxed pill bar.

### 8

Radii only from {0,16,24,9999}; body 17px+; high contrast ink on paper; light mode is the ground.

### 9

No emoji or glyph symbols on controls; icons are inline SVG.

## Layout

### 0

A modular sheet grid where panels tessellate like a fold pattern; 1240px content cap.

### 1

Very generous whitespace so each folded sheet has air; always pad above titles.

### 2

Asymmetric two/three-up sheet rows alternate with wide unfolded calm bands (80px+).

### 3

Hero is a full-bleed single great folded sheet spanning 100vw, with the headline over the calm unfolded zone.

### 4

Mobile stacks sheets vertically; each card keeps its single fold-seam; non-essential ledger columns fold away; never overflow horizontally.

### 5

On ultra-wide, cap and centre the content; only the hero spans 100vw.

## Guidance

### Voice

Calm, concrete, grown-up. Real exhibition copy — venues, times, workshop names — never lorem or AI clichés.

### Signature Mechanic

The Crease: sheets with a fold-seam, a state-carrying dog-ear, pressed-paper tabs, fold-slip forms, folded-ledger tables, and a folded-ribbon nav.

### Imagery

Real, tactile folded-paper material under a single soft key light (the Origata style); subjects built from folds, never printed flat.

### Motion

The settled folded page is the default and renders with no JS; a gentle rise reveals sheets; respect prefers-reduced-motion.

## Imagery Direction

### Pairs With

origata

### Hero

A single enormous folded sheet of warm-white matte stationery from which a faceted koinobori carp is constructed entirely from mountain/valley creases, under a soft directional key light; calm unfolded paper on the left for the headline; accents only as a few highlighter folds (sky, leaf, one marigold).

### Treatment

Studio still-life material photography: single soft key light catching each crease edge, ambient-occlusion valleys, real paper grain, atmospheric depth — never a flat loud silhouette.

### Subjects

- koinobori carp built from folds
- folded day-panels
- fold-pattern floor maps
- paper streamer installation

### Engine Hints

- **Model**: gpt-image-2
- **Provider**: openai
- **Tool**: openai-image MCP

DESIGN.md

---
version: "alpha"
name: "Origama"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
---

# Origama

## Overview

Origama is an agent-curated design language from Katagami.

## Layout

### 0

A modular sheet grid where panels tessellate like a fold pattern; 1240px content cap.

### 1

Very generous whitespace so each folded sheet has air; always pad above titles.

### 2

Asymmetric two/three-up sheet rows alternate with wide unfolded calm bands (80px+).

### 3

Hero is a full-bleed single great folded sheet spanning 100vw, with the headline over the calm unfolded zone.

### 4

Mobile stacks sheets vertically; each card keeps its single fold-seam; non-essential ledger columns fold away; never overflow horizontally.

### 5

On ultra-wide, cap and centre the content; only the hero spans 100vw.

## Elevation & Depth

### Elevation

- **Sheet**: 0 1px 0 var(--crease-hi), 0 18px 44px rgba(20,24,28,.07)

## Components

### 0

Every surface is a single folded sheet; structure is a fold-seam (1px highlight over 1px shadow), never a border.

### 1

State is a folded dog-ear corner carrying the role accent (sky active, leaf confirmed, marigold the single hero state).

### 2

Accents are highlighters: each colour only ever marks a single fold or dog-ear — never a full-bleed flood.

### 3

Crease light is near-white highlight + faint cool shadow; never grey borders, never decorative sidelines.

### 4

Buttons are pressed-paper tabs of one height: primary a solid sky sheet with knockout, secondary a folded outline tab with a creased leading corner.

### 5

Forms are fold-slips: label embossed on the upper fold, input on the lower panel, focus deepening the crease shadow in accent.

### 6

Tables are folded ledgers: row groups share a fold-band; headers mono, names serif, separation by fold-shadow not rule.

### 7

Nav is a folded ribbon: section tabs of one continuous creased strip, the active tab folded forward with a raised highlight; never a boxed pill bar.

### 8

Radii only from {0,16,24,9999}; body 17px+; high contrast ink on paper; light mode is the ground.

### 9

No emoji or glyph symbols on controls; icons are inline SVG.

## 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-019efacb-6b0a-7ae2-80bb-061ab56109ac/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.

### Voice

Calm, concrete, grown-up. Real exhibition copy — venues, times, workshop names — never lorem or AI clichés.

### Signature Mechanic

The Crease: sheets with a fold-seam, a state-carrying dog-ear, pressed-paper tabs, fold-slip forms, folded-ledger tables, and a folded-ribbon nav.

### Imagery

Real, tactile folded-paper material under a single soft key light (the Origata style); subjects built from folds, never printed flat.

### Motion

The settled folded page is the default and renders with no JS; a gentle rise reveals sheets; respect prefers-reduced-motion.

## Imagery Direction

### Pairs With

origata

### Hero

A single enormous folded sheet of warm-white matte stationery from which a faceted koinobori carp is constructed entirely from mountain/valley creases, under a soft directional key light; calm unfolded paper on the left for the headline; accents only as a few highlighter folds (sky, leaf, one marigold).

### Treatment

Studio still-life material photography: single soft key light catching each crease edge, ambient-occlusion valleys, real paper grain, atmospheric depth — never a flat loud silhouette.

### Subjects

- koinobori carp built from folds
- folded day-panels
- fold-pattern floor maps
- paper streamer installation

### Engine Hints

- **Model**: gpt-image-2
- **Provider**: openai
- **Tool**: openai-image MCP

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "origama",
  "type": "registry:theme",
  "title": "Origama shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#ffffff",
      "foreground": "#111111",
      "card": "#ffffff",
      "card-foreground": "#111111",
      "popover": "#ffffff",
      "popover-foreground": "#111111",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#f4f4f5",
      "muted-foreground": "#111111",
      "accent": "#111111",
      "accent-foreground": "#ffffff",
      "destructive": "#dc2626",
      "border": "#e4e4e7",
      "input": "#e4e4e7",
      "ring": "#111111",
      "chart-1": "#111111",
      "chart-2": "#f4f4f5",
      "chart-3": "#111111",
      "chart-4": "#16a34a",
      "chart-5": "#d97706",
      "sidebar": "#ffffff",
      "sidebar-foreground": "#111111",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#111111",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#e4e4e7",
      "sidebar-ring": "#111111",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#111111",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#111111",
      "accent-foreground": "#ffffff",
      "destructive": "#dc2626",
      "border": "#303642",
      "input": "#303642",
      "ring": "#111111",
      "chart-1": "#111111",
      "chart-2": "#f4f4f5",
      "chart-3": "#111111",
      "chart-4": "#16a34a",
      "chart-5": "#d97706",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#111111",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#111111",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#111111",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efacb-6b0a-7ae2-80bb-061ab56109ac",
    "slug": "origama",
    "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": {
      "color": [
        "accent",
        "accent_deep",
        "accent_wash",
        "bg",
        "border",
        "crease_hi",
        "crease_sh",
        "crease_sh_cool",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "type": [
        "body",
        "body_size",
        "display",
        "display_tracking",
        "mono"
      ],
      "radius": [
        "full",
        "lg",
        "md"
      ],
      "space": [
        "s1",
        "s2",
        "s3",
        "s4",
        "s5",
        "s6",
        "s7",
        "s8",
        "s9"
      ],
      "elevation": [
        "sheet"
      ]
    }
  }
}
```

in the wild

embodiments

bespoke marketing landingopen full page ↗

landing · origama

DESIGN.md

at a glance

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

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

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

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: #ffffff;
  --foreground: #111111;
  --card: #ffffff;
  --card-foreground: #111111;
  --popover: #ffffff;
  --popover-foreground: #111111;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #f4f4f5;
  --muted-foreground: #111111;
  --accent: #111111;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #111111;
  --chart-1: #111111;
  --chart-2: #f4f4f5;
  --chart-3: #111111;
  --chart-4: #16a34a;
  --chart-5: #d97706;
  --sidebar: #ffffff;
  --sidebar-foreground: #111111;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #111111;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #e4e4e7;
  --sidebar-ring: #111111;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #111111;
  --accent-foreground: #ffffff;
  --destructive: #dc2626;
  --border: #303642;
  --input: #303642;
  --ring: #111111;
  --chart-1: #111111;
  --chart-2: #f4f4f5;
  --chart-3: #111111;
  --chart-4: #16a34a;
  --chart-5: #d97706;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #111111;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #111111;
  --radius: 16px;
}

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 OrigamaShadcnKit() {
  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">Origama</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

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "origama",
  "type": "registry:theme",
  "cssVars": {
    "theme": {
      "font-sans": "Space Grotesk, system-ui, sans-serif",
      "font-serif": "Fraunces, Georgia, serif",
      "font-mono": "Space Mono, ui-monospace, monospace",
      "radius": "1rem"
    },
    "light": {
      "background": "#FFFFFF",
      "foreground": "#14181C",
      "card": "#FFFFFF",
      "card-foreground": "#14181C",
      "popover": "#FFFFFF",
      "popover-foreground": "#14181C",
      "primary": "#2FB4F2",
      "primary-foreground": "#FFFFFF",
      "secondary": "#F5F6F4",
      "secondary-foreground": "#14181C",
      "muted": "#F5F6F4",
      "muted-foreground": "#5E6A70",
      "accent": "#E2F4FD",
      "accent-foreground": "#127FB4",
      "destructive": "#E15B4C",
      "destructive-foreground": "#FFFFFF",
      "success": "#5FD98C",
      "warning": "#FFB42E",
      "border": "rgba(20,24,28,0.10)",
      "input": "rgba(20,24,28,0.10)",
      "ring": "#2FB4F2",
      "radius": "1rem",
      "chart-1": "#2FB4F2",
      "chart-2": "#5FD98C",
      "chart-3": "#FFB42E",
      "chart-4": "#127FB4",
      "chart-5": "#5E6A70"
    },
    "dark": {
      "background": "#14181C",
      "foreground": "#F5F6F4",
      "card": "#1B2125",
      "card-foreground": "#F5F6F4",
      "popover": "#1B2125",
      "popover-foreground": "#F5F6F4",
      "primary": "#2FB4F2",
      "primary-foreground": "#0C1014",
      "secondary": "#222A2F",
      "secondary-foreground": "#F5F6F4",
      "muted": "#222A2F",
      "muted-foreground": "#9AA6AC",
      "accent": "#10333F",
      "accent-foreground": "#7FD3F7",
      "destructive": "#E15B4C",
      "destructive-foreground": "#0C1014",
      "success": "#5FD98C",
      "warning": "#FFB42E",
      "border": "rgba(255,255,255,0.12)",
      "input": "rgba(255,255,255,0.12)",
      "ring": "#2FB4F2",
      "chart-1": "#2FB4F2",
      "chart-2": "#5FD98C",
      "chart-3": "#FFB42E",
      "chart-4": "#7FD3F7",
      "chart-5": "#9AA6AC"
    }
  }
}

component recipescompatibility fallback

# Origama shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efacb-6b0a-7ae2-80bb-061ab56109ac`
Slug: `origama`

## Intent

shadcn/ui component recipes for the Katagami language Origama.

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

Defined by the Katagami source fields.

Typography:

Defined by the Katagami source fields.

## Visual character to preserve

- Make the source language's structural identity visible in every component state.

## ShadSync visual profile

{
  "family": "system",
  "material": "flat",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": false,
  "stickerBadges": false,
  "motion": "still",
  "density": "balanced",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/origama/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: follow the Katagami source guidance
- Do not: do not collapse the language into generic defaults

## 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 OrigamaShadcnKit() {
  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">Origama</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

Defined by the Katagami source fields.

preview shotscompatibility fallback

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019efacb-6b0a-7ae2-80bb-061ab56109ac",
    "name": "Origama",
    "slug": "origama"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Origama 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": [],
    "dont": []
  }
}

built with

Art styleOrigatafolded paperView art style

Agent-generated

produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by gpt-image-2

remix lane

try a remix

Keep Origamaand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.

UI language · fixed

Origama

Palette

Art style

Landing PageOrigama · Transformative teal + Adaptive violet · Cyanotype

live preview · recolored + filled

lineage

Family

1 descendant

OrigamaPublished

More like this

Vergernearest in taste Selvageshares stationery Lanthornnearest in taste Splashshares kodomo-no-hi Techoshares stationery Quirenearest in taste