Rosée

# Rosée

## Philosophy

Rosée is readable dew-glass for calm, young products. A soft frosted sheet floats over a warm mist ground; a single tiny dew bead marks the one thing that is active; and a controlled sorbet pop — peach, lychee, honeydew — carries the brand without tipping into pastel SaaS or toy-candy. It is a faithful glow-up of Dew Candy Minimalism: the same readable-glass idea and berry-coral candy direction, brought up to standard and given one ownable mark — the dew bead.

### Values

- the dew bead as the one ownable mark — gloss only where something is active or primary
- legibility before atmosphere — frosted glass that never costs contrast
- warm mist whitespace as the main luxury signal, never filled with decorative glass
- asymmetric editorial weight — one dominant sheet, smaller quiet companions
- a single controlled sorbet pop, never a rainbow of evenly spaced hues
- youthful freshness through restraint, not childish candy shapes

### Anti-Values

- toy-like bubble UI or oversized candy blobs
- generic pastel SaaS cards and gradient washes
- rainbow palettes and hue-wheel accent spreads
- low-contrast text on busy frosted blur
- three equal cards in a row
- defaulting to a flat white minimal ground

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FBFAF6` |
| surface | `#FFFFFF` |
| surface-2 | `#F2EEE7` |
| text | `#2C2925` |
| muted | `#837A72` |
| border | `#2C292512` |
| accent | `#EF9A82` |
| on-accent | `#2C2925` |
| accent-2 | `#F2B6C6` |
| accent-3 | `#BEE8D6` |
| success | `#5FA482` |
| warning | `#D2A24E` |
| error | `#C7665C` |
| info | `#6FB6C2` |

### Typography

- **Base Size**: 17px
- **Body Font**: Instrument Sans
- **Heading Font**: Fraunces
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=IBM+Plex+Mono:wght@500&family=Instrument+Sans:wght@400;500;600;700&display=swap

### Radii

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

### Shadows

- **Sm**: 0 1px 2px rgba(44,41,37,0.05), 0 8px 22px rgba(44,41,37,0.06)
- **Md**: 0 18px 52px rgba(82,66,54,0.12), inset 0 1px 0 rgba(255,255,255,0.85)
- **Lg**: 0 32px 96px 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 with two extremely soft atmospheric washes — one peach, one honeydew — never rainbow banding
- **Card Style**: readable frosted sheet rgba(255,255,255,.62) with 18px blur and 24px radius; dense-copy sheets thicken to .90 opacity; soft vertical shadow, no border
- **Treatment**: the dew bead (radial gloss droplet) on active/primary only; the dewline (short fading peach stroke) as divider; sorbet chips for status

### Borders

- **Default Width**: 1px
- **Style**: near-invisible warm hairline rgba(44,41,37,.07); never a card edge accent
- **Character**: borders are almost absent — hierarchy is space, sheet size, surface opacity and the soft vertical shadow

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(.2,.7,.2,1)
- **Philosophy**: surface tension: a small lift and a short reveal on scroll, never bouncing candy. The landing settles by default and reveals on scroll; reduced motion stills everything.

## Rules

### Composition

Compose every screen as a calm editorial spread: one dominant frosted sheet offset in the layout, with smaller quiet companions and large warm gutters around them. One compositional break per screen — an oversized heading column or a full-height rail. Avoid three equal cards; if three modules appear, one is materially larger or quieter than the rest.

### Hierarchy

Hierarchy comes from sheet size, surface opacity, typographic voice, and the placement of the single dew bead. Fraunces display sets the calm headline voice; Instrument Sans carries warm running prose; IBM Plex Mono carries times, prices and data. Active states receive the peach dew bead; everything else stays warm-stone neutral.

### Density

Low and breathable overall, with compact factual clusters allowed inside sheets — pill rows and small mono readings at 4–8px gaps, major regions separated by 64–128px. Whitespace is active material, never filled with decorative glass.

### Signature

The dew bead is the one ownable mark: a tiny radial-gloss droplet on the primary button, the chosen slot, and the signature sheet — one per object, only where it means 'this one'. Supported by the dewline divider, readable frosted sheets with an opaque scrim behind dense copy, and a controlled sorbet chip set.

## Layout

### Grid

Desktop uses a contained max-width (1180px, 1340px ultra-wide) with 24px gutters; the dominant booking sheet spans ~7 columns while the status rail spans ~5 and is vertically offset. Dashboard adds a 236px rail.

### Whitespace

Whitespace is active material: leave large warm-mist margins around frosted surfaces; never fill empty areas with icons, cards, or decorative candy.

### Density

Low overall density with compact factual clusters; labels and metrics at 4–8px gaps, major regions separated by 64–128px.

### Responsive

Single-column stack on mobile; non-essential nav links and table columns hidden; minmax(0,1fr) columns with min-width:0 children so grids never overflow.

### Breakpoints

- **Mobile**: 0-600px
- **Tablet**: 601-920px
- **Desktop**: 921px+
- **Ultrawide**: 1700px+

## Guidance

### Do

- Reserve the dew bead and the peach accent for active or branded moments only.
- Keep every translucent surface readable — thicken opacity and add a scrim behind dense copy.
- Vary section weight: one dominant sheet, smaller quiet companions, large warm gutters.
- Style every form control explicitly; no browser defaults.
- Use radii from {0, 16, 24, 9999} only, and soft warm vertical shadows for elevation.
- Let the warm mist ground carry most of the page.

### Don't

- Do not make bubbles, toy capsules, or oversized candy blobs.
- Do not build three equal cards in a row.
- Do not use rainbow palettes, loud gradients, or evenly spaced accent hues.
- Do not place low-contrast text on busy frosted blur.
- Do not give a card a single accent edge — top, side, or bottom.
- Do not flatten the ground to plain white or wash it pastel.

### Accessibility

Warm-ink body text meets WCAG AA against its immediate surface; translucent panels thicken opacity when text is small, and dense copy sits on the opaque .90 read surface. Focus uses a visible 3px peach ring plus non-colour cues. The peach accent is decorative/active, never the sole carrier of meaning.

## Imagery Direction

### Pairs With

dewglaze

### Summary

Dewglaze: subjects seen through a sheet of frosted misted glass beaded with luminous dew droplets, milky high-key sorbet light and glossy condensation highlights, gentle blur where the mist thickens and crisp clarity where droplets clear the glass. The same dew that beads the interface beads the imagery — peach, lychee and honeydew fruit read straight into the palette.

### Subjects

- peach, lychee and honeydew fruit behind condensation
- still water and steam in a quiet bathhouse
- warm stones and cedar under a dew skylight
- soft botanicals and mineral pools
- calm interiors veiled in mist

### Usage

One full-bleed hero rendered in the dewglaze technique sits behind a soft mist mast on the landing; the same image fills the feature split. Imagery is fresh, high-key and translucent, never muddy or illustrated.

---
version: "alpha"
name: "Rosée"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FBFAF6"
  surface: "#FFFFFF"
  surface-2: "#F2EEE7"
  text: "#2C2925"
  muted: "#837A72"
  accent: "#EF9A82"
  on-accent: "#2C2925"
  accent-2: "#F2B6C6"
  accent-3: "#BEE8D6"
  success: "#5FA482"
  warning: "#D2A24E"
  error: "#C7665C"
  info: "#6FB6C2"
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: "Instrument Sans"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    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-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: "#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"
---

# Rosée

## Overview

Rosée is readable dew-glass for calm, young products. A soft frosted sheet floats over a warm mist ground; a single tiny dew bead marks the one thing that is active; and a controlled sorbet pop — peach, lychee, honeydew — carries the brand without tipping into pastel SaaS or toy-candy. It is a faithful glow-up of Dew Candy Minimalism: the same readable-glass idea and berry-coral candy direction, brought up to standard and given one ownable mark — the dew bead.

### Values

- the dew bead as the one ownable mark — gloss only where something is active or primary
- legibility before atmosphere — frosted glass that never costs contrast
- warm mist whitespace as the main luxury signal, never filled with decorative glass
- asymmetric editorial weight — one dominant sheet, smaller quiet companions
- a single controlled sorbet pop, never a rainbow of evenly spaced hues
- youthful freshness through restraint, not childish candy shapes

### Anti-Values

- toy-like bubble UI or oversized candy blobs
- generic pastel SaaS cards and gradient washes
- rainbow palettes and hue-wheel accent spreads
- low-contrast text on busy frosted blur
- three equal cards in a row
- defaulting to a flat white minimal ground

## 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 | `#837A72` |
| accent | `#EF9A82` |
| on-accent | `#2C2925` |
| accent-2 | `#F2B6C6` |
| accent-3 | `#BEE8D6` |
| success | `#5FA482` |
| warning | `#D2A24E` |
| error | `#C7665C` |
| info | `#6FB6C2` |

## 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**: Instrument Sans, 17px, weight 400, line-height 1.5.
- **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`

### Grid

Desktop uses a contained max-width (1180px, 1340px ultra-wide) with 24px gutters; the dominant booking sheet spans ~7 columns while the status rail spans ~5 and is vertically offset. Dashboard adds a 236px rail.

### Whitespace

Whitespace is active material: leave large warm-mist margins around frosted surfaces; never fill empty areas with icons, cards, or decorative candy.

### Density

Low overall density with compact factual clusters; labels and metrics at 4–8px gaps, major regions separated by 64–128px.

### Responsive

Single-column stack on mobile; non-essential nav links and table columns hidden; minmax(0,1fr) columns with min-width:0 children so grids never overflow.

### Breakpoints

- **Mobile**: 0-600px
- **Tablet**: 601-920px
- **Desktop**: 921px+
- **Ultrawide**: 1700px+

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 2px rgba(44,41,37,0.05), 0 8px 22px rgba(44,41,37,0.06)
- **Md**: 0 18px 52px rgba(82,66,54,0.12), inset 0 1px 0 rgba(255,255,255,0.85)
- **Lg**: 0 32px 96px 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 with two extremely soft atmospheric washes — one peach, one honeydew — never rainbow banding
- **Card Style**: readable frosted sheet rgba(255,255,255,.62) with 18px blur and 24px radius; dense-copy sheets thicken to .90 opacity; soft vertical shadow, no border
- **Treatment**: the dew bead (radial gloss droplet) on active/primary only; the dewline (short fading peach stroke) as divider; sorbet chips for status

### Borders

- **Default Width**: 1px
- **Style**: near-invisible warm hairline rgba(44,41,37,.07); never a card edge accent
- **Character**: borders are almost absent — hierarchy is space, sheet size, surface opacity and the soft vertical shadow

## Components

### Composition

Compose every screen as a calm editorial spread: one dominant frosted sheet offset in the layout, with smaller quiet companions and large warm gutters around them. One compositional break per screen — an oversized heading column or a full-height rail. Avoid three equal cards; if three modules appear, one is materially larger or quieter than the rest.

### Hierarchy

Hierarchy comes from sheet size, surface opacity, typographic voice, and the placement of the single dew bead. Fraunces display sets the calm headline voice; Instrument Sans carries warm running prose; IBM Plex Mono carries times, prices and data. Active states receive the peach dew bead; everything else stays warm-stone neutral.

### Density

Low and breathable overall, with compact factual clusters allowed inside sheets — pill rows and small mono readings at 4–8px gaps, major regions separated by 64–128px. Whitespace is active material, never filled with decorative glass.

### Signature

The dew bead is the one ownable mark: a tiny radial-gloss droplet on the primary button, the chosen slot, and the signature sheet — one per object, only where it means 'this one'. Supported by the dewline divider, readable frosted sheets with an opaque scrim behind dense copy, and a controlled sorbet chip set.

## 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-019ef74d-5ccb-73e1-8e3a-59b2526346d3/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 Reserve the dew bead and the peach accent for active or branded moments only.
- Do Keep every translucent surface readable — thicken opacity and add a scrim behind dense copy.
- Do Vary section weight: one dominant sheet, smaller quiet companions, large warm gutters.
- Do Style every form control explicitly; no browser defaults.
- Do Use radii from {0, 16, 24, 9999} only, and soft warm vertical shadows for elevation.
- Do Let the warm mist ground carry most of the page.
- Don't Do not make bubbles, toy capsules, or oversized candy blobs.
- Don't Do not build three equal cards in a row.
- Don't Do not use rainbow palettes, loud gradients, or evenly spaced accent hues.
- Don't Do not place low-contrast text on busy frosted blur.
- Don't Do not give a card a single accent edge — top, side, or bottom.
- Don't Do not flatten the ground to plain white or wash it pastel.

### Accessibility

Warm-ink body text meets WCAG AA against its immediate surface; translucent panels thicken opacity when text is small, and dense copy sits on the opaque .90 read surface. Focus uses a visible 3px peach ring plus non-colour cues. The peach accent is decorative/active, never the sole carrier of meaning.

## Imagery Direction

### Pairs With

dewglaze

### Summary

Dewglaze: subjects seen through a sheet of frosted misted glass beaded with luminous dew droplets, milky high-key sorbet light and glossy condensation highlights, gentle blur where the mist thickens and crisp clarity where droplets clear the glass. The same dew that beads the interface beads the imagery — peach, lychee and honeydew fruit read straight into the palette.

### Subjects

- peach, lychee and honeydew fruit behind condensation
- still water and steam in a quiet bathhouse
- warm stones and cedar under a dew skylight
- soft botanicals and mineral pools
- calm interiors veiled in mist

### Usage

One full-bleed hero rendered in the dewglaze technique sits behind a soft mist mast on the landing; the same image fills the feature split. Imagery is fresh, high-key and translucent, never muddy or illustrated.

```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": "#837A72",
      "muted-foreground": "#2C2925",
      "accent": "#EF9A82",
      "accent-foreground": "#ffffff",
      "destructive": "#C7665C",
      "border": "#2C292512",
      "input": "#2C292512",
      "ring": "#EF9A82",
      "chart-1": "#2C2925",
      "chart-2": "#f4f4f5",
      "chart-3": "#EF9A82",
      "chart-4": "#5FA482",
      "chart-5": "#D2A24E",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#2C2925",
      "sidebar-primary": "#2C2925",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6FB6C2",
      "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": "#C7665C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#EF9A82",
      "chart-1": "#2C2925",
      "chart-2": "#f4f4f5",
      "chart-3": "#EF9A82",
      "chart-4": "#5FA482",
      "chart-5": "#D2A24E",
      "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-019ef74d-5ccb-73e1-8e3a-59b2526346d3",
    "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",
        "mono_font"
      ],
      "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"
      ]
    }
  }
}
```