Origama

# Origama

## Philosophy

A faithful modernization of the published Origama: the concept, palette temperament, type voice and Origata imagery are unchanged; the execution is brought to the current standard — a scroll-cinematic fold landing, WCAG-legible accents and controls, and a taste-clean control system with no left-bars or coloured glows.

### Visual Character

- Every surface is one folded sheet whose structure is a fold-seam — a 1px highlight over a faint cool shadow — never a border.
- State rides a folded dog-ear corner: sky for active, leaf for confirmed, marigold for the single hero state.
- Three highlighter accents over paper-white; accent text and controls use a deeper sky so labels clear WCAG AA.
- Fraunces serif display, Space Grotesk 17px body, Space Mono uppercase micro-labels; radius 16-24px on sheets, full pills on controls.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#F5F6F4` |
| surface_solid | `#FFFFFF` |
| text | `#14181C` |
| muted | `#5E6A70` |
| border | `#E6E9E6` |
| accent | `#2FB4F2` |
| accent_2 | `#5FD98C` |
| accent_soft | `#FFB42E` |
| on_accent | `#FFFFFF` |
| success | `#5FD98C` |
| warning | `#FFB42E` |
| error | `#E15B4C` |
| info | `#2FB4F2` |

### Typography

- **Base Size**: 17px
- **Body Font**: Space Grotesk
- **Heading Font**: Fraunces
- **Mono Font**: Space Mono
- **Heading Weight**: 500
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.28
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,400;9..144,0,500;9..144,0,600;9..144,1,500&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(255,255,255,.95) inset, 0 6px 16px rgba(20,24,28,.06)
- **Md**: 0 1px 0 rgba(255,255,255,.95) inset, 0 16px 40px rgba(20,24,28,.07)
- **Lg**: 0 1px 0 rgba(255,255,255,.95) inset, 0 24px 56px rgba(20,24,28,.1)

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Card Style**: A single folded sheet of warm-white matte stationery; its structure is a fold-seam (a 1px near-white highlight over a faint cool shadow) with an optional folded dog-ear corner carrying the state accent when active — never a border.
- **Bg Pattern**: crease-grid

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: No borders. Structure is a fold-seam (highlight over a cool shadow) and state is a folded dog-ear corner; never a rule line, a one-sided accent edge, or a left bar (and never an inset box-shadow with an x-offset). Elevation is neutral ink, never a coloured glow.

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(.2,0,.1,1)
- **Philosophy**: A sheet folding into place; calm and grown-up. Reduced-motion settles to the finished page.

## Rules

### 0

Every surface is a single folded sheet; structure is a fold-seam (1px highlight over a cool 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; only three (sky, leaf, marigold).

### 3

Crease light is near-white highlight over a faint cool shadow; never grey borders, never decorative sidelines, never a left bar.

### 4

Buttons are pressed-paper tabs of one height on neutral ink elevation (never a coloured glow): primary a solid deeper-sky sheet with white knockout, secondary a paper tab with a creased top edge, the marigold tab the one hero action.

### 5

Accent text and controls use the deeper sky (#0C6A97 / #0E76A8) so every label clears WCAG AA on paper; the bright #2FB4F2 sky is for marks, fills and dog-ears only.

### 6

Forms are fold-slips: label embossed on the upper fold, input on the lower panel; focus deepens the crease into sky, a fault into red, a confirmed field into leaf.

### 7

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

### 8

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.

### 9

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

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

The landing is a scroll-cinematic fold: a flat sheet is scored, its ridges raised, a koinobori assembled, the marigold fold lit, and every carp rises into the sky — one continuous film derived from the crease.

### 5

Mobile stacks sheets vertically; each card keeps its single fold-seam; non-essential ledger columns fold away; never overflow horizontally. The tablet band is its own considered layout.

### 6

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 cliches.

### Signature Mechanic

The Crease: sheets with a fold-seam, a state-carrying dog-ear, pressed-paper tabs, fold-slip forms, folded-ledger tables, a folded-ribbon nav, and a scroll-cinematic fold landing driven by a folding-paper WebGL surface.

### 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; the landing film is scrubbed and de-pins under 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
- scored crease-grid sheet
- raised mountain/valley ridges
- the single marigold fold
- paper streamer installation

### Engine Hints

- **Model**: flux-pro/v1.1-ultra
- **Provider**: fal-ai
- **Tool**: fal-ai run_model

---
version: "alpha"
name: "Origama"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FFFFFF"
  surface: "#F5F6F4"
  surface_solid: "#FFFFFF"
  text: "#14181C"
  muted: "#5E6A70"
  border: "#E6E9E6"
  accent: "#2FB4F2"
  accent_2: "#5FD98C"
  accent_soft: "#FFB42E"
  on_accent: "#FFFFFF"
  success: "#5FD98C"
  warning: "#FFB42E"
  error: "#E15B4C"
  info: "#2FB4F2"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Space Grotesk"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Origama

## Overview

A faithful modernization of the published Origama: the concept, palette temperament, type voice and Origata imagery are unchanged; the execution is brought to the current standard — a scroll-cinematic fold landing, WCAG-legible accents and controls, and a taste-clean control system with no left-bars or coloured glows.

### Visual Character

- Every surface is one folded sheet whose structure is a fold-seam — a 1px highlight over a faint cool shadow — never a border.
- State rides a folded dog-ear corner: sky for active, leaf for confirmed, marigold for the single hero state.
- Three highlighter accents over paper-white; accent text and controls use a deeper sky so labels clear WCAG AA.
- Fraunces serif display, Space Grotesk 17px body, Space Mono uppercase micro-labels; radius 16-24px on sheets, full pills on controls.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#FFFFFF` |
| surface | `#F5F6F4` |
| surface_solid | `#FFFFFF` |
| text | `#14181C` |
| muted | `#5E6A70` |
| border | `#E6E9E6` |
| accent | `#2FB4F2` |
| accent_2 | `#5FD98C` |
| accent_soft | `#FFB42E` |
| on_accent | `#FFFFFF` |
| success | `#5FD98C` |
| warning | `#FFB42E` |
| error | `#E15B4C` |
| info | `#2FB4F2` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Space Grotesk, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space 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`

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

The landing is a scroll-cinematic fold: a flat sheet is scored, its ridges raised, a koinobori assembled, the marigold fold lit, and every carp rises into the sky — one continuous film derived from the crease.

### 5

Mobile stacks sheets vertically; each card keeps its single fold-seam; non-essential ledger columns fold away; never overflow horizontally. The tablet band is its own considered layout.

### 6

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

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(255,255,255,.95) inset, 0 6px 16px rgba(20,24,28,.06)
- **Md**: 0 1px 0 rgba(255,255,255,.95) inset, 0 16px 40px rgba(20,24,28,.07)
- **Lg**: 0 1px 0 rgba(255,255,255,.95) inset, 0 24px 56px rgba(20,24,28,.1)

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: paper
- **Card Style**: A single folded sheet of warm-white matte stationery; its structure is a fold-seam (a 1px near-white highlight over a faint cool shadow) with an optional folded dog-ear corner carrying the state accent when active — never a border.
- **Bg Pattern**: crease-grid

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: No borders. Structure is a fold-seam (highlight over a cool shadow) and state is a folded dog-ear corner; never a rule line, a one-sided accent edge, or a left bar (and never an inset box-shadow with an x-offset). Elevation is neutral ink, never a coloured glow.

## Components

### 0

Every surface is a single folded sheet; structure is a fold-seam (1px highlight over a cool 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; only three (sky, leaf, marigold).

### 3

Crease light is near-white highlight over a faint cool shadow; never grey borders, never decorative sidelines, never a left bar.

### 4

Buttons are pressed-paper tabs of one height on neutral ink elevation (never a coloured glow): primary a solid deeper-sky sheet with white knockout, secondary a paper tab with a creased top edge, the marigold tab the one hero action.

### 5

Accent text and controls use the deeper sky (#0C6A97 / #0E76A8) so every label clears WCAG AA on paper; the bright #2FB4F2 sky is for marks, fills and dog-ears only.

### 6

Forms are fold-slips: label embossed on the upper fold, input on the lower panel; focus deepens the crease into sky, a fault into red, a confirmed field into leaf.

### 7

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

### 8

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.

### 9

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).

## 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-019f8f57-44c9-70b0-896b-ff0f0c79f192/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 cliches.

### Signature Mechanic

The Crease: sheets with a fold-seam, a state-carrying dog-ear, pressed-paper tabs, fold-slip forms, folded-ledger tables, a folded-ribbon nav, and a scroll-cinematic fold landing driven by a folding-paper WebGL surface.

### 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; the landing film is scrubbed and de-pins under 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
- scored crease-grid sheet
- raised mountain/valley ridges
- the single marigold fold
- paper streamer installation

### Engine Hints

- **Model**: flux-pro/v1.1-ultra
- **Provider**: fal-ai
- **Tool**: fal-ai run_model

```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": "#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"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f8f57-44c9-70b0-896b-ff0f0c79f192",
    "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": {
      "colors": [
        "accent",
        "accent_2",
        "accent_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```