Pennant

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&apos;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)"
    ]
  }
}