Rosée

# Rosée

## Philosophy

Rosée is readable dew-glass for calm products. Each full-bleed picture is seen through frosted, dew-beaded glass and keeps one calm milky area, and the headline sits only there, on pixels that were measured. Below the picture the page returns to warm mist #FBFAF6, with one white sheet leading and two quiet entries beside it. The dew bead, a small glossy peach droplet, marks the one thing that is active: the primary action, the chosen time, the leading sheet. Peach, lychee and honeydew are the only colours, and the peach is a fill that carries dark text, never a text colour.

### Values

- the calm area of a full-strength picture is where copy sits, never a wash, frame or panel laid over it
- the dew bead as the one ownable mark, gloss only where something is active or primary
- one dominant white sheet with smaller quiet companions, never three equal cards
- warm mist whitespace as the luxury signal, not filled with decorative glass
- type from two voices only: Ovo for headings and figures, Alegreya Sans for everything read
- semantic colours as dark inks that can be words, kept small and never primary

### Anti-Values

- a white or milky wash behind a headline on a picture
- a split frame with a picture as a sidebar
- three equal cards in a row
- eyebrow labels and italic highlighted words in every headline
- status pills and stat or quote panels
- low-contrast muted text and default green, amber and red

### Visual Character

- a full-bleed dew-glass picture with a calm milky area, copy set directly on it
- warm mist #FBFAF6 below, with one white sheet at 24px and a soft vertical shadow
- the dew bead: a white or peach droplet with a small solid highlight, no gradient
- pill buttons, slots and inputs at 9999px, sheets at 24px, nothing else rounded
- Ovo headlines at -0.02em, Alegreya Sans at 17px and up
- peach #EF9A82 as a fill with dark text, lychee and honeydew as quiet companions

### Lineage

> A revision in place of Rosée, which grew from Dew Candy Minimalism. It keeps the readable-glass idea, the warm mist ground, the peach, lychee and honeydew set and the dew bead. It replaces the frosted white wash over the hero, the framed booking card and the three equal soak cards with full-strength dew pictures and one leading sheet.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FBFAF6` |
| surface | `#FFFFFF` |
| surface-2 | `#F2EEE7` |
| text | `#2C2925` |
| muted | `#675F57` |
| border | `#2C292512` |
| accent | `#EF9A82` |
| on-accent | `#2C2925` |
| accent-2 | `#F2B6C6` |
| accent-3 | `#BEE8D6` |
| success | `#2A7358` |
| warning | `#80600F` |
| error | `#B0304A` |
| info | `#2A6A80` |

### Typography

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

### Radii

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

### Shadows

- **Sm**: 0 .3em .8em rgba(44,41,37,0.20)
- **Md**: 0 32px 90px rgba(82,66,54,0.16), inset 0 1px 0 rgba(255,255,255,0.85)
- **Lg**: 0 32px 90px rgba(82,66,54,0.16), inset 0 1px 0 rgba(255,255,255,0.85)

### Spacing

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

### Surfaces

- **Ground**: warm mist #FBFAF6, flat, no washes
- **Card Style**: one white sheet #FFFFFF at 24px with a soft vertical shadow and an inset top highlight, no border; companions are plain type on the ground
- **Treatment**: full-strength dew pictures with a calm milky area for copy; the dew bead on active only

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders anywhere; hierarchy is space, sheet size and the soft vertical shadow. Focus is a 3px ink outline at 3px offset.

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(.2,.7,.2,1)
- **Philosophy**: A small lift on buttons and a colour change on hover. The settled page renders with no JavaScript; reduced motion removes every transition.

### Controls

- **Height**: 48px
- **Radius**: 9999px
- **Well**: surface-2 #F2EEE7 with a soft inset shadow

## Rules

### Composition

- Open with one full-bleed dew-glass picture and set the headline in its calm area; the picture is never washed, framed or covered by a panel.
- Below the picture return to warm mist; one white sheet leads and two quiet entries sit beside it as plain type on the ground.
- Make a booking or action section a second full-bleed picture with the controls set directly in its calm half.
- Use one compositional break per screen; never three equal modules.

### Hierarchy

- Hierarchy comes from sheet size, the single dew bead and the Ovo and Alegreya Sans voices; nothing else carries emphasis.
- Put the dew bead on the primary action, the chosen slot and the leading sheet, once per object.
- Keep every other control warm-stone neutral on surface-2 wells.
- Write status as a word in a dark ink, not a pill or chip.

### Density

Low and breathable: large warm mist gutters, 64 to 128px between regions, compact facts at 4 to 8px gaps. Whitespace is active material and is never filled with decorative glass.

### Signature Patterns

- The calm area: copy sits directly on the milky mist of a full-strength dew picture, measured on pixels.
- The dew bead: a glossy droplet on the primary action, the chosen slot and the leading sheet.
- One leading sheet: a 24px white sheet with a soft vertical shadow beside two quiet text entries.
- Slots as pills: the chosen time takes the peach fill and the bead, a full time is struck through.
- Held, not flashed: a plain line of text confirms the action, no toast box on the landing.

## Layout

### Grid

- **Type**: full-bleed pictures with copy in the calm half, then a contained column
- **Max Width**: 1280px content, centred above 1440px
- **Gutter**: clamp(24px, 6vw, 120px)
- **Column Behavior**: The leading sheet and the quiet entries use 1.35fr 1fr, then 1fr 1fr on tablets and one column on phones; grid children carry min-width:0.

### Whitespace

- **Section Gap**: 72 to 140px
- **Card Gap**: 32 to 96px between the sheet and the quiet entries
- **Content Padding**: 28 to 56px inside the sheet
- **Approach**: Warm mist is the main luxury signal. Never fill gutters with icons, cards or glass.

### Density

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

### Responsive

Pictures switch to a portrait crop below a square aspect, with copy in the calm top half. Tablets (601 to 1199px) keep two columns and widen the copy to 58vw; phones stack to one column and keep two nav links. Body text is clamped between 17px and 22px and content caps and centres above 1440px.

### Breakpoints

- **Mobile**: 0-600px
- **Phone Max**: 760px
- **Tablet**: 601-1199px
- **Desktop**: 1200px+
- **Wide**: 1440px+
- **Ultrawide**: 2560px

## Guidance

### Do

- Set headlines only on the calm milky area of a full-strength dew picture.
- Reserve the dew bead and the peach fill for the primary action, the chosen slot and the leading sheet.
- Let one white sheet lead and keep the companions as plain type.
- Style every control explicitly: pill inputs on surface-2 wells, round bead checkboxes, a bead slider thumb.
- Use radii from {0, 16, 24, 9999} only and soft vertical shadows for elevation.
- Keep muted text at 6:1 or better and write status as dark-ink words.

### Don't

- Do not wash, frame or panel a picture to make text readable.
- Do not build three equal cards or a split frame with a picture sidebar.
- Do not add eyebrow labels, italic highlight words or status chips.
- Do not use peach, lychee or honeydew as text colours.
- Do not use gradients, borders or glow beyond the dew bead's single highlight.
- Do not use em dashes in copy.

### Accessibility

Ink #2C2925 on mist is 14:1; muted #675F57 on mist is 6.0:1; the peach fill carries ink at 8.8:1. Semantic inks (success #2A7358, warning #80600F, error #B0304A, info #2A6A80) all pass AA on the ground and are used as words. Focus is a 3px ink outline at 3px offset, and the chosen slot also changes shape of fill, not only colour. The settled page renders without JavaScript and prefers-reduced-motion removes transitions.

### Usage Context

Calm booking, wellness, hospitality and lifestyle products that want a fresh, young feel without toy-candy or pastel SaaS.

## Imagery Direction

### Pairs With

dewglaze

### Art Style Id

en-019ef726-9d5a-7c73-8cef-4548b5d913e8

### Summary

Dewglaze: peach, lychee, mint and a cedar pool seen through frosted, dew-beaded glass, milky high-key light and glossy condensation highlights. Every picture holds a calm, evenly misted area, about 55 percent of the frame, where the copy sits, so the page needs no wash.

### Subjects

- peach, lychee and mint behind frosted glass
- a cedar pool room in warm honey light
- mineral water and stones under condensation
- one large dew drop on glass

### Usage

One full-bleed hero and one full-bleed booking picture, each with a landscape crop (calm left or right 55 percent) and a portrait crop (calm top 55 percent). Paint with var(--hero-image) on a real element and set copy only in the calm area.

### Avoid

A phone frame or window frame in the picture, a white wash over it, dark gloom, and text laid over the busy side.

---
version: "alpha"
name: "Rosée"
description: "Rosée is readable dew-glass for calm products. Each full-bleed picture is seen through frosted, dew-beaded glass and keeps one calm milky area, and the headline sits only there, on pixels that were measured. Below the picture the page re..."
colors:
  bg: "#FBFAF6"
  surface: "#FFFFFF"
  surface-2: "#F2EEE7"
  text: "#2C2925"
  muted: "#675F57"
  border: "#2C292512"
  accent: "#EF9A82"
  on-accent: "#2C2925"
  accent-2: "#F2B6C6"
  accent-3: "#BEE8D6"
  success: "#2A7358"
  warning: "#80600F"
  error: "#B0304A"
  info: "#2A6A80"
typography:
  headline-lg:
    fontFamily: "Ovo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Ovo"
    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: "Alegreya Sans"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "24px"
  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-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-accent-3:
    backgroundColor: "{colors.accent-3}"
  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"
---

# Rosée

## Overview

Rosée is readable dew-glass for calm products. Each full-bleed picture is seen through frosted, dew-beaded glass and keeps one calm milky area, and the headline sits only there, on pixels that were measured. Below the picture the page returns to warm mist #FBFAF6, with one white sheet leading and two quiet entries beside it. The dew bead, a small glossy peach droplet, marks the one thing that is active: the primary action, the chosen time, the leading sheet. Peach, lychee and honeydew are the only colours, and the peach is a fill that carries dark text, never a text colour.

### Values

- the calm area of a full-strength picture is where copy sits, never a wash, frame or panel laid over it
- the dew bead as the one ownable mark, gloss only where something is active or primary
- one dominant white sheet with smaller quiet companions, never three equal cards
- warm mist whitespace as the luxury signal, not filled with decorative glass
- type from two voices only: Ovo for headings and figures, Alegreya Sans for everything read
- semantic colours as dark inks that can be words, kept small and never primary

### Anti-Values

- a white or milky wash behind a headline on a picture
- a split frame with a picture as a sidebar
- three equal cards in a row
- eyebrow labels and italic highlighted words in every headline
- status pills and stat or quote panels
- low-contrast muted text and default green, amber and red

### Visual Character

- a full-bleed dew-glass picture with a calm milky area, copy set directly on it
- warm mist #FBFAF6 below, with one white sheet at 24px and a soft vertical shadow
- the dew bead: a white or peach droplet with a small solid highlight, no gradient
- pill buttons, slots and inputs at 9999px, sheets at 24px, nothing else rounded
- Ovo headlines at -0.02em, Alegreya Sans at 17px and up
- peach #EF9A82 as a fill with dark text, lychee and honeydew as quiet companions

### Lineage

> A revision in place of Rosée, which grew from Dew Candy Minimalism. It keeps the readable-glass idea, the warm mist ground, the peach, lychee and honeydew set and the dew bead. It replaces the frosted white wash over the hero, the framed booking card and the three equal soak cards with full-strength dew pictures and one leading sheet.

## 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 | `#FBFAF6` |
| surface | `#FFFFFF` |
| surface-2 | `#F2EEE7` |
| text | `#2C2925` |
| muted | `#675F57` |
| border | `#2C292512` |
| accent | `#EF9A82` |
| on-accent | `#2C2925` |
| accent-2 | `#F2B6C6` |
| accent-3 | `#BEE8D6` |
| success | `#2A7358` |
| warning | `#80600F` |
| error | `#B0304A` |
| info | `#2A6A80` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Ovo&family=Alegreya+Sans:wght@400;500;700&display=swap

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

- **Type**: full-bleed pictures with copy in the calm half, then a contained column
- **Max Width**: 1280px content, centred above 1440px
- **Gutter**: clamp(24px, 6vw, 120px)
- **Column Behavior**: The leading sheet and the quiet entries use 1.35fr 1fr, then 1fr 1fr on tablets and one column on phones; grid children carry min-width:0.

### Whitespace

- **Section Gap**: 72 to 140px
- **Card Gap**: 32 to 96px between the sheet and the quiet entries
- **Content Padding**: 28 to 56px inside the sheet
- **Approach**: Warm mist is the main luxury signal. Never fill gutters with icons, cards or glass.

### Density

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

### Responsive

Pictures switch to a portrait crop below a square aspect, with copy in the calm top half. Tablets (601 to 1199px) keep two columns and widen the copy to 58vw; phones stack to one column and keep two nav links. Body text is clamped between 17px and 22px and content caps and centres above 1440px.

### Breakpoints

- **Mobile**: 0-600px
- **Phone Max**: 760px
- **Tablet**: 601-1199px
- **Desktop**: 1200px+
- **Wide**: 1440px+
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Sm**: 0 .3em .8em rgba(44,41,37,0.20)
- **Md**: 0 32px 90px rgba(82,66,54,0.16), inset 0 1px 0 rgba(255,255,255,0.85)
- **Lg**: 0 32px 90px rgba(82,66,54,0.16), inset 0 1px 0 rgba(255,255,255,0.85)

## Shapes

### Rounded

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

### Surfaces

- **Ground**: warm mist #FBFAF6, flat, no washes
- **Card Style**: one white sheet #FFFFFF at 24px with a soft vertical shadow and an inset top highlight, no border; companions are plain type on the ground
- **Treatment**: full-strength dew pictures with a calm milky area for copy; the dew bead on active only

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders anywhere; hierarchy is space, sheet size and the soft vertical shadow. Focus is a 3px ink outline at 3px offset.

## Components

### Composition

- Open with one full-bleed dew-glass picture and set the headline in its calm area; the picture is never washed, framed or covered by a panel.
- Below the picture return to warm mist; one white sheet leads and two quiet entries sit beside it as plain type on the ground.
- Make a booking or action section a second full-bleed picture with the controls set directly in its calm half.
- Use one compositional break per screen; never three equal modules.

### Hierarchy

- Hierarchy comes from sheet size, the single dew bead and the Ovo and Alegreya Sans voices; nothing else carries emphasis.
- Put the dew bead on the primary action, the chosen slot and the leading sheet, once per object.
- Keep every other control warm-stone neutral on surface-2 wells.
- Write status as a word in a dark ink, not a pill or chip.

### Density

Low and breathable: large warm mist gutters, 64 to 128px between regions, compact facts at 4 to 8px gaps. Whitespace is active material and is never filled with decorative glass.

### Signature Patterns

- The calm area: copy sits directly on the milky mist of a full-strength dew picture, measured on pixels.
- The dew bead: a glossy droplet on the primary action, the chosen slot and the leading sheet.
- One leading sheet: a 24px white sheet with a soft vertical shadow beside two quiet text entries.
- Slots as pills: the chosen time takes the peach fill and the bead, a full time is struck through.
- Held, not flashed: a plain line of text confirms the action, no toast box on the landing.

## 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-01a11415-bccd-75d2-88f3-e5f468f44f0b/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11415-bccd-75d2-88f3-e5f468f44f0b/shadcn.json` (registry theme), `/language/en-01a11415-bccd-75d2-88f3-e5f468f44f0b/shadcn-components.md` (component recipes) and `/language/en-01a11415-bccd-75d2-88f3-e5f468f44f0b/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 headlines only on the calm milky area of a full-strength dew picture.
- Do Reserve the dew bead and the peach fill for the primary action, the chosen slot and the leading sheet.
- Do Let one white sheet lead and keep the companions as plain type.
- Do Style every control explicitly: pill inputs on surface-2 wells, round bead checkboxes, a bead slider thumb.
- Do Use radii from {0, 16, 24, 9999} only and soft vertical shadows for elevation.
- Do Keep muted text at 6:1 or better and write status as dark-ink words.
- Don't Do not wash, frame or panel a picture to make text readable.
- Don't Do not build three equal cards or a split frame with a picture sidebar.
- Don't Do not add eyebrow labels, italic highlight words or status chips.
- Don't Do not use peach, lychee or honeydew as text colours.
- Don't Do not use gradients, borders or glow beyond the dew bead's single highlight.
- Don't Do not use em dashes in copy.

### Accessibility

Ink #2C2925 on mist is 14:1; muted #675F57 on mist is 6.0:1; the peach fill carries ink at 8.8:1. Semantic inks (success #2A7358, warning #80600F, error #B0304A, info #2A6A80) all pass AA on the ground and are used as words. Focus is a 3px ink outline at 3px offset, and the chosen slot also changes shape of fill, not only colour. The settled page renders without JavaScript and prefers-reduced-motion removes transitions.

### Usage Context

Calm booking, wellness, hospitality and lifestyle products that want a fresh, young feel without toy-candy or pastel SaaS.

## Imagery Direction

### Pairs With

dewglaze

### Art Style Id

en-019ef726-9d5a-7c73-8cef-4548b5d913e8

### Summary

Dewglaze: peach, lychee, mint and a cedar pool seen through frosted, dew-beaded glass, milky high-key light and glossy condensation highlights. Every picture holds a calm, evenly misted area, about 55 percent of the frame, where the copy sits, so the page needs no wash.

### Subjects

- peach, lychee and mint behind frosted glass
- a cedar pool room in warm honey light
- mineral water and stones under condensation
- one large dew drop on glass

### Usage

One full-bleed hero and one full-bleed booking picture, each with a landscape crop (calm left or right 55 percent) and a portrait crop (calm top 55 percent). Paint with var(--hero-image) on a real element and set copy only in the calm area.

### Avoid

A phone frame or window frame in the picture, a white wash over it, dark gloom, and text laid over the busy side.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rosee",
  "type": "registry:theme",
  "title": "Rosée shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FBFAF6",
      "foreground": "#2C2925",
      "card": "#FFFFFF",
      "card-foreground": "#2C2925",
      "popover": "#FFFFFF",
      "popover-foreground": "#2C2925",
      "primary": "#2C2925",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#675F57",
      "muted-foreground": "#2C2925",
      "accent": "#EF9A82",
      "accent-foreground": "#ffffff",
      "destructive": "#B0304A",
      "border": "#2C292512",
      "input": "#2C292512",
      "ring": "#EF9A82",
      "chart-1": "#2C2925",
      "chart-2": "#f4f4f5",
      "chart-3": "#EF9A82",
      "chart-4": "#2A7358",
      "chart-5": "#80600F",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#2C2925",
      "sidebar-primary": "#2C2925",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2A6A80",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2C292512",
      "sidebar-ring": "#EF9A82",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2C2925",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#EF9A82",
      "accent-foreground": "#ffffff",
      "destructive": "#B0304A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#EF9A82",
      "chart-1": "#2C2925",
      "chart-2": "#f4f4f5",
      "chart-3": "#EF9A82",
      "chart-4": "#2A7358",
      "chart-5": "#80600F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2C2925",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#EF9A82",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#EF9A82",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11415-bccd-75d2-88f3-e5f468f44f0b",
    "slug": "rosee",
    "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-3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on-accent",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card_style",
        "ground",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "controls": [
        "height",
        "radius",
        "well"
      ]
    }
  }
}
```