Suncatcher

# Suncatcher

## Philosophy

A translucent picture-book interface language: every surface is a thin dyed-tissue sheet, and where two sheets overlap their colour multiplies into a deeper glowing third tone, so form, depth and shadow come from layering rather than from any hard outline. The ground is a warm cream page, three luminous colours are laid in like highlighters, and the whole interface reads like a board book you can tap. It is the brought-to-standard form of the tissue-paper storybook idea, evolved from heavy ink borders toward true glassine translucency.

### Values

- Depth from translucency, never from outlines
- Tactile handmade warmth over sterile polish
- Scene-first picture-book composition, not abstract component catalogs
- Large readable shapes that still support clear task completion

### Anti-Values

- Hard ink borders or single-accent card edges
- Cold grayscale dashboards and clinical flat panels
- Muddy or greyed overlaps; glassmorphism, neon glow, metallic gradients
- Tiny dense data-first layouts that erase the storybook calm

### Visual Character

- Cards are lit tissue sheets pasted over a visible offset backing sheet, lifted by soft warm shadow, never an outlined rectangle and never a single accent edge.
- Coloured shapes use multiply blending so overlaps deepen into a third tone, the literal glassine signature, used in the brand mark, hero, overlap demo and KPI motifs.
- Section captions sit in small rotated tissue tape-strips with tiny uppercase mono text, a single considered ornament system that reads like handmade page annotations.
- Oversized translucent circles drift behind content to give picture-book scene depth without stealing focus, over a warm cream page.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F6ECD6` |
| surface | `#FFF8EC` |
| surface_2 | `#FBEFD8` |
| text | `#2E2117` |
| muted | `#8A7560` |
| border | `#E6D6B8` |
| accent | `#E8513E` |
| on_accent | `#FFF8EC` |
| marigold | `#F2A734` |
| leaf | `#4FA45C` |
| overlap_sun_leaf | `#9B6A2C` |
| overlap_sky_leaf | `#3E7E6B` |
| success | `#4FA45C` |
| warning | `#E0902A` |
| error | `#CB4A3C` |
| info | `#4F8FCB` |

### Typography

- **Base Size**: 17px
- **Body Font**: Nunito
- **Heading Font**: Baloo 2
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.01em
- **Line Height**: 1.6
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap

### Radii

- **None**: 0
- **Soft**: 16px
- **Card**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 6px 16px rgba(91,70,57,0.10)
- **Md**: 0 14px 34px rgba(91,70,57,0.13)

### Spacing

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

### Surfaces

- **Treatment**: translucent dyed tissue paper
- **Card Style**: A lit cream tissue sheet pasted over an offset, slightly rotated backing sheet (pseudo-element), lifted by soft warm shadow; overlapping colours multiply into a deeper third tone. No borders.
- **Bg Pattern**: subtle warm paper grain

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No structural borders. Depth comes from the soft lift shadow and the offset backing sheet; the only border token is a hairline warm tone kept invisible in practice.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.22, 1, 0.36, 1)
- **Philosophy**: Snappy paper-press: controls drop 2px on active; landing reveals rise gently on scroll, gated behind a JS class so the settled state shows with no JS, and respect prefers-reduced-motion.

## Rules

### Composition

Compose screens like an open picture-book spread: lit tissue-sheet islands over a warm cream page, with oversized translucent motifs drifting behind content to guide the eye. Nav sits openly across the header, never boxed in a pill.

### Hierarchy

Oversized rounded Baloo 2 headings first, tape-strip mono labels second, calm Nunito body on cream third. One button is clearly primary (tomato); the rest are quieter.

### Density

Medium-low density with generous breathing room and large touch targets; short clusters of related controls per island.

### Signature

Overlap-multiply translucency: every surface is a tissue sheet over an offset backing sheet, and coloured shapes multiply where they overlap into a deeper third tone.

## Layout

### Grid

A flexible auto-fit collage grid of tissue-sheet islands using minmax(0,1fr) columns; one wide spread with smaller supporting islands, collapsing to a single stacked column on mobile.

### Whitespace

Generous outer margins and plush internal padding like a board-book gutter, so motifs can breathe around content.

### Density

Medium-low; large controls, short clusters.

### Responsive

Renders from ~390px to 2560px+; full-bleed hero spans 100vw, contained content caps and centres on ultra-wide; min-width:0 on grid children so grids never overflow.

### Breakpoints

- **Mobile**: 780px
- **Tablet**: 1000px
- **Desktop**: default
- **Ultrawide**: 1240px cap

## Guidance

### Do

- Build every surface as a lit tissue sheet over a visible offset backing sheet.
- Let overlapping colours multiply into a deeper third tone; that is the signature.
- Keep the warm cream page; use the three colours like luminous highlighters.
- Use rotated tape-strip labels for captions, and keep one button clearly primary.

### Don't

- Do not use hard ink borders, single-accent card edges, or nested cards.
- Do not trap the nav in a floating pill bar; let it sit openly across the header.
- Do not let overlaps go grey or muddy; they deepen, they do not dull.
- Do not use glassmorphism, neon glow, metallic gradients, or cold grayscale panels.

### Accessibility

Body 17px+, table rows 15px, warm ink on cream throughout for high contrast. Every form control is explicitly styled with a visible 3px tomato focus outline. Motion is gated behind a JS class and reduced under prefers-reduced-motion; the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

glassine

### Summary

Images are built entirely from thin translucent dyed-tissue sheets that multiply where they overlap, with soft glue-wash edges and crinkle fibre texture, over a warm cream paper ground. The landing hero is a suncatcher landscape rendered in that technique.

### Subjects

- suncatcher landscapes
- suns
- rolling hills
- trees
- clouds
- small cottages
- leaves and gardens

### Usage

Use the glassine technique for the full-bleed landing hero and any scene illustration; keep generous calm sky area for legible overlays. Never render the apparatus (scissors, glue, brush); never add text or borders.

---
version: "alpha"
name: "Suncatcher"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F6ECD6"
  surface: "#FFF8EC"
  surface_2: "#FBEFD8"
  text: "#2E2117"
  muted: "#8A7560"
  border: "#E6D6B8"
  accent: "#E8513E"
  on_accent: "#FFF8EC"
  marigold: "#F2A734"
  leaf: "#4FA45C"
  overlap_sun_leaf: "#9B6A2C"
  overlap_sky_leaf: "#3E7E6B"
  success: "#4FA45C"
  warning: "#E0902A"
  error: "#CB4A3C"
  info: "#4F8FCB"
typography:
  headline-lg:
    fontFamily: "Baloo 2"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: "Baloo 2"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: "Nunito"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.01em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  soft: "16px"
  card: "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_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-marigold:
    backgroundColor: "{colors.marigold}"
  color-reference-leaf:
    backgroundColor: "{colors.leaf}"
  color-reference-overlap_sun_leaf:
    backgroundColor: "{colors.overlap_sun_leaf}"
  color-reference-overlap_sky_leaf:
    backgroundColor: "{colors.overlap_sky_leaf}"
  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.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Suncatcher

## Overview

A translucent picture-book interface language: every surface is a thin dyed-tissue sheet, and where two sheets overlap their colour multiplies into a deeper glowing third tone, so form, depth and shadow come from layering rather than from any hard outline. The ground is a warm cream page, three luminous colours are laid in like highlighters, and the whole interface reads like a board book you can tap. It is the brought-to-standard form of the tissue-paper storybook idea, evolved from heavy ink borders toward true glassine translucency.

### Values

- Depth from translucency, never from outlines
- Tactile handmade warmth over sterile polish
- Scene-first picture-book composition, not abstract component catalogs
- Large readable shapes that still support clear task completion

### Anti-Values

- Hard ink borders or single-accent card edges
- Cold grayscale dashboards and clinical flat panels
- Muddy or greyed overlaps; glassmorphism, neon glow, metallic gradients
- Tiny dense data-first layouts that erase the storybook calm

### Visual Character

- Cards are lit tissue sheets pasted over a visible offset backing sheet, lifted by soft warm shadow, never an outlined rectangle and never a single accent edge.
- Coloured shapes use multiply blending so overlaps deepen into a third tone, the literal glassine signature, used in the brand mark, hero, overlap demo and KPI motifs.
- Section captions sit in small rotated tissue tape-strips with tiny uppercase mono text, a single considered ornament system that reads like handmade page annotations.
- Oversized translucent circles drift behind content to give picture-book scene depth without stealing focus, over a warm cream page.

## 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 | `#F6ECD6` |
| surface | `#FFF8EC` |
| surface_2 | `#FBEFD8` |
| text | `#2E2117` |
| muted | `#8A7560` |
| border | `#E6D6B8` |
| accent | `#E8513E` |
| on_accent | `#FFF8EC` |
| marigold | `#F2A734` |
| leaf | `#4FA45C` |
| overlap_sun_leaf | `#9B6A2C` |
| overlap_sky_leaf | `#3E7E6B` |
| success | `#4FA45C` |
| warning | `#E0902A` |
| error | `#CB4A3C` |
| info | `#4F8FCB` |

## Typography

- **Headline-Lg**: Baloo 2, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Baloo 2, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Nunito, 17px, weight 400, line-height 1.6.
- **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`

### Grid

A flexible auto-fit collage grid of tissue-sheet islands using minmax(0,1fr) columns; one wide spread with smaller supporting islands, collapsing to a single stacked column on mobile.

### Whitespace

Generous outer margins and plush internal padding like a board-book gutter, so motifs can breathe around content.

### Density

Medium-low; large controls, short clusters.

### Responsive

Renders from ~390px to 2560px+; full-bleed hero spans 100vw, contained content caps and centres on ultra-wide; min-width:0 on grid children so grids never overflow.

### Breakpoints

- **Mobile**: 780px
- **Tablet**: 1000px
- **Desktop**: default
- **Ultrawide**: 1240px cap

## Elevation & Depth

### Shadows

- **Sm**: 0 6px 16px rgba(91,70,57,0.10)
- **Md**: 0 14px 34px rgba(91,70,57,0.13)

## Shapes

### Rounded

- **None**: `0px`
- **Soft**: `16px`
- **Card**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: translucent dyed tissue paper
- **Card Style**: A lit cream tissue sheet pasted over an offset, slightly rotated backing sheet (pseudo-element), lifted by soft warm shadow; overlapping colours multiply into a deeper third tone. No borders.
- **Bg Pattern**: subtle warm paper grain

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No structural borders. Depth comes from the soft lift shadow and the offset backing sheet; the only border token is a hairline warm tone kept invisible in practice.

## Components

### Composition

Compose screens like an open picture-book spread: lit tissue-sheet islands over a warm cream page, with oversized translucent motifs drifting behind content to guide the eye. Nav sits openly across the header, never boxed in a pill.

### Hierarchy

Oversized rounded Baloo 2 headings first, tape-strip mono labels second, calm Nunito body on cream third. One button is clearly primary (tomato); the rest are quieter.

### Density

Medium-low density with generous breathing room and large touch targets; short clusters of related controls per island.

### Signature

Overlap-multiply translucency: every surface is a tissue sheet over an offset backing sheet, and coloured shapes multiply where they overlap into a deeper third tone.

## 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-019ef937-5038-7d11-ba0c-f3e04ab3abf1/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 Build every surface as a lit tissue sheet over a visible offset backing sheet.
- Do Let overlapping colours multiply into a deeper third tone; that is the signature.
- Do Keep the warm cream page; use the three colours like luminous highlighters.
- Do Use rotated tape-strip labels for captions, and keep one button clearly primary.
- Don't Do not use hard ink borders, single-accent card edges, or nested cards.
- Don't Do not trap the nav in a floating pill bar; let it sit openly across the header.
- Don't Do not let overlaps go grey or muddy; they deepen, they do not dull.
- Don't Do not use glassmorphism, neon glow, metallic gradients, or cold grayscale panels.

### Accessibility

Body 17px+, table rows 15px, warm ink on cream throughout for high contrast. Every form control is explicitly styled with a visible 3px tomato focus outline. Motion is gated behind a JS class and reduced under prefers-reduced-motion; the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

glassine

### Summary

Images are built entirely from thin translucent dyed-tissue sheets that multiply where they overlap, with soft glue-wash edges and crinkle fibre texture, over a warm cream paper ground. The landing hero is a suncatcher landscape rendered in that technique.

### Subjects

- suncatcher landscapes
- suns
- rolling hills
- trees
- clouds
- small cottages
- leaves and gardens

### Usage

Use the glassine technique for the full-bleed landing hero and any scene illustration; keep generous calm sky area for legible overlays. Never render the apparatus (scissors, glue, brush); never add text or borders.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "suncatcher",
  "type": "registry:theme",
  "title": "Suncatcher shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F6ECD6",
      "foreground": "#2E2117",
      "card": "#FFF8EC",
      "card-foreground": "#2E2117",
      "popover": "#FFF8EC",
      "popover-foreground": "#2E2117",
      "primary": "#2E2117",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8A7560",
      "muted-foreground": "#2E2117",
      "accent": "#E8513E",
      "accent-foreground": "#ffffff",
      "destructive": "#CB4A3C",
      "border": "#E6D6B8",
      "input": "#E6D6B8",
      "ring": "#E8513E",
      "chart-1": "#2E2117",
      "chart-2": "#f4f4f5",
      "chart-3": "#E8513E",
      "chart-4": "#4FA45C",
      "chart-5": "#E0902A",
      "sidebar": "#FFF8EC",
      "sidebar-foreground": "#2E2117",
      "sidebar-primary": "#2E2117",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#4F8FCB",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E6D6B8",
      "sidebar-ring": "#E8513E",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2E2117",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E8513E",
      "accent-foreground": "#ffffff",
      "destructive": "#CB4A3C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E8513E",
      "chart-1": "#2E2117",
      "chart-2": "#f4f4f5",
      "chart-3": "#E8513E",
      "chart-4": "#4FA45C",
      "chart-5": "#E0902A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2E2117",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E8513E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E8513E",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef937-5038-7d11-ba0c-f3e04ab3abf1",
    "slug": "suncatcher",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "leaf",
        "marigold",
        "muted",
        "on_accent",
        "overlap_sky_leaf",
        "overlap_sun_leaf",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "card",
        "full",
        "none",
        "soft"
      ],
      "shadows": [
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```