Herbarium

# Herbarium

## Philosophy

Herbarium treats the interface as a working botanical travel fieldbook, printed in a handful of riso separations: useful screens first, with pigment, registration, paper grain and specimen notation carrying the atmosphere instead of SaaS gradients or decorative card grids.

### Values

- Useful fieldwork before decoration: every illustration mark anchors navigation, annotation or review state.
- Limited separations as governance: coral, aqua, sunflower, leaf and indigo behave like inks that overprint instead of infinite gradients.
- Handmade tactility with product rigour: paper tooth, deckled edges and wash opacity are system tokens, not random noise.
- Editorial asymmetry: one dominant work surface, one dense route ledger and small marginal notes replace equal bento tiles.
- Botanical specificity: stems, labels, presses, route maps and swatches make the product feel authored for travel sketching.
- Accessible craft: texture never carries meaning alone; contrast, line weight, labels and focus rings stay explicit.

### Anti-Values

- Generic SaaS dashboards, nested rounded statistic cards, equal icon-card bento blocks and anonymous productivity scenes.
- AI pastel blobs, synthetic mesh gradients, gradient keyword emphasis, sterile flat whites and texture that does not read as pigment or paper.
- Childish clip-art botanicals, oversized tight-tracked hero type, pill-with-dot biscuits and decorative grid filler.
- Uncontrolled rainbow palettes; all colour must behave as printable layers with named roles and predictable overprint.

### Visual Character

- Cream paper ground built from layered fibre speckles and irregular deckle masks on major panels rather than sterile flat surfaces.
- Indigo ink skeleton: 1.5px hand-ruled borders, offset registration shadows, visible crop ticks and annotation leaders replace grey dividers.
- Limited riso ink layers use mix-blend-mode:multiply and slight transform offsets so coral, aqua, sunflower and leaf intersections create overprint colour instead of gradients.
- Asymmetric travel-spread layout with a dominant specimen canvas, a narrow route ledger, marginal washi tabs and irregular clipped paper scraps.
- Botanical line drawings are made from CSS/SVG strokes with watercolour wash blocks behind them, so imagery reads as field notes integrated into controls.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F7EFD9` |
| surface | `#FFF8E6` |
| surface_solid | `#FBF3DC` |
| text | `#172338` |
| muted | `#6E6456` |
| border | `#172338` |
| accent | `#F46F63` |
| accent_2 | `#38AFA7` |
| accent_soft | `#D6A224` |
| on_accent | `#172338` |
| success | `#3F8A58` |
| warning | `#D6A224` |
| error | `#B6423A` |
| info | `#2F8EA0` |

### Typography

- **Base Size**: 17px
- **Body Font**: Alegreya Sans
- **Heading Font**: Besley
- **Mono Font**: Reddit Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.56
- **Scale Ratio**: 1.22
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;500;700&family=Besley:wght@500;600;700&family=Reddit+Mono:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Sm**: 3px 3px 0 rgba(31,59,109,0.16)
- **Md**: 7px 7px 0 rgba(244,111,99,0.18), -3px 3px 0 rgba(56,175,167,0.14)
- **Lg**: 14px 16px 0 rgba(31,59,109,0.13), -8px 10px 0 rgba(214,162,36,0.16)

### Spacing

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

### Surfaces

- **Treatment**: Cream paper field with radial fibre speckles; surface panels use deckled polygon clip-paths, multiply ink washes, and no sterile flat fills.
- **Card Style**: Paper scraps with square or 16px corners, 1.5px indigo rule borders, offset riso colour plates, specimen labels and visible registration ticks.
- **Bg Pattern**: Repeating paper fibres plus sparse indigo/coral registration crosses; no decorative grids, mesh gradients or floating blobs.

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid with hand-ruled offset pseudo-elements
- **Character**: Indigo ink lines at high contrast, sometimes doubled by a 1.5px translated coral or aqua registration ghost; never grey SaaS borders.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Philosophy**: Motion mimics sliding tracing paper: small translate and opacity shifts only; on the landing, the registration field converges with scroll and slips under the pointer.

## Rules

### Composition

- Use a fieldbook spread: one dominant specimen or map surface occupies 45-60% of desktop width, while route ledgers and tool controls stack beside it.
- Break the grid with taped marginal notes, cropped specimen labels and one full-height ink-layer rail; never three equal cards in a row.
- Keep decoration accountable: every botanical mark points to an active object, route, material swatch or review annotation.
- Allow generous paper margins around the canvas, but keep ledgers dense with 4-12px internal gaps so the rhythm feels like a real notebook.
- Use clipped paper scraps and offset ink plates as structure, not as background filler.

### Density

Desktop alternates a spacious specimen canvas with a dense route ledger; mobile collapses into a scrollable fieldbook where controls stay compact but touch targets remain at least 44px.

### Hierarchy

- Display headings are medium-weight Besley, modest in size, with -0.035em tracking and relaxed editorial line breaks; avoid huge bold hero typography.
- Primary actions are indigo-outline paper buttons with coral or aqua registration underplates; secondary actions look like specimen labels.
- Status uses layer names, ink chips, line weight and text together so colour is never the sole signal.
- Dense metadata belongs in mono route stamps and specimen captions; narrative guidance stays in Alegreya Sans with generous leading.

### Signature Patterns

- Registration-offset controls: buttons, tabs and selected rows render a coral or aqua duplicate plate translated 3-6px behind the indigo foreground.
- Deckled paper panels: major surfaces use polygon clip-paths, inner fibre overlays and hand-ruled indigo borders rather than rounded cards.
- Overprint wash badges: transparent coral, aqua, sunflower and leaf layers multiply over cream and each other, creating intersection colour without gradients.
- Botanical annotation leaders: SVG stem lines and small circular pinheads connect notes to canvas regions.
- Ink layer preview rail: a vertical strip of named colour separations acts as navigation, showing active/laid/hidden states through opacity, offset and line texture.
- Registration readout: a live offset value and corner crosshairs that drift, then lock when the plates pull into true.

## Layout

### Grid

Desktop uses a 12-column fieldbook grid, max 1360px, 24px gutters: ~7 columns for the canvas, 3 for the ledger, 2 for the layer rail and marginal tools; tablet becomes 8 columns; mobile is one column with a pinned layer strip.

### Density

High variation: 4px specimen ticks, 8-12px ledger rows, 32px panel padding, 64-96px section separations and a 128px desktop outer field margin.

### Whitespace

Whitespace behaves like paper margin: large calm areas surround the specimen canvas, while annotations cluster tightly near the object they describe.

### Breakpoints

Mobile 360-639 single-column scroll; tablet 640-1023 canvas-first two-band; desktop 1024+ asymmetric spread with a fixed marginal layer rail. Wide 1920+ caps the contained width and lets only full-bleed plates span.

## Guidance

### Do

- Start from cream paper, an indigo key line and one or two active ink plates; add other inks only when the task needs separations.
- Use SVG or CSS botanical strokes as annotation systems: stems point to content, never float as clip-art.
- Make overprints with transparent layers and multiply blending; intersections feel like riso ink, never glossy gradients.
- Keep headings modest, editorial and breathable; let the specimen canvas and ink structure carry the drama.
- Use square and 16px paper radii consistently; clip-path deckles add tactility without becoming random.
- Pair every colour state with a label, line weight or layer-visibility toggle.
- Render focus as an indigo outline plus an offset coral plate.
- Let one major surface dominate each screen, then support it with dense ledgers and marginal notes.

### Don't

- Do not create equal bento icon cards, nested rounded stat cards, generic dashboards or CRM scenes.
- Do not use pill-with-dot biscuits, gradient keyword emphasis, pastel blobs, glassmorphism or sterile textureless surfaces.
- Do not add botanical decoration where it cannot be read as a specimen, route, annotation or swatch.
- Do not use huge overbold tight-tracked headings; this is fieldbook editorial, not launch-page shouting.
- Do not introduce colours outside the named riso inks; palette discipline is the system.
- Do not rely on texture or colour alone to convey state.
- Do not use grey SaaS borders; every line reads as indigo ink or a registration ghost.
- Do not fill quiet paper margins with decorative grids or filler marks.

### Accessibility

Body text stays 17px with -0.02em tracking and 1.56 leading. Text on cream or surface uses #172338 (14.9:1); accent-role text uses deepened ink variants (coral #B23A30 5.6:1, leaf #2E6B42 6.0:1). Touch targets are at least 44px. Semantic states carry text labels, outlines and marks in addition to ink colour. Focus is an indigo outline plus an offset coral plate. Reduced-motion and no-JS render the full settled document.

### Usage Context

Best for creative tools, editorial planning, botanical archives, travel journaling, print proofing, stationery workflows and any product where images, notes and material states need to feel handmade but disciplined.

## Imagery Direction

### Pairs With

overprint

### Description

Functional product imagery is made from CSS and SVG botanical strokes, pressed-specimen silhouettes, paper scraps and riso wash blocks. Photographic plates are limited-run risograph separations on cream in the paired art style: coral, aqua, sunflower, leaf and indigo inks overprinting a few millimetres out of register, with visible paper grain, staying inside the palette family.

---
version: "alpha"
name: "Herbarium"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F7EFD9"
  surface: "#FFF8E6"
  surface_solid: "#FBF3DC"
  text: "#172338"
  muted: "#6E6456"
  border: "#172338"
  accent: "#F46F63"
  accent_2: "#38AFA7"
  accent_soft: "#D6A224"
  on_accent: "#172338"
  success: "#3F8A58"
  warning: "#D6A224"
  error: "#B6423A"
  info: "#2F8EA0"
typography:
  headline-lg:
    fontFamily: "Besley"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Besley"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Alegreya Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Reddit 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"
  step-9: "128px"
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"
---

# Herbarium

## Overview

Herbarium treats the interface as a working botanical travel fieldbook, printed in a handful of riso separations: useful screens first, with pigment, registration, paper grain and specimen notation carrying the atmosphere instead of SaaS gradients or decorative card grids.

### Values

- Useful fieldwork before decoration: every illustration mark anchors navigation, annotation or review state.
- Limited separations as governance: coral, aqua, sunflower, leaf and indigo behave like inks that overprint instead of infinite gradients.
- Handmade tactility with product rigour: paper tooth, deckled edges and wash opacity are system tokens, not random noise.
- Editorial asymmetry: one dominant work surface, one dense route ledger and small marginal notes replace equal bento tiles.
- Botanical specificity: stems, labels, presses, route maps and swatches make the product feel authored for travel sketching.
- Accessible craft: texture never carries meaning alone; contrast, line weight, labels and focus rings stay explicit.

### Anti-Values

- Generic SaaS dashboards, nested rounded statistic cards, equal icon-card bento blocks and anonymous productivity scenes.
- AI pastel blobs, synthetic mesh gradients, gradient keyword emphasis, sterile flat whites and texture that does not read as pigment or paper.
- Childish clip-art botanicals, oversized tight-tracked hero type, pill-with-dot biscuits and decorative grid filler.
- Uncontrolled rainbow palettes; all colour must behave as printable layers with named roles and predictable overprint.

### Visual Character

- Cream paper ground built from layered fibre speckles and irregular deckle masks on major panels rather than sterile flat surfaces.
- Indigo ink skeleton: 1.5px hand-ruled borders, offset registration shadows, visible crop ticks and annotation leaders replace grey dividers.
- Limited riso ink layers use mix-blend-mode:multiply and slight transform offsets so coral, aqua, sunflower and leaf intersections create overprint colour instead of gradients.
- Asymmetric travel-spread layout with a dominant specimen canvas, a narrow route ledger, marginal washi tabs and irregular clipped paper scraps.
- Botanical line drawings are made from CSS/SVG strokes with watercolour wash blocks behind them, so imagery reads as field notes integrated into 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 | `#F7EFD9` |
| surface | `#FFF8E6` |
| surface_solid | `#FBF3DC` |
| text | `#172338` |
| muted | `#6E6456` |
| border | `#172338` |
| accent | `#F46F63` |
| accent_2 | `#38AFA7` |
| accent_soft | `#D6A224` |
| on_accent | `#172338` |
| success | `#3F8A58` |
| warning | `#D6A224` |
| error | `#B6423A` |
| info | `#2F8EA0` |

## Typography

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

### Grid

Desktop uses a 12-column fieldbook grid, max 1360px, 24px gutters: ~7 columns for the canvas, 3 for the ledger, 2 for the layer rail and marginal tools; tablet becomes 8 columns; mobile is one column with a pinned layer strip.

### Density

High variation: 4px specimen ticks, 8-12px ledger rows, 32px panel padding, 64-96px section separations and a 128px desktop outer field margin.

### Whitespace

Whitespace behaves like paper margin: large calm areas surround the specimen canvas, while annotations cluster tightly near the object they describe.

### Breakpoints

Mobile 360-639 single-column scroll; tablet 640-1023 canvas-first two-band; desktop 1024+ asymmetric spread with a fixed marginal layer rail. Wide 1920+ caps the contained width and lets only full-bleed plates span.

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 rgba(31,59,109,0.16)
- **Md**: 7px 7px 0 rgba(244,111,99,0.18), -3px 3px 0 rgba(56,175,167,0.14)
- **Lg**: 14px 16px 0 rgba(31,59,109,0.13), -8px 10px 0 rgba(214,162,36,0.16)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: Cream paper field with radial fibre speckles; surface panels use deckled polygon clip-paths, multiply ink washes, and no sterile flat fills.
- **Card Style**: Paper scraps with square or 16px corners, 1.5px indigo rule borders, offset riso colour plates, specimen labels and visible registration ticks.
- **Bg Pattern**: Repeating paper fibres plus sparse indigo/coral registration crosses; no decorative grids, mesh gradients or floating blobs.

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid with hand-ruled offset pseudo-elements
- **Character**: Indigo ink lines at high contrast, sometimes doubled by a 1.5px translated coral or aqua registration ghost; never grey SaaS borders.

## Components

### Composition

- Use a fieldbook spread: one dominant specimen or map surface occupies 45-60% of desktop width, while route ledgers and tool controls stack beside it.
- Break the grid with taped marginal notes, cropped specimen labels and one full-height ink-layer rail; never three equal cards in a row.
- Keep decoration accountable: every botanical mark points to an active object, route, material swatch or review annotation.
- Allow generous paper margins around the canvas, but keep ledgers dense with 4-12px internal gaps so the rhythm feels like a real notebook.
- Use clipped paper scraps and offset ink plates as structure, not as background filler.

### Density

Desktop alternates a spacious specimen canvas with a dense route ledger; mobile collapses into a scrollable fieldbook where controls stay compact but touch targets remain at least 44px.

### Hierarchy

- Display headings are medium-weight Besley, modest in size, with -0.035em tracking and relaxed editorial line breaks; avoid huge bold hero typography.
- Primary actions are indigo-outline paper buttons with coral or aqua registration underplates; secondary actions look like specimen labels.
- Status uses layer names, ink chips, line weight and text together so colour is never the sole signal.
- Dense metadata belongs in mono route stamps and specimen captions; narrative guidance stays in Alegreya Sans with generous leading.

### Signature Patterns

- Registration-offset controls: buttons, tabs and selected rows render a coral or aqua duplicate plate translated 3-6px behind the indigo foreground.
- Deckled paper panels: major surfaces use polygon clip-paths, inner fibre overlays and hand-ruled indigo borders rather than rounded cards.
- Overprint wash badges: transparent coral, aqua, sunflower and leaf layers multiply over cream and each other, creating intersection colour without gradients.
- Botanical annotation leaders: SVG stem lines and small circular pinheads connect notes to canvas regions.
- Ink layer preview rail: a vertical strip of named colour separations acts as navigation, showing active/laid/hidden states through opacity, offset and line texture.
- Registration readout: a live offset value and corner crosshairs that drift, then lock when the plates pull into true.

## 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-019f9a31-5446-7343-82e5-ce525858fa56/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 Start from cream paper, an indigo key line and one or two active ink plates; add other inks only when the task needs separations.
- Do Use SVG or CSS botanical strokes as annotation systems: stems point to content, never float as clip-art.
- Do Make overprints with transparent layers and multiply blending; intersections feel like riso ink, never glossy gradients.
- Do Keep headings modest, editorial and breathable; let the specimen canvas and ink structure carry the drama.
- Do Use square and 16px paper radii consistently; clip-path deckles add tactility without becoming random.
- Do Pair every colour state with a label, line weight or layer-visibility toggle.
- Do Render focus as an indigo outline plus an offset coral plate.
- Do Let one major surface dominate each screen, then support it with dense ledgers and marginal notes.
- Don't Do not create equal bento icon cards, nested rounded stat cards, generic dashboards or CRM scenes.
- Don't Do not use pill-with-dot biscuits, gradient keyword emphasis, pastel blobs, glassmorphism or sterile textureless surfaces.
- Don't Do not add botanical decoration where it cannot be read as a specimen, route, annotation or swatch.
- Don't Do not use huge overbold tight-tracked headings; this is fieldbook editorial, not launch-page shouting.
- Don't Do not introduce colours outside the named riso inks; palette discipline is the system.
- Don't Do not rely on texture or colour alone to convey state.
- Don't Do not use grey SaaS borders; every line reads as indigo ink or a registration ghost.
- Don't Do not fill quiet paper margins with decorative grids or filler marks.

### Accessibility

Body text stays 17px with -0.02em tracking and 1.56 leading. Text on cream or surface uses #172338 (14.9:1); accent-role text uses deepened ink variants (coral #B23A30 5.6:1, leaf #2E6B42 6.0:1). Touch targets are at least 44px. Semantic states carry text labels, outlines and marks in addition to ink colour. Focus is an indigo outline plus an offset coral plate. Reduced-motion and no-JS render the full settled document.

### Usage Context

Best for creative tools, editorial planning, botanical archives, travel journaling, print proofing, stationery workflows and any product where images, notes and material states need to feel handmade but disciplined.

## Imagery Direction

### Pairs With

overprint

### Description

Functional product imagery is made from CSS and SVG botanical strokes, pressed-specimen silhouettes, paper scraps and riso wash blocks. Photographic plates are limited-run risograph separations on cream in the paired art style: coral, aqua, sunflower, leaf and indigo inks overprinting a few millimetres out of register, with visible paper grain, staying inside the palette family.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "herbarium",
  "type": "registry:theme",
  "title": "Herbarium shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F7EFD9",
      "foreground": "#172338",
      "card": "#FFF8E6",
      "card-foreground": "#172338",
      "popover": "#FFF8E6",
      "popover-foreground": "#172338",
      "primary": "#172338",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6E6456",
      "muted-foreground": "#172338",
      "accent": "#F46F63",
      "accent-foreground": "#ffffff",
      "destructive": "#B6423A",
      "border": "#172338",
      "input": "#172338",
      "ring": "#F46F63",
      "chart-1": "#172338",
      "chart-2": "#f4f4f5",
      "chart-3": "#F46F63",
      "chart-4": "#3F8A58",
      "chart-5": "#D6A224",
      "sidebar": "#FFF8E6",
      "sidebar-foreground": "#172338",
      "sidebar-primary": "#172338",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2F8EA0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#172338",
      "sidebar-ring": "#F46F63",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#172338",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F46F63",
      "accent-foreground": "#ffffff",
      "destructive": "#B6423A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F46F63",
      "chart-1": "#172338",
      "chart-2": "#f4f4f5",
      "chart-3": "#F46F63",
      "chart-4": "#3F8A58",
      "chart-5": "#D6A224",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#172338",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F46F63",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F46F63",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f9a31-5446-7343-82e5-ce525858fa56",
    "slug": "herbarium",
    "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"
      ]
    }
  }
}
```