Cameo

# Cameo

## Philosophy

Cameo carves an interface out of one continuous material. Actions rise as cushioned pillows, editable fields sink into inset wells, and status glows as a small light bead — so hierarchy reads by relief before it reads by colour. Calm, tactile, low-friction, never toy-like.

### Values

- one continuous surface over fragmented panels
- depth as hierarchy
- quiet tactility
- gentle contrast with legible text
- calm productivity

### Anti-Values

- hard skeletal borders
- high-noise ornament
- harsh contrast spikes
- flat severity
- aggressive motion

### Visual Character

- all primary containers are pressed from a single pale field using paired highlight and shadow relief instead of borders
- controls alternate between raised pillows and inset wells to signal clickable versus editable surfaces
- geometry stays on one legal radius set (0/16/24/full), with capsule buttons, chips and tabs
- status reads as a small luminous light bead aligned left, never a saturated fill
- the soft modal floats in a blurred accent aura with a raised header over a recessed body

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#e7edf5` |
| surface | `#eef3f9` |
| surface_solid | `#eef3f9` |
| text | `#2b3550` |
| muted | `#7d89a6` |
| border | `#d6deea` |
| accent | `#7f8cff` |
| accent_2 | `#7de3c3` |
| accent_soft | `#dfe4ff` |
| on_accent | `#ffffff` |
| success | `#3fae8b` |
| warning | `#d59544` |
| error | `#d76079` |
| info | `#5aa2df` |

### Typography

- **Base Size**: 17px
- **Body Font**: "Manrope", sans-serif
- **Heading Font**: "Red Hat Display", sans-serif
- **Mono Font**: "IBM Plex Mono", monospace
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.01em
- **Line Height**: 1.55
- **Scale Ratio**: 1.2
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Red+Hat+Display:wght@500;700;800&display=swap

### Radii

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

### Shadows

- **Sm**: -4px -4px 10px var(--hi), 4px 4px 12px var(--lo)
- **Md**: -8px -8px 18px var(--hi), 9px 9px 20px var(--lo)
- **Lg**: -14px -14px 30px var(--hi), 14px 14px 32px var(--lo)

### Spacing

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

### Surfaces

- **Treatment**: molded
- **Card Style**: raised outer shell pressed from one field with inset internal wells; no borders
- **Bg Pattern**: none

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: borders are replaced by tonal seams and shadow relief; a control never carries a visible outline or accent edge

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: deliberate

## Rules

### Composition

Compose each screen as molded trays pressed from a single continuous field, not boxed cards scattered on a canvas. Broad raised shells hold regions; inside them, data and controls sit in inset wells so the interface reads as a landscape of convex and concave forms.

### Hierarchy

Use depth before colour: the strongest action is the most raised element, secondary content sits flush, editable areas recess inward. The two accents are spent only on primary fills, progress, active tabs, and status beads.

### Density

Comfortable density with generous cushion around every cluster; rounded containment preserves the single-material illusion.

### Signature Patterns

- every major module uses paired outer shadows plus a subtle inner highlight to create a molded raised shell
- inputs, selects, search bars, and progress tracks sit inside concave inset wells built with inset box-shadows
- active tabs and toggles sink inward and lift a faint accent halo instead of a hard fill or underline
- alerts and status chips carry a small embedded circular light bead aligned to the left edge
- modal panels float inside a blurred accent aura with a nested raised header and inset body

## Layout

### Grid

Desktop centres a contained column inside a molded shell; the landing hero alone spans the full viewport. A twelve-ish column rhythm resolves into halves and thirds that shrink with minmax(0,1fr) so nothing overflows.

### Breakpoints

The tablet band (768-1024) is designed on its own: the console rail turns horizontal, metric rows relax to two-up, split panels stack. Below 768 everything becomes a single cushioned column; tables drop the head row and reflow to label/value pairs.

### Whitespace

Padded and air-cushioned: 24-32px within trays on desktop, ~20px on tablet, 16px on phone. Avoid narrow gutters that break the single-material illusion.

## Guidance

### Do

- Keep one top-left light source across every highlight and shadow.
- Put related controls inside shared wells to reinforce the single-material illusion.
- Spend the accents sparingly, on active state and status beads.
- Use large radii and generous padding to keep the surface soft.
- Keep text high-contrast even when surfaces sit quiet.

### Don't

- Draw a hard border or an accent edge on any container.
- Flood a panel with a saturated accent fill.
- Mix light directions or inconsistent relief depths.
- Compress spacing until forms lose their cushion.
- Rely on colour where depth can communicate state.

## Imagery Direction

### Summary

Every image is molded from the same pale putty as the interface: soft embossed bas-relief, one continuous material, delicate paired highlight and shadow from a top-left light, with faint mint and periwinkle glow beads. Soft operational relief, never sharp photo-real imagery.

### Technique

embossed bas-relief in a single pale blue-grey material with top-left illumination and faint accent glow beads

### Pairs With

cameo-relief

### Hero Image File Id

fl-019f7070-6b0f-7fb1-8a24-99a1c0bf4c89

### Reference Image File Ids

- fl-019f7070-6f4e-7520-99bb-01a9d1d8be72
- fl-019f7070-73c7-7520-b07c-b034ea79056e
- fl-019f7070-79a1-7302-861a-35c602ab9f7f
- fl-019f7070-7cad-7081-b8bd-9089452bc1f7

---
version: "alpha"
name: "Cameo"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#e7edf5"
  surface: "#eef3f9"
  surface_solid: "#eef3f9"
  text: "#2b3550"
  muted: "#7d89a6"
  border: "#d6deea"
  accent: "#7f8cff"
  accent_2: "#7de3c3"
  accent_soft: "#dfe4ff"
  on_accent: "#ffffff"
  success: "#3fae8b"
  warning: "#d59544"
  error: "#d76079"
  info: "#5aa2df"
typography:
  headline-lg:
    fontFamily: "\"Red Hat Display\", sans-serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "\"Red Hat Display\", sans-serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "\"Manrope\", sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "\"IBM Plex Mono\", monospace"
    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"
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"
---

# Cameo

## Overview

Cameo carves an interface out of one continuous material. Actions rise as cushioned pillows, editable fields sink into inset wells, and status glows as a small light bead — so hierarchy reads by relief before it reads by colour. Calm, tactile, low-friction, never toy-like.

### Values

- one continuous surface over fragmented panels
- depth as hierarchy
- quiet tactility
- gentle contrast with legible text
- calm productivity

### Anti-Values

- hard skeletal borders
- high-noise ornament
- harsh contrast spikes
- flat severity
- aggressive motion

### Visual Character

- all primary containers are pressed from a single pale field using paired highlight and shadow relief instead of borders
- controls alternate between raised pillows and inset wells to signal clickable versus editable surfaces
- geometry stays on one legal radius set (0/16/24/full), with capsule buttons, chips and tabs
- status reads as a small luminous light bead aligned left, never a saturated fill
- the soft modal floats in a blurred accent aura with a raised header over a recessed body

## 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 | `#e7edf5` |
| surface | `#eef3f9` |
| surface_solid | `#eef3f9` |
| text | `#2b3550` |
| muted | `#7d89a6` |
| border | `#d6deea` |
| accent | `#7f8cff` |
| accent_2 | `#7de3c3` |
| accent_soft | `#dfe4ff` |
| on_accent | `#ffffff` |
| success | `#3fae8b` |
| warning | `#d59544` |
| error | `#d76079` |
| info | `#5aa2df` |

## Typography

- **Headline-Lg**: "Red Hat Display", sans-serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: "Red Hat Display", sans-serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: "Manrope", sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: "IBM Plex Mono", monospace, 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`

### Grid

Desktop centres a contained column inside a molded shell; the landing hero alone spans the full viewport. A twelve-ish column rhythm resolves into halves and thirds that shrink with minmax(0,1fr) so nothing overflows.

### Breakpoints

The tablet band (768-1024) is designed on its own: the console rail turns horizontal, metric rows relax to two-up, split panels stack. Below 768 everything becomes a single cushioned column; tables drop the head row and reflow to label/value pairs.

### Whitespace

Padded and air-cushioned: 24-32px within trays on desktop, ~20px on tablet, 16px on phone. Avoid narrow gutters that break the single-material illusion.

## Elevation & Depth

### Shadows

- **Sm**: -4px -4px 10px var(--hi), 4px 4px 12px var(--lo)
- **Md**: -8px -8px 18px var(--hi), 9px 9px 20px var(--lo)
- **Lg**: -14px -14px 30px var(--hi), 14px 14px 32px var(--lo)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: molded
- **Card Style**: raised outer shell pressed from one field with inset internal wells; no borders
- **Bg Pattern**: none

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: borders are replaced by tonal seams and shadow relief; a control never carries a visible outline or accent edge

## Components

### Composition

Compose each screen as molded trays pressed from a single continuous field, not boxed cards scattered on a canvas. Broad raised shells hold regions; inside them, data and controls sit in inset wells so the interface reads as a landscape of convex and concave forms.

### Hierarchy

Use depth before colour: the strongest action is the most raised element, secondary content sits flush, editable areas recess inward. The two accents are spent only on primary fills, progress, active tabs, and status beads.

### Density

Comfortable density with generous cushion around every cluster; rounded containment preserves the single-material illusion.

### Signature Patterns

- every major module uses paired outer shadows plus a subtle inner highlight to create a molded raised shell
- inputs, selects, search bars, and progress tracks sit inside concave inset wells built with inset box-shadows
- active tabs and toggles sink inward and lift a faint accent halo instead of a hard fill or underline
- alerts and status chips carry a small embedded circular light bead aligned to the left edge
- modal panels float inside a blurred accent aura with a nested raised header and inset body

## 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-019f7072-1382-74a2-ac5f-6554ed5a6854/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 Keep one top-left light source across every highlight and shadow.
- Do Put related controls inside shared wells to reinforce the single-material illusion.
- Do Spend the accents sparingly, on active state and status beads.
- Do Use large radii and generous padding to keep the surface soft.
- Do Keep text high-contrast even when surfaces sit quiet.
- Don't Draw a hard border or an accent edge on any container.
- Don't Flood a panel with a saturated accent fill.
- Don't Mix light directions or inconsistent relief depths.
- Don't Compress spacing until forms lose their cushion.
- Don't Rely on colour where depth can communicate state.

## Imagery Direction

### Summary

Every image is molded from the same pale putty as the interface: soft embossed bas-relief, one continuous material, delicate paired highlight and shadow from a top-left light, with faint mint and periwinkle glow beads. Soft operational relief, never sharp photo-real imagery.

### Technique

embossed bas-relief in a single pale blue-grey material with top-left illumination and faint accent glow beads

### Pairs With

cameo-relief

### Hero Image File Id

fl-019f7070-6b0f-7fb1-8a24-99a1c0bf4c89

### Reference Image File Ids

- fl-019f7070-6f4e-7520-99bb-01a9d1d8be72
- fl-019f7070-73c7-7520-b07c-b034ea79056e
- fl-019f7070-79a1-7302-861a-35c602ab9f7f
- fl-019f7070-7cad-7081-b8bd-9089452bc1f7

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cameo",
  "type": "registry:theme",
  "title": "Cameo shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#e7edf5",
      "foreground": "#2b3550",
      "card": "#eef3f9",
      "card-foreground": "#2b3550",
      "popover": "#eef3f9",
      "popover-foreground": "#2b3550",
      "primary": "#2b3550",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7d89a6",
      "muted-foreground": "#2b3550",
      "accent": "#7f8cff",
      "accent-foreground": "#ffffff",
      "destructive": "#d76079",
      "border": "#d6deea",
      "input": "#d6deea",
      "ring": "#7f8cff",
      "chart-1": "#2b3550",
      "chart-2": "#f4f4f5",
      "chart-3": "#7f8cff",
      "chart-4": "#3fae8b",
      "chart-5": "#d59544",
      "sidebar": "#eef3f9",
      "sidebar-foreground": "#2b3550",
      "sidebar-primary": "#2b3550",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5aa2df",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#d6deea",
      "sidebar-ring": "#7f8cff",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2b3550",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#7f8cff",
      "accent-foreground": "#ffffff",
      "destructive": "#d76079",
      "border": "#303642",
      "input": "#303642",
      "ring": "#7f8cff",
      "chart-1": "#2b3550",
      "chart-2": "#f4f4f5",
      "chart-3": "#7f8cff",
      "chart-4": "#3fae8b",
      "chart-5": "#d59544",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2b3550",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#7f8cff",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#7f8cff",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f7072-1382-74a2-ac5f-6554ed5a6854",
    "slug": "cameo",
    "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",
        "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"
      ]
    }
  }
}
```