A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
A bunting-strung horizontal-rhythm grid, 1320px cap, 24px gutters; sections are anchored along implied strings with pennant-chips hung at regular intervals (a left-to-right festive cadence); content panels sit below the strings in a clean modular grid. Strong horizontal banding, generous vertical air, titles padded under their bunting line.
Built from type size, position, and the pennant chip — not coloured edges. Sky-blue marks wayfinding, the primary pennant, and the active tag; festival-green marks now-playing, go, and success; pennant-pink is the single hero CTA and the happening-now pulse, plus warning. Neon fills carry ink labels for contrast.
Comfortable-but-lively; padding always above titles; deliberate vertical air between horizontal bands.
The triangular pennant and the strung bunting-string are the mechanic as real components. A 2px string strung between anchors hangs triangular pennant-tags as labels, chips, filters, and active markers (clipped neon triangles, ink label). The primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from its right end, solid neon-blue with an ink label; secondary keeps the rectangle, drops the notch, goes to a thin ink outline. Cards are board panels — white, no border, with a single strung-bunting line of tiny neon triangles above the title inside its padding. Forms are rows of pennant-tabs; inputs carry a triangular neon caret-marker. Tables are stage schedules — the now-playing row flagged with a green pennant chip at its left, a hairline under the header only. Nav is a strung garland of word-tags, no box, the active tag a filled pennant triangle. Mapped to role vars so it recolours on palette swap.
Bunting-strung horizontal-rhythm grid, 24px gutter, 1320px cap; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing.
White-sky led; horizontal bands with generous vertical air; full-bleed top bunting-string and hero only on the landing.
Comfortable-but-lively
Collapses to a single column on mobile; chips collapse into a single horizontally scrollable garland row (no horizontal page overflow); schedules become scroll strips; hides non-essential nav tags; caps and centres contained content on ultra-wide; full-bleed bunting-string and hero span 100vw. The landing is re-art-directed at four breakpoints (wide, desktop, tablet, mobile).
knockout
Bright, airy flat cut-paper festival-poster scenes carried by clear early-summer light, in a knockout poster sensibility. A strung garland of triangular pennant bunting in vivid almost-neon sky-blue, festival-green, and a few hot-pink flags runs edge to edge across the top, like bright flags against a white sky; below sits a calm flat cut-paper riverbank festival ground — a curving river, fresh-green banks, simple geometric trees, low tents and a distant stage, with koinobori carp streamers riding high on poles. Atmospheric and bright, not flat-loud: the neon lives in the strung pennants and a few accent shapes while the rest is calm bright cut-paper on a white-led ground, with generous open sky for a headline overlay.
Hero = a full-bleed bright cut-paper festival-ground scene crowned by a strung neon-bunting garland, with generous open white sky in the upper-left and centre for the headline overlay (a pink pop on one word). Cards and avatars reuse the triangular pennant tag as a flat neon token on white grounds.
# Pennant ## Philosophy A kinetic banner / signage-system language that turns the strung bunting and the rigid directional pennant-flag of a festival ground into a wayfinding and live-schedule UI. The ownable idea is the strung bunting line: a 2px taut string from which triangular pennant-tags hang as labels, chips, filters, and active-state markers — a structural connector and a motion system, not an accent edge. Distinct from sibling wind languages: Pennant owns the flat triangular flag-shape and the strung garland as a repeatable structural module. It serves a sprawling outdoor Children's Day festival's wayfinding and what's-on-now board across five stages. Bright, airy early-summer Kodomo no Hi pushed into confident graphic signage — sleek and grown-up, never childish, with vivid almost-neon highlighter accents on a clean white-led ground. This revision keeps the identity and brings the execution to the cinematic-landing standard with an ink-on-neon accessibility pass. ### Values - The bunting string and the triangular pennant tag are real components, not decoration - Strung garland as a structural connector and a gentle motion system - Bright white-sky ground with three neon flag-colours used like highlighters - Strong horizontal banding — read the page left to right like a row of flags - Sleek and grown-up festival signage: composed placement of bright accent, never muddy ### Anti-Values - Desaturated or muted accents — the neon highlighter IS the brief - Borders or single accent edges on cards - Childish, toy-like, or cluttered treatments - Heavy table rules or boxed-in navigation - The generic SaaS hero (eyebrow tag, primary+secondary pair, stat trio, serif-italic flip) ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#ffffff` | | surface | `#ffffff` | | surface_solid | `#ffffff` | | surface-2 | `#f3f6f9` | | text | `#0c1014` | | muted | `#46525e` | | border | `#dbe2ea` | | hairline | `#dbe2ea` | | accent | `#1f8fff` | | on_accent | `#0c1014` | | on-accent | `#0c1014` | | accent_2 | `#2ee65f` | | accent-2 | `#2ee65f` | | on-accent-2 | `#06210f` | | accent_soft | `#e8f3ff` | | accent-3 | `#ff2e7e` | | on-accent-3 | `#0c1014` | | accent_strong | `#0a5bb8` | | green_ink | `#0e7a2e` | | pink_ink | `#c81659` | | success | `#2ee65f` | | warning | `#ff2e7e` | | error | `#ff2e7e` | | info | `#1f8fff` | ### Typography - **Base Size**: 17px - **Body Font**: Inter - **Heading Font**: Space Grotesk - **Mono Font**: Spline Sans Mono - **Heading Weight**: 700 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Scale Ratio**: 1.25 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap ### Radii - **None**: 0px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px - **Scale**: [0,16,24,9999] ### Shadows - **Sm**: 0 1px 0 rgba(12,16,20,.05) - **Md**: 0 18px 46px rgba(31,143,255,.10) - **Lg**: 0 28px 64px rgba(31,143,255,.14) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Ground**: #ffffff - **Panel**: #ffffff - **Recessed**: #f3f6f9 - **Treatment**: flat white-sky ground; board panels with a 2px ink string and hung triangular neon pennant-tags above each title - **Card Style**: clean white, no border, one soft blue-tinted elevation shadow, strung-bunting line above the title - **Bg Pattern**: strung-bunting horizontal-rhythm bands on a white sky ### Borders - **None**: 0 - **Default Width**: 0 - **Accent Width**: 0 - **Hairline**: 1px solid #dbe2ea - **Header-Only**: inset 0 -1px 0 #dbe2ea on the table header row only - **Style**: none on panels; hairline only under a table header - **Character**: borderless — the string connects and the soft blue-tinted shadow elevates ### Motion - **Reveal**: settled by default; an inline script gates the reveal, gives the strung bunting a gentle breathing sway and the happening-now pennant a soft pink pulse; respects prefers-reduced-motion - **Duration**: 0.55s-0.85s - **Easing**: cubic-bezier(.2,0,.1,1) - **Philosophy**: a wind-wave runs the strung line; flat paper flags flip from slack to flying in sequence ## Rules ### Composition A bunting-strung horizontal-rhythm grid, 1320px cap, 24px gutters; sections are anchored along implied strings with pennant-chips hung at regular intervals (a left-to-right festive cadence); content panels sit below the strings in a clean modular grid. Strong horizontal banding, generous vertical air, titles padded under their bunting line. ### Hierarchy Built from type size, position, and the pennant chip — not coloured edges. Sky-blue marks wayfinding, the primary pennant, and the active tag; festival-green marks now-playing, go, and success; pennant-pink is the single hero CTA and the happening-now pulse, plus warning. Neon fills carry ink labels for contrast. ### Density Comfortable-but-lively; padding always above titles; deliberate vertical air between horizontal bands. ### Signature The triangular pennant and the strung bunting-string are the mechanic as real components. A 2px string strung between anchors hangs triangular pennant-tags as labels, chips, filters, and active markers (clipped neon triangles, ink label). The primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from its right end, solid neon-blue with an ink label; secondary keeps the rectangle, drops the notch, goes to a thin ink outline. Cards are board panels — white, no border, with a single strung-bunting line of tiny neon triangles above the title inside its padding. Forms are rows of pennant-tabs; inputs carry a triangular neon caret-marker. Tables are stage schedules — the now-playing row flagged with a green pennant chip at its left, a hairline under the header only. Nav is a strung garland of word-tags, no box, the active tag a filled pennant triangle. Mapped to role vars so it recolours on palette swap. ## Layout ### Grid Bunting-strung horizontal-rhythm grid, 24px gutter, 1320px cap; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing. ### Whitespace White-sky led; horizontal bands with generous vertical air; full-bleed top bunting-string and hero only on the landing. ### Density Comfortable-but-lively ### Responsive Collapses to a single column on mobile; chips collapse into a single horizontally scrollable garland row (no horizontal page overflow); schedules become scroll strips; hides non-essential nav tags; caps and centres contained content on ultra-wide; full-bleed bunting-string and hero span 100vw. The landing is re-art-directed at four breakpoints (wide, desktop, tablet, mobile). ### Breakpoints - **Mobile**: 390px - **Tablet**: 640px - **Wide**: 900px - **Ultra**: 1320px ## Guidance ### Do - Give every board panel the strung-bunting line of tiny neon triangles above its title - Cut the primary button as a pennant (a notched swallowtail pill); fly the single hero CTA in pink - Flag the now-playing schedule row with a green pennant chip at its left - Keep the three neon accents at full strength on the chips and markers — never desaturate - Let the nav breathe as a strung garland of word-tags; the active tag is a filled pennant triangle - Put ink labels on the neon fills so the highlighter colour stays bright and every control clears WCAG AA ### Don't - Don't give a card a border or a single accent edge - Don't mute the neons to tasteful greys — bright highlighter colour is the brief - Don't trap nav in a pill bar or float it in a rounded card - Don't make it childish, toy-like, or cluttered - Don't build the generic SaaS hero (eyebrow tag, button pair, stat trio, serif-italic flip) ### Accessibility Ink on white and ink on the neon fills clear WCAG AA (ink on sky 6.1:1, on pink 5.4:1, on green 11.5:1); small accent text on white uses darker tints (#0a5bb8 / #0e7a2e / #c81659). Focus is a 2px sky-blue ring; the settled page renders with no JavaScript; honours prefers-reduced-motion. ## Imagery Direction ### Pairs With knockout ### Summary Bright, airy flat cut-paper festival-poster scenes carried by clear early-summer light, in a knockout poster sensibility. A strung garland of triangular pennant bunting in vivid almost-neon sky-blue, festival-green, and a few hot-pink flags runs edge to edge across the top, like bright flags against a white sky; below sits a calm flat cut-paper riverbank festival ground — a curving river, fresh-green banks, simple geometric trees, low tents and a distant stage, with koinobori carp streamers riding high on poles. Atmospheric and bright, not flat-loud: the neon lives in the strung pennants and a few accent shapes while the rest is calm bright cut-paper on a white-led ground, with generous open sky for a headline overlay. ### Subjects - a strung neon-bunting garland of triangular pennant flags across the top, edge to edge - a flat cut-paper riverbank festival ground with a curving river and fresh-green banks - koinobori carp streamers riding high on poles over the park - low festival tents and a distant simple stage silhouette under a bright white sky ### Usage Hero = a full-bleed bright cut-paper festival-ground scene crowned by a strung neon-bunting garland, with generous open white sky in the upper-left and centre for the headline overlay (a pink pop on one word). Cards and avatars reuse the triangular pennant tag as a flat neon token on white grounds.
---
version: "alpha"
name: "Pennant"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#ffffff"
surface: "#ffffff"
surface_solid: "#ffffff"
surface-2: "#f3f6f9"
text: "#0c1014"
muted: "#46525e"
border: "#dbe2ea"
hairline: "#dbe2ea"
accent: "#1f8fff"
on_accent: "#0c1014"
on-accent: "#0c1014"
accent_2: "#2ee65f"
accent-2: "#2ee65f"
on-accent-2: "#06210f"
accent_soft: "#e8f3ff"
accent-3: "#ff2e7e"
on-accent-3: "#0c1014"
accent_strong: "#0a5bb8"
green_ink: "#0e7a2e"
pink_ink: "#c81659"
success: "#2ee65f"
warning: "#ff2e7e"
error: "#ff2e7e"
info: "#1f8fff"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Inter"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
md: "16px"
lg: "24px"
full: "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_solid:
backgroundColor: "{colors.surface_solid}"
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-on-accent:
backgroundColor: "{colors.on-accent}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
color-reference-accent-2:
backgroundColor: "{colors.accent-2}"
color-reference-on-accent-2:
backgroundColor: "{colors.on-accent-2}"
color-reference-accent_soft:
backgroundColor: "{colors.accent_soft}"
color-reference-accent-3:
backgroundColor: "{colors.accent-3}"
color-reference-on-accent-3:
backgroundColor: "{colors.on-accent-3}"
color-reference-accent_strong:
backgroundColor: "{colors.accent_strong}"
color-reference-green_ink:
backgroundColor: "{colors.green_ink}"
color-reference-pink_ink:
backgroundColor: "{colors.pink_ink}"
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"
---
# Pennant
## Overview
A kinetic banner / signage-system language that turns the strung bunting and the rigid directional pennant-flag of a festival ground into a wayfinding and live-schedule UI. The ownable idea is the strung bunting line: a 2px taut string from which triangular pennant-tags hang as labels, chips, filters, and active-state markers — a structural connector and a motion system, not an accent edge. Distinct from sibling wind languages: Pennant owns the flat triangular flag-shape and the strung garland as a repeatable structural module. It serves a sprawling outdoor Children's Day festival's wayfinding and what's-on-now board across five stages. Bright, airy early-summer Kodomo no Hi pushed into confident graphic signage — sleek and grown-up, never childish, with vivid almost-neon highlighter accents on a clean white-led ground. This revision keeps the identity and brings the execution to the cinematic-landing standard with an ink-on-neon accessibility pass.
### Values
- The bunting string and the triangular pennant tag are real components, not decoration
- Strung garland as a structural connector and a gentle motion system
- Bright white-sky ground with three neon flag-colours used like highlighters
- Strong horizontal banding — read the page left to right like a row of flags
- Sleek and grown-up festival signage: composed placement of bright accent, never muddy
### Anti-Values
- Desaturated or muted accents — the neon highlighter IS the brief
- Borders or single accent edges on cards
- Childish, toy-like, or cluttered treatments
- Heavy table rules or boxed-in navigation
- The generic SaaS hero (eyebrow tag, primary+secondary pair, stat trio, serif-italic flip)
## 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 | `#ffffff` |
| surface | `#ffffff` |
| surface_solid | `#ffffff` |
| surface-2 | `#f3f6f9` |
| text | `#0c1014` |
| muted | `#46525e` |
| border | `#dbe2ea` |
| hairline | `#dbe2ea` |
| accent | `#1f8fff` |
| on_accent | `#0c1014` |
| on-accent | `#0c1014` |
| accent_2 | `#2ee65f` |
| accent-2 | `#2ee65f` |
| on-accent-2 | `#06210f` |
| accent_soft | `#e8f3ff` |
| accent-3 | `#ff2e7e` |
| on-accent-3 | `#0c1014` |
| accent_strong | `#0a5bb8` |
| green_ink | `#0e7a2e` |
| pink_ink | `#c81659` |
| success | `#2ee65f` |
| warning | `#ff2e7e` |
| error | `#ff2e7e` |
| info | `#1f8fff` |
## Typography
- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans 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
Bunting-strung horizontal-rhythm grid, 24px gutter, 1320px cap; children use minmax(0,1fr) + min-width:0 so they shrink instead of overflowing.
### Whitespace
White-sky led; horizontal bands with generous vertical air; full-bleed top bunting-string and hero only on the landing.
### Density
Comfortable-but-lively
### Responsive
Collapses to a single column on mobile; chips collapse into a single horizontally scrollable garland row (no horizontal page overflow); schedules become scroll strips; hides non-essential nav tags; caps and centres contained content on ultra-wide; full-bleed bunting-string and hero span 100vw. The landing is re-art-directed at four breakpoints (wide, desktop, tablet, mobile).
### Breakpoints
- **Mobile**: 390px
- **Tablet**: 640px
- **Wide**: 900px
- **Ultra**: 1320px
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(12,16,20,.05)
- **Md**: 0 18px 46px rgba(31,143,255,.10)
- **Lg**: 0 28px 64px rgba(31,143,255,.14)
## Shapes
### Rounded
- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`
- **Scale**: `0px`
### Surfaces
- **Ground**: #ffffff
- **Panel**: #ffffff
- **Recessed**: #f3f6f9
- **Treatment**: flat white-sky ground; board panels with a 2px ink string and hung triangular neon pennant-tags above each title
- **Card Style**: clean white, no border, one soft blue-tinted elevation shadow, strung-bunting line above the title
- **Bg Pattern**: strung-bunting horizontal-rhythm bands on a white sky
### Borders
- **None**: 0
- **Default Width**: 0
- **Accent Width**: 0
- **Hairline**: 1px solid #dbe2ea
- **Header-Only**: inset 0 -1px 0 #dbe2ea on the table header row only
- **Style**: none on panels; hairline only under a table header
- **Character**: borderless — the string connects and the soft blue-tinted shadow elevates
## Components
### Composition
A bunting-strung horizontal-rhythm grid, 1320px cap, 24px gutters; sections are anchored along implied strings with pennant-chips hung at regular intervals (a left-to-right festive cadence); content panels sit below the strings in a clean modular grid. Strong horizontal banding, generous vertical air, titles padded under their bunting line.
### Hierarchy
Built from type size, position, and the pennant chip — not coloured edges. Sky-blue marks wayfinding, the primary pennant, and the active tag; festival-green marks now-playing, go, and success; pennant-pink is the single hero CTA and the happening-now pulse, plus warning. Neon fills carry ink labels for contrast.
### Density
Comfortable-but-lively; padding always above titles; deliberate vertical air between horizontal bands.
### Signature
The triangular pennant and the strung bunting-string are the mechanic as real components. A 2px string strung between anchors hangs triangular pennant-tags as labels, chips, filters, and active markers (clipped neon triangles, ink label). The primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from its right end, solid neon-blue with an ink label; secondary keeps the rectangle, drops the notch, goes to a thin ink outline. Cards are board panels — white, no border, with a single strung-bunting line of tiny neon triangles above the title inside its padding. Forms are rows of pennant-tabs; inputs carry a triangular neon caret-marker. Tables are stage schedules — the now-playing row flagged with a green pennant chip at its left, a hairline under the header only. Nav is a strung garland of word-tags, no box, the active tag a filled pennant triangle. 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-019f8f34-4a3d-7672-b917-174e2d047303/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 Give every board panel the strung-bunting line of tiny neon triangles above its title
- Do Cut the primary button as a pennant (a notched swallowtail pill); fly the single hero CTA in pink
- Do Flag the now-playing schedule row with a green pennant chip at its left
- Do Keep the three neon accents at full strength on the chips and markers — never desaturate
- Do Let the nav breathe as a strung garland of word-tags; the active tag is a filled pennant triangle
- Do Put ink labels on the neon fills so the highlighter colour stays bright and every control clears WCAG AA
- Don't Don't give a card a border or a single accent edge
- Don't Don't mute the neons to tasteful greys — bright highlighter colour is the brief
- Don't Don't trap nav in a pill bar or float it in a rounded card
- Don't Don't make it childish, toy-like, or cluttered
- Don't Don't build the generic SaaS hero (eyebrow tag, button pair, stat trio, serif-italic flip)
### Accessibility
Ink on white and ink on the neon fills clear WCAG AA (ink on sky 6.1:1, on pink 5.4:1, on green 11.5:1); small accent text on white uses darker tints (#0a5bb8 / #0e7a2e / #c81659). Focus is a 2px sky-blue ring; the settled page renders with no JavaScript; honours prefers-reduced-motion.
## Imagery Direction
### Pairs With
knockout
### Summary
Bright, airy flat cut-paper festival-poster scenes carried by clear early-summer light, in a knockout poster sensibility. A strung garland of triangular pennant bunting in vivid almost-neon sky-blue, festival-green, and a few hot-pink flags runs edge to edge across the top, like bright flags against a white sky; below sits a calm flat cut-paper riverbank festival ground — a curving river, fresh-green banks, simple geometric trees, low tents and a distant stage, with koinobori carp streamers riding high on poles. Atmospheric and bright, not flat-loud: the neon lives in the strung pennants and a few accent shapes while the rest is calm bright cut-paper on a white-led ground, with generous open sky for a headline overlay.
### Subjects
- a strung neon-bunting garland of triangular pennant flags across the top, edge to edge
- a flat cut-paper riverbank festival ground with a curving river and fresh-green banks
- koinobori carp streamers riding high on poles over the park
- low festival tents and a distant simple stage silhouette under a bright white sky
### Usage
Hero = a full-bleed bright cut-paper festival-ground scene crowned by a strung neon-bunting garland, with generous open white sky in the upper-left and centre for the headline overlay (a pink pop on one word). Cards and avatars reuse the triangular pennant tag as a flat neon token on white grounds.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "pennant",
"type": "registry:theme",
"title": "Pennant shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#ffffff",
"foreground": "#0c1014",
"card": "#ffffff",
"card-foreground": "#0c1014",
"popover": "#ffffff",
"popover-foreground": "#0c1014",
"primary": "#0c1014",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#46525e",
"muted-foreground": "#0c1014",
"accent": "#1f8fff",
"accent-foreground": "#ffffff",
"destructive": "#ff2e7e",
"border": "#dbe2ea",
"input": "#dbe2ea",
"ring": "#1f8fff",
"chart-1": "#0c1014",
"chart-2": "#f4f4f5",
"chart-3": "#1f8fff",
"chart-4": "#2ee65f",
"chart-5": "#ff2e7e",
"sidebar": "#ffffff",
"sidebar-foreground": "#0c1014",
"sidebar-primary": "#0c1014",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#1f8fff",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#dbe2ea",
"sidebar-ring": "#1f8fff",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#0c1014",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#1f8fff",
"accent-foreground": "#ffffff",
"destructive": "#ff2e7e",
"border": "#303642",
"input": "#303642",
"ring": "#1f8fff",
"chart-1": "#0c1014",
"chart-2": "#f4f4f5",
"chart-3": "#1f8fff",
"chart-4": "#2ee65f",
"chart-5": "#ff2e7e",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#0c1014",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#1f8fff",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#1f8fff",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019f8f34-4a3d-7672-b917-174e2d047303",
"slug": "pennant",
"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",
"accent_2",
"accent_soft",
"accent_strong",
"bg",
"border",
"error",
"green_ink",
"hairline",
"info",
"muted",
"on-accent",
"on-accent-2",
"on-accent-3",
"on_accent",
"pink_ink",
"success",
"surface",
"surface-2",
"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",
"scale"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"ground",
"panel",
"recessed",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"hairline",
"header-only",
"none",
"style"
],
"motion": [
"duration",
"easing",
"philosophy",
"reveal"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Agent-generated
produced by claude-opus-4-8 · sourced by claude-opus-4-8 · images by recraft-v4.1
Keep Pennantand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.
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.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #ffffff;
--foreground: #0c1014;
--card: #ffffff;
--card-foreground: #0c1014;
--popover: #ffffff;
--popover-foreground: #0c1014;
--primary: #0c1014;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #46525e;
--muted-foreground: #0c1014;
--accent: #1f8fff;
--accent-foreground: #ffffff;
--destructive: #ff2e7e;
--border: #dbe2ea;
--input: #dbe2ea;
--ring: #1f8fff;
--chart-1: #0c1014;
--chart-2: #f4f4f5;
--chart-3: #1f8fff;
--chart-4: #2ee65f;
--chart-5: #ff2e7e;
--sidebar: #ffffff;
--sidebar-foreground: #0c1014;
--sidebar-primary: #0c1014;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #1f8fff;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #dbe2ea;
--sidebar-ring: #1f8fff;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #0c1014;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #1f8fff;
--accent-foreground: #ffffff;
--destructive: #ff2e7e;
--border: #303642;
--input: #303642;
--ring: #1f8fff;
--chart-1: #0c1014;
--chart-2: #f4f4f5;
--chart-3: #1f8fff;
--chart-4: #2ee65f;
--chart-5: #ff2e7e;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #0c1014;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #1f8fff;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #1f8fff;
--radius: 16px;
}
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 PennantShadcnKit() {
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">Pennant</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>
);
}
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "pennant",
"type": "registry:theme",
"extends": "none",
"cssVars": {
"theme": {
"font-sans": "\"Space Grotesk\", \"Helvetica Neue\", Arial, sans-serif",
"font-serif": "Inter, \"Helvetica Neue\", Arial, sans-serif",
"font-mono": "\"Spline Sans Mono\", ui-monospace, Menlo, monospace",
"radius": "16px"
},
"light": {
"background": "#ffffff",
"foreground": "#0c1014",
"card": "#ffffff",
"card-foreground": "#0c1014",
"popover": "#ffffff",
"popover-foreground": "#0c1014",
"primary": "#1f8fff",
"primary-foreground": "#0c1014",
"secondary": "#f3f6f9",
"secondary-foreground": "#0c1014",
"muted": "#f3f6f9",
"muted-foreground": "#46525e",
"accent": "#2ee65f",
"accent-foreground": "#06210f",
"destructive": "#ff2e7e",
"destructive-foreground": "#0c1014",
"border": "#dbe2ea",
"input": "#dbe2ea",
"ring": "#1f8fff",
"chart-1": "#1f8fff",
"chart-2": "#2ee65f",
"chart-3": "#ff2e7e",
"chart-4": "#0c1014",
"chart-5": "#0a5bb8",
"radius": "16px"
},
"dark": {
"background": "#0a0e12",
"foreground": "#eaf1f7",
"card": "#10161c",
"card-foreground": "#eaf1f7",
"popover": "#10161c",
"popover-foreground": "#eaf1f7",
"primary": "#47a6ff",
"primary-foreground": "#04223f",
"secondary": "#161f27",
"secondary-foreground": "#eaf1f7",
"muted": "#161f27",
"muted-foreground": "#9aa7b2",
"accent": "#2ee65f",
"accent-foreground": "#04223f",
"destructive": "#ff5c9c",
"destructive-foreground": "#04223f",
"border": "#243240",
"input": "#243240",
"ring": "#47a6ff",
"chart-1": "#47a6ff",
"chart-2": "#2ee65f",
"chart-3": "#ff5c9c",
"chart-4": "#eaf1f7",
"chart-5": "#85c2ff",
"radius": "16px"
}
},
"visualProfile": {
"family": "signage / banner-system",
"material": "flat cut-paper on a white-sky ground; a 2px ink string with hung triangular pennant-tags is the connector and motion system",
"contour": "primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from the right end; chips are clipped triangles; board panels at radius 16; squared edges at 0",
"border": "none — cards carry no border and no accent edge; a hairline sits only under a table header; elevation is one soft blue-tinted shadow",
"radius": "16px",
"accents": ["#1f8fff sky-blue (wayfinding / primary)", "#2ee65f festival-green (now-playing / go)", "#ff2e7e pennant-pink (single hero CTA / happening-now pulse)"],
"onAccent": "ink labels on the neon fills for WCAG AA contrast; small accent text on white uses darker tints (#0a5bb8 / #0e7a2e / #c81659)",
"ornament": "a strung-bunting line of tiny neon triangles runs above each panel title inside its padding",
"typography": "Space Grotesk display · Inter body/schedule · Spline Sans Mono times, stage codes, chip labels"
}
}
# Pennant — shadcn/ui Components
<!-- component-recipes-v1 -->
Author: `katagami-agent`
Recipes for rendering shadcn/ui primitives in the **Pennant** language — the kinetic banner /
signage-system of the Riverbank Carp Festival. Garland palette; the strung-bunting string and the
triangular pennant-tag are the signature mechanic. Bright white-sky ground, three neon accents used
like highlighters, ink labels on the neon fills for contrast. Fonts: Space Grotesk (display), Inter
(body / schedule), Spline Sans Mono (chip labels, time columns, stage codes).
## ShadSync visual profile
- **Family** — signage / banner-system.
- **Material** — flat cut-paper on a white-sky ground; a 2px ink string with hung triangular
pennant-tags is the structural connector and the motion system, never an accent edge.
- **Contour** — the primary button is a **pennant**: a `9999` pill with one triangular swallowtail
notch cut from its right end (`clip-path`). Chips are clipped triangles. Board panels sit at `16`.
Squared edges at `0`. No in-between radii.
- **Border** — **none**. Cards carry no border and no accent edge (not top, side, or bottom).
A hairline appears only under a table header. Elevation is one soft blue-tinted shadow.
- **Radius** — `16px` default; pennant pill at `9999`; hard triangles for chips; `0` for squared edges.
- **Ornament** — a strung-bunting line of tiny neon triangles runs above each panel title inside its
padding; recurring across the whole page, never a one-off.
## Tokens
- `background` / `card` `#ffffff` · `secondary` / `muted` `#f3f6f9`
- `primary #1f8fff` (sky-blue wayfinding / pennant) · `accent #2ee65f` (festival-green, now-playing / go)
· `destructive #ff2e7e` (hot pennant-pink — the single hero CTA + the happening-now pulse + warning)
- `primary-foreground` / `accent-foreground` / `destructive-foreground` are **ink** (`#0c1014` /
`#06210f`) — ink-on-neon clears WCAG AA. Small accent *text on white* uses the darker tints
`#0a5bb8` / `#0e7a2e` / `#c81659`.
- `foreground #0c1014` · `muted-foreground #46525e` · `border` / `input #dbe2ea` (hairline only) · `ring #1f8fff`
- `radius 16px`.
## Signature component recipes
### button
- One height (48px), mono uppercase label, `.1em` tracking, no border, no emoji, no symbol glyphs (SVG only).
- **default (primary):** the **pennant** — `bg-primary text-primary-foreground`, radius `9999`, with one
triangular swallowtail notch cut from the right via `clip-path`. Solid neon-blue, ink label. One per group.
- **cta (hero):** the same pennant shape filled `#ff2e7e` (pink), ink label — used once, for the one hero CTA.
- **secondary:** rectangle (radius `16`), no notch, transparent with a `1.5px` ink hairline outline, ink label.
- **ghost / link:** text only; link uses the sky-blue text tint. Active `translateY(1px)`. Focus a 2px sky ring.
### input
- Plain field on the `secondary` ground (radius `16`), Inter 15px, no visible browser default.
- Field-tag (label) is mono uppercase `.12em`, muted, above the control.
- Focus reveals a small triangular neon **caret-marker** (a sky clipped triangle) at the left and a 2px sky ring.
### select
- Same field as input; the native chevron is replaced by a small SVG sky pennant-triangle pointing down at right.
- Options in Inter; the selected option carries a leading mini neon triangle.
### checkbox
- 18px box, radius `4`; unchecked is the `secondary` ground with a hairline; checked fills sky-blue with an ink check SVG.
### radio-group
- 18px disc with a `1.5px` sky ring; the selected dot is a solid sky circle; ink label to the right.
### switch
- 44×22 pill; **on** is festival-green with a white knob at the right; **off** is the `secondary` ground, knob left.
### card
- Board panel — clean white, **no border**, radius `16`, one soft blue-tinted elevation shadow; the strung-bunting
line of tiny neon triangles runs above the title inside the padding. A recessed variant uses the `secondary` ground, no shadow.
### badge
- Pennant chip — a clipped triangle-tipped tag, neon-filled with an ink label. `now` green · `way` sky · `hot` pink · `ink` neutral.
### tabs
- Pennant-tabs — a segmented control shaped as a row of triangle-tipped tags; the active tab is a filled pennant
triangle in its stage colour; inactive tags sit on the `secondary` ground.
### table
- Stage schedule — mono time column and stage code, act names in Inter, a hairline **only** under the header row;
the now-playing row is tinted green (`color-mix`) and flies a green pennant chip at its left.
### alert
- Board panel with the bunting line and a leading pennant chip stating the state (Now / Go / Way); title in Space
Grotesk, muted body. No coloured left edge.
### tooltip
- Ink bubble (radius `16`) with a small downward triangle tail; mono label — used for wayfinding hints.
### dialog
- Board-panel modal (radius `24`, no border, soft blue-tinted shadow) on a dimmed ground; bunting line above the
title; primary action is a pennant button, secondary is the outline rectangle.
### avatar
- Disc on the `secondary` ground with the performer's initials in Space Grotesk and a small pennant-triangle badge
in the stage colour at the lower-right.
### progress
- Capacity gauge — an 8px pill track on the `secondary` ground with a neon fill (sky / green / pink) sized to the load.
### navigation-menu
- A strung garland of word-tags across a 2px ink string, no enclosing box; the active tag is a filled pennant triangle.
## Preview shots
Canonical scenes to render for this language (see `preview-shots.json`): **pick-your-stages** (pennant-tab
filter board panel), **on-now-board** (five-stage schedule with the now-playing ignite), **happening-now-alerts**
(alert stack with performer avatars), and **wayfinding-garland** (strung garland nav over the park map). Each is a
board panel with the bunting line above its title — never a bordered card.
## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
// The pennant button + a board-panel card with the strung-bunting ornament.
const pennant =
"rounded-full [clip-path:polygon(0_0,calc(100%-22px)_0,100%_50%,calc(100%-22px)_100%,0_100%)]"
export function OnNowCard() {
return (
<Card className="border-0 rounded-[16px] bg-card p-8 shadow-[0_18px_46px_rgba(31,143,255,0.10)]">
{/* strung-bunting line — the recurring ornament, sits above the title */}
<div aria-hidden className="mb-4 flex gap-2.5 [&>i]:h-0 [&>i]:w-0 [&>i]:border-x-[7px] [&>i]:border-x-transparent [&>i]:border-t-[13px]">
<i className="border-t-primary" /><i className="border-t-accent" /><i className="border-t-destructive" />
</div>
<h3 className="font-[var(--font-sans)] text-xl">On Now · 2:40 PM</h3>
<div className="mt-4 flex items-center gap-3">
<Badge className="bg-accent text-accent-foreground [clip-path:polygon(0_0,calc(100%-12px)_0,100%_50%,calc(100%-12px)_100%,0_100%)]">
Now · Paper-Carp Parade
</Badge>
</div>
<Button className={`mt-6 h-12 bg-primary text-primary-foreground ${pennant}`}>
See what's on now
</Button>
</Card>
)
}
```
Registry theme: `export.json` (`registry:theme`, `registry-theme-v1`). Import primitives from `@/components/ui/`
and apply the recipes above; the renderer follows the `visualProfile` — no borders, radius `16`, ink-on-neon.
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"author": "katagami-agent",
"generatedBy": "katagami-agent",
"requiresVisualProfile": true,
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"language": {
"id": "en-019f8f34-4a3d-7672-b917-174e2d047303",
"name": "Pennant",
"slug": "pennant"
},
"palette": "garland",
"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": [
"The strung bunting line is a real component: a 2px ink string that hangs triangular pennant-tags as labels, chips, filters and active markers.",
"The primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from its right end; the single hero CTA flies in pink, used once.",
"Board panels are white with NO border and one soft blue-tinted elevation shadow, a strung-bunting line of tiny neon triangles above each title.",
"Three neon flag-colours (sky-blue, festival-green, pennant-pink) at full strength, used like highlighters, with ink labels so every control clears WCAG AA."
],
"visualProfile": {
"family": "signage / banner-system",
"material": "flat cut-paper on a white-sky ground; a 2px ink string with hung triangular pennant-tags",
"contour": "pennant pill with a triangular swallowtail notch (radius 9999); clipped-triangle chips; board panels at radius 16; squared edges at 0",
"border": "none on cards; hairline only under a table header; elevation is one soft blue-tinted shadow",
"underlay": false,
"grain": false,
"stickerBadges": true,
"motion": "wind-wave sway; flat paper flags flip from slack to flying in sequence",
"density": "comfortable-but-lively",
"radius": "16px",
"accents": [
"#1f8fff",
"#2ee65f",
"#ff2e7e"
],
"onAccent": "ink labels on the neon fills (WCAG AA)",
"ornament": "strung-bunting line of tiny neon triangles above each panel title"
},
"tokens": {
"background": "#ffffff",
"foreground": "#0c1014",
"card": "#ffffff",
"primary": "#1f8fff",
"primaryForeground": "#0c1014",
"accent": "#2ee65f",
"accentForeground": "#06210f",
"pop": "#ff2e7e",
"border": "#dbe2ea",
"input": "#dbe2ea",
"muted": "#f3f6f9",
"mutedForeground": "#46525e",
"destructive": "#ff2e7e",
"ring": "#1f8fff",
"radius": "16px",
"fontSans": "\"Space Grotesk\", \"Helvetica Neue\", Arial, sans-serif",
"fontSerif": "Inter, \"Helvetica Neue\", Arial, sans-serif",
"fontMono": "\"Spline Sans Mono\", ui-monospace, Menlo, monospace"
},
"shots": [
{
"id": "pick-your-stages",
"title": "Pick your stages — pennant-tab filter board",
"viewport": "desktop",
"primitives": [
"card",
"tabs",
"input",
"select",
"switch",
"checkbox",
"button"
],
"composition": "A board-panel card of pennant-tab filters with the strung-bunting line above the title, a filter row, and a confident pennant CTA.",
"mustShow": [
"strung-bunting line above the title",
"pennant-tab filters with one active filled sky pennant",
"a pennant (notched) primary button",
"no card border, one soft blue-tinted shadow"
],
"avoid": [
"card borders or single accent edges",
"muted / desaturated neons",
"boxed-in navigation"
],
"scene": {
"eyebrow": "filter board",
"headline": "Pick your stages",
"description": "A board panel of pennant-tab filters — 'All five' active as a filled sky pennant, then Main, River, Lantern and Tent — a strung-bunting line above the title and no border.",
"primaryAction": "Apply filter",
"secondaryAction": "Clear",
"fields": [
{
"label": "Stages",
"value": "All five",
"type": "tabs"
},
{
"label": "Sort",
"value": "By start time",
"type": "select"
},
{
"label": "Only free entry",
"value": "On",
"type": "switch"
}
],
"statuses": [
"All five",
"Main",
"River"
]
}
},
{
"id": "on-now-board",
"title": "On Now — five-stage schedule with the now-playing ignite",
"viewport": "desktop",
"primitives": [
"card",
"table",
"badge",
"tabs",
"separator",
"tooltip"
],
"composition": "A wide board panel with a stage-schedule table: mono time column, sky stage codes, act names, a hairline only under the header, the now-playing row ignited green with a green 'Now' pennant chip.",
"mustShow": [
"hairline only under the table header",
"now-playing row tinted festival-green with a green 'Now' pennant chip",
"mono time column and sky stage codes",
"ink labels on the neon chips"
],
"avoid": [
"heavy table rules",
"full grid borders",
"desaturated status colours"
],
"scene": {
"eyebrow": "live board · 2:40 PM",
"headline": "On Now",
"description": "A five-stage schedule table — mono time column, sky stage codes, act names in Inter, a hairline only under the header. The RIVER · Paper-Carp Parade row is tinted festival-green and flies a green 'Now' pennant chip.",
"primaryAction": "Full schedule",
"secondaryAction": "Filter stages",
"rows": [
{
"label": "2:20 · MAIN · Koi Drummers of Setagaya",
"value": "Started",
"status": "started"
},
{
"label": "2:40 · RIVER · Paper-Carp Parade",
"value": "Now",
"status": "now"
},
{
"label": "3:00 · LANTERN · Yumi & the Streamers",
"value": "3:00 next",
"status": "next"
},
{
"label": "3:30 · TENT · Origami Carp Workshop",
"value": "Filling up",
"status": "warning"
}
],
"statuses": [
"Started",
"Now",
"Filling up"
]
}
},
{
"id": "happening-now-alerts",
"title": "Happening now — alert stack with performer avatars",
"viewport": "tablet",
"primitives": [
"card",
"badge",
"tooltip",
"dialog",
"separator",
"button"
],
"composition": "A stack of board-panel alerts, each led by a pennant chip — pink 'Now', green 'Go', sky 'Way' — titles in Space Grotesk, muted body, no border, performer avatars.",
"mustShow": [
"leading pennant chip on each alert",
"pink / green / sky chips at full strength with ink labels",
"no border on the alert panels",
"clear title + muted body hierarchy"
],
"avoid": [
"bordered alert cards",
"semantic red as a primary visual",
"cluttered childish treatment"
],
"scene": {
"eyebrow": "alerts",
"headline": "Happening now",
"description": "A stack of board-panel alerts, each led by a pennant chip — a pink 'Now', a green 'Go', a sky 'Way' — titles in Space Grotesk, muted body, no border, with performer avatars.",
"primaryAction": "Open the board",
"secondaryAction": "Mute alerts",
"rows": [
{
"label": "Paper-Carp Parade steps off in 4 minutes",
"value": "Now",
"status": "now"
},
{
"label": "Koi Drummers are on the Main Stage",
"value": "Go",
"status": "go"
},
{
"label": "Tent Stage workshop is filling up",
"value": "Way",
"status": "way"
}
],
"statuses": [
"Now",
"Go",
"Way"
]
}
},
{
"id": "wayfinding-garland",
"title": "Wayfinding — strung garland nav over the park map",
"viewport": "mobile",
"primitives": [
"card",
"tabs",
"tooltip",
"badge",
"separator",
"button"
],
"composition": "A board panel with a strung-garland navigation of word-tags on a 2px ink string, the active tag a filled sky pennant triangle, above a recessed mini-map with pennant markers.",
"mustShow": [
"strung-garland nav of word-tags, no box",
"active tag as a filled sky pennant triangle",
"recessed mini-map with pennant markers",
"responsive collapse to a scrollable garland row"
],
"avoid": [
"nav trapped in a pill bar",
"rounded floating nav card",
"horizontal page overflow"
],
"scene": {
"eyebrow": "wayfinding",
"headline": "Find your way",
"description": "A strung-garland navigation of word-tags (Board / Stages / Wayfinding / Crew) on a 2px ink string, the active tag a filled sky pennant triangle, above a recessed mini-map with pennant stage markers.",
"primaryAction": "Open the map",
"secondaryAction": "List stages",
"stats": [
{
"label": "stages",
"value": "5",
"tone": "accent"
},
{
"label": "acts",
"value": "31"
},
{
"label": "gates",
"value": "11am",
"tone": "muted"
}
],
"statuses": [
"Board",
"Stages",
"Wayfinding"
]
}
}
],
"componentRecipes": [
{
"primitive": "button",
"intent": "The pennant — a 9999 pill with one triangular swallowtail notch (clip-path) cut from the right; mono uppercase ink label on neon-blue. The hero CTA is the same shape filled pink, used once. Secondary is a rectangle (radius 16) with a 1.5px ink outline, no notch."
},
{
"primitive": "card",
"intent": "Board panel — clean white, NO border and no accent edge, radius 16, one soft blue-tinted elevation shadow, with a strung-bunting line of tiny neon triangles above the title inside the padding."
},
{
"primitive": "input",
"intent": "Plain field on the secondary ground (radius 16), Inter, no browser default; on focus a triangular sky caret-marker appears at the left and a 2px sky ring draws."
},
{
"primitive": "textarea",
"intent": "Same field treatment as input at a taller height (radius 16); the sky caret-marker sits at the top-left on focus, generous line-height for guidance copy."
},
{
"primitive": "select",
"intent": "Same field as input; the native chevron is replaced by a small sky pennant-triangle pointing down at the right; the selected option carries a leading mini neon triangle."
},
{
"primitive": "dialog",
"intent": "A centred board panel over an ink scrim — white, no border, radius 24, one soft blue-tinted shadow, a strung-bunting line above the title and a pennant primary action."
},
{
"primitive": "sheet",
"intent": "A side board panel that slides in from the edge — white, no border, radius 24 on the inner corners, the strung-bunting line above its title, ink-outline secondary and pennant primary at the foot."
},
{
"primitive": "tabs",
"intent": "Rows of pennant-tabs (triangle-tipped tags); the active tab is a filled sky pennant with an ink label, inactive tabs are thin ink-outline rectangles, no boxed bar."
},
{
"primitive": "badge",
"intent": "A pennant chip — a clipped neon triangle with an ink label; sky marks wayfinding, green marks now/go, pink marks happening-now and warning."
},
{
"primitive": "separator",
"intent": "A 2px ink string (the bunting cord) rather than a grey rule; used above titles to carry the hung triangles, or as a hairline only under a table header."
},
{
"primitive": "checkbox",
"intent": "An 18px rounded-4 box; unchecked is the secondary ground with a hairline, checked fills neon-blue with an ink check SVG (never a glyph)."
},
{
"primitive": "switch",
"intent": "A 44x22 pill; on is festival-green with a white knob at the right, off is the secondary ground with the knob left."
},
{
"primitive": "slider",
"intent": "A 9999 track on the secondary ground; the filled portion is neon-blue and the thumb is a small sky pennant-triangle, ink value label above."
},
{
"primitive": "tooltip",
"intent": "A small ink board with white text and one triangular pennant notch pointing at its anchor; concise, above compact controls."
},
{
"primitive": "dropdown-menu",
"intent": "An ink-string-topped white board of word-tags; the active item carries a leading mini neon triangle, destructive items use the pink flag colour with an ink label."
},
{
"primitive": "table",
"intent": "A stage-schedule — mono time column, sky stage codes, act names in Inter, a hairline only under the header; the now-playing row is tinted festival-green and flagged with a green pennant chip at its left."
}
],
"qualityRules": {
"do": [
"Give every board panel the strung-bunting line of tiny neon triangles above its title",
"Cut the primary button as a pennant (a notched swallowtail pill); fly the single hero CTA in pink",
"Flag the now-playing schedule row with a green pennant chip at its left",
"Keep the three neon accents at full strength on the chips and markers — never desaturate",
"Let the nav breathe as a strung garland of word-tags; the active tag is a filled pennant triangle",
"Put ink labels on the neon fills so the highlighter colour stays bright and every control clears WCAG AA"
],
"dont": [
"Don't give a card a border or a single accent edge",
"Don't mute the neons to tasteful greys — bright highlighter colour is the brief",
"Don't trap nav in a pill bar or float it in a rounded card",
"Don't make it childish, toy-like, or cluttered",
"Don't build the generic SaaS hero (eyebrow tag, button pair, stat trio, serif-italic flip)"
]
}
}