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.
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, white label). The primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from its right end, solid neon-blue; secondary keeps the rectangle, drops the notch, goes to a thin 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.
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. ### 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-2 | `#f3f6f9` | | text | `#0c1014` | | muted | `#46525e` | | border | `#dbe2ea` | | hairline | `#dbe2ea` | | accent | `#1f8fff` | | on-accent | `#ffffff` | | accent-2 | `#2ee65f` | | on-accent-2 | `#06210f` | | accent-3 | `#ff2e7e` | | on-accent-3 | `#ffffff` | | 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 - **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 - **Base**: 0px - **Card**: 16px - **Lg**: 24px - **Pill**: 9999px - **Scale**: [0,16,24,9999] ### Shadows - **Sm**: 0 1px 0 rgba(12,16,20,.05) - **Md**: 0 18px 46px rgba(31,143,255,.08) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Ground**: #ffffff - **Panel**: #ffffff - **Recessed**: #f3f6f9 - **Bunting**: 2px ink string with hung triangular neon pennant-tags above each panel title ### Borders - **None**: 0 - **Hairline**: 1px solid #dbe2ea - **Header-Only**: inset 0 -1px 0 #dbe2ea on the table header row only ### Motion - **Reveal**: settled by default; inline script gates a translateY+fade reveal behind .pe, 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 cubic-bezier(.2,0,.1,1) ## 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. ### 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, white label). The primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from its right end, solid neon-blue; secondary keeps the rectangle, drops the notch, goes to a thin 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. ### 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 ### 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 white-on-neon clear WCAG AA; 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-2: "#f3f6f9"
text: "#0c1014"
muted: "#46525e"
border: "#dbe2ea"
hairline: "#dbe2ea"
accent: "#1f8fff"
on-accent: "#ffffff"
accent-2: "#2ee65f"
on-accent-2: "#06210f"
accent-3: "#ff2e7e"
on-accent-3: "#ffffff"
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:
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"
---
# 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.
### 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-2 | `#f3f6f9` |
| text | `#0c1014` |
| muted | `#46525e` |
| border | `#dbe2ea` |
| hairline | `#dbe2ea` |
| accent | `#1f8fff` |
| on-accent | `#ffffff` |
| accent-2 | `#2ee65f` |
| on-accent-2 | `#06210f` |
| accent-3 | `#ff2e7e` |
| on-accent-3 | `#ffffff` |
| 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.
### 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,.08)
## Shapes
### Rounded
- **Base**: `0px`
- **Card**: `16px`
- **Lg**: `24px`
- **Pill**: `9999px`
- **Scale**: `0px`
### Surfaces
- **Ground**: #ffffff
- **Panel**: #ffffff
- **Recessed**: #f3f6f9
- **Bunting**: 2px ink string with hung triangular neon pennant-tags above each panel title
### Borders
- **None**: 0
- **Hairline**: 1px solid #dbe2ea
- **Header-Only**: inset 0 -1px 0 #dbe2ea on the table header row only
## 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.
### 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, white label). The primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from its right end, solid neon-blue; secondary keeps the rectangle, drops the notch, goes to a thin 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-019efb75-029c-7380-8e8f-5fe119e12392/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
- 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 white-on-neon clear WCAG AA; 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": "24px"
},
"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": "24px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efb75-029c-7380-8e8f-5fe119e12392",
"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",
"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": [
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bunting",
"ground",
"panel",
"recessed"
],
"borders": [
"hairline",
"header-only",
"none"
],
"motion": [
"duration",
"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 gpt-image-2
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: 24px;
}
.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: 24px;
}
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": "#ffffff",
"secondary": "#f3f6f9",
"secondary-foreground": "#0c1014",
"muted": "#f3f6f9",
"muted-foreground": "#46525e",
"accent": "#2ee65f",
"accent-foreground": "#06210f",
"destructive": "#ff2e7e",
"destructive-foreground": "#ffffff",
"border": "#dbe2ea",
"input": "#dbe2ea",
"ring": "#1f8fff",
"chart-1": "#1f8fff",
"chart-2": "#2ee65f",
"chart-3": "#ff2e7e",
"chart-4": "#0c1014",
"chart-5": "#0e6fd6",
"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": "#ff2e7e",
"chart-4": "#eaf1f7",
"chart-5": "#85c2ff",
"radius": "16px"
}
},
"visualProfile": {
"id": "pennant",
"label": "Strung-bunting signage with triangular pennant chips",
"surface": "white-sky",
"radius": "16px",
"radiusScale": [0, 16, 24, 9999],
"border": "none",
"borderWidth": "0px",
"elevation": "soft",
"shadow": "0 18px 46px rgba(31,143,255,.08)",
"density": "comfortable",
"accentUsage": "highlighter",
"accentCount": 3,
"ground": "white-sky",
"signature": "The triangular pennant and the strung bunting-string are the mechanic as real components. A 2px string strung between section anchors hangs triangular pennant-tags as labels, chips, and active markers (clipped neon triangles, white label). The primary button is a pennant — a 9999 pill with one triangular swallowtail notch cut from its right end, solid neon-blue; secondary keeps the rectangle, drops the notch, goes to a thin 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 neon 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.",
"typography": {
"display": "Space Grotesk 700, -0.02em tracking",
"label": "Spline Sans Mono, uppercase, .14em tracking",
"body": "Inter 400, 17px"
}
}
}
# Pennant shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efb75-029c-7380-8e8f-5fe119e12392`
Slug: `pennant`
## Intent
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.
## 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": "#ffffff",
"surface": "#ffffff",
"surface-2": "#f3f6f9",
"text": "#0c1014",
"muted": "#46525e",
"border": "#dbe2ea",
"hairline": "#dbe2ea",
"accent": "#1f8fff",
"on-accent": "#ffffff",
"accent-2": "#2ee65f",
"on-accent-2": "#06210f",
"accent-3": "#ff2e7e",
"on-accent-3": "#ffffff",
"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",
"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"
}
## Visual character to preserve
- Make the source language's structural identity visible in every component state.
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"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/pennant/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: 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
- Do not: 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)
## 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 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>
);
}
```
## Layout notes
{
"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.",
"breakpoints": {
"mobile": "390px",
"tablet": "640px",
"wide": "900px",
"ultra": "1320px"
}
}
{
"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-019efb75-029c-7380-8e8f-5fe119e12392",
"name": "Pennant",
"slug": "pennant"
},
"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": "Pennant 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": [
"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"
],
"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)"
]
}
}