design language·gust

Gust

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Published

Download DESIGN.md

Portable DESIGN.md source of truth for most agents and apps.

the spec

specification

philosophy

summary

A Swiss-International editorial newspaper system reframed as a single-sheet civic broadsheet for Children's Day. The koinobori is the masthead device and the wind is the grid: columns gust — a measured rag where the baseline grid stays rigid but the structural column rules lean a few degrees like streamers in wind. The ownable idea is the WIND-RAG, a disciplined diagonal that lives only in the rules and dividers, never in the type. It serves the official festival gazette and press kit for a municipal Kodomo no Hi celebration: grown-up, journalistic, content-dense.

values

The Wind-Rag — structural hairline column rules canted ~7deg; components dock to themType and images stay orthogonal and legible; the cant is structure, never decorationThree highlighter accents on a warm newsprint ground; accents never floodGazette density — listings alternate with bands of newsprint silenceGrown-up and journalistic; a children's festival treated with a city's care

anti-values

×Canting the type or letting the diagonal touch words and images×Accent colour as a background flood or pastel wash×Single accent edges on cards or nav trapped in a pill bar×Childish, cluttered, or toy-like treatments×Heavy borders or boxed cards used as chrome

tokens

colors17 items

#FCFCFA

surface

#F2F1EC

surface-2

#FFFFFF

text

#121212

muted

#5E625C

border

#121212

hairline

#CBCAC2

accent

#2FD06A

on-accent

#0A1A10

accent-2

#19C2FF

on-accent-2

#06212C

accent-3

#FF4733

on-accent-3

#FFFFFF

success

#2FD06A

warning

#C98A00

error

#FF4733

info

#19C2FF

typography8 items

base size: 17px
body font: Newsreader
heading font: Archivo
mono font: IBM Plex Mono
heading weight: 800
heading transform: none
letter spacing: -0.02em
google fonts url: https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap

radii5 items

base: 0px
card: 16px
lg: 24px
pill: 9999px
scale: 0, 16, 24, 9999

shadows1 items

none: none

spacing2 items

base: 8px
scale: 4, 8, 12, 16, 24, 32, 48, 64, 96

surfaces3 items

ground: #FCFCFA
paper: #F2F1EC
figure-grid: faint canted column hairlines at 96deg on warm newsprint

borders3 items

hairline: 1px solid #CBCAC2
ink-rule: 2.5px solid #121212
leaf-rule: 2.5px solid #2FD06A

motion3 items

reveal: settled by default; inline script gates a translateY+fade reveal behind .pe; respects prefers-reduced-motion
duration: 0.55s–0.7s ease
cant: the only diagonal is the -7deg wind-rag on rules; nothing animates the type

rules

composition

Canonical multi-column newspaper grid, up to 5 columns on desktop, 1280px cap; the wind-rag cant applies to column rules and section dividers only; type and images stay orthogonal.

hierarchy

Built from type size, position, and the rag — not colour. Leaf-green is the live/active mark and primary; cyan-sky is links and secondary tags; vermilion is a single masthead pop and error only.

density

Dense gazette listings alternating with 64px+ bands of newsprint silence; padding always above titles.

signature

The Wind-Rag: structural hairline column rules canted -7deg that components dock to — column slips defined by one full-height canted hairline, letterpress chips with a canted rule beneath, form underlines that tip into the cant on focus, running-kicker nav underscored by a short canted leaf rule. Mapped to role vars so it recolours on palette swap.

layout

grid

Up to 5-column newspaper grid, 32px gutter, fixed baseline; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing.

whitespace

White-led warm newsprint; generous even margins; full-bleed front-page hero only on the landing.

density

Comfortable-to-dense gazette

responsive

Folds to a single column on mobile; the cant survives only as a short rule-flourish under headings; hides non-essential nav and table columns; caps and centres contained content on ultra-wide; full-bleed hero spans 100vw.

breakpoints

mobile: 390px
tablet: 640px
wide: 880px
ultra: 1280px

guidance

Cant only the structural rules and dividers ~7deg; keep all type and images orthogonal
Define cards as column slips — one full-height canted hairline on the wind side, air elsewhere
Put a canted rule beneath every letterpress chip; primary is a leaf-ink knockout
Tip form underlines into the cant on focus; float mono labels above
Use the three accents as highlighters — kicker dot, underscore, knockout chip

avoid

Don't cant the type or let the diagonal touch words and images
Don't let an accent become a background wash; keep the ground warm newsprint
Don't give a card a single accent edge or trap the nav in a pill bar
Don't make it childish, cluttered, or toy-like
Don't use arbitrary in-between radii — GUST is a square, 0-radius system

imagery

pairs with

kazami

summary

Documentary photographs reproduced as high-contrast risograph prints: a coarse black halftone photo-plate, one offset leaf-green spot plate and a translucent sky-blue plate drifting a few pixels off-register so the image reads as caught in the wind, with warm uncoated paper tooth showing through. Atmospheric and layered, never a flat silhouette.

subjects

koinobori carp streamers snapping in wind over a civic riverbanka documentary crowd of families along the embankmentward installation streets and the festival pavilionlantern-night closing scenes at the river mouth

usage

Hero = one full-bleed front-page photo well of streamers over the bank, with the lower-left opening to a calmer well for the masthead overlay. Product imagery sits in square specimen wells on the faint canted column field.

katagami spec

# Gust

## Philosophy

A Swiss-International editorial newspaper system reframed as a single-sheet civic broadsheet for Children's Day. The koinobori is the masthead device and the wind is the grid: columns gust — a measured rag where the baseline grid stays rigid but the structural column rules lean a few degrees like streamers in wind. The ownable idea is the WIND-RAG, a disciplined diagonal that lives only in the rules and dividers, never in the type. It serves the official festival gazette and press kit for a municipal Kodomo no Hi celebration: grown-up, journalistic, content-dense.

### Values

- The Wind-Rag — structural hairline column rules canted ~7deg; components dock to them
- Type and images stay orthogonal and legible; the cant is structure, never decoration
- Three highlighter accents on a warm newsprint ground; accents never flood
- Gazette density — listings alternate with bands of newsprint silence
- Grown-up and journalistic; a children's festival treated with a city's care

### Anti-Values

- Canting the type or letting the diagonal touch words and images
- Accent colour as a background flood or pastel wash
- Single accent edges on cards or nav trapped in a pill bar
- Childish, cluttered, or toy-like treatments
- Heavy borders or boxed cards used as chrome

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FCFCFA` |
| surface | `#F2F1EC` |
| surface-2 | `#FFFFFF` |
| text | `#121212` |
| muted | `#5E625C` |
| border | `#121212` |
| hairline | `#CBCAC2` |
| accent | `#2FD06A` |
| on-accent | `#0A1A10` |
| accent-2 | `#19C2FF` |
| on-accent-2 | `#06212C` |
| accent-3 | `#FF4733` |
| on-accent-3 | `#FFFFFF` |
| success | `#2FD06A` |
| warning | `#C98A00` |
| error | `#FF4733` |
| info | `#19C2FF` |

### Typography

- **Base Size**: 17px
- **Body Font**: Newsreader
- **Heading Font**: Archivo
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Radii

- **Base**: 0px
- **Card**: 16px
- **Lg**: 24px
- **Pill**: 9999px
- **Scale**: [0,16,24,9999]

### Shadows

- **None**: none

### Spacing

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

### Surfaces

- **Ground**: #FCFCFA
- **Paper**: #F2F1EC
- **Figure-Grid**: faint canted column hairlines at 96deg on warm newsprint

### Borders

- **Hairline**: 1px solid #CBCAC2
- **Ink-Rule**: 2.5px solid #121212
- **Leaf-Rule**: 2.5px solid #2FD06A

### Motion

- **Reveal**: settled by default; inline script gates a translateY+fade reveal behind .pe; respects prefers-reduced-motion
- **Duration**: 0.55s–0.7s ease
- **Cant**: the only diagonal is the -7deg wind-rag on rules; nothing animates the type

## Rules

### Composition

Canonical multi-column newspaper grid, up to 5 columns on desktop, 1280px cap; the wind-rag cant applies to column rules and section dividers only; type and images stay orthogonal.

### Hierarchy

Built from type size, position, and the rag — not colour. Leaf-green is the live/active mark and primary; cyan-sky is links and secondary tags; vermilion is a single masthead pop and error only.

### Density

Dense gazette listings alternating with 64px+ bands of newsprint silence; padding always above titles.

### Signature

The Wind-Rag: structural hairline column rules canted -7deg that components dock to — column slips defined by one full-height canted hairline, letterpress chips with a canted rule beneath, form underlines that tip into the cant on focus, running-kicker nav underscored by a short canted leaf rule. Mapped to role vars so it recolours on palette swap.

## Layout

### Grid

Up to 5-column newspaper grid, 32px gutter, fixed baseline; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing.

### Whitespace

White-led warm newsprint; generous even margins; full-bleed front-page hero only on the landing.

### Density

Comfortable-to-dense gazette

### Responsive

Folds to a single column on mobile; the cant survives only as a short rule-flourish under headings; hides non-essential nav and table columns; caps and centres contained content on ultra-wide; full-bleed hero spans 100vw.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 640px
- **Wide**: 880px
- **Ultra**: 1280px

## Guidance

### Do

- Cant only the structural rules and dividers ~7deg; keep all type and images orthogonal
- Define cards as column slips — one full-height canted hairline on the wind side, air elsewhere
- Put a canted rule beneath every letterpress chip; primary is a leaf-ink knockout
- Tip form underlines into the cant on focus; float mono labels above
- Use the three accents as highlighters — kicker dot, underscore, knockout chip

### Don't

- Don't cant the type or let the diagonal touch words and images
- Don't let an accent become a background wash; keep the ground warm newsprint
- Don't give a card a single accent edge or trap the nav in a pill bar
- Don't make it childish, cluttered, or toy-like
- Don't use arbitrary in-between radii — GUST is a square, 0-radius system

### Accessibility

Ink on newsprint and ink on leaf/cyan clear WCAG AA; vermilion is reserved so it never carries primary meaning; focus is a 3px cyan-sky outline at 3px offset; the settled page renders with no JavaScript; honours prefers-reduced-motion.

## Imagery Direction

### Pairs With

kazami

### Summary

Documentary photographs reproduced as high-contrast risograph prints: a coarse black halftone photo-plate, one offset leaf-green spot plate and a translucent sky-blue plate drifting a few pixels off-register so the image reads as caught in the wind, with warm uncoated paper tooth showing through. Atmospheric and layered, never a flat silhouette.

### Subjects

- koinobori carp streamers snapping in wind over a civic riverbank
- a documentary crowd of families along the embankment
- ward installation streets and the festival pavilion
- lantern-night closing scenes at the river mouth

### Usage

Hero = one full-bleed front-page photo well of streamers over the bank, with the lower-left opening to a calmer well for the masthead overlay. Product imagery sits in square specimen wells on the faint canted column field.

DESIGN.md

---
version: "alpha"
name: "Gust"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FCFCFA"
  surface: "#F2F1EC"
  surface-2: "#FFFFFF"
  text: "#121212"
  muted: "#5E625C"
  border: "#121212"
  hairline: "#CBCAC2"
  accent: "#2FD06A"
  on-accent: "#0A1A10"
  accent-2: "#19C2FF"
  on-accent-2: "#06212C"
  accent-3: "#FF4733"
  on-accent-3: "#FFFFFF"
  success: "#2FD06A"
  warning: "#C98A00"
  error: "#FF4733"
  info: "#19C2FF"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Newsreader"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  base: "0px"
  card: "16px"
  lg: "24px"
  pill: "9999px"
  scale: "0px"
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-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-hairline:
    backgroundColor: "{colors.hairline}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on-accent:
    backgroundColor: "{colors.on-accent}"
  color-reference-accent-2:
    backgroundColor: "{colors.accent-2}"
  color-reference-on-accent-2:
    backgroundColor: "{colors.on-accent-2}"
  color-reference-accent-3:
    backgroundColor: "{colors.accent-3}"
  color-reference-on-accent-3:
    backgroundColor: "{colors.on-accent-3}"
  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.lg}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    height: "44px"
---

# Gust

## Overview

A Swiss-International editorial newspaper system reframed as a single-sheet civic broadsheet for Children's Day. The koinobori is the masthead device and the wind is the grid: columns gust — a measured rag where the baseline grid stays rigid but the structural column rules lean a few degrees like streamers in wind. The ownable idea is the WIND-RAG, a disciplined diagonal that lives only in the rules and dividers, never in the type. It serves the official festival gazette and press kit for a municipal Kodomo no Hi celebration: grown-up, journalistic, content-dense.

### Values

- The Wind-Rag — structural hairline column rules canted ~7deg; components dock to them
- Type and images stay orthogonal and legible; the cant is structure, never decoration
- Three highlighter accents on a warm newsprint ground; accents never flood
- Gazette density — listings alternate with bands of newsprint silence
- Grown-up and journalistic; a children's festival treated with a city's care

### Anti-Values

- Canting the type or letting the diagonal touch words and images
- Accent colour as a background flood or pastel wash
- Single accent edges on cards or nav trapped in a pill bar
- Childish, cluttered, or toy-like treatments
- Heavy borders or boxed cards used as chrome

## 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 | `#FCFCFA` |
| surface | `#F2F1EC` |
| surface-2 | `#FFFFFF` |
| text | `#121212` |
| muted | `#5E625C` |
| border | `#121212` |
| hairline | `#CBCAC2` |
| accent | `#2FD06A` |
| on-accent | `#0A1A10` |
| accent-2 | `#19C2FF` |
| on-accent-2 | `#06212C` |
| accent-3 | `#FF4733` |
| on-accent-3 | `#FFFFFF` |
| success | `#2FD06A` |
| warning | `#C98A00` |
| error | `#FF4733` |
| info | `#19C2FF` |

## Typography

- **Headline-Lg**: Archivo, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Newsreader, 17px, weight 400, line-height 1.5.
- **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`
- **Step-8**: `96px`

### Grid

Up to 5-column newspaper grid, 32px gutter, fixed baseline; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing.

### Whitespace

White-led warm newsprint; generous even margins; full-bleed front-page hero only on the landing.

### Density

Comfortable-to-dense gazette

### Responsive

Folds to a single column on mobile; the cant survives only as a short rule-flourish under headings; hides non-essential nav and table columns; caps and centres contained content on ultra-wide; full-bleed hero spans 100vw.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 640px
- **Wide**: 880px
- **Ultra**: 1280px

## Elevation & Depth

### Shadows

- **None**: none

## Shapes

### Rounded

- **Base**: `0px`
- **Card**: `16px`
- **Lg**: `24px`
- **Pill**: `9999px`
- **Scale**: `0px`

### Surfaces

- **Ground**: #FCFCFA
- **Paper**: #F2F1EC
- **Figure-Grid**: faint canted column hairlines at 96deg on warm newsprint

### Borders

- **Hairline**: 1px solid #CBCAC2
- **Ink-Rule**: 2.5px solid #121212
- **Leaf-Rule**: 2.5px solid #2FD06A

## Components

### Composition

Canonical multi-column newspaper grid, up to 5 columns on desktop, 1280px cap; the wind-rag cant applies to column rules and section dividers only; type and images stay orthogonal.

### Hierarchy

Built from type size, position, and the rag — not colour. Leaf-green is the live/active mark and primary; cyan-sky is links and secondary tags; vermilion is a single masthead pop and error only.

### Density

Dense gazette listings alternating with 64px+ bands of newsprint silence; padding always above titles.

### Signature

The Wind-Rag: structural hairline column rules canted -7deg that components dock to — column slips defined by one full-height canted hairline, letterpress chips with a canted rule beneath, form underlines that tip into the cant on focus, running-kicker nav underscored by a short canted leaf rule. Mapped to role vars so it recolours on palette swap.

## 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-019efac2-94e8-7dc3-b14e-948c2390a8a9/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 Cant only the structural rules and dividers ~7deg; keep all type and images orthogonal
- Do Define cards as column slips — one full-height canted hairline on the wind side, air elsewhere
- Do Put a canted rule beneath every letterpress chip; primary is a leaf-ink knockout
- Do Tip form underlines into the cant on focus; float mono labels above
- Do Use the three accents as highlighters — kicker dot, underscore, knockout chip
- Don't Don't cant the type or let the diagonal touch words and images
- Don't Don't let an accent become a background wash; keep the ground warm newsprint
- Don't Don't give a card a single accent edge or trap the nav in a pill bar
- Don't Don't make it childish, cluttered, or toy-like
- Don't Don't use arbitrary in-between radii — GUST is a square, 0-radius system

### Accessibility

Ink on newsprint and ink on leaf/cyan clear WCAG AA; vermilion is reserved so it never carries primary meaning; focus is a 3px cyan-sky outline at 3px offset; the settled page renders with no JavaScript; honours prefers-reduced-motion.

## Imagery Direction

### Pairs With

kazami

### Summary

Documentary photographs reproduced as high-contrast risograph prints: a coarse black halftone photo-plate, one offset leaf-green spot plate and a translucent sky-blue plate drifting a few pixels off-register so the image reads as caught in the wind, with warm uncoated paper tooth showing through. Atmospheric and layered, never a flat silhouette.

### Subjects

- koinobori carp streamers snapping in wind over a civic riverbank
- a documentary crowd of families along the embankment
- ward installation streets and the festival pavilion
- lantern-night closing scenes at the river mouth

### Usage

Hero = one full-bleed front-page photo well of streamers over the bank, with the lower-left opening to a calmer well for the masthead overlay. Product imagery sits in square specimen wells on the faint canted column field.

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gust",
  "type": "registry:theme",
  "title": "Gust shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FCFCFA",
      "foreground": "#121212",
      "card": "#F2F1EC",
      "card-foreground": "#121212",
      "popover": "#F2F1EC",
      "popover-foreground": "#121212",
      "primary": "#121212",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5E625C",
      "muted-foreground": "#121212",
      "accent": "#2FD06A",
      "accent-foreground": "#ffffff",
      "destructive": "#FF4733",
      "border": "#121212",
      "input": "#121212",
      "ring": "#2FD06A",
      "chart-1": "#121212",
      "chart-2": "#f4f4f5",
      "chart-3": "#2FD06A",
      "chart-4": "#2FD06A",
      "chart-5": "#C98A00",
      "sidebar": "#F2F1EC",
      "sidebar-foreground": "#121212",
      "sidebar-primary": "#121212",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#19C2FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#121212",
      "sidebar-ring": "#2FD06A",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#121212",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#2FD06A",
      "accent-foreground": "#ffffff",
      "destructive": "#FF4733",
      "border": "#303642",
      "input": "#303642",
      "ring": "#2FD06A",
      "chart-1": "#121212",
      "chart-2": "#f4f4f5",
      "chart-3": "#2FD06A",
      "chart-4": "#2FD06A",
      "chart-5": "#C98A00",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#121212",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2FD06A",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#2FD06A",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efac2-94e8-7dc3-b14e-948c2390a8a9",
    "slug": "gust",
    "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-3",
        "bg",
        "border",
        "error",
        "hairline",
        "info",
        "muted",
        "on-accent",
        "on-accent-2",
        "on-accent-3",
        "success",
        "surface",
        "surface-2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "base",
        "card",
        "lg",
        "pill",
        "scale"
      ],
      "shadows": [
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "figure-grid",
        "ground",
        "paper"
      ],
      "borders": [
        "hairline",
        "ink-rule",
        "leaf-rule"
      ],
      "motion": [
        "cant",
        "duration",
        "reveal"
      ]
    }
  }
}
```

in the wild

embodiments

bespoke marketing landingopen full page ↗

landing · gust

DESIGN.md

at a glance

Typography

headline-lgArchivo · 33px · 700

The quick brown fox jumps

headline-mdArchivo · 27px · 600

The quick brown fox jumps

body-mdNewsreader · 17px · 400

The quick brown fox jumps

label-mdIBM Plex Mono · 12px · 600

The quick brown fox jumps

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.

advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #FCFCFA;
  --foreground: #121212;
  --card: #F2F1EC;
  --card-foreground: #121212;
  --popover: #F2F1EC;
  --popover-foreground: #121212;
  --primary: #121212;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #5E625C;
  --muted-foreground: #121212;
  --accent: #2FD06A;
  --accent-foreground: #ffffff;
  --destructive: #FF4733;
  --border: #121212;
  --input: #121212;
  --ring: #2FD06A;
  --chart-1: #121212;
  --chart-2: #f4f4f5;
  --chart-3: #2FD06A;
  --chart-4: #2FD06A;
  --chart-5: #C98A00;
  --sidebar: #F2F1EC;
  --sidebar-foreground: #121212;
  --sidebar-primary: #121212;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #19C2FF;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #121212;
  --sidebar-ring: #2FD06A;
  --radius: 24px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #121212;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #2FD06A;
  --accent-foreground: #ffffff;
  --destructive: #FF4733;
  --border: #303642;
  --input: #303642;
  --ring: #2FD06A;
  --chart-1: #121212;
  --chart-2: #f4f4f5;
  --chart-3: #2FD06A;
  --chart-4: #2FD06A;
  --chart-5: #C98A00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #121212;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2FD06A;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #303642;
  --sidebar-ring: #2FD06A;
  --radius: 24px;
}

tsx starter

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function GustShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Gust</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

theme JSONstored

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gust",
  "type": "registry:theme",
  "cssVars": {
    "theme": {
      "font-sans": "Archivo, 'Helvetica Neue', Arial, sans-serif",
      "font-serif": "Newsreader, Georgia, serif",
      "font-mono": "'IBM Plex Mono', ui-monospace, Menlo, monospace",
      "radius": "0px"
    },
    "light": {
      "background": "#FCFCFA",
      "foreground": "#121212",
      "card": "#FFFFFF",
      "card-foreground": "#121212",
      "popover": "#FFFFFF",
      "popover-foreground": "#121212",
      "primary": "#2FD06A",
      "primary-foreground": "#0A1A10",
      "secondary": "#F2F1EC",
      "secondary-foreground": "#121212",
      "muted": "#F2F1EC",
      "muted-foreground": "#5E625C",
      "accent": "#19C2FF",
      "accent-foreground": "#06212C",
      "destructive": "#FF4733",
      "destructive-foreground": "#FFFFFF",
      "border": "#CBCAC2",
      "input": "#CBCAC2",
      "ring": "#2FD06A",
      "chart-1": "#2FD06A",
      "chart-2": "#19C2FF",
      "chart-3": "#FF4733",
      "chart-4": "#5E625C",
      "chart-5": "#121212"
    },
    "dark": {
      "background": "#121212",
      "foreground": "#F2F1EC",
      "card": "#1A1A1A",
      "card-foreground": "#F2F1EC",
      "popover": "#1A1A1A",
      "popover-foreground": "#F2F1EC",
      "primary": "#2FD06A",
      "primary-foreground": "#0A1A10",
      "secondary": "#222220",
      "secondary-foreground": "#F2F1EC",
      "muted": "#222220",
      "muted-foreground": "#9FA39B",
      "accent": "#19C2FF",
      "accent-foreground": "#06212C",
      "destructive": "#FF4733",
      "destructive-foreground": "#FFFFFF",
      "border": "#2C2E2B",
      "input": "#2C2E2B",
      "ring": "#2FD06A",
      "chart-1": "#2FD06A",
      "chart-2": "#19C2FF",
      "chart-3": "#FF4733",
      "chart-4": "#9FA39B",
      "chart-5": "#F2F1EC"
    }
  }
}

component recipescompatibility fallback

# Gust shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efac2-94e8-7dc3-b14e-948c2390a8a9`
Slug: `gust`

## Intent

A Swiss-International editorial newspaper system reframed as a single-sheet civic broadsheet for Children's Day. The koinobori is the masthead device and the wind is the grid: columns gust — a measured rag where the baseline grid stays rigid but the structural column rules lean a few degrees like streamers in wind. The ownable idea is the WIND-RAG, a disciplined diagonal that lives only in the rules and dividers, never in the type. It serves the official festival gazette and press kit for a municipal Kodomo no Hi celebration: grown-up, journalistic, content-dense.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

## Token cues

Colors:

{
  "bg": "#FCFCFA",
  "surface": "#F2F1EC",
  "surface-2": "#FFFFFF",
  "text": "#121212",
  "muted": "#5E625C",
  "border": "#121212",
  "hairline": "#CBCAC2",
  "accent": "#2FD06A",
  "on-accent": "#0A1A10",
  "accent-2": "#19C2FF",
  "on-accent-2": "#06212C",
  "accent-3": "#FF4733",
  "on-accent-3": "#FFFFFF",
  "success": "#2FD06A",
  "warning": "#C98A00",
  "error": "#FF4733",
  "info": "#19C2FF"
}

Typography:

{
  "base_size": "17px",
  "body_font": "Newsreader",
  "heading_font": "Archivo",
  "mono_font": "IBM Plex Mono",
  "heading_weight": "800",
  "heading_transform": "none",
  "letter_spacing": "-0.02em",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
}

## Visual character to preserve

- Make the source language's structural identity visible in every component state.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": true,
  "stickerBadges": false,
  "motion": "still",
  "density": "balanced",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/gust/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Cant only the structural rules and dividers ~7deg; keep all type and images orthogonal; Define cards as column slips — one full-height canted hairline on the wind side, air elsewhere; Put a canted rule beneath every letterpress chip; primary is a leaf-ink knockout; Tip form underlines into the cant on focus; float mono labels above; Use the three accents as highlighters — kicker dot, underscore, knockout chip
- Do not: Don't cant the type or let the diagonal touch words and images; Don't let an accent become a background wash; keep the ground warm newsprint; Don't give a card a single accent edge or trap the nav in a pill bar; Don't make it childish, cluttered, or toy-like; Don't use arbitrary in-between radii — GUST is a square, 0-radius system

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function GustShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Gust</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}
```

## Layout notes

{
  "grid": "Up to 5-column newspaper grid, 32px gutter, fixed baseline; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing.",
  "whitespace": "White-led warm newsprint; generous even margins; full-bleed front-page hero only on the landing.",
  "density": "Comfortable-to-dense gazette",
  "responsive": "Folds to a single column on mobile; the cant survives only as a short rule-flourish under headings; hides non-essential nav and table columns; caps and centres contained content on ultra-wide; full-bleed hero spans 100vw.",
  "breakpoints": {
    "mobile": "390px",
    "tablet": "640px",
    "wide": "880px",
    "ultra": "1280px"
  }
}

preview shotscompatibility fallback

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019efac2-94e8-7dc3-b14e-948c2390a8a9",
    "name": "Gust",
    "slug": "gust"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Gust launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Cant only the structural rules and dividers ~7deg; keep all type and images orthogonal",
      "Define cards as column slips — one full-height canted hairline on the wind side, air elsewhere",
      "Put a canted rule beneath every letterpress chip; primary is a leaf-ink knockout",
      "Tip form underlines into the cant on focus; float mono labels above",
      "Use the three accents as highlighters — kicker dot, underscore, knockout chip"
    ],
    "dont": [
      "Don't cant the type or let the diagonal touch words and images",
      "Don't let an accent become a background wash; keep the ground warm newsprint",
      "Don't give a card a single accent edge or trap the nav in a pill bar",
      "Don't make it childish, cluttered, or toy-like",
      "Don't use arbitrary in-between radii — GUST is a square, 0-radius system"
    ]
  }
}

built with

Art styleKazamirisograph printView art style

Palette

Agent-generated

produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by gpt-image-2

remix lane

try a remix

Keep Gustand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.

UI language · fixed

Gust

Palette

Art style

Landing PageGust · Transformative teal + Adaptive violet · Cyanotype

live preview · recolored + filled

More like this

Noborishares kodomo-no-hi · koinobori · civic Pennantshares kodomo-no-hi · koinobori Kunpushares kodomo-no-hi · koinobori Konkretnearest in taste Plumbshares koinobori Civic Pressshares civic