Bluet

# Bluet

## Philosophy

A disciplined product language that treats the interface as a cyanotype botanical field-archive: useful screens first, with a single Prussian separation, paper grain, exposure and specimen notation carrying the atmosphere instead of SaaS gradients or decorative card grids.

### Values

- Useful fieldwork before decoration: every mark anchors navigation, annotation, dose, or review state.
- One separation as governance: a single Prussian blue, cream paper, and one rationed sun-amber behave like real chemistry, never an infinite rainbow.
- Exposure as the state semantic: things develop rather than merely highlight; idle is a pale wash, active is deep Prussian.
- Handmade tactility with product rigour: paper tooth, deckle edges, print-block offsets and wash opacity are system tokens, not random noise.
- Editorial asymmetry: one dominant print canvas, one dense catalogue ledger, and marginal stamps replace equal bento tiles.
- Accessible craft: exposure level, white silhouette, line weight, labels and focus rings remain explicit — texture never carries meaning alone.

### Anti-Values

- Generic SaaS dashboards, nested rounded statistic cards, equal icon-card bento blocks, anonymous productivity scenes.
- AI pastel blobs, synthetic mesh gradients, gradient keyword emphasis, glassmorphism, sterile textureless surfaces.
- Childish clip-art botanicals, oversized italic-serif shouting on product screens, pill-with-dot biscuits, decorative grid filler.
- Uncontrolled rainbow palettes; all colour must behave as one printable separation with predictable develop behaviour.

### Visual Character

- Cream watercolour-paper ground built from fibre speckle, with deep Prussian-blue print plates carrying every dominant surface.
- Prussian-ink skeleton: 1.5px hand-ruled ledger rules, hard offset print-block shadows, crop ticks, and annotation leaders replace grey dividers.
- A single blue separation: white specimen silhouettes emerge from the Prussian ground; the sensitized (under-exposed) state is a pale sage-cyan that develops toward full blue.
- Asymmetric field-spread layout — a dominant print canvas, a dense catalogue ledger, marginal stamps, and irregular deckled scraps.
- Sun-amber appears once per view, at the instant an exposure completes.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#ECE3CE` |
| surface | `#F6F0DE` |
| surface_solid | `#E1D6BB` |
| text | `#122A47` |
| muted | `#51606D` |
| border | `#122A47` |
| accent | `#C36A2D` |
| accent_2 | `#2E7C93` |
| accent_soft | `#AEC7D8` |
| on_accent | `#FBF5E7` |
| success | `#3F8A58` |
| warning | `#CE9A2E` |
| error | `#A6432E` |
| info | `#2E7C93` |

### Typography

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

### Radii

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

### Shadows

- **Sm**: 3px 3px 0 rgba(18,42,71,0.16)
- **Md**: 10px 12px 0 rgba(18,42,71,0.13), -4px 5px 0 rgba(195,106,45,0.12)
- **Lg**: 18px 22px 0 rgba(12,37,66,0.18), -8px 10px 0 rgba(46,124,147,0.12)

### Spacing

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

### Surfaces

- **Treatment**: Cream watercolour-paper ground with fibre speckle; dominant surfaces are deep Prussian print plates with hand-brushed deckle edges and white specimen silhouettes.
- **Card Style**: Print plates — filled Prussian exposures with deckle clip-paths, offset print-block shadows, white silhouette imagery and a mono catalogue stamp; never a grey-bordered rounded card.
- **Bg Pattern**: Fine paper fibre speckle plus sparse cyan/amber registration ticks; no gradients, meshes, or floating blobs.

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid ink hairline used as ledger rules and annotation leaders, plus deckle edges — not card boxing
- **Character**: Prussian-ink hairlines and hard offset print-block shadows carry structure; never grey SaaS borders.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(.2,.7,.2,1)
- **Philosophy**: Motion develops like a sun-print: exposure ramps, silhouettes resolve, washes deepen; small translate / opacity / tone shifts only, honouring prefers-reduced-motion. No bouncy blobs or ornamental parallax.

## Rules

### Composition

- Use a field spread: one dominant specimen print occupies 45-60% of desktop width while catalogue ledgers and controls stack beside it.
- Break the grid with marginal stamps, cropped specimen captions, and one full-height exposure rail; never three equal cards in a row.
- Keep decoration accountable: every botanical mark points to an active plate, dose, material state, or 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 deckled print plates and offset print-block shadows as structure, not as background filler.

### Density

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

### Hierarchy

- Product headings are medium-weight Fraunces, modest in size with -0.035em tracking; viewport-scale display type is reserved for the cinematic landing.
- Primary actions are develop controls (Prussian plates that deepen on interaction); the single 'fix' action is a sun-amber button; secondary actions look like specimen labels.
- Status uses exposure level, silhouette, line weight and text together so colour is never the sole signal.
- Dense metadata belongs in mono catalogue stamps; narrative guidance stays in Alegreya Sans with generous leading.

### Signature Patterns

- Exposure develop: idle controls sit as pale sensitized wash; hover / selection / focus develops them toward deep Prussian as the white silhouette resolves.
- Twin-plate loupe: paired plates of one specimen (sensitized and developed) cross-blend under the pointer so a print shimmers between undeveloped and fixed states.
- Exposure rail dosing: a warm sun bead rides a vertical track; dose %, wash time and develop state read together as metadata and as scroll progress.
- Deckled print plates: major surfaces use hand-brushed polygon deckle edges, inner fibre overlay and a print-block offset instead of a rounded card.
- Annotation leaders: SVG stems with pinheads tie catalogue notes to regions of a specimen print.

## Layout

### Grid

Desktop uses a 12-column field spread max 1360px with 24px gutters: 7 columns for the specimen canvas, 3 for the catalogue ledger, 2 for the exposure rail and marginal stamps; tablet becomes 8 columns canvas-over-ledger; mobile becomes one column with a pinned exposure tab strip.

### Density

High variation: 4px crop ticks, 8-12px ledger rows, 32px plate padding, 64-96px section separations, and a generous outer paper margin pass the 8:1 rhythm test.

### Whitespace

Whitespace behaves like paper margin: large calm areas surround the print, while annotations cluster tightly against the specimen they describe. No empty decorative grids.

### Breakpoints

Mobile 360-639 single-column scroll; tablet 640-1023 canvas-first two-band; desktop 1024+ asymmetric 12-column spread with a fixed exposure rail; ultra-wide caps and centres the contained content, only the hero spans 100vw.

## Guidance

### Do

- Start from cream paper and one Prussian separation; let exposure — not extra colour — carry state.
- Make active/selected/focused things develop: deepen toward full Prussian and resolve the white silhouette.
- Ration sun-amber to a single detonation per view — the moment an exposure completes.
- Keep product headings modest and editorial; let the specimen prints and exposure structure create the drama.
- Pair every state with a label, line weight or exposure level so colour is never the only signal.
- Use deckle clip-paths and hard offset print-block shadows for tactility; keep radii to square and 16px.
- Draw annotation leaders that point at real content; let one dominant print own each screen.

### Don't

- Do not box surfaces in grey borders or stack nested rounded cards; the print plate replaces the card.
- Do not introduce colours outside the Prussian / paper / sun-amber system; the single separation is the governance.
- Do not add botanical marks that can't be read as a specimen, dose, annotation or material swatch.
- Do not rely on hue alone for error, success, selection or disabled states.
- Do not use soft glossy drop-shadows or gradient keyword emphasis; depth is a hard print-block offset.
- Do not shout with oversized italic-serif product headings; save viewport-scale display for the landing.
- Do not fill quiet paper margins with decorative grids or filler marks.

### Accessibility

Body text stays 17px with -0.02em tracking and ~1.55 leading. Text on cream uses #122A47; text on Prussian uses #FBF5E7. Accent-role text uses ink variants (#8A4718 burnt, #1F5666 teal-ink) and the sun button uses #A8551F so cream labels hold >=4.5:1. Touch targets >=44px. Semantic states pair colour with labels, silhouettes, line weight and focus rings; focus is an ink outline plus an offset amber plate.

### Usage Context

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

## Imagery Direction

### Pairs With

photogram

### Direction

Imagery is made in the Photogram art style — the cyanotype photogram technique: a luminous white/pale figure resolving from a deep Prussian-blue ground, soft exposure halation at the edges, visible watercolour-paper tooth and hand-brushed sensitizer borders. Specimens (ferns, algae, seed-heads) are the native subject but the technique is subject-agnostic and dresses a face, a building or a teapot equally. Every raster is consumed through swappable --plate-N slots so the archive can be re-exposed with new prints; twin (sensitized/developed) plates power the loupe cross-blend.

---
version: "alpha"
name: "Bluet"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#ECE3CE"
  surface: "#F6F0DE"
  surface_solid: "#E1D6BB"
  text: "#122A47"
  muted: "#51606D"
  border: "#122A47"
  accent: "#C36A2D"
  accent_2: "#2E7C93"
  accent_soft: "#AEC7D8"
  on_accent: "#FBF5E7"
  success: "#3F8A58"
  warning: "#CE9A2E"
  error: "#A6432E"
  info: "#2E7C93"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Alegreya Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Spline Sans 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"
---

# Bluet

## Overview

A disciplined product language that treats the interface as a cyanotype botanical field-archive: useful screens first, with a single Prussian separation, paper grain, exposure and specimen notation carrying the atmosphere instead of SaaS gradients or decorative card grids.

### Values

- Useful fieldwork before decoration: every mark anchors navigation, annotation, dose, or review state.
- One separation as governance: a single Prussian blue, cream paper, and one rationed sun-amber behave like real chemistry, never an infinite rainbow.
- Exposure as the state semantic: things develop rather than merely highlight; idle is a pale wash, active is deep Prussian.
- Handmade tactility with product rigour: paper tooth, deckle edges, print-block offsets and wash opacity are system tokens, not random noise.
- Editorial asymmetry: one dominant print canvas, one dense catalogue ledger, and marginal stamps replace equal bento tiles.
- Accessible craft: exposure level, white silhouette, line weight, labels and focus rings remain explicit — texture never carries meaning alone.

### Anti-Values

- Generic SaaS dashboards, nested rounded statistic cards, equal icon-card bento blocks, anonymous productivity scenes.
- AI pastel blobs, synthetic mesh gradients, gradient keyword emphasis, glassmorphism, sterile textureless surfaces.
- Childish clip-art botanicals, oversized italic-serif shouting on product screens, pill-with-dot biscuits, decorative grid filler.
- Uncontrolled rainbow palettes; all colour must behave as one printable separation with predictable develop behaviour.

### Visual Character

- Cream watercolour-paper ground built from fibre speckle, with deep Prussian-blue print plates carrying every dominant surface.
- Prussian-ink skeleton: 1.5px hand-ruled ledger rules, hard offset print-block shadows, crop ticks, and annotation leaders replace grey dividers.
- A single blue separation: white specimen silhouettes emerge from the Prussian ground; the sensitized (under-exposed) state is a pale sage-cyan that develops toward full blue.
- Asymmetric field-spread layout — a dominant print canvas, a dense catalogue ledger, marginal stamps, and irregular deckled scraps.
- Sun-amber appears once per view, at the instant an exposure completes.

## 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 | `#ECE3CE` |
| surface | `#F6F0DE` |
| surface_solid | `#E1D6BB` |
| text | `#122A47` |
| muted | `#51606D` |
| border | `#122A47` |
| accent | `#C36A2D` |
| accent_2 | `#2E7C93` |
| accent_soft | `#AEC7D8` |
| on_accent | `#FBF5E7` |
| success | `#3F8A58` |
| warning | `#CE9A2E` |
| error | `#A6432E` |
| info | `#2E7C93` |

## Typography

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

### Grid

Desktop uses a 12-column field spread max 1360px with 24px gutters: 7 columns for the specimen canvas, 3 for the catalogue ledger, 2 for the exposure rail and marginal stamps; tablet becomes 8 columns canvas-over-ledger; mobile becomes one column with a pinned exposure tab strip.

### Density

High variation: 4px crop ticks, 8-12px ledger rows, 32px plate padding, 64-96px section separations, and a generous outer paper margin pass the 8:1 rhythm test.

### Whitespace

Whitespace behaves like paper margin: large calm areas surround the print, while annotations cluster tightly against the specimen they describe. No empty decorative grids.

### Breakpoints

Mobile 360-639 single-column scroll; tablet 640-1023 canvas-first two-band; desktop 1024+ asymmetric 12-column spread with a fixed exposure rail; ultra-wide caps and centres the contained content, only the hero spans 100vw.

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 rgba(18,42,71,0.16)
- **Md**: 10px 12px 0 rgba(18,42,71,0.13), -4px 5px 0 rgba(195,106,45,0.12)
- **Lg**: 18px 22px 0 rgba(12,37,66,0.18), -8px 10px 0 rgba(46,124,147,0.12)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: Cream watercolour-paper ground with fibre speckle; dominant surfaces are deep Prussian print plates with hand-brushed deckle edges and white specimen silhouettes.
- **Card Style**: Print plates — filled Prussian exposures with deckle clip-paths, offset print-block shadows, white silhouette imagery and a mono catalogue stamp; never a grey-bordered rounded card.
- **Bg Pattern**: Fine paper fibre speckle plus sparse cyan/amber registration ticks; no gradients, meshes, or floating blobs.

### Borders

- **Default Width**: 1.5px
- **Accent Width**: 3px
- **Style**: solid ink hairline used as ledger rules and annotation leaders, plus deckle edges — not card boxing
- **Character**: Prussian-ink hairlines and hard offset print-block shadows carry structure; never grey SaaS borders.

## Components

### Composition

- Use a field spread: one dominant specimen print occupies 45-60% of desktop width while catalogue ledgers and controls stack beside it.
- Break the grid with marginal stamps, cropped specimen captions, and one full-height exposure rail; never three equal cards in a row.
- Keep decoration accountable: every botanical mark points to an active plate, dose, material state, or 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 deckled print plates and offset print-block shadows as structure, not as background filler.

### Density

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

### Hierarchy

- Product headings are medium-weight Fraunces, modest in size with -0.035em tracking; viewport-scale display type is reserved for the cinematic landing.
- Primary actions are develop controls (Prussian plates that deepen on interaction); the single 'fix' action is a sun-amber button; secondary actions look like specimen labels.
- Status uses exposure level, silhouette, line weight and text together so colour is never the sole signal.
- Dense metadata belongs in mono catalogue stamps; narrative guidance stays in Alegreya Sans with generous leading.

### Signature Patterns

- Exposure develop: idle controls sit as pale sensitized wash; hover / selection / focus develops them toward deep Prussian as the white silhouette resolves.
- Twin-plate loupe: paired plates of one specimen (sensitized and developed) cross-blend under the pointer so a print shimmers between undeveloped and fixed states.
- Exposure rail dosing: a warm sun bead rides a vertical track; dose %, wash time and develop state read together as metadata and as scroll progress.
- Deckled print plates: major surfaces use hand-brushed polygon deckle edges, inner fibre overlay and a print-block offset instead of a rounded card.
- Annotation leaders: SVG stems with pinheads tie catalogue notes to regions of a specimen print.

## 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-019f9a3e-1cbf-78d1-95e0-d4973005f6c8/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 and one Prussian separation; let exposure — not extra colour — carry state.
- Do Make active/selected/focused things develop: deepen toward full Prussian and resolve the white silhouette.
- Do Ration sun-amber to a single detonation per view — the moment an exposure completes.
- Do Keep product headings modest and editorial; let the specimen prints and exposure structure create the drama.
- Do Pair every state with a label, line weight or exposure level so colour is never the only signal.
- Do Use deckle clip-paths and hard offset print-block shadows for tactility; keep radii to square and 16px.
- Do Draw annotation leaders that point at real content; let one dominant print own each screen.
- Don't Do not box surfaces in grey borders or stack nested rounded cards; the print plate replaces the card.
- Don't Do not introduce colours outside the Prussian / paper / sun-amber system; the single separation is the governance.
- Don't Do not add botanical marks that can't be read as a specimen, dose, annotation or material swatch.
- Don't Do not rely on hue alone for error, success, selection or disabled states.
- Don't Do not use soft glossy drop-shadows or gradient keyword emphasis; depth is a hard print-block offset.
- Don't Do not shout with oversized italic-serif product headings; save viewport-scale display for the landing.
- 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.55 leading. Text on cream uses #122A47; text on Prussian uses #FBF5E7. Accent-role text uses ink variants (#8A4718 burnt, #1F5666 teal-ink) and the sun button uses #A8551F so cream labels hold >=4.5:1. Touch targets >=44px. Semantic states pair colour with labels, silhouettes, line weight and focus rings; focus is an ink outline plus an offset amber plate.

### Usage Context

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

## Imagery Direction

### Pairs With

photogram

### Direction

Imagery is made in the Photogram art style — the cyanotype photogram technique: a luminous white/pale figure resolving from a deep Prussian-blue ground, soft exposure halation at the edges, visible watercolour-paper tooth and hand-brushed sensitizer borders. Specimens (ferns, algae, seed-heads) are the native subject but the technique is subject-agnostic and dresses a face, a building or a teapot equally. Every raster is consumed through swappable --plate-N slots so the archive can be re-exposed with new prints; twin (sensitized/developed) plates power the loupe cross-blend.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bluet",
  "type": "registry:theme",
  "title": "Bluet shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#ECE3CE",
      "foreground": "#122A47",
      "card": "#F6F0DE",
      "card-foreground": "#122A47",
      "popover": "#F6F0DE",
      "popover-foreground": "#122A47",
      "primary": "#122A47",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#51606D",
      "muted-foreground": "#122A47",
      "accent": "#C36A2D",
      "accent-foreground": "#ffffff",
      "destructive": "#A6432E",
      "border": "#122A47",
      "input": "#122A47",
      "ring": "#C36A2D",
      "chart-1": "#122A47",
      "chart-2": "#f4f4f5",
      "chart-3": "#C36A2D",
      "chart-4": "#3F8A58",
      "chart-5": "#CE9A2E",
      "sidebar": "#F6F0DE",
      "sidebar-foreground": "#122A47",
      "sidebar-primary": "#122A47",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E7C93",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#122A47",
      "sidebar-ring": "#C36A2D",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#122A47",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#C36A2D",
      "accent-foreground": "#ffffff",
      "destructive": "#A6432E",
      "border": "#303642",
      "input": "#303642",
      "ring": "#C36A2D",
      "chart-1": "#122A47",
      "chart-2": "#f4f4f5",
      "chart-3": "#C36A2D",
      "chart-4": "#3F8A58",
      "chart-5": "#CE9A2E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#122A47",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#C36A2D",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#C36A2D",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f9a3e-1cbf-78d1-95e0-d4973005f6c8",
    "slug": "bluet",
    "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",
        "display_letter_spacing",
        "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"
      ]
    }
  }
}
```