Maquette

# Maquette

## Philosophy

Maquette is an interface language of cut-paper pieces pinned to a rust table. Each piece is a plane of cardstock at its own depth, read from its cast shadow and never from a line drawn around it, and aqua thread joins the pieces that belong together. The page is the table: a saturated rust ground, cream paper pieces, ink type, deep-teal actions and aqua thread as the cool note. Drag a piece and its threads follow; drag the table and it pans; Put them back resets. The depth-stack of three shadows (far, mid, near) carries every role.

### Values

- The page is a table: free-placed pieces, not stacked sections.
- Depth is the hierarchy: how far a plane floats says how much it matters.
- Thread is structure: a dotted aqua line shows what belongs with what.
- Teal is for the one thing to press; aqua is a highlighter, never a field.
- Real shadow-box images for every scene; no CSS stand-ins.

### Anti-Values

- Borders, outlines or grey rules to separate pieces.
- Cream-and-coral defaults, gradient scrims and dot-grain washes.
- Fake CSS dioramas where a shadow-box image belongs.
- Tracked uppercase kickers and em dashes in copy.
- Muddy, desaturated paper colours.

### Visual Character

- Rust table #B8431F, flat and saturated, with no grain.
- Cream paper #FBF2DD pieces, rotated a degree or two, each pinned with an aqua or rust dot.
- Rufina at weight 400 for display, Fustat for body at 17px.
- Three-depth shadows tinted a dark rust, never grey.
- A dotted aqua thread joining pinned pieces.
- Radii 16 and 9999 only.

### Lineage

> Revised in place from the live Maquette (cream ground, coral accent) to arni's approved round 6 take: the ground moved to a saturated rust table with cool teal and aqua, the layout became a thread-linked canvas, and fonts moved to Rufina and Fustat. The shadow-box art, three-depth shadows, cut-paper materials and radii 16 and 9999 are kept.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#B8431F` |
| surface | `#8C2A10` |
| text | `#FFFFFF` |
| muted | `#FFEBDD` |
| border | `#D2663F` |
| accent | `#8FE3DA` |
| on_accent | `#1B0F0A` |
| success | `#B6F0C8` |
| warning | `#FFE08A` |
| error | `#FFC9C0` |
| info | `#CBE6FF` |
| paper | `#FBF2DD` |
| ink | `#1B0F0A` |
| ink_soft | `#5A3A2E` |
| teal | `#0B4F5C` |
| peach | `#FFB38F` |

### Typography

- **Heading Font**: Rufina
- **Body Font**: Fustat
- **Heading Weight**: 400
- **Body Weight**: 400
- **Button Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on display; -0.01em on body
- **Base Size**: 17px
- **Line Height**: 1.5
- **Scale**: ["14.5px","17px","20px","22px","24px","34px","44px to 60px","84px"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&family=Fustat:wght@400;600;800&display=swap

### Radii

- **None**: 0px
- **Soft**: 16px
- **Card**: 24px
- **Pill**: 9999px

### Shadows

- **Far**: 0 2px 6px rgba(60,15,5,.28)
- **Mid**: 0 10px 22px -6px rgba(60,15,5,.45)
- **Near**: 0 24px 40px -10px rgba(60,15,5,.55), 0 4px 10px rgba(60,15,5,.3)
- **Inset**: inset 0 2px 6px rgba(60,15,5,.22)

### Spacing

- **Base**: 8px
- **Scale**: ["8px","14px","20px","26px","36px","46px","56px","96px"]

### Surfaces

- **Treatment**: cut-paper pieces at three depths pinned to a flat rust table
- **Table**: #B8431F
- **Piece Paper**: #FBF2DD
- **Piece Rust**: #8C2A10
- **Piece Teal**: #0B4F5C
- **Piece Aqua**: #8FE3DA
- **Well**: #EEDFC0

### Borders

- **Default**: none
- **Note**: No border, outline or rule anywhere; shape and cast shadow separate every piece. The only line is the dotted aqua thread.

### Motion

- **Duration**: 150ms
- **Easing**: ease
- **Principle**: A hovered or held piece lifts a plane (translate -4px, near shadow); dragging a piece draws its threads after it; no bounce; reduced motion removes the lift and keeps the settled layout

### Controls

- **Height**: 52px
- **Radius**: 16px wells, 9999px buttons and tabs
- **Focus**: 3px aqua outline at 3px offset on the table, teal on paper

## Rules

### Composition

- Treat the page as a table and place each piece freely at its own depth and angle, a degree or two off square.
- Pin every piece with a dot and run a dotted aqua thread between pieces that relate.
- Keep the table full width and let it pan vertically only; never push text outside the viewport.
- On phones, stack the pieces in one column, alternate them left and right, and join each with a short thread.

### Hierarchy

- Reserve the near shadow and teal for the one thing to press; the mid plane carries the working surface; the far plane is quiet chrome.
- Display type in Rufina 400 at 44 to 84px; piece titles at 28 to 36px; body in Fustat 17px; captions 14.5px.
- Ink is for type on paper, white on the rust table, and nothing is ever set grey.

### Density

Low to medium: pieces 36 to 44px inside, 46 to 56px between, one clear action per view.

### Signature Patterns

- The depth-stack: far 2px/6px, mid 10px/22px, near 22px/40px shadows, tinted rust and mapped to roles.
- Pinned pieces: a 20px dot at the top centre of each piece, aqua on dark pieces and rust on paper.
- Thread: dotted aqua (5px stroke, 2 11 dash) between pinned pieces; drag a piece and it follows.
- Put them back: one pill that returns every piece to its first position.

## Layout

### Grid

- **Type**: free-placed canvas on a rust table
- **Max Width**: 1500px canvas on the landing, 1280px (1440px from 1700px) on the embodiment
- **Gutter**: 20px phone, 44px desktop
- **Column Behavior**: Desktop pieces are absolutely placed in percent of the canvas; the embodiment uses 12 columns; tablets (601 to 1199px) use their own placement; phones stack in one column

### Whitespace

- **Section Gap**: 46px between stacked pieces on phones, 56px between rows on desktop
- **Card Gap**: 32px
- **Content Padding**: 36 to 44px inside a piece, more above the title so it never sits on the pin
- **Approach**: Space is the table: gaps are rust ground, and the thread crosses them.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"52px","input_height":"52px","row_height":"56px"}

### Responsive

Desktop (1280px): freely placed pieces with threads and drag. Tablet (601 to 1199px): a second placement over a taller canvas. Phone (390px): one column, pieces alternate sides, a vertical thread joins them, no dragging. Above 1500px the canvas caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Guidance

### Do

- Let shadow and distance carry hierarchy, never a line.
- Keep the rust ground saturated and the paper clean.
- Use one teal action per view and aqua only as thread and highlight.
- Stage lists as pieces on the table with real shadow-box images.
- Rotate pieces a degree or two, and keep text upright inside them.

### Don't

- Draw a border, outline or grey rule around anything.
- Use cream-with-coral, gradient scrims, dot grain or fake CSS dioramas.
- Set aqua as a field behind long text, or white on aqua.
- Put em dashes or tracked uppercase kickers in copy.
- Let pieces carry text off the viewport.

### Accessibility

White on rust #B8431F and muted #FFEBDD on rust clear AA; ink #1B0F0A on paper #FBF2DD is 16:1; ink on aqua is 12:1; paper on teal #0B4F5C is 9:1. Every control is explicitly styled with a 3px aqua (table) or teal (paper) focus outline. The settled layout renders with no JavaScript, dragging is an enhancement, and prefers-reduced-motion removes the lift.

### Usage Context

Whiteboards, moodboards, spatial notes, story and planning tools, and any product where ideas should feel like paper pieces laid out and joined on a table.

## Imagery Direction

### Pairs With

shadowbox-papercut-diorama

### Art Style Id

en-019efdd8-8a3f-7b52-8fa6-20cded547f84

### Summary

Shadow-box paper dioramas in the language's own cardstock: cream, deep teal, pale aqua, terracotta and ink, lit from the upper left, three clear depths and fibrous cut edges. Scenes are small places: a river valley with a footbridge, a harbour wall with three lanterns, an orchard of twelve round trees.

### Subjects

- a river valley village with a footbridge
- a harbour wall with three lanterns
- an orchard of twelve round trees

### Usage

One large valley image as the hero piece painted with var(--hero-image) on a real element; two square images as shelf pieces. Images sit inside paper pieces with a 14 to 18px paper margin and a radius of 16.

### Avoid

Outlines, ink lines, text in the image, gradients, glow, muddy colours, photographs, and images edge to edge over copy.

---
version: "alpha"
name: "Maquette"
description: "Maquette is an interface language of cut-paper pieces pinned to a rust table. Each piece is a plane of cardstock at its own depth, read from its cast shadow and never from a line drawn around it, and aqua thread joins the pieces that bel..."
colors:
  bg: "#B8431F"
  surface: "#8C2A10"
  text: "#FFFFFF"
  muted: "#FFEBDD"
  border: "#D2663F"
  accent: "#8FE3DA"
  on_accent: "#1B0F0A"
  success: "#B6F0C8"
  warning: "#FFE08A"
  error: "#FFC9C0"
  info: "#CBE6FF"
  paper: "#FBF2DD"
  ink: "#1B0F0A"
  ink_soft: "#5A3A2E"
  teal: "#0B4F5C"
  peach: "#FFB38F"
typography:
  headline-lg:
    fontFamily: "Rufina"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Rufina"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Fustat"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Fustat"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  soft: "16px"
  card: "24px"
  pill: "9999px"
spacing:
  base: "8px"
  xs: "8px"
  sm: "14px"
  md: "20px"
  lg: "26px"
  xl: "36px"
  2xl: "46px"
  3xl: "56px"
  4xl: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  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-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}"
  color-reference-paper:
    backgroundColor: "{colors.paper}"
  color-reference-ink:
    backgroundColor: "{colors.ink}"
  color-reference-ink_soft:
    backgroundColor: "{colors.ink_soft}"
  color-reference-teal:
    backgroundColor: "{colors.teal}"
  color-reference-peach:
    backgroundColor: "{colors.peach}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.card}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Maquette

## Overview

Maquette is an interface language of cut-paper pieces pinned to a rust table. Each piece is a plane of cardstock at its own depth, read from its cast shadow and never from a line drawn around it, and aqua thread joins the pieces that belong together. The page is the table: a saturated rust ground, cream paper pieces, ink type, deep-teal actions and aqua thread as the cool note. Drag a piece and its threads follow; drag the table and it pans; Put them back resets. The depth-stack of three shadows (far, mid, near) carries every role.

### Values

- The page is a table: free-placed pieces, not stacked sections.
- Depth is the hierarchy: how far a plane floats says how much it matters.
- Thread is structure: a dotted aqua line shows what belongs with what.
- Teal is for the one thing to press; aqua is a highlighter, never a field.
- Real shadow-box images for every scene; no CSS stand-ins.

### Anti-Values

- Borders, outlines or grey rules to separate pieces.
- Cream-and-coral defaults, gradient scrims and dot-grain washes.
- Fake CSS dioramas where a shadow-box image belongs.
- Tracked uppercase kickers and em dashes in copy.
- Muddy, desaturated paper colours.

### Visual Character

- Rust table #B8431F, flat and saturated, with no grain.
- Cream paper #FBF2DD pieces, rotated a degree or two, each pinned with an aqua or rust dot.
- Rufina at weight 400 for display, Fustat for body at 17px.
- Three-depth shadows tinted a dark rust, never grey.
- A dotted aqua thread joining pinned pieces.
- Radii 16 and 9999 only.

### Lineage

> Revised in place from the live Maquette (cream ground, coral accent) to arni's approved round 6 take: the ground moved to a saturated rust table with cool teal and aqua, the layout became a thread-linked canvas, and fonts moved to Rufina and Fustat. The shadow-box art, three-depth shadows, cut-paper materials and radii 16 and 9999 are kept.

## 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 | `#B8431F` |
| surface | `#8C2A10` |
| text | `#FFFFFF` |
| muted | `#FFEBDD` |
| border | `#D2663F` |
| accent | `#8FE3DA` |
| on_accent | `#1B0F0A` |
| success | `#B6F0C8` |
| warning | `#FFE08A` |
| error | `#FFC9C0` |
| info | `#CBE6FF` |
| paper | `#FBF2DD` |
| ink | `#1B0F0A` |
| ink_soft | `#5A3A2E` |
| teal | `#0B4F5C` |
| peach | `#FFB38F` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&family=Fustat:wght@400;600;800&display=swap

- **Headline-Lg**: Rufina, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Rufina, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Fustat, 17px, weight 400, line-height 1.5.
- **Label-Md**: Fustat, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `8px`
- **Sm**: `14px`
- **Md**: `20px`
- **Lg**: `26px`
- **Xl**: `36px`
- **2xl**: `46px`
- **3xl**: `56px`
- **4xl**: `96px`

### Grid

- **Type**: free-placed canvas on a rust table
- **Max Width**: 1500px canvas on the landing, 1280px (1440px from 1700px) on the embodiment
- **Gutter**: 20px phone, 44px desktop
- **Column Behavior**: Desktop pieces are absolutely placed in percent of the canvas; the embodiment uses 12 columns; tablets (601 to 1199px) use their own placement; phones stack in one column

### Whitespace

- **Section Gap**: 46px between stacked pieces on phones, 56px between rows on desktop
- **Card Gap**: 32px
- **Content Padding**: 36 to 44px inside a piece, more above the title so it never sits on the pin
- **Approach**: Space is the table: gaps are rust ground, and the thread crosses them.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"52px","input_height":"52px","row_height":"56px"}

### Responsive

Desktop (1280px): freely placed pieces with threads and drag. Tablet (601 to 1199px): a second placement over a taller canvas. Phone (390px): one column, pieces alternate sides, a vertical thread joins them, no dragging. Above 1500px the canvas caps and centres.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Far**: 0 2px 6px rgba(60,15,5,.28)
- **Mid**: 0 10px 22px -6px rgba(60,15,5,.45)
- **Near**: 0 24px 40px -10px rgba(60,15,5,.55), 0 4px 10px rgba(60,15,5,.3)
- **Inset**: inset 0 2px 6px rgba(60,15,5,.22)

## Shapes

### Rounded

- **None**: `0px`
- **Soft**: `16px`
- **Card**: `24px`
- **Pill**: `9999px`

### Surfaces

- **Treatment**: cut-paper pieces at three depths pinned to a flat rust table
- **Table**: #B8431F
- **Piece Paper**: #FBF2DD
- **Piece Rust**: #8C2A10
- **Piece Teal**: #0B4F5C
- **Piece Aqua**: #8FE3DA
- **Well**: #EEDFC0

### Borders

- **Default**: none
- **Note**: No border, outline or rule anywhere; shape and cast shadow separate every piece. The only line is the dotted aqua thread.

## Components

### Composition

- Treat the page as a table and place each piece freely at its own depth and angle, a degree or two off square.
- Pin every piece with a dot and run a dotted aqua thread between pieces that relate.
- Keep the table full width and let it pan vertically only; never push text outside the viewport.
- On phones, stack the pieces in one column, alternate them left and right, and join each with a short thread.

### Hierarchy

- Reserve the near shadow and teal for the one thing to press; the mid plane carries the working surface; the far plane is quiet chrome.
- Display type in Rufina 400 at 44 to 84px; piece titles at 28 to 36px; body in Fustat 17px; captions 14.5px.
- Ink is for type on paper, white on the rust table, and nothing is ever set grey.

### Density

Low to medium: pieces 36 to 44px inside, 46 to 56px between, one clear action per view.

### Signature Patterns

- The depth-stack: far 2px/6px, mid 10px/22px, near 22px/40px shadows, tinted rust and mapped to roles.
- Pinned pieces: a 20px dot at the top centre of each piece, aqua on dark pieces and rust on paper.
- Thread: dotted aqua (5px stroke, 2 11 dash) between pinned pieces; drag a piece and it follows.
- Put them back: one pill that returns every piece to its first position.

## 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-01a101b2-fc3c-71d1-a693-5d32516bcb6e/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a101b2-fc3c-71d1-a693-5d32516bcb6e/shadcn.json` (registry theme), `/language/en-01a101b2-fc3c-71d1-a693-5d32516bcb6e/shadcn-components.md` (component recipes) and `/language/en-01a101b2-fc3c-71d1-a693-5d32516bcb6e/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 Let shadow and distance carry hierarchy, never a line.
- Do Keep the rust ground saturated and the paper clean.
- Do Use one teal action per view and aqua only as thread and highlight.
- Do Stage lists as pieces on the table with real shadow-box images.
- Do Rotate pieces a degree or two, and keep text upright inside them.
- Don't Draw a border, outline or grey rule around anything.
- Don't Use cream-with-coral, gradient scrims, dot grain or fake CSS dioramas.
- Don't Set aqua as a field behind long text, or white on aqua.
- Don't Put em dashes or tracked uppercase kickers in copy.
- Don't Let pieces carry text off the viewport.

### Accessibility

White on rust #B8431F and muted #FFEBDD on rust clear AA; ink #1B0F0A on paper #FBF2DD is 16:1; ink on aqua is 12:1; paper on teal #0B4F5C is 9:1. Every control is explicitly styled with a 3px aqua (table) or teal (paper) focus outline. The settled layout renders with no JavaScript, dragging is an enhancement, and prefers-reduced-motion removes the lift.

### Usage Context

Whiteboards, moodboards, spatial notes, story and planning tools, and any product where ideas should feel like paper pieces laid out and joined on a table.

## Imagery Direction

### Pairs With

shadowbox-papercut-diorama

### Art Style Id

en-019efdd8-8a3f-7b52-8fa6-20cded547f84

### Summary

Shadow-box paper dioramas in the language's own cardstock: cream, deep teal, pale aqua, terracotta and ink, lit from the upper left, three clear depths and fibrous cut edges. Scenes are small places: a river valley with a footbridge, a harbour wall with three lanterns, an orchard of twelve round trees.

### Subjects

- a river valley village with a footbridge
- a harbour wall with three lanterns
- an orchard of twelve round trees

### Usage

One large valley image as the hero piece painted with var(--hero-image) on a real element; two square images as shelf pieces. Images sit inside paper pieces with a 14 to 18px paper margin and a radius of 16.

### Avoid

Outlines, ink lines, text in the image, gradients, glow, muddy colours, photographs, and images edge to edge over copy.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "maquette",
  "type": "registry:theme",
  "title": "Maquette shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#B8431F",
      "foreground": "#FFFFFF",
      "card": "#8C2A10",
      "card-foreground": "#FFFFFF",
      "popover": "#8C2A10",
      "popover-foreground": "#FFFFFF",
      "primary": "#FFFFFF",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#FFEBDD",
      "muted-foreground": "#FFFFFF",
      "accent": "#8FE3DA",
      "accent-foreground": "#111111",
      "destructive": "#FFC9C0",
      "border": "#D2663F",
      "input": "#D2663F",
      "ring": "#8FE3DA",
      "chart-1": "#FFFFFF",
      "chart-2": "#f4f4f5",
      "chart-3": "#8FE3DA",
      "chart-4": "#B6F0C8",
      "chart-5": "#FFE08A",
      "sidebar": "#8C2A10",
      "sidebar-foreground": "#FFFFFF",
      "sidebar-primary": "#FFFFFF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#CBE6FF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#D2663F",
      "sidebar-ring": "#8FE3DA",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#FFFFFF",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#8FE3DA",
      "accent-foreground": "#111111",
      "destructive": "#FFC9C0",
      "border": "#303642",
      "input": "#303642",
      "ring": "#8FE3DA",
      "chart-1": "#FFFFFF",
      "chart-2": "#f4f4f5",
      "chart-3": "#8FE3DA",
      "chart-4": "#B6F0C8",
      "chart-5": "#FFE08A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#FFFFFF",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#8FE3DA",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#8FE3DA",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a101b2-fc3c-71d1-a693-5d32516bcb6e",
    "slug": "maquette",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "ink",
        "ink_soft",
        "muted",
        "on_accent",
        "paper",
        "peach",
        "success",
        "surface",
        "teal",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "scale"
      ],
      "radii": [
        "card",
        "none",
        "pill",
        "soft"
      ],
      "shadows": [
        "far",
        "inset",
        "mid",
        "near"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "piece_aqua",
        "piece_paper",
        "piece_rust",
        "piece_teal",
        "table",
        "treatment",
        "well"
      ],
      "borders": [
        "default",
        "note"
      ],
      "motion": [
        "duration",
        "easing",
        "principle"
      ],
      "controls": [
        "focus",
        "height",
        "radius"
      ]
    }
  }
}
```