Bouba

# Bouba

## Philosophy

Bouba treats software like a soft object you can squeeze. Every control is a rounded, air-filled volume rendered with real studio light and a soft contact shadow, so the interface reads as a tray of plush toy parts rather than flat candy stickers. Warmth comes from form and light, not from decoration: there are no outline rings, no sparkle wallpaper, no gradient washes — just inflated geometry, calm lilac air, and three highlighter-bright accents that pop because the ground stays quiet.

### Values

- softness expressed as inflated 3D volume and real contact shadow
- warmth from form and light, never from stamped ornament
- three bright accents used like highlighters on a calm ground
- one coherent squeeze-press motion that carries meaning
- tactile clarity: every state looks pressable

### Anti-Values

- candy-gradient surfaces and pastel background washes
- milky translucent glass stacked over gradients
- thick outline rings and sticker edges around every element
- hearts, sparkles and dot-grids used as wallpaper scaffolding
- flat monochrome enterprise austerity

### Visual Character

- soft-body volumes: buttons, chips and cards read as air-filled cushions with a single soft top highlight and a grounded contact shadow, never a flat rectangle
- the squeeze press: interactive elements compress and lift on a snappy bouncy curve, the one motion that animates the whole system
- quiet lilac air: a single calm grape-milk ground with no pattern, letting the inflated forms and their shadows do the talking
- three highlighter accents (magenta, violet, mint) reserved for the live element on a screen, never spread across chrome
- pillow tabs and pebble badges: navigation and status read as smooth rounded pebbles resting on the surface, set apart by shadow and space rather than borders

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#FF3DA6` |
| secondary | `#6A5CFF` |
| accent | `#28E0B0` |
| bg | `#EDE4FF` |
| background | `#EDE4FF` |
| surface | `#FBF7FF` |
| surface_raised | `#FFFFFF` |
| text | `#2A1B45` |
| muted | `#7A6C9A` |
| border | `#E2D6FB` |
| on_accent | `#FFFFFF` |
| error | `#FF4D6D` |
| success | `#1FC79A` |
| warning | `#FFA62E` |
| info | `#4DA8FF` |

### Typography

- **Heading Font**: Baloo 2
- **Body Font**: Nunito
- **Mono Font**: JetBrains Mono
- **Base Size**: 17px
- **Scale Ratio**: 1.22
- **Line Height**: 1.6
- **Letter Spacing**: 0em
- **Heading Weight**: 800
- **Heading Transform**: none
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=JetBrains+Mono:wght@500;700&family=Nunito:wght@400;500;600;700;800&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 10px 22px rgba(82, 54, 138, 0.16)
- **Md**: 0 22px 48px rgba(82, 54, 138, 0.20)
- **Lg**: 0 40px 90px rgba(82, 54, 138, 0.26)

### Surfaces

- **Treatment**: soft-body
- **Card Style**: air-filled cushion: clean light surface with one soft top highlight and a grounded contact shadow, no border ring
- **Bg Pattern**: none

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: no outline rings; separation comes from soft contact shadow and space

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.34, 1.56, 0.64, 1)
- **Philosophy**: squeeze: compress on press, bounce back on release

## Rules

### Composition

Inflated soft-body volumes resting on a calm lilac ground; hierarchy from size, shadow depth and accent, never from borders.

### Hierarchy

Bigger and more shadowed = more important; the single live element wears the accent.

### Density

Generous, breathable; cushions need air around them to read as objects.

### Signature

The squeeze press — every interactive volume compresses and lifts on a bouncy curve.

## Layout

### Grid

12-column fluid; cushions on a relaxed grid with generous gaps

### Whitespace

generous; the lilac ground is part of the composition

### Density

comfortable

### Responsive

single column under 720px; cushions stack and keep their shadows

### Breakpoints

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

## Guidance

### Do

- Render every control as a soft inflated volume with one top highlight and a grounded contact shadow.
- Reserve the three accents for the live/selected element; keep chrome quiet.
- Use the squeeze press for all interactive feedback.
- Let the lilac ground breathe — no patterns, no scrims.

### Don't

- Add outline rings, sticker edges, or accent border-edges to cards.
- Stack translucent glass over gradients or wash the background pastel.
- Scatter hearts, sparkles or dot-grids as decoration.
- Spread accent colour across the chrome instead of the one live element.

### Accessibility

Body 17px+; text #2A1B45 on light surfaces clears 4.5:1; accents carry white labels at AA; motion respects prefers-reduced-motion; states never rely on colour alone (shadow depth + label change too).

## Imagery Direction

### Pairs With

bouba-softbody

### Summary

Subjects rendered as inflated soft-plastic toy volumes under soft studio light, grounded by a single contact shadow, on a calm lilac field.

### Subjects

- a plush toy robot companion
- a cluster of rounded app-icon pebbles
- an inflatable control dial
- a soft-bodied delivery drone

### Usage

One hero per landing; spot illustrations as single soft objects with their contact shadow, never busy scenes.

---
version: "alpha"
name: "Bouba"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  primary: "#FF3DA6"
  secondary: "#6A5CFF"
  accent: "#28E0B0"
  bg: "#EDE4FF"
  background: "#EDE4FF"
  surface: "#FBF7FF"
  surface_raised: "#FFFFFF"
  text: "#2A1B45"
  muted: "#7A6C9A"
  border: "#E2D6FB"
  on_accent: "#FFFFFF"
  error: "#FF4D6D"
  success: "#1FC79A"
  warning: "#FFA62E"
  info: "#4DA8FF"
typography:
  headline-lg:
    fontFamily: "Baloo 2"
    fontSize: "1.929rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "0em"
  headline-md:
    fontFamily: "Baloo 2"
    fontSize: "1.581rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "0em"
  body-md:
    fontFamily: "Nunito"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "0em"
  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"
---

# Bouba

## Overview

Bouba treats software like a soft object you can squeeze. Every control is a rounded, air-filled volume rendered with real studio light and a soft contact shadow, so the interface reads as a tray of plush toy parts rather than flat candy stickers. Warmth comes from form and light, not from decoration: there are no outline rings, no sparkle wallpaper, no gradient washes — just inflated geometry, calm lilac air, and three highlighter-bright accents that pop because the ground stays quiet.

### Values

- softness expressed as inflated 3D volume and real contact shadow
- warmth from form and light, never from stamped ornament
- three bright accents used like highlighters on a calm ground
- one coherent squeeze-press motion that carries meaning
- tactile clarity: every state looks pressable

### Anti-Values

- candy-gradient surfaces and pastel background washes
- milky translucent glass stacked over gradients
- thick outline rings and sticker edges around every element
- hearts, sparkles and dot-grids used as wallpaper scaffolding
- flat monochrome enterprise austerity

### Visual Character

- soft-body volumes: buttons, chips and cards read as air-filled cushions with a single soft top highlight and a grounded contact shadow, never a flat rectangle
- the squeeze press: interactive elements compress and lift on a snappy bouncy curve, the one motion that animates the whole system
- quiet lilac air: a single calm grape-milk ground with no pattern, letting the inflated forms and their shadows do the talking
- three highlighter accents (magenta, violet, mint) reserved for the live element on a screen, never spread across chrome
- pillow tabs and pebble badges: navigation and status read as smooth rounded pebbles resting on the surface, set apart by shadow and space rather than borders

## 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 | `#FF3DA6` |
| secondary | `#6A5CFF` |
| accent | `#28E0B0` |
| bg | `#EDE4FF` |
| background | `#EDE4FF` |
| surface | `#FBF7FF` |
| surface_raised | `#FFFFFF` |
| text | `#2A1B45` |
| muted | `#7A6C9A` |
| border | `#E2D6FB` |
| on_accent | `#FFFFFF` |
| error | `#FF4D6D` |
| success | `#1FC79A` |
| warning | `#FFA62E` |
| info | `#4DA8FF` |

## Typography

- **Headline-Lg**: Baloo 2, 1.929rem, weight 700, line-height 1.1.
- **Headline-Md**: Baloo 2, 1.581rem, weight 600, line-height 1.15.
- **Body-Md**: Nunito, 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; cushions on a relaxed grid with generous gaps

### Whitespace

generous; the lilac ground is part of the composition

### Density

comfortable

### Responsive

single column under 720px; cushions stack and keep their shadows

### Breakpoints

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

## Elevation & Depth

### Shadows

- **Sm**: 0 10px 22px rgba(82, 54, 138, 0.16)
- **Md**: 0 22px 48px rgba(82, 54, 138, 0.20)
- **Lg**: 0 40px 90px rgba(82, 54, 138, 0.26)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: soft-body
- **Card Style**: air-filled cushion: clean light surface with one soft top highlight and a grounded contact shadow, no border ring
- **Bg Pattern**: none

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: no outline rings; separation comes from soft contact shadow and space

## Components

### Composition

Inflated soft-body volumes resting on a calm lilac ground; hierarchy from size, shadow depth and accent, never from borders.

### Hierarchy

Bigger and more shadowed = more important; the single live element wears the accent.

### Density

Generous, breathable; cushions need air around them to read as objects.

### Signature

The squeeze press — every interactive volume compresses and lifts on a bouncy curve.

## 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-019efd9f-f4db-7db3-acf9-20d906c311f0/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 Render every control as a soft inflated volume with one top highlight and a grounded contact shadow.
- Do Reserve the three accents for the live/selected element; keep chrome quiet.
- Do Use the squeeze press for all interactive feedback.
- Do Let the lilac ground breathe — no patterns, no scrims.
- Don't Add outline rings, sticker edges, or accent border-edges to cards.
- Don't Stack translucent glass over gradients or wash the background pastel.
- Don't Scatter hearts, sparkles or dot-grids as decoration.
- Don't Spread accent colour across the chrome instead of the one live element.

### Accessibility

Body 17px+; text #2A1B45 on light surfaces clears 4.5:1; accents carry white labels at AA; motion respects prefers-reduced-motion; states never rely on colour alone (shadow depth + label change too).

## Imagery Direction

### Pairs With

bouba-softbody

### Summary

Subjects rendered as inflated soft-plastic toy volumes under soft studio light, grounded by a single contact shadow, on a calm lilac field.

### Subjects

- a plush toy robot companion
- a cluster of rounded app-icon pebbles
- an inflatable control dial
- a soft-bodied delivery drone

### Usage

One hero per landing; spot illustrations as single soft objects with their contact shadow, never busy scenes.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bouba",
  "type": "registry:theme",
  "title": "Bouba shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#EDE4FF",
      "foreground": "#2A1B45",
      "card": "#FBF7FF",
      "card-foreground": "#2A1B45",
      "popover": "#FBF7FF",
      "popover-foreground": "#2A1B45",
      "primary": "#FF3DA6",
      "primary-foreground": "#ffffff",
      "secondary": "#6A5CFF",
      "secondary-foreground": "#ffffff",
      "muted": "#7A6C9A",
      "muted-foreground": "#2A1B45",
      "accent": "#28E0B0",
      "accent-foreground": "#111111",
      "destructive": "#FF4D6D",
      "border": "#E2D6FB",
      "input": "#E2D6FB",
      "ring": "#28E0B0",
      "chart-1": "#FF3DA6",
      "chart-2": "#6A5CFF",
      "chart-3": "#28E0B0",
      "chart-4": "#1FC79A",
      "chart-5": "#FFA62E",
      "sidebar": "#FBF7FF",
      "sidebar-foreground": "#2A1B45",
      "sidebar-primary": "#FF3DA6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4DA8FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E2D6FB",
      "sidebar-ring": "#28E0B0",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#FF3DA6",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#28E0B0",
      "accent-foreground": "#111111",
      "destructive": "#FF4D6D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#28E0B0",
      "chart-1": "#FF3DA6",
      "chart-2": "#6A5CFF",
      "chart-3": "#28E0B0",
      "chart-4": "#1FC79A",
      "chart-5": "#FFA62E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#FF3DA6",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#28E0B0",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#28E0B0",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efd9f-f4db-7db3-acf9-20d906c311f0",
    "slug": "bouba",
    "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"
      ]
    }
  }
}
```