Plush

# Plush

## Philosophy

Plush is a companion OS that glows back. It reimagines Neo-Kawaii Tech by moving the whole interface into a calm, warm dark room where every control is a soft, self-lit toy. Warmth comes from emitted light, not from candy gradients, sticker rings or sparkle wallpaper: the app you reach for wakes up and glows, casting its own colour onto the dark, while everything else fades to a slow resting breath. You follow the light to know what is live.

### Values

- warmth from emitted light, never from stamped decoration
- a dark, warm night ground as the primary identity lever
- three highlighter-bright glow hues that read as light, not paint
- exactly one live element, always the brightest thing in the room
- soft-body forms separated by glow and space, never by borders

### Anti-Values

- candy-gradient surfaces and pastel background washes
- milky translucent glass and thick sticker outline rings
- hearts, sparkles and dot-grids used as wallpaper scaffolding
- defaulting to white or any light ground
- two or more elements glowing at full brightness at once

### Visual Character

- a warm plum-charcoal night ground (#18121F) where soft-toy controls are lit from within, so the live one is unmistakably the brightest object
- the nightlight wake: idle controls breathe a slow faint glow, then bloom and lift when touched while neighbours fall asleep
- separation by light and space only — no borders, no outline rings, no contact shadows; elevation is a coloured glow bloom plus a soft dark lift
- colour as voice: coral means talk, mint means home, violet means watch, so the hue tells you whose voice you hear before you read a word
- rounded Fredoka display over Quicksand body, high-contrast light-on-dark, with a single glow highlighter mark behind one headline word

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#FF6B8A` |
| secondary | `#3FE0B0` |
| accent | `#8E86FF` |
| bg | `#18121F` |
| background | `#18121F` |
| surface | `#221A2C` |
| surface_raised | `#2B2138` |
| text | `#F4ECFB` |
| muted | `#B6A8C9` |
| border | `#33283F` |
| on_accent | `#1A1020` |
| error | `#FF6B8A` |
| success | `#3FE0B0` |
| warning | `#FFC24D` |
| info | `#8E86FF` |

### Typography

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

### Spacing

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

### Radii

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

### Shadows

- **Sm**: 0 0 22px -2px rgba(255,107,138,0.32)
- **Md**: 0 12px 44px -6px rgba(0,0,0,0.55), 0 0 34px -4px rgba(255,107,138,0.30)
- **Lg**: 0 24px 80px -10px rgba(0,0,0,0.6), 0 0 60px -6px rgba(255,107,138,0.34)

### Surfaces

- **Treatment**: self-lit soft-body
- **Card Style**: warm dark cushion that emits a soft glow when live; soft dark lift, no border, no contact shadow
- **Bg Pattern**: none

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: no outline rings; separation comes from emitted glow and space, never a keyline

### Motion

- **Duration**: 240ms
- **Easing**: cubic-bezier(0.22,1,0.36,1)
- **Philosophy**: breathe then wake: idle controls pulse a slow glow, the touched control blooms and lifts while neighbours fall asleep

## Rules

### Composition

A dark, warm night room of self-lit soft-toy objects; hierarchy comes from which object is awake and glowing, plus size and space — never from borders or contact shadows.

### Hierarchy

Brighter glow = more live. Exactly one element is fully awake at a time; it wears the brightest accent and casts its colour onto the dark.

### Density

Generous and breathable; the dark ground is part of the composition so each glowing object reads clearly.

### Signature

The nightlight wake — idle controls breathe a faint glow, then bloom and lift on touch while the rest fall asleep.

## Layout

### Grid

12-column fluid; glowing objects on a relaxed grid with generous gaps and the dark ground showing through

### Whitespace

generous; the warm night ground is part of the composition, not empty filler

### Density

comfortable

### Responsive

single column under 720px; objects stack and keep their glow; nav wraps, never spills; clamp() headlines never clip at 390px

### Breakpoints

- **Sm**: 390px
- **Md**: 720px
- **Lg**: 1080px
- **Xl**: 1600px

## Guidance

### Do

- let the live element be the brightest thing in the room and dim everything else
- use coral, mint and violet only as emitted light, like highlighters on the dark
- separate objects with glow and space, never with borders or contact shadows
- keep one button clearly primary and glowing; keep the rest quiet
- style every form control explicitly, with a glow when it holds the live state

### Don't

- return to candy gradients, sticker rings, or sparkle and heart wallpaper
- default to white or any light ground
- let two elements glow at full brightness at the same time
- add hard keylines, grey borders, or stacked drop shadows
- swap in neutral corporate type that loses the rounded soft-toy character

### Accessibility

Light warm text (#F4ECFB) on a warm dark ground holds high contrast; glow is decorative and never the only signal — status also carries a labelled dot and text. Motion respects prefers-reduced-motion: breathing stops, the static glow remains.

## Imagery Direction

### Pairs With

bouba-softbody

### Summary

Subjects rendered as inflated soft-plastic toy volumes that are self-lit from within — glowing nightlights resting on a warm dark night field, each casting a soft pool of its own colour onto the ground.

### Subjects

- a glowing soft companion robot nightlight
- a cluster of self-lit app-icon pebbles in coral, mint and violet
- a softly glowing control dial
- a sleeping soft-bodied home sensor

### Usage

One hero companion per landing; spot illustrations are single or small clusters of self-lit soft objects with their glow pool, never busy scenes.

---
version: "alpha"
name: "Plush"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#FF6B8A"
  secondary: "#3FE0B0"
  accent: "#8E86FF"
  bg: "#18121F"
  background: "#18121F"
  surface: "#221A2C"
  surface_raised: "#2B2138"
  text: "#F4ECFB"
  muted: "#B6A8C9"
  border: "#33283F"
  on_accent: "#1A1020"
  error: "#FF6B8A"
  success: "#3FE0B0"
  warning: "#FFC24D"
  info: "#8E86FF"
typography:
  headline-lg:
    fontFamily: "Fredoka"
    fontSize: "1.929rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Fredoka"
    fontSize: "1.581rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Quicksand"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "JetBrains 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"
components:
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-background:
    backgroundColor: "{colors.background}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_raised:
    backgroundColor: "{colors.surface_raised}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.primary}"
    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"
---

# Plush

## Overview

Plush is a companion OS that glows back. It reimagines Neo-Kawaii Tech by moving the whole interface into a calm, warm dark room where every control is a soft, self-lit toy. Warmth comes from emitted light, not from candy gradients, sticker rings or sparkle wallpaper: the app you reach for wakes up and glows, casting its own colour onto the dark, while everything else fades to a slow resting breath. You follow the light to know what is live.

### Values

- warmth from emitted light, never from stamped decoration
- a dark, warm night ground as the primary identity lever
- three highlighter-bright glow hues that read as light, not paint
- exactly one live element, always the brightest thing in the room
- soft-body forms separated by glow and space, never by borders

### Anti-Values

- candy-gradient surfaces and pastel background washes
- milky translucent glass and thick sticker outline rings
- hearts, sparkles and dot-grids used as wallpaper scaffolding
- defaulting to white or any light ground
- two or more elements glowing at full brightness at once

### Visual Character

- a warm plum-charcoal night ground (#18121F) where soft-toy controls are lit from within, so the live one is unmistakably the brightest object
- the nightlight wake: idle controls breathe a slow faint glow, then bloom and lift when touched while neighbours fall asleep
- separation by light and space only — no borders, no outline rings, no contact shadows; elevation is a coloured glow bloom plus a soft dark lift
- colour as voice: coral means talk, mint means home, violet means watch, so the hue tells you whose voice you hear before you read a word
- rounded Fredoka display over Quicksand body, high-contrast light-on-dark, with a single glow highlighter mark behind one headline word

## Colors

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

| Token | Value |
|-------|-------|
| primary | `#FF6B8A` |
| secondary | `#3FE0B0` |
| accent | `#8E86FF` |
| bg | `#18121F` |
| background | `#18121F` |
| surface | `#221A2C` |
| surface_raised | `#2B2138` |
| text | `#F4ECFB` |
| muted | `#B6A8C9` |
| border | `#33283F` |
| on_accent | `#1A1020` |
| error | `#FF6B8A` |
| success | `#3FE0B0` |
| warning | `#FFC24D` |
| info | `#8E86FF` |

## Typography

- **Headline-Lg**: Fredoka, 1.929rem, weight 700, line-height 1.1.
- **Headline-Md**: Fredoka, 1.581rem, weight 600, line-height 1.15.
- **Body-Md**: Quicksand, 17px, weight 400, line-height 1.6.
- **Label-Md**: JetBrains 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`

### Grid

12-column fluid; glowing objects on a relaxed grid with generous gaps and the dark ground showing through

### Whitespace

generous; the warm night ground is part of the composition, not empty filler

### Density

comfortable

### Responsive

single column under 720px; objects stack and keep their glow; nav wraps, never spills; clamp() headlines never clip at 390px

### Breakpoints

- **Sm**: 390px
- **Md**: 720px
- **Lg**: 1080px
- **Xl**: 1600px

## Elevation & Depth

### Shadows

- **Sm**: 0 0 22px -2px rgba(255,107,138,0.32)
- **Md**: 0 12px 44px -6px rgba(0,0,0,0.55), 0 0 34px -4px rgba(255,107,138,0.30)
- **Lg**: 0 24px 80px -10px rgba(0,0,0,0.6), 0 0 60px -6px rgba(255,107,138,0.34)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: self-lit soft-body
- **Card Style**: warm dark cushion that emits a soft glow when live; soft dark lift, no border, no contact shadow
- **Bg Pattern**: none

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: no outline rings; separation comes from emitted glow and space, never a keyline

## Components

### Composition

A dark, warm night room of self-lit soft-toy objects; hierarchy comes from which object is awake and glowing, plus size and space — never from borders or contact shadows.

### Hierarchy

Brighter glow = more live. Exactly one element is fully awake at a time; it wears the brightest accent and casts its colour onto the dark.

### Density

Generous and breathable; the dark ground is part of the composition so each glowing object reads clearly.

### Signature

The nightlight wake — idle controls breathe a faint glow, then bloom and lift on touch while the rest fall asleep.

## 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-019efdb6-988d-72e3-a3ea-cca7394d452c/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 let the live element be the brightest thing in the room and dim everything else
- Do use coral, mint and violet only as emitted light, like highlighters on the dark
- Do separate objects with glow and space, never with borders or contact shadows
- Do keep one button clearly primary and glowing; keep the rest quiet
- Do style every form control explicitly, with a glow when it holds the live state
- Don't return to candy gradients, sticker rings, or sparkle and heart wallpaper
- Don't default to white or any light ground
- Don't let two elements glow at full brightness at the same time
- Don't add hard keylines, grey borders, or stacked drop shadows
- Don't swap in neutral corporate type that loses the rounded soft-toy character

### Accessibility

Light warm text (#F4ECFB) on a warm dark ground holds high contrast; glow is decorative and never the only signal — status also carries a labelled dot and text. Motion respects prefers-reduced-motion: breathing stops, the static glow remains.

## Imagery Direction

### Pairs With

bouba-softbody

### Summary

Subjects rendered as inflated soft-plastic toy volumes that are self-lit from within — glowing nightlights resting on a warm dark night field, each casting a soft pool of its own colour onto the ground.

### Subjects

- a glowing soft companion robot nightlight
- a cluster of self-lit app-icon pebbles in coral, mint and violet
- a softly glowing control dial
- a sleeping soft-bodied home sensor

### Usage

One hero companion per landing; spot illustrations are single or small clusters of self-lit soft objects with their glow pool, never busy scenes.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "plush",
  "type": "registry:theme",
  "title": "Plush shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#18121F",
      "foreground": "#F4ECFB",
      "card": "#221A2C",
      "card-foreground": "#F4ECFB",
      "popover": "#221A2C",
      "popover-foreground": "#F4ECFB",
      "primary": "#FF6B8A",
      "primary-foreground": "#ffffff",
      "secondary": "#3FE0B0",
      "secondary-foreground": "#111111",
      "muted": "#B6A8C9",
      "muted-foreground": "#F4ECFB",
      "accent": "#8E86FF",
      "accent-foreground": "#ffffff",
      "destructive": "#FF6B8A",
      "border": "#33283F",
      "input": "#33283F",
      "ring": "#8E86FF",
      "chart-1": "#FF6B8A",
      "chart-2": "#3FE0B0",
      "chart-3": "#8E86FF",
      "chart-4": "#3FE0B0",
      "chart-5": "#FFC24D",
      "sidebar": "#221A2C",
      "sidebar-foreground": "#F4ECFB",
      "sidebar-primary": "#FF6B8A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#8E86FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#33283F",
      "sidebar-ring": "#8E86FF",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#FF6B8A",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#8E86FF",
      "accent-foreground": "#ffffff",
      "destructive": "#FF6B8A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#8E86FF",
      "chart-1": "#FF6B8A",
      "chart-2": "#3FE0B0",
      "chart-3": "#8E86FF",
      "chart-4": "#3FE0B0",
      "chart-5": "#FFC24D",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#FF6B8A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#8E86FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#8E86FF",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efdb6-988d-72e3-a3ea-cca7394d452c",
    "slug": "plush",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "background",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_raised",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```