Komawari

# Komawari

## Philosophy

Komawari prints the product screen as a science-fiction proof sheet: cream paper, one black key plate and two spot inks, acid magenta and cobalt, that land a few pixels out of true. The misregistration is the identity and the CSS carries it, not only the imagery: magenta sits 6px down and right of the black, cobalt 4px up and left, with no blur. A heavy high-contrast serif announces each section, a compact monospace counts, and the pages are paced like a comic spread, a story well beside a narrow rail, not a grid of equal cards.

### Values

- Depth comes from registration offset, never from borders, blur or glow
- One full-bleed picture at full strength, with type on the calm cream of the picture itself
- Magenta and cobalt behave like highlighters on a black and cream page
- A serif announces and a mono counts; nothing between them is decorative
- Pacing over symmetry: one story well, one rail, wide gutters between beats

### Anti-Values

- Keyline frames and boxed black navigation
- Grey blur shadows on any card or button
- Panels laid over the hero picture
- A trio of identical cards with numerals, a dark pull-quote box, a pink closing panel
- Tracked uppercase mono labels as ornament

### Visual Character

- Warm cream #F2E7D0 with black #121212 type and a fresh sheet #FCF6E9
- Two plate offsets: #C10F84 at 6px 6px and #1547D1 at -4px -4px, no blur
- Rozha One at poster scale, Petrona at 17px and up, Noto Sans Mono for figures
- One picture at full strength: a ringed planet and black spires in cobalt and magenta halftone
- Square everywhere: every rectangle has radius 0

### Lineage

> Revised in place from the approved Range round 8 take (komawari-i). It keeps the cream ground, the black key, magenta and cobalt, the editorial serif voice and the registration offset. It drops the keylined panels, the Bodoni Moda, Instrument Serif and Space Mono faces and the tracked mono kickers, and gives the hero one picture with the headline on its calm cream area.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F2E7D0` |
| surface | `#FCF6E9` |
| surface_2 | `#E6D7B6` |
| text | `#121212` |
| muted | `#5E5446` |
| border | `#121212` |
| accent | `#C10F84` |
| on_accent | `#FFFFFF` |
| accent_2 | `#1547D1` |
| on_accent_2 | `#FFFFFF` |
| success | `#0B6A63` |
| warning | `#8F5A00` |
| error | `#B3123A` |
| info | `#1547D1` |

### Typography

- **Base Size**: 17px
- **Body Font**: Petrona
- **Heading Font**: Rozha One
- **Mono Font**: Noto Sans Mono
- **Heading Weight**: 400
- **Heading Transform**: none
- **Letter Spacing**: -0.03em
- **Display Line Height**: 1.02
- **Line Height**: 1.6
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Rozha+One&family=Petrona:ital,wght@0,400;0,600;1,400&family=Noto+Sans+Mono:wght@400;600&display=swap

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 9999px

### Shadows

- **Sm**: 3px 3px 0 0 #C10F84, -2px -2px 0 0 #1547D1
- **Md**: 6px 6px 0 0 #C10F84, -4px -4px 0 0 #1547D1
- **Lg**: 6px 6px 0 0 #C10F84, -4px -4px 0 0 #1547D1

### Spacing

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

### Surfaces

- **Treatment**: paper
- **Bg Pattern**: none
- **Card Style**: no cards: copy sits straight on the cream; only a picture, an open menu or a dialog takes the registration-offset plates (magenta down-right, cobalt up-left), never a border

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No keylines, no hairlines, no grey. Separation is space, a filled well, or the two-plate offset; focus is a 2px black outline at 4px offset.

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.2, 0.9, 0.2, 1)
- **Philosophy**: Plates lock on a press: buttons turn cobalt on hover and drop 2px on press. The settled page renders with no JS and prefers-reduced-motion removes every transition.

## Rules

### Composition

- Build screens as spreads: one dominant story well (7 columns) beside a narrow rail (3 columns), paced rather than symmetric.
- Put one full-bleed picture at the top and set the headline on the calm cream area of the picture itself, never on a panel over it.
- Give a picture the two-plate offset shadow; give plain copy no frame at all.
- Sections run one beat at a time: a serif title, a short lede, then one demonstration.

### Hierarchy

- Display and section titles in Rozha One at -0.03em, 36px to 176px, line-height 1.02.
- Body in Petrona 400 at 17px or larger with 1.6 leading, black on cream, muted #5E5446 for the second tone.
- Figures, offsets, sizes and labels in Noto Sans Mono at 14.5px to 18px, regular case, no tracking.
- Links are cobalt and underlined; the single action fill is magenta.

### Density

Generous between beats (80 to 150px) and compact inside a rail. Pad above every title; a title never touches the top of its container.

### Signature Patterns

- Registration offset: text-shadow or box-shadow of 6px 6px 0 magenta and -4px -4px 0 cobalt, no blur, on a black key word or a picture.
- The plate list: three rows for black, magenta and cobalt, with the hex and the offset in mono.
- Story well and rail: a 7 to 3 split with a mono dl of real figures in the rail.
- The gear change: Rozha One for the one big word, Noto Sans Mono for what is counted.

## Layout

### Grid

- **Type**: spread: story well and rail
- **Max Width**: 1320px content, centred above 1440px; the hero alone spans 100vw
- **Gutter**: clamp(20px, 6vw, 96px)
- **Column Behavior**: 7fr/5fr and 7fr/3fr splits with minmax(0,1fr) tracks and min-width:0 children; three rule columns collapse to one below 900px

### Whitespace

- **Section Gap**: 80px phone to 150px desktop
- **Card Gap**: no cards; 24 to 64px between beats
- **Content Padding**: copy is flush to the gutter; open overlays pad 28px
- **Approach**: The cream is the table. Space separates, and the offset plates mark the one raised thing.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"50px","input_height":"52px","row_height":"56 to 72px table rows"}

### Responsive

Below 900px every grid becomes one column and the hero swaps to the tall picture with the copy above the art. Body text uses clamp(17px, 1.05vw + 12px, 20px) so tablets never shrink it and 2560 never doubles it. Non-essential table columns hide on phones.

### Breakpoints

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

## Guidance

### Do

- Set the key word in black and let magenta and cobalt peek out 6px and 4px behind it.
- Give every picture the two-plate offset and nothing else around it.
- Keep the black as the only text colour; use magenta for the one action and cobalt for links.
- Use Rozha One to announce and Noto Sans Mono to count; leave the middle empty.
- Print real figures in the rail: offsets, columns, sizes.
- Keep the settled page complete without JavaScript.

### Don't

- Don't draw keylines, hairlines or grey borders; don't box the nav.
- Don't cast a grey blur from a card or a button.
- Don't lay a panel or scrim over the hero picture.
- Don't repeat three identical cards with numerals.
- Don't track uppercase mono labels as decoration.
- Don't use gradients, glow or glass; don't put emoji on buttons.

### Accessibility

Black #121212 on cream #F2E7D0 is 14.9:1, muted #5E5446 is 6.0:1, white on magenta #C10F84 is 5.9:1, white on cobalt #1547D1 is 7.1:1. Body is 17px or larger and table rows 15px. Focus is a 2px black outline at 4px offset. The page renders complete with no JavaScript and respects prefers-reduced-motion.

### Usage Context

Editorial product pages, serial and magazine tools, launch and changelog pages, creative dashboards that want one confident, printed identity.

## Imagery Direction

### Pairs With

overprint

### Art Style Id

en-019ef728-5a0f-7ba1-93b3-5164fee4c337

### Summary

Vintage risograph comic-ink overprint: flat magenta, cobalt and black passes on warm cream pulp paper with deliberate misregistration, coarse halftone and thick black contour. The hero is one picture at full strength with a calm cream area for the headline.

### Subjects

- a ringed planet above black rock spires
- a small explorer on a spire
- orbit ellipses and star maps
- a cosmonaut helmet with a planet in the visor

### Usage

One full-bleed hero per landing painted with var(--hero-image), the ringed planet at the lower right and the left and top left left as plain cream for type; a tall version below 900px with the cream in the top two thirds. A second picture sits in the story well with the two-plate offset shadow.

### Avoid

Smooth digital illustration, photography, a second bright colour, a frame or border drawn into the picture, text in the picture.

---
version: "alpha"
name: "Komawari"
description: "Komawari prints the product screen as a science-fiction proof sheet: cream paper, one black key plate and two spot inks, acid magenta and cobalt, that land a few pixels out of true. The misregistration is the identity and the CSS carries..."
colors:
  bg: "#F2E7D0"
  surface: "#FCF6E9"
  surface_2: "#E6D7B6"
  text: "#121212"
  muted: "#5E5446"
  border: "#121212"
  accent: "#C10F84"
  on_accent: "#FFFFFF"
  accent_2: "#1547D1"
  on_accent_2: "#FFFFFF"
  success: "#0B6A63"
  warning: "#8F5A00"
  error: "#B3123A"
  info: "#1547D1"
typography:
  headline-lg:
    fontFamily: "Rozha One"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  headline-md:
    fontFamily: "Rozha One"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Petrona"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.03em"
  label-md:
    fontFamily: "Noto Sans Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "144px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  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-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-on_accent_2:
    backgroundColor: "{colors.on_accent_2}"
  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: "{colors.on_accent}"
    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"
---

# Komawari

## Overview

Komawari prints the product screen as a science-fiction proof sheet: cream paper, one black key plate and two spot inks, acid magenta and cobalt, that land a few pixels out of true. The misregistration is the identity and the CSS carries it, not only the imagery: magenta sits 6px down and right of the black, cobalt 4px up and left, with no blur. A heavy high-contrast serif announces each section, a compact monospace counts, and the pages are paced like a comic spread, a story well beside a narrow rail, not a grid of equal cards.

### Values

- Depth comes from registration offset, never from borders, blur or glow
- One full-bleed picture at full strength, with type on the calm cream of the picture itself
- Magenta and cobalt behave like highlighters on a black and cream page
- A serif announces and a mono counts; nothing between them is decorative
- Pacing over symmetry: one story well, one rail, wide gutters between beats

### Anti-Values

- Keyline frames and boxed black navigation
- Grey blur shadows on any card or button
- Panels laid over the hero picture
- A trio of identical cards with numerals, a dark pull-quote box, a pink closing panel
- Tracked uppercase mono labels as ornament

### Visual Character

- Warm cream #F2E7D0 with black #121212 type and a fresh sheet #FCF6E9
- Two plate offsets: #C10F84 at 6px 6px and #1547D1 at -4px -4px, no blur
- Rozha One at poster scale, Petrona at 17px and up, Noto Sans Mono for figures
- One picture at full strength: a ringed planet and black spires in cobalt and magenta halftone
- Square everywhere: every rectangle has radius 0

### Lineage

> Revised in place from the approved Range round 8 take (komawari-i). It keeps the cream ground, the black key, magenta and cobalt, the editorial serif voice and the registration offset. It drops the keylined panels, the Bodoni Moda, Instrument Serif and Space Mono faces and the tracked mono kickers, and gives the hero one picture with the headline on its calm cream area.

## 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 | `#F2E7D0` |
| surface | `#FCF6E9` |
| surface_2 | `#E6D7B6` |
| text | `#121212` |
| muted | `#5E5446` |
| border | `#121212` |
| accent | `#C10F84` |
| on_accent | `#FFFFFF` |
| accent_2 | `#1547D1` |
| on_accent_2 | `#FFFFFF` |
| success | `#0B6A63` |
| warning | `#8F5A00` |
| error | `#B3123A` |
| info | `#1547D1` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Rozha+One&family=Petrona:ital,wght@0,400;0,600;1,400&family=Noto+Sans+Mono:wght@400;600&display=swap

- **Headline-Lg**: Rozha One, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Rozha One, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Petrona, 17px, weight 400, line-height 1.6.
- **Label-Md**: Noto Sans 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`
- **Step-9**: `144px`

### Grid

- **Type**: spread: story well and rail
- **Max Width**: 1320px content, centred above 1440px; the hero alone spans 100vw
- **Gutter**: clamp(20px, 6vw, 96px)
- **Column Behavior**: 7fr/5fr and 7fr/3fr splits with minmax(0,1fr) tracks and min-width:0 children; three rule columns collapse to one below 900px

### Whitespace

- **Section Gap**: 80px phone to 150px desktop
- **Card Gap**: no cards; 24 to 64px between beats
- **Content Padding**: copy is flush to the gutter; open overlays pad 28px
- **Approach**: The cream is the table. Space separates, and the offset plates mark the one raised thing.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"50px","input_height":"52px","row_height":"56 to 72px table rows"}

### Responsive

Below 900px every grid becomes one column and the hero swaps to the tall picture with the copy above the art. Body text uses clamp(17px, 1.05vw + 12px, 20px) so tablets never shrink it and 2560 never doubles it. Non-essential table columns hide on phones.

### Breakpoints

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

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 0 #C10F84, -2px -2px 0 0 #1547D1
- **Md**: 6px 6px 0 0 #C10F84, -4px -4px 0 0 #1547D1
- **Lg**: 6px 6px 0 0 #C10F84, -4px -4px 0 0 #1547D1

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Bg Pattern**: none
- **Card Style**: no cards: copy sits straight on the cream; only a picture, an open menu or a dialog takes the registration-offset plates (magenta down-right, cobalt up-left), never a border

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No keylines, no hairlines, no grey. Separation is space, a filled well, or the two-plate offset; focus is a 2px black outline at 4px offset.

## Components

### Composition

- Build screens as spreads: one dominant story well (7 columns) beside a narrow rail (3 columns), paced rather than symmetric.
- Put one full-bleed picture at the top and set the headline on the calm cream area of the picture itself, never on a panel over it.
- Give a picture the two-plate offset shadow; give plain copy no frame at all.
- Sections run one beat at a time: a serif title, a short lede, then one demonstration.

### Hierarchy

- Display and section titles in Rozha One at -0.03em, 36px to 176px, line-height 1.02.
- Body in Petrona 400 at 17px or larger with 1.6 leading, black on cream, muted #5E5446 for the second tone.
- Figures, offsets, sizes and labels in Noto Sans Mono at 14.5px to 18px, regular case, no tracking.
- Links are cobalt and underlined; the single action fill is magenta.

### Density

Generous between beats (80 to 150px) and compact inside a rail. Pad above every title; a title never touches the top of its container.

### Signature Patterns

- Registration offset: text-shadow or box-shadow of 6px 6px 0 magenta and -4px -4px 0 cobalt, no blur, on a black key word or a picture.
- The plate list: three rows for black, magenta and cobalt, with the hex and the offset in mono.
- Story well and rail: a 7 to 3 split with a mono dl of real figures in the rail.
- The gear change: Rozha One for the one big word, Noto Sans Mono for what is counted.

## 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-01a11417-7eaa-7a33-9d75-c5e5e11ec52a/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11417-7eaa-7a33-9d75-c5e5e11ec52a/shadcn.json` (registry theme), `/language/en-01a11417-7eaa-7a33-9d75-c5e5e11ec52a/shadcn-components.md` (component recipes) and `/language/en-01a11417-7eaa-7a33-9d75-c5e5e11ec52a/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 Set the key word in black and let magenta and cobalt peek out 6px and 4px behind it.
- Do Give every picture the two-plate offset and nothing else around it.
- Do Keep the black as the only text colour; use magenta for the one action and cobalt for links.
- Do Use Rozha One to announce and Noto Sans Mono to count; leave the middle empty.
- Do Print real figures in the rail: offsets, columns, sizes.
- Do Keep the settled page complete without JavaScript.
- Don't Don't draw keylines, hairlines or grey borders; don't box the nav.
- Don't Don't cast a grey blur from a card or a button.
- Don't Don't lay a panel or scrim over the hero picture.
- Don't Don't repeat three identical cards with numerals.
- Don't Don't track uppercase mono labels as decoration.
- Don't Don't use gradients, glow or glass; don't put emoji on buttons.

### Accessibility

Black #121212 on cream #F2E7D0 is 14.9:1, muted #5E5446 is 6.0:1, white on magenta #C10F84 is 5.9:1, white on cobalt #1547D1 is 7.1:1. Body is 17px or larger and table rows 15px. Focus is a 2px black outline at 4px offset. The page renders complete with no JavaScript and respects prefers-reduced-motion.

### Usage Context

Editorial product pages, serial and magazine tools, launch and changelog pages, creative dashboards that want one confident, printed identity.

## Imagery Direction

### Pairs With

overprint

### Art Style Id

en-019ef728-5a0f-7ba1-93b3-5164fee4c337

### Summary

Vintage risograph comic-ink overprint: flat magenta, cobalt and black passes on warm cream pulp paper with deliberate misregistration, coarse halftone and thick black contour. The hero is one picture at full strength with a calm cream area for the headline.

### Subjects

- a ringed planet above black rock spires
- a small explorer on a spire
- orbit ellipses and star maps
- a cosmonaut helmet with a planet in the visor

### Usage

One full-bleed hero per landing painted with var(--hero-image), the ringed planet at the lower right and the left and top left left as plain cream for type; a tall version below 900px with the cream in the top two thirds. A second picture sits in the story well with the two-plate offset shadow.

### Avoid

Smooth digital illustration, photography, a second bright colour, a frame or border drawn into the picture, text in the picture.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "komawari",
  "type": "registry:theme",
  "title": "Komawari shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F2E7D0",
      "foreground": "#121212",
      "card": "#FCF6E9",
      "card-foreground": "#121212",
      "popover": "#FCF6E9",
      "popover-foreground": "#121212",
      "primary": "#121212",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5E5446",
      "muted-foreground": "#121212",
      "accent": "#C10F84",
      "accent-foreground": "#ffffff",
      "destructive": "#B3123A",
      "border": "#121212",
      "input": "#121212",
      "ring": "#C10F84",
      "chart-1": "#121212",
      "chart-2": "#f4f4f5",
      "chart-3": "#C10F84",
      "chart-4": "#0B6A63",
      "chart-5": "#8F5A00",
      "sidebar": "#FCF6E9",
      "sidebar-foreground": "#121212",
      "sidebar-primary": "#121212",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1547D1",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#121212",
      "sidebar-ring": "#C10F84",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#121212",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C10F84",
      "accent-foreground": "#ffffff",
      "destructive": "#B3123A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C10F84",
      "chart-1": "#121212",
      "chart-2": "#f4f4f5",
      "chart-3": "#C10F84",
      "chart-4": "#0B6A63",
      "chart-5": "#8F5A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#121212",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C10F84",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C10F84",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11417-7eaa-7a33-9d75-c5e5e11ec52a",
    "slug": "komawari",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "on_accent_2",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_line_height",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```