Origama

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

:root {
  --background: #FFFFFF;
  --foreground: #14181C;
  --card: #F5F6F4;
  --card-foreground: #14181C;
  --popover: #F5F6F4;
  --popover-foreground: #14181C;
  --primary: #14181C;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #5E6A70;
  --muted-foreground: #14181C;
  --accent: #2FB4F2;
  --accent-foreground: #ffffff;
  --destructive: #E15B4C;
  --border: #E6E9E6;
  --input: #E6E9E6;
  --ring: #2FB4F2;
  --chart-1: #14181C;
  --chart-2: #f4f4f5;
  --chart-3: #2FB4F2;
  --chart-4: #5FD98C;
  --chart-5: #FFB42E;
  --sidebar: #F5F6F4;
  --sidebar-foreground: #14181C;
  --sidebar-primary: #14181C;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2FB4F2;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #E6E9E6;
  --sidebar-ring: #2FB4F2;
  --radius: 16px;
}

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

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

export function 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>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "origama",
  "type": "registry:theme",
  "author": "katagami-agent",
  "title": "Origama",
  "description": "A Scandinavian/Japanese paper-craft language for product UI: every surface is a single folded sheet whose structure is a fold-seam, state is a folded dog-ear corner, and three highlighter accents — sky, leaf, marigold — mark one fold at a time over paper-white ground.",
  "cssVars": {
    "theme": {
      "font-sans": "Space Grotesk, system-ui, sans-serif",
      "font-heading": "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": "#0E76A8",
      "primary-foreground": "#FFFFFF",
      "secondary": "#F5F6F4",
      "secondary-foreground": "#14181C",
      "muted": "#F5F6F4",
      "muted-foreground": "#5E6A70",
      "accent": "#E2F4FD",
      "accent-foreground": "#0C6A97",
      "destructive": "#E15B4C",
      "destructive-foreground": "#FFFFFF",
      "border": "#E6E9E6",
      "input": "#E6E9E6",
      "ring": "#2FB4F2",
      "chart-1": "#2FB4F2",
      "chart-2": "#5FD98C",
      "chart-3": "#FFB42E",
      "chart-4": "#127FB4",
      "chart-5": "#98630A",
      "radius": "1rem"
    },
    "dark": {
      "background": "#14181C",
      "foreground": "#F5F6F4",
      "card": "#1B2026",
      "card-foreground": "#F5F6F4",
      "popover": "#1B2026",
      "popover-foreground": "#F5F6F4",
      "primary": "#2FB4F2",
      "primary-foreground": "#0A1418",
      "secondary": "#22282E",
      "secondary-foreground": "#F5F6F4",
      "muted": "#22282E",
      "muted-foreground": "#A7B0B6",
      "accent": "#123243",
      "accent-foreground": "#BEE6FB",
      "destructive": "#E15B4C",
      "destructive-foreground": "#14181C",
      "border": "#2A3138",
      "input": "#2A3138",
      "ring": "#2FB4F2",
      "chart-1": "#2FB4F2",
      "chart-2": "#5FD98C",
      "chart-3": "#FFB42E",
      "chart-4": "#127FB4",
      "chart-5": "#BEE6FB",
      "radius": "1rem"
    }
  },
  "visualProfile": "Folded-paper material: every surface is a single sheet whose structure is a fold-seam (a 1px highlight over a faint cool shadow), never a border. State is a folded dog-ear corner carrying one accent — sky for active, leaf for confirmed, marigold for the one hero state. Buttons are pressed-paper tabs of one height on neutral ink elevation (never a coloured glow); forms are fold-slips with an embossed label on the upper fold; tables are folded ledgers separated by fold-bands, not rules. Fraunces display, Space Grotesk 17px+ body, Space Mono uppercase micro-labels; radius 16-24px on sheets, full pills on controls; three accents used like highlighters over paper-white.",
  "notes": "Structure is a fold-seam, never a border and never a one-sided accent edge or left bar (no inset box-shadows with an x-offset). Elevation shadows are neutral ink, never a coloured glow. Accent text and controls use the deeper sky (#0C6A97 / #0E76A8) so labels clear WCAG AA on paper; the bright #2FB4F2 sky is for marks, fills and dog-ears only. Semantic colours (success/warning/error/info) stay a small part of the palette; red is never visually primary. Button and chip labels stay on one line."
}

# Origama — shadcn/ui Components

Author: `katagami-agent`
Format: `component-recipes-v1`

Origama dresses shadcn/ui as folded paper. Every primitive is a single sheet whose structure is a
fold-seam, state is a folded dog-ear corner, and three highlighter accents — sky, leaf, marigold —
mark one fold at a time over paper-white ground. The registry theme in `export.json` owns the
colours; these recipes own the material.

## ShadSync visual profile

- **Family** — Scandinavian/Japanese paper-craft; origami as construction, not decoration.
- **Material** — a single warm-white matte sheet under a soft key light; a faint mountain/valley
  crease-grid blueprint sits under the page.
- **Contour** — structure is a fold-seam (a 1px near-white highlight over a faint cool shadow),
  never a border, never a one-sided accent edge or left bar.
- **Border** — none; separation is fold-shadow. The shadcn `border`/`input` tokens map to a faint
  cool fold-line (`#E6E9E6`), used only where a hairline is unavoidable.
- **Elevation** — neutral ink shadow plus a 1px crease highlight; never a coloured glow.
- **Type** — Fraunces display, Space Grotesk body (17px+), Space Mono uppercase micro-labels.
- **Radius** — 16px / 24px on sheets, full pills on controls; only from {0, 16, 24, 9999}.
- **Accents** — sky `#2FB4F2`, leaf `#5FD98C`, marigold `#FFB42E`, used like highlighters; accent
  text and controls use the deeper sky (`#0C6A97` / `#0E76A8`) for WCAG AA on paper.

## Signature component recipes

- **Button** — a pressed-paper tab of one height. Primary is a solid deeper-sky sheet with white
  knockout on neutral ink elevation; secondary is a paper tab with a full-width creased top edge;
  the marigold tab is the single hero action; ghost/quiet stay text-only. Labels stay on one line.
- **Card** — one folded sheet: `card` ground, a fold-seam running through it, and an optional
  folded dog-ear corner that carries the state accent when active.
- **Input / Textarea / Select** — fold-slips: the label is embossed on the upper fold, the control
  sits on the lower panel; focus deepens the crease into sky, a fault into red, a confirmed field
  into leaf.
- **Table** — a folded ledger: mono uppercase headers, serif names, row groups sharing a fold-band,
  separation by fold-shadow, never a rule line.
- **Tabs / Navigation Menu** — a folded ribbon: tabs ride one continuous crease line; the active
  tab folds forward with a raised sky highlight. Never boxed into a pill bar.
- **Badge / Chip** — a small folded tab; open=leaf, few-left=marigold, live=sky, full=quiet.
- **Switch** — a folded knob that slides a paper tab; the track fills sky when on.
- **Dialog / Sheet / Popover** — a sheet lifted on neutral ink elevation with a fold-seam; the
  overlay is a soft paper scrim, never a heavy black wash.

## Preview shots

Three renderable scenes are defined in `preview-shots.json` (`renderable-v1`): a booking console,
a workshop-signup fold-slip form, and the family-pass pricing sheets. Each names the primitives it
must show and the crease details it must carry (fold-seam, dog-ear state, marigold hero fold).

## Copy-paste component example

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export function ExhibitionPass() {
  return (
    <Card className="relative rounded-2xl bg-card p-6 shadow-[0_1px_0_rgba(255,255,255,.95)_inset,0_16px_40px_rgba(20,24,28,.06)]">
      {/* folded dog-ear: the state fold, carrying the sky accent when active */}
      <span aria-hidden className="dogear absolute right-0 top-0 h-7 w-7 rounded-tr-2xl" />
      <CardHeader className="p-0">
        <span className="font-mono text-[11px] uppercase tracking-[.16em] text-muted-foreground">Active · sky</span>
        <CardTitle className="mt-3 font-heading text-2xl tracking-tight">Exhibition pass</CardTitle>
      </CardHeader>
      <CardContent className="p-0 mt-3 text-[15.5px] text-muted-foreground">
        The dog-ear folds forward in sky blue to mark the live state.
        <div className="mt-4 flex gap-3">
          <Button className="rounded-full bg-primary text-primary-foreground">Reserve a family pass</Button>
          <Badge className="rounded-full bg-accent text-accent-foreground">Folded forward</Badge>
        </div>
      </CardContent>
    </Card>
  )
}
```

All primitives import from `@/components/ui/` and read their colours from the registry theme in
`export.json`, so a palette swap re-skins the whole set while the fold-seam, dog-ear state and
neutral crease elevation stay intact.

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "author": "katagami-agent",
  "requiresVisualProfile": true,
  "language": { "id": "en-019f8f57-44c9-70b0-896b-ff0f0c79f192", "name": "Origama", "slug": "origama" },
  "installCommand": "npx shadcn@latest add https://katagami.ai/r/origama.json",
  "primitives": [
    "button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs",
    "badge", "separator", "checkbox", "switch", "table", "tooltip", "dropdown-menu",
    "radio-group", "label", "toast"
  ],
  "identityNotes": "Every surface is a single folded sheet; structure is a fold-seam, state is a folded dog-ear corner, elevation is neutral ink with a 1px crease highlight (never a coloured glow), and three accents — sky, leaf, marigold — mark one fold at a time over paper-white ground.",
  "visualProfile": {
    "family": "scandinavian-japanese-paper-craft",
    "material": "single warm-white matte sheet under a soft key light, faint mountain/valley crease-grid ground",
    "contour": "fold-seam — a 1px near-white highlight over a faint cool shadow — never a border or a one-sided accent edge",
    "border": "none — separation is fold-shadow; the border/input token maps to a faint cool fold-line #E6E9E6",
    "underlay": true,
    "grain": false,
    "dogEarState": true,
    "motion": "calm — 200ms cubic-bezier(.2,0,.1,1), a sheet folding into place; reduced-motion settles",
    "density": "airy",
    "accents": ["#2FB4F2", "#5FD98C", "#FFB42E"]
  },
  "tokens": {
    "background": "#FFFFFF",
    "surface": "#F5F6F4",
    "surfaceSolid": "#FFFFFF",
    "foreground": "#14181C",
    "muted": "#5E6A70",
    "border": "#E6E9E6",
    "primary": "#0E76A8",
    "accentSky": "#2FB4F2",
    "accentSkyInk": "#0C6A97",
    "onAccent": "#FFFFFF",
    "success": "#5FD98C",
    "successInk": "#1B7A44",
    "warning": "#FFB42E",
    "warningInk": "#98630A",
    "error": "#E15B4C",
    "info": "#2FB4F2",
    "radiusCard": "16px",
    "radiusLarge": "24px",
    "radiusPill": "9999px",
    "shadowSm": "0 1px 0 rgba(255,255,255,.95) inset, 0 6px 16px rgba(20,24,28,.06)",
    "shadowMd": "0 1px 0 rgba(255,255,255,.95) inset, 0 16px 40px rgba(20,24,28,.07)",
    "shadowLg": "0 1px 0 rgba(255,255,255,.95) inset, 0 24px 56px rgba(20,24,28,.1)",
    "fontDisplay": "Fraunces, Georgia, serif",
    "fontBody": "Space Grotesk, system-ui, sans-serif",
    "fontMono": "Space Mono, ui-monospace, monospace"
  },
  "shots": [
    {
      "id": "folded-floor-console",
      "title": "The Folded Floor console",
      "viewport": "desktop",
      "primitives": ["card", "badge", "table", "tabs", "separator", "button", "tooltip"],
      "composition": "A live exhibition console: four KPI sheets across the top each with a folded dog-ear, a sessions folded-ledger with mono uppercase headers and serif names, and a marigold-fold community readout on the right. Navigation is a folded ribbon, not a pill bar.",
      "mustShow": ["fold-seam through each sheet", "folded dog-ear carrying state colour", "folded ledger separated by fold-shadow", "one marigold hero readout", "mono uppercase micro-labels"],
      "avoid": ["borders or grey rules", "left-bar accent edges", "coloured glow shadows", "boxed pill nav", "wrapped button labels"],
      "scene": {
        "headline": "Where the floor stands",
        "description": "Four KPI sheets and a sessions ledger over paper-white, with the marigold-fold count on the right.",
        "stats": [
          { "label": "Passes scanned", "value": "2,140", "delta": "+312 since noon" },
          { "label": "Sessions run", "value": "38", "delta": "6 open now" },
          { "label": "Seats filled", "value": "86%", "delta": "1,204 of 1,400" },
          { "label": "Carp folded", "value": "412", "delta": "target 500" }
        ]
      }
    },
    {
      "id": "workshop-fold-slip",
      "title": "Workshop booking fold-slips",
      "viewport": "desktop",
      "primitives": ["card", "input", "textarea", "select", "label", "checkbox", "switch", "radio-group", "button"],
      "composition": "A booking form built from fold-slips: each field is a slip with the label embossed on the upper fold and the input on the lower panel. A focused slip deepens its crease into sky, a faulted slip into red, a confirmed slip into leaf. A party-size radio row shows the folded-corner selector.",
      "mustShow": ["embossed label on the upper fold", "focus crease in sky", "error crease in red", "confirmed crease in leaf", "folded-corner selected option"],
      "avoid": ["visible browser defaults", "input outlines as full borders", "coloured glow focus rings", "left-bar field accents"],
      "scene": {
        "headline": "Book a fold table",
        "description": "Fold-slip fields with focus, confirmed and fault states over one quiet sheet.",
        "stats": [
          { "label": "Sessions open", "value": "6", "delta": "2 few left" },
          { "label": "Party size", "value": "4", "delta": "family pass" },
          { "label": "Hold window", "value": "10:00", "delta": "minutes" }
        ]
      }
    },
    {
      "id": "family-pass-pricing",
      "title": "Family-pass pricing sheets",
      "viewport": "desktop",
      "primitives": ["card", "badge", "button", "separator", "tabs", "dialog"],
      "composition": "Three pass tiers as folded ticket slips with a perforated fold-seam where the stub tears away. The middle Family tier carries the single marigold fold as the hero, its primary button in deeper sky with white knockout. Checkmarks are sky, marigold and leaf per tier.",
      "mustShow": ["perforated fold-seam stub", "one marigold hero tier", "deeper-sky primary button (AA)", "one-line button labels", "three highlighter accents rationed"],
      "avoid": ["nested cards", "grey borders", "coloured glow shadows", "more than three accents", "wrapped labels"],
      "scene": {
        "headline": "Choose your pass",
        "description": "Day, Family and Maker passes as folded slips; the Family tier is the marigold hero.",
        "stats": [
          { "label": "Day pass", "value": "€9", "delta": "per adult" },
          { "label": "Family pass", "value": "€24", "delta": "family of four" },
          { "label": "Maker pass", "value": "€39", "delta": "3 days" }
        ]
      }
    }
  ],
  "componentRecipes": [
    { "primitive": "button", "intent": "Primary is a pressed-paper tab in deeper sky (#0E76A8) with white knockout on neutral ink elevation; a 1px crease highlight on top. Label on one line, uppercase mono." },
    { "primitive": "button", "intent": "Secondary is a paper tab (#FFFFFF) with a full-width creased top edge and soft neutral elevation; text inks to sky on hover. No left bar." },
    { "primitive": "button", "intent": "Marigold tab is the single hero action — solid #FFB42E ground, marigold-ink label; used at most once per view." },
    { "primitive": "card", "intent": "One folded sheet: card ground, a fold-seam running through it, optional folded dog-ear corner carrying the state accent when active." },
    { "primitive": "input", "intent": "Fold-slip: mono uppercase label embossed on the upper fold, value on the lower panel; focus deepens the crease into sky, no full border." },
    { "primitive": "textarea", "intent": "A taller fold-slip; the crease sits below the label and deepens into sky on focus." },
    { "primitive": "select", "intent": "Fold-slip with a folded chevron on the lower-right; the crease deepens into sky on focus; no default browser chrome." },
    { "primitive": "checkbox", "intent": "A small folded square; checked folds a sky corner with a knockout tick." },
    { "primitive": "radio-group", "intent": "Folded-corner selector tabs; the selected option folds a sky dog-ear and tints to the sky wash." },
    { "primitive": "switch", "intent": "A folded knob sliding a paper tab; the track fills deeper sky when on, with a 1px crease highlight." },
    { "primitive": "label", "intent": "Space Mono uppercase micro-label, 11px, .14em tracking, muted ink — embossed on the upper fold of a slip." },
    { "primitive": "badge", "intent": "A small folded tab: open=leaf wash, few-left=marigold wash, live=sky wash, full=quiet surface; a dot marker, one line." },
    { "primitive": "tabs", "intent": "A folded ribbon: tabs ride one continuous crease line; the active tab folds forward with a raised sky highlight. Never a boxed pill bar." },
    { "primitive": "table", "intent": "A folded ledger: mono uppercase headers, serif names, row groups sharing a fold-band, separation by fold-shadow, hover tints to sky wash." },
    { "primitive": "separator", "intent": "A fold-band — a 1px highlight over a 1px cool shadow, radius-full; the divider is a crease, not a rule." },
    { "primitive": "dialog", "intent": "A lifted sheet with a fold-seam on neutral ink elevation; the overlay is a soft paper scrim, never a heavy black wash." },
    { "primitive": "sheet", "intent": "A side sheet that folds in from the edge; a fold-seam runs its length and the close control is a quiet paper tab." },
    { "primitive": "tooltip", "intent": "A small paper tab lifted on a soft neutral shadow with a fold-seam; mono micro-copy, sky-ink accents." },
    { "primitive": "dropdown-menu", "intent": "A folded sheet of items; the active item tints to sky wash and folds a small dog-ear; separators are fold-bands." },
    { "primitive": "toast", "intent": "A folded slip that rises in; leaf crease for success, red crease for a fault, sky for info — the accent marks only the crease." }
  ],
  "qualityRules": {
    "do": [
      "Give every surface a fold-seam and let state ride a folded dog-ear corner.",
      "Keep three accents (sky, leaf, marigold) used like highlighters, one marigold hero per view.",
      "Use the deeper sky (#0C6A97 / #0E76A8) for accent text and controls so labels clear WCAG AA on paper.",
      "Keep body text 17px+ on paper-white; table rows 14.5px+.",
      "Hold button and chip labels on one line."
    ],
    "dont": [
      "Draw a border, a rule line, or a one-sided accent edge / left bar (including inset shadows with an x-offset).",
      "Use coloured glow shadows; elevation is neutral ink plus a 1px crease highlight.",
      "Let the bright #2FB4F2 sky carry body text; it is for marks, fills and dog-ears only.",
      "Nest cards or box navigation into a pill widget.",
      "Push semantic red past a small accent role."
    ]
  }
}