Chiclet

# Chiclet

## Philosophy

Chiclet builds pages the way you'd cover a bright corkboard under an open sky: matte-translucent sticky-notes scattered by hand, paper-collage cutouts telling a launch story, and dashed journey-lines connecting the pieces. Everything is arranged, never gridded; alive, never busy; playful, never kitsch.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F4F7FB` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#151719` |
| muted | `#697180` |
| border | `rgba(24,30,46,0.10)` |
| accent | `#35E0C4` |
| accent_2 | `#B7FF3B` |
| accent_soft | `rgba(53,224,196,0.19)` |
| on_accent | `#141414` |
| success | `#1F8F4E` |
| warning | `#C77B0E` |
| error | `#C94B4B` |
| info | `#1D7B6C` |
| accent_3 | `#FF5FB4` |
| accent_shade | `#1D7B6C` |
| accent_2_shade | `#52731B` |
| accent_3_shade | `#B2427E` |

### Typography

- **Base Size**: 17px
- **Body Font**: Manrope
- **Heading Font**: Unbounded
- **Mono Font**: Sometype Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.55
- **Scale Ratio**: 1.24
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Sometype+Mono:wght@400;500;600;700&display=swap

### Radii

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

### Shadows

- **Sm**: 0 2px 6px rgba(24,30,46,.05)
- **Md**: 0 6px 20px rgba(24,30,46,.08),0 2px 6px rgba(24,30,46,.05)
- **Lg**: 0 16px 40px rgba(24,30,46,.16),0 4px 10px rgba(24,30,46,.06)

### Spacing

- **Base**: 22px
- **Scale**: generous; titles always padded above; sections clamp(44px,5.5vw,76px)

### Surfaces

- **Treatment**: matte-translucent pinned notes (rgba(255,255,255,.58) + accent wash over backdrop-blur(6px)); overlapping washes blend; imagery tucks behind the frost
- **Card Style**: borderless note with gloss pin, folded corner, 5px sticky-note radius; taped variant swaps the pin for translucent tape
- **Bg Pattern**: cool near-white ground with a barely-there dotted corkboard grid (radial-gradient dots, 26px)

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: no borders ever — hierarchy from space, tint and one soft shadow

### Motion

- **Duration**: .3s (micro) / .6s (reveals)
- **Easing**: cubic-bezier(.2,.85,.25,1)
- **Philosophy**: scroll-driven story: flyers ride drawn journey-lines nose-first; reveals settle like pinned paper; everything gated so no-JS and reduced-motion get the finished page

## Rules

### Do

- Let overlapping notes blend — the material is the language
- Tuck imagery behind frosted paper wherever it meets copy
- Draw journey-lines from real element geometry; anchor to asset alpha
- Give every cutout a story job; let every motif recur
- Hand-scatter the board; keep an open corridor for the leading line
- Body >=17px, micro >=13px, high contrast, titles padded above
- One primary button per view; buttons never wrap

### Dont

- No borders, especially grey; no decorative sidelines
- No emoji on buttons; no symbol glyphs in copy
- No pastel washes, no decorative gradients, no muddy colour
- No shrunken cutouts — recur with lines and dots instead
- No flyer without its line; no line that doesn't connect real points
- No straight rows where a pinned wall should be
- No serifs; no Inter/Roboto/Poppins-class generics
- No bounce/elastic easing; nothing hidden without JS

## Layout

### Summary

Corkboard scatter over a strict responsive skeleton.

### Principles

- Content caps at 1280 and centres on wide screens; only heroes and seam-bridging cutouts bleed
- Board: absolute 2D scatter >=1200px (curator's arrangement is the default; visitor drags persist), compact overlapping cascade below
- Stats/features/steps/pricing all stagger — rotation +-1.5-3.5deg, offset 6-38px; pricing pins the middle plan proud
- Sections pad clamp(44px,5.5vw,76px); note grids gutter 22px; zero horizontal overflow 390-2560 (overflow-x clip at the root)
- Cutouts may bridge section seams deliberately — fully visible, never accidentally clipped

## Guidance

### Summary

Use Chiclet when information should feel arranged by hand — idea boards, planning tools, directories, briefs, dashboards.

### Notes

- Ship the live Style panel on embodiments and dashboards, not marketing landings (a landing commits to Y2K Aqua)
- The palette engine derives AA shades, washes and pins from raw primaries — feed it hexes only
- The three.js confetti field and Lenis smooth scroll are progressive enhancements with static fallbacks
- Interactive props stay honest: bulb lights when reached, balloon leaves as its section does, notes drag and remember

## Imagery Direction

### Pairs With

mixed-media-pop

### Summary

Paper-collage cutouts placed directly on the page — cut construction paper, translucent cellophane and polyethylene film, glossy tape, crinkled foil, sticker dots, torn edges — in the live palette, background-removed, one soft drop-shadow, no boxes or frames. Objects carry the page's story (rocket to star, plane to flag, bulb as the idea, clouds as the sky) and tuck behind the frosted notes wherever they meet copy.

---
version: "alpha"
name: "Chiclet"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#F4F7FB"
  surface: "#FFFFFF"
  surface_solid: "#FFFFFF"
  text: "#151719"
  muted: "#697180"
  accent: "#35E0C4"
  accent_2: "#B7FF3B"
  on_accent: "#141414"
  success: "#1F8F4E"
  warning: "#C77B0E"
  error: "#C94B4B"
  info: "#1D7B6C"
  accent_3: "#FF5FB4"
  accent_shade: "#1D7B6C"
  accent_2_shade: "#52731B"
  accent_3_shade: "#B2427E"
typography:
  headline-lg:
    fontFamily: "Unbounded"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Unbounded"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Manrope"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Sometype Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
  note_exception: "5px"
spacing:
  base: "22px"
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-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  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}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  color-reference-accent_shade:
    backgroundColor: "{colors.accent_shade}"
  color-reference-accent_2_shade:
    backgroundColor: "{colors.accent_2_shade}"
  color-reference-accent_3_shade:
    backgroundColor: "{colors.accent_3_shade}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Chiclet

## Overview

Chiclet builds pages the way you'd cover a bright corkboard under an open sky: matte-translucent sticky-notes scattered by hand, paper-collage cutouts telling a launch story, and dashed journey-lines connecting the pieces. Everything is arranged, never gridded; alive, never busy; playful, never kitsch.

## 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 | `#F4F7FB` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#151719` |
| muted | `#697180` |
| accent | `#35E0C4` |
| accent_2 | `#B7FF3B` |
| on_accent | `#141414` |
| success | `#1F8F4E` |
| warning | `#C77B0E` |
| error | `#C94B4B` |
| info | `#1D7B6C` |
| accent_3 | `#FF5FB4` |
| accent_shade | `#1D7B6C` |
| accent_2_shade | `#52731B` |
| accent_3_shade | `#B2427E` |

## Typography

- **Headline-Lg**: Unbounded, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Unbounded, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Manrope, 17px, weight 400, line-height 1.5.
- **Label-Md**: Sometype Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `22px`

### Summary

Corkboard scatter over a strict responsive skeleton.

### Principles

- Content caps at 1280 and centres on wide screens; only heroes and seam-bridging cutouts bleed
- Board: absolute 2D scatter >=1200px (curator's arrangement is the default; visitor drags persist), compact overlapping cascade below
- Stats/features/steps/pricing all stagger — rotation +-1.5-3.5deg, offset 6-38px; pricing pins the middle plan proud
- Sections pad clamp(44px,5.5vw,76px); note grids gutter 22px; zero horizontal overflow 390-2560 (overflow-x clip at the root)
- Cutouts may bridge section seams deliberately — fully visible, never accidentally clipped

## Elevation & Depth

### Shadows

- **Sm**: 0 2px 6px rgba(24,30,46,.05)
- **Md**: 0 6px 20px rgba(24,30,46,.08),0 2px 6px rgba(24,30,46,.05)
- **Lg**: 0 16px 40px rgba(24,30,46,.16),0 4px 10px rgba(24,30,46,.06)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: matte-translucent pinned notes (rgba(255,255,255,.58) + accent wash over backdrop-blur(6px)); overlapping washes blend; imagery tucks behind the frost
- **Card Style**: borderless note with gloss pin, folded corner, 5px sticky-note radius; taped variant swaps the pin for translucent tape
- **Bg Pattern**: cool near-white ground with a barely-there dotted corkboard grid (radial-gradient dots, 26px)

### Borders

- **Default Width**: 0
- **Accent Width**: 0
- **Style**: none
- **Character**: no borders ever — hierarchy from space, tint and one soft shadow

## Components

### Do

- Let overlapping notes blend — the material is the language
- Tuck imagery behind frosted paper wherever it meets copy
- Draw journey-lines from real element geometry; anchor to asset alpha
- Give every cutout a story job; let every motif recur
- Hand-scatter the board; keep an open corridor for the leading line
- Body >=17px, micro >=13px, high contrast, titles padded above
- One primary button per view; buttons never wrap

### Dont

- No borders, especially grey; no decorative sidelines
- No emoji on buttons; no symbol glyphs in copy
- No pastel washes, no decorative gradients, no muddy colour
- No shrunken cutouts — recur with lines and dots instead
- No flyer without its line; no line that doesn't connect real points
- No straight rows where a pinned wall should be
- No serifs; no Inter/Roboto/Poppins-class generics
- No bounce/elastic easing; nothing hidden without JS

## 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-019f2b45-34c5-7c81-871a-526574dd70e8/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.

### Summary

Use Chiclet when information should feel arranged by hand — idea boards, planning tools, directories, briefs, dashboards.

### Notes

- Ship the live Style panel on embodiments and dashboards, not marketing landings (a landing commits to Y2K Aqua)
- The palette engine derives AA shades, washes and pins from raw primaries — feed it hexes only
- The three.js confetti field and Lenis smooth scroll are progressive enhancements with static fallbacks
- Interactive props stay honest: bulb lights when reached, balloon leaves as its section does, notes drag and remember

## Imagery Direction

### Pairs With

mixed-media-pop

### Summary

Paper-collage cutouts placed directly on the page — cut construction paper, translucent cellophane and polyethylene film, glossy tape, crinkled foil, sticker dots, torn edges — in the live palette, background-removed, one soft drop-shadow, no boxes or frames. Objects carry the page's story (rocket to star, plane to flag, bulb as the idea, clouds as the sky) and tuck behind the frosted notes wherever they meet copy.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chiclet",
  "type": "registry:theme",
  "title": "Chiclet shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F4F7FB",
      "foreground": "#151719",
      "card": "#FFFFFF",
      "card-foreground": "#151719",
      "popover": "#FFFFFF",
      "popover-foreground": "#151719",
      "primary": "#151719",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#697180",
      "muted-foreground": "#151719",
      "accent": "#35E0C4",
      "accent-foreground": "#111111",
      "destructive": "#C94B4B",
      "border": "rgba(24,30,46,0.10)",
      "input": "rgba(24,30,46,0.10)",
      "ring": "#35E0C4",
      "chart-1": "#151719",
      "chart-2": "#f4f4f5",
      "chart-3": "#35E0C4",
      "chart-4": "#1F8F4E",
      "chart-5": "#C77B0E",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#151719",
      "sidebar-primary": "#151719",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1D7B6C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(24,30,46,0.10)",
      "sidebar-ring": "#35E0C4",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#151719",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#35E0C4",
      "accent-foreground": "#111111",
      "destructive": "#C94B4B",
      "border": "#303642",
      "input": "#303642",
      "ring": "#35E0C4",
      "chart-1": "#151719",
      "chart-2": "#f4f4f5",
      "chart-3": "#35E0C4",
      "chart-4": "#1F8F4E",
      "chart-5": "#C77B0E",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#151719",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#35E0C4",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#35E0C4",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f2b45-34c5-7c81-871a-526574dd70e8",
    "slug": "chiclet",
    "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_2_shade",
        "accent_3",
        "accent_3_shade",
        "accent_shade",
        "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",
        "note_exception"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```