Transparent Wash Editorial Watercolor

# Transparent Wash Editorial Watercolor

## Philosophy

Transparent Wash Editorial Watercolor translates traditional watercolor illustration into a quiet, publication-grade interface language. It treats the screen like cold-press paper: generous paper-white negative space carries the composition, while translucent botanical washes mark hierarchy without becoming decoration. The language is built for editorial tools, collection dashboards, cultural publishing, recipe archives, botanical indexes, and any product that needs softness, clarity, and human touch without drifting into pastel template design.

### Values

- {"name":"Luminosity through restraint","explanation":"Use pure white as the dominant surface and let transparent color appear in thin, low-opacity fields so content feels lit from the paper rather than filled with opaque UI chrome."}
- {"name":"Pigment behavior as structure","explanation":"Edges, dividers, badges, and progress marks borrow from pigment pooling, blooms, granulation, dry-brush strokes, and glazing; these effects become functional hierarchy cues."}
- {"name":"Editorial calm","explanation":"Typography, columns, captions, and data tables follow magazine-like discipline so watercolor texture supports reading rather than competing with it."}
- {"name":"Visible paper texture","explanation":"Surfaces carry a faint cold-press grain and deckled borders to preserve tactile evidence of the medium in a digital layout."}
- {"name":"Negative space as masking fluid","explanation":"White gaps and reserved fields are active design material; layouts should preserve airy margins and avoid filling every panel."}
- {"name":"Layered transparency","explanation":"Information states are built by glazing translucent layers rather than using heavy shadows, hard fills, or saturated blocks."}

### Anti-Values

- {"name":"Opaque corporate panels","explanation":"Avoid dense gray cards, solid tinted backgrounds, and thick app-shell chrome that would hide the paper-like field."}
- {"name":"Pastel sweetness","explanation":"The palette is muted and botanical, but never candy-colored; white, ink, and one restrained wash accent carry the design."}
- {"name":"Crypto gradients","explanation":"No gradient buttons, gradient text, or glossy glassmorphism. Watercolor variation must come from layered texture, masks, and edge pooling."}
- {"name":"Component catalog staging","explanation":"Controls should appear inside a real editorial workflow rather than as a showroom of UI parts."}

### Visual Character

- Pure #FFFFFF page field with oversized margins and large paper-white negative space between editorial panels.
- Translucent watercolor wash panels made with low-opacity botanical color, irregular radial stains, and darker pigment pooling along one edge.
- Cold-press paper texture applied through subtle noise and fine fiber overlays on every major surface.
- Deckled and brush-made borders using SVG-like mask/clip-path edges, dashed ink rules, and soft uneven outline shadows.
- Editorial typography pairing a literary serif display face with an approved sans body, tight -0.02em tracking, small caps labels, and generous line height.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#121212` |
| secondary | `#4C5A4B` |
| accent | `#6F8F7A` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#121212` |
| muted | `#6B6A61` |
| border | `#D8D1C4` |
| error | `#9A3E35` |
| success | `#4F7A5A` |
| warning | `#A56F2B` |
| info | `#5C7893` |
| wash_sage | `#A9C3AD` |
| wash_ochre | `#D8B46E` |
| wash_rosewood | `#B98578` |
| wash_sky | `#A9C7D8` |
| ink_soft | `#2D2B27` |
| paper_fiber | `#E9E1D3` |
| pool_edge | `#597866` |

### Typography

- **Heading Font**: Cormorant Garamond
- **Body Font**: IBM Plex Sans
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.58
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap
- **Sizes**: {"xs":"12px","sm":"14px","base":"16px","lg":"20px","xl":"28px","display":"clamp(42px, 7vw, 86px)"}
- **Weights**: {"regular":400,"medium":500,"semibold":600,"bold":700}

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(18,18,18,0.08)
- **Md**: 0 18px 48px rgba(18,18,18,0.08)
- **Lg**: 0 28px 80px rgba(18,18,18,0.10)

### Surfaces

- **Treatment**: paper
- **Card Style**: White editorial panels with cold-press grain, deckled mask edges, translucent wash corners, and one soft pigment pool accent.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: Fine ink rules and broken deckled edges; borders feel drawn with a loaded brush rather than rendered as perfect software chrome.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: deliberate

### Responsive

- **Breakpoints**: ["1200px","1024px","768px","480px"]
- **Column Progression**: 12 columns desktop, 8 tablet, 4 small tablet, 1 phone

## Rules

### Composition

- Build screens like editorial spreads: one strong title column, one working canvas, and one narrow marginalia rail for notes or filters.
- Keep the page background pure white and reserve color for transparent wash fields behind priority content or status accents.
- Use asymmetric spacing: wide outer margins, narrow caption gutters, and intentionally empty white areas that function like masked paper.
- Group data in bordered paper sheets rather than dense app cards; panels may overlap wash stains but text remains on clean white.
- Use botanical hues sparingly and repeat one accent wash across buttons, selected tabs, progress, and illustration marks.
- Let texture appear in the surface layer, not in the type; reading zones must remain high contrast and calm.

### Hierarchy

- Large serif headlines establish the editorial voice; sans-serif labels and controls handle workflow clarity.
- Small uppercase section labels use mono or sans with hairline letter rules to mimic printed folio markers.
- Primary actions are ink text on translucent sage wash with a darker pooled edge; secondary actions are white with ink borders.
- Tables use quiet ink rules and wash-tinted active rows instead of filled header bars.
- Badges and alerts use small transparent glazes with pigment speckles rather than solid notification blocks.

### Density

Low to medium density with generous page margins, 24px-48px panel padding, and open line heights; dense tables are allowed only inside scrollable editorial sheets.

### Signature Patterns

- Use layered pseudo-elements on panels to create translucent watercolor stains with low opacity and soft radial bloom shapes.
- Apply repeating-radial-gradient and repeating-linear-gradient noise overlays to simulate cold-press paper grain on all major surfaces.
- Create deckled paper edges with clip-path polygons and dashed ink rules so panels are subtly irregular rather than rectangular chrome.
- Represent pigment pooling with a 3px accent border on one side plus an inset translucent box-shadow that darkens the wash edge.
- Use masked white negative-space cutouts and outline-only controls to make untouched paper feel like an active design material.

## Layout

### Density

Editorial low-to-medium density; enough controls for production work, but every region keeps visible breathing room like a watercolor sheet drying on a desk.

### Grid

Desktop uses a 12-column max-width 1320px spread with 32px gutters: 3 columns for editorial context, 6 for the main work sheet, 3 for notes and filters. Tablet collapses to 8 columns; phone becomes one column.

### Breakpoints

1200px tightens gutters, 1024px removes the side rail into stacked sections, 768px changes all panels to two-column or single-column blocks, and 480px stacks buttons full-width with horizontal scrolling only for the table.

### Whitespace

Whitespace is treated like reserved paper created by masking fluid. Leave uninterrupted white margins around text, keep wash effects offset from core reading content, and use empty gutters as quiet orientation space.

### Responsive

Use CSS grid areas and clamp() type. No inline layout styles. Tables scroll horizontally on mobile; modal width becomes calc(100vw - 32px); touch targets stay at least 44px.

## Guidance

### Do

- Use pure #FFFFFF for the page and primary panels; add color only as transparent wash accents or small status glazes.
- Apply -0.02em letter spacing to every text element and preserve the serif/sans editorial contrast.
- Keep deckled borders subtle and functional, especially around cards, modal, alert, and the active work sheet.
- Use cold-press grain overlays at very low opacity so the interface feels tactile but remains readable.
- Let important actions share the same sage wash accent with visible pooled edge treatment.
- Use botanical muted hues for categorization, not rainbow status systems.
- Preserve negative space around headlines, forms, and table summaries so the composition breathes.
- Style every input, select, checkbox, radio, toggle, tab, pagination item, and accordion state; no browser defaults.

### Don't

- Do not use cream, beige, lavender, mint, or other pastel full-page backgrounds; the background must stay #FFFFFF.
- Do not use gradient buttons, gradient text, glossy glass panels, or saturated multi-color decoration.
- Do not round cards or modal corners; this language uses square paper cuts and fully round only for pills or avatars.
- Do not fill panels with opaque tints that reduce the sense of transparent watercolor.
- Do not make texture heavy enough to interfere with small text or numeric data.
- Do not center everything like a landing page; maintain editorial columns, margins, and captions.
- Do not use default fonts such as Poppins, Montserrat, DM Sans, Roboto, or Space Grotesk.
- Do not turn watercolor into childish splashes; effects should feel controlled, botanical, and publication-ready.

### Usage Context

Best for editorial dashboards, cultural archives, botanical or culinary publishing, museum collection tools, illustration workflow trackers, and design systems that need tactility without sacrificing information clarity.

### Accessibility

Maintain ink-on-white contrast for all primary copy, never place small text directly on busy texture, preserve visible focus rings in sage and ink, keep touch targets at least 44px, and provide non-color cues through labels, borders, icons, and text.

---
version: "alpha"
name: "Transparent Wash Editorial Watercolor"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#121212"
  secondary: "#4C5A4B"
  accent: "#6F8F7A"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  text: "#121212"
  muted: "#6B6A61"
  border: "#D8D1C4"
  error: "#9A3E35"
  success: "#4F7A5A"
  warning: "#A56F2B"
  info: "#5C7893"
  wash_sage: "#A9C3AD"
  wash_ochre: "#D8B46E"
  wash_rosewood: "#B98578"
  wash_sky: "#A9C7D8"
  ink_soft: "#2D2B27"
  paper_fiber: "#E9E1D3"
  pool_edge: "#597866"
typography:
  headline-lg:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Cormorant Garamond"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex 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: "128px"
components:
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  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-error:
    backgroundColor: "{colors.error}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-wash_sage:
    backgroundColor: "{colors.wash_sage}"
  color-reference-wash_ochre:
    backgroundColor: "{colors.wash_ochre}"
  color-reference-wash_rosewood:
    backgroundColor: "{colors.wash_rosewood}"
  color-reference-wash_sky:
    backgroundColor: "{colors.wash_sky}"
  color-reference-ink_soft:
    backgroundColor: "{colors.ink_soft}"
  color-reference-paper_fiber:
    backgroundColor: "{colors.paper_fiber}"
  color-reference-pool_edge:
    backgroundColor: "{colors.pool_edge}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    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"
---

# Transparent Wash Editorial Watercolor

## Overview

Transparent Wash Editorial Watercolor translates traditional watercolor illustration into a quiet, publication-grade interface language. It treats the screen like cold-press paper: generous paper-white negative space carries the composition, while translucent botanical washes mark hierarchy without becoming decoration. The language is built for editorial tools, collection dashboards, cultural publishing, recipe archives, botanical indexes, and any product that needs softness, clarity, and human touch without drifting into pastel template design.

### Values

- {"name":"Luminosity through restraint","explanation":"Use pure white as the dominant surface and let transparent color appear in thin, low-opacity fields so content feels lit from the paper rather than filled with opaque UI chrome."}
- {"name":"Pigment behavior as structure","explanation":"Edges, dividers, badges, and progress marks borrow from pigment pooling, blooms, granulation, dry-brush strokes, and glazing; these effects become functional hierarchy cues."}
- {"name":"Editorial calm","explanation":"Typography, columns, captions, and data tables follow magazine-like discipline so watercolor texture supports reading rather than competing with it."}
- {"name":"Visible paper texture","explanation":"Surfaces carry a faint cold-press grain and deckled borders to preserve tactile evidence of the medium in a digital layout."}
- {"name":"Negative space as masking fluid","explanation":"White gaps and reserved fields are active design material; layouts should preserve airy margins and avoid filling every panel."}
- {"name":"Layered transparency","explanation":"Information states are built by glazing translucent layers rather than using heavy shadows, hard fills, or saturated blocks."}

### Anti-Values

- {"name":"Opaque corporate panels","explanation":"Avoid dense gray cards, solid tinted backgrounds, and thick app-shell chrome that would hide the paper-like field."}
- {"name":"Pastel sweetness","explanation":"The palette is muted and botanical, but never candy-colored; white, ink, and one restrained wash accent carry the design."}
- {"name":"Crypto gradients","explanation":"No gradient buttons, gradient text, or glossy glassmorphism. Watercolor variation must come from layered texture, masks, and edge pooling."}
- {"name":"Component catalog staging","explanation":"Controls should appear inside a real editorial workflow rather than as a showroom of UI parts."}

### Visual Character

- Pure #FFFFFF page field with oversized margins and large paper-white negative space between editorial panels.
- Translucent watercolor wash panels made with low-opacity botanical color, irregular radial stains, and darker pigment pooling along one edge.
- Cold-press paper texture applied through subtle noise and fine fiber overlays on every major surface.
- Deckled and brush-made borders using SVG-like mask/clip-path edges, dashed ink rules, and soft uneven outline shadows.
- Editorial typography pairing a literary serif display face with an approved sans body, tight -0.02em tracking, small caps labels, and generous line height.

## Colors

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

| Token | Value |
|-------|-------|
| primary | `#121212` |
| secondary | `#4C5A4B` |
| accent | `#6F8F7A` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| text | `#121212` |
| muted | `#6B6A61` |
| border | `#D8D1C4` |
| error | `#9A3E35` |
| success | `#4F7A5A` |
| warning | `#A56F2B` |
| info | `#5C7893` |
| wash_sage | `#A9C3AD` |
| wash_ochre | `#D8B46E` |
| wash_rosewood | `#B98578` |
| wash_sky | `#A9C7D8` |
| ink_soft | `#2D2B27` |
| paper_fiber | `#E9E1D3` |
| pool_edge | `#597866` |

## Typography

- **Headline-Lg**: Cormorant Garamond, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Cormorant Garamond, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 16px, weight 400, line-height 1.58.
- **Label-Md**: IBM Plex 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**: `128px`

### Density

Editorial low-to-medium density; enough controls for production work, but every region keeps visible breathing room like a watercolor sheet drying on a desk.

### Grid

Desktop uses a 12-column max-width 1320px spread with 32px gutters: 3 columns for editorial context, 6 for the main work sheet, 3 for notes and filters. Tablet collapses to 8 columns; phone becomes one column.

### Breakpoints

1200px tightens gutters, 1024px removes the side rail into stacked sections, 768px changes all panels to two-column or single-column blocks, and 480px stacks buttons full-width with horizontal scrolling only for the table.

### Whitespace

Whitespace is treated like reserved paper created by masking fluid. Leave uninterrupted white margins around text, keep wash effects offset from core reading content, and use empty gutters as quiet orientation space.

### Responsive

Use CSS grid areas and clamp() type. No inline layout styles. Tables scroll horizontally on mobile; modal width becomes calc(100vw - 32px); touch targets stay at least 44px.

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(18,18,18,0.08)
- **Md**: 0 18px 48px rgba(18,18,18,0.08)
- **Lg**: 0 28px 80px rgba(18,18,18,0.10)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: paper
- **Card Style**: White editorial panels with cold-press grain, deckled mask edges, translucent wash corners, and one soft pigment pool accent.
- **Bg Pattern**: noise

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: Fine ink rules and broken deckled edges; borders feel drawn with a loaded brush rather than rendered as perfect software chrome.

## Components

### Composition

- Build screens like editorial spreads: one strong title column, one working canvas, and one narrow marginalia rail for notes or filters.
- Keep the page background pure white and reserve color for transparent wash fields behind priority content or status accents.
- Use asymmetric spacing: wide outer margins, narrow caption gutters, and intentionally empty white areas that function like masked paper.
- Group data in bordered paper sheets rather than dense app cards; panels may overlap wash stains but text remains on clean white.
- Use botanical hues sparingly and repeat one accent wash across buttons, selected tabs, progress, and illustration marks.
- Let texture appear in the surface layer, not in the type; reading zones must remain high contrast and calm.

### Hierarchy

- Large serif headlines establish the editorial voice; sans-serif labels and controls handle workflow clarity.
- Small uppercase section labels use mono or sans with hairline letter rules to mimic printed folio markers.
- Primary actions are ink text on translucent sage wash with a darker pooled edge; secondary actions are white with ink borders.
- Tables use quiet ink rules and wash-tinted active rows instead of filled header bars.
- Badges and alerts use small transparent glazes with pigment speckles rather than solid notification blocks.

### Density

Low to medium density with generous page margins, 24px-48px panel padding, and open line heights; dense tables are allowed only inside scrollable editorial sheets.

### Signature Patterns

- Use layered pseudo-elements on panels to create translucent watercolor stains with low opacity and soft radial bloom shapes.
- Apply repeating-radial-gradient and repeating-linear-gradient noise overlays to simulate cold-press paper grain on all major surfaces.
- Create deckled paper edges with clip-path polygons and dashed ink rules so panels are subtly irregular rather than rectangular chrome.
- Represent pigment pooling with a 3px accent border on one side plus an inset translucent box-shadow that darkens the wash edge.
- Use masked white negative-space cutouts and outline-only controls to make untouched paper feel like an active design material.

## 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/transparent-wash-editorial-watercolor/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.

## Do's and Don'ts

- Do Use pure #FFFFFF for the page and primary panels; add color only as transparent wash accents or small status glazes.
- Do Apply -0.02em letter spacing to every text element and preserve the serif/sans editorial contrast.
- Do Keep deckled borders subtle and functional, especially around cards, modal, alert, and the active work sheet.
- Do Use cold-press grain overlays at very low opacity so the interface feels tactile but remains readable.
- Do Let important actions share the same sage wash accent with visible pooled edge treatment.
- Do Use botanical muted hues for categorization, not rainbow status systems.
- Do Preserve negative space around headlines, forms, and table summaries so the composition breathes.
- Do Style every input, select, checkbox, radio, toggle, tab, pagination item, and accordion state; no browser defaults.
- Don't Do not use cream, beige, lavender, mint, or other pastel full-page backgrounds; the background must stay #FFFFFF.
- Don't Do not use gradient buttons, gradient text, glossy glass panels, or saturated multi-color decoration.
- Don't Do not round cards or modal corners; this language uses square paper cuts and fully round only for pills or avatars.
- Don't Do not fill panels with opaque tints that reduce the sense of transparent watercolor.
- Don't Do not make texture heavy enough to interfere with small text or numeric data.
- Don't Do not center everything like a landing page; maintain editorial columns, margins, and captions.
- Don't Do not use default fonts such as Poppins, Montserrat, DM Sans, Roboto, or Space Grotesk.
- Don't Do not turn watercolor into childish splashes; effects should feel controlled, botanical, and publication-ready.

### Usage Context

Best for editorial dashboards, cultural archives, botanical or culinary publishing, museum collection tools, illustration workflow trackers, and design systems that need tactility without sacrificing information clarity.

### Accessibility

Maintain ink-on-white contrast for all primary copy, never place small text directly on busy texture, preserve visible focus rings in sage and ink, keep touch targets at least 44px, and provide non-color cues through labels, borders, icons, and text.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "transparent-wash-editorial-watercolor",
  "type": "registry:theme",
  "title": "Transparent Wash Editorial Watercolor shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#121212",
      "card": "#FFFFFF",
      "card-foreground": "#121212",
      "popover": "#FFFFFF",
      "popover-foreground": "#121212",
      "primary": "#121212",
      "primary-foreground": "#ffffff",
      "secondary": "#4C5A4B",
      "secondary-foreground": "#ffffff",
      "muted": "#6B6A61",
      "muted-foreground": "#121212",
      "accent": "#6F8F7A",
      "accent-foreground": "#ffffff",
      "destructive": "#9A3E35",
      "border": "#D8D1C4",
      "input": "#D8D1C4",
      "ring": "#6F8F7A",
      "chart-1": "#121212",
      "chart-2": "#4C5A4B",
      "chart-3": "#6F8F7A",
      "chart-4": "#4F7A5A",
      "chart-5": "#A56F2B",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#121212",
      "sidebar-primary": "#121212",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5C7893",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D8D1C4",
      "sidebar-ring": "#6F8F7A",
      "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": "#6F8F7A",
      "accent-foreground": "#ffffff",
      "destructive": "#9A3E35",
      "border": "#303642",
      "input": "#303642",
      "ring": "#6F8F7A",
      "chart-1": "#121212",
      "chart-2": "#4C5A4B",
      "chart-3": "#6F8F7A",
      "chart-4": "#4F7A5A",
      "chart-5": "#A56F2B",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#121212",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6F8F7A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#6F8F7A",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "transparent-wash-editorial-watercolor",
    "slug": "transparent-wash-editorial-watercolor",
    "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",
        "background",
        "border",
        "error",
        "info",
        "ink_soft",
        "muted",
        "paper_fiber",
        "pool_edge",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning",
        "wash_ochre",
        "wash_rosewood",
        "wash_sage",
        "wash_sky"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio",
        "sizes",
        "weights"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "responsive": [
        "breakpoints",
        "column_progression"
      ]
    }
  }
}
```