Limelight

# Limelight

## Philosophy

Limelight stages an interface as a proscenium. Coral curtain wings and a scalloped valance frame one ink-navy stage, a row of footlights counts the charge, and the page is lit one runner at a time: you pick a leg on the stage plan and its pool of light follows, and when the anchor is ready the spotlight widens and the stage lifts them into colour. It keeps the drama of a relay finish and drops the gacha gloss, the metallic frames and the cyan glow.

### Values

- The page is a stage: the curtain draws open on load and the stage is lit from the footlights up.
- One lit runner at a time: choosing a leg lights its pool and swaps its cue panel.
- Light means state: marquee amber is complete, periwinkle is charging, curtain coral is priority, and every colour sits beside a word.
- Pools are size and fill: a ring grows and fills as a leg nears the handoff, so charge reads before any number.
- Calm ground for type: headlines sit on flat navy, never on the lit beam of the picture.
- A fat display face, a fine body and tall numerals, so the page reads from across a room.

### Anti-Values

- Corner brackets, spark meters and key-light frames around every card.
- Cyan, magenta and violet glow on a near-black ground.
- Tracked mono labels, numbered section tags and highlighter marks on the last word of a headline.
- A darkening gradient laid over the hero picture, or a faded picture behind text.
- Any line, bar or stripe on a side of a card.
- Metallic double frames, jewel corners and gacha ornament.

### Visual Character

- Ink navy #0F1838 ground with cream #FBF3E4 type, flat and unlit until something is chosen.
- Coral and fold curtain wings, a scalloped valance and a closed-curtain finale, drawn as flat vertical folds.
- A row of 24 round footlights in marquee amber #FFB938 that counts the charge, lit one by one.
- Stage-plan pools: filled rings with Six Caps numerals, sized by charge and coloured gold, periwinkle or coral by state.
- A circular spotlight portrait that starts small and dim and widens to full colour for the reveal.
- Abril Fatface display set tight, Hind Madurai body at fine weight, Six Caps numerals.
- Pills for every control and one 24px radius for every card.

### Lineage

> Generation 3 of Limelight, revised in place from arni's approved round 9 specimen (limelight-d). It keeps the relay world (Yokohama Night Relay, five legs, 88 percent anchor charge, Ren Asano on the bridge), the state logic and the Keylight pairing, and replaces the charge-frame bracket and spark meter with a proscenium.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0F1838` |
| surface | `#19254F` |
| text | `#FBF3E4` |
| muted | `#B7BEDD` |
| border | `#2A3A73` |
| accent | `#FFB938` |
| on_accent | `#0F1838` |
| success | `#76D8B6` |
| warning | `#FFB938` |
| error | `#FF9DB0` |
| info | `#A3BCFF` |
| coral | `#F2644B` |
| fold | `#E85A40` |

### Derived

- **Glow**: rgba(255,185,56,.2), the marquee amber at 20 percent, used only as a soft ring around a lit pool, a lit bulb, a spotlight or a slider thumb
- **Curtain**: coral #F2644B and fold #E85A40 in 28px vertical stripes on a 56px repeat, flat, used on the wings, the valance and the closing curtain
- **Unlit**: wing floor #19254F on the stage ground, stage #0F1838 on a card
- **Overlay Shadow**: 0 28px 56px -24px rgba(3,7,22,.9), only under a menu, dialog, toast or tooltip

### Typography

- **Heading Font**: Abril Fatface
- **Body Font**: Hind Madurai
- **Numeral Font**: Six Caps
- **Heading Weight**: 400
- **Body Weight**: 400
- **Button Weight**: 600
- **Numeral Weight**: 400
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on Abril Fatface display text; 0.02em on Six Caps numerals; 0 on body
- **Base Size**: 17px
- **Line Height**: 1.6
- **Scale**: ["15px label, 0.9em of body","17px to 19px body and buttons, fluid","22px to 26px cue names and sub-heads","28px Six Caps numerals in tables and the wordmark","30px to 44px cue titles and dialog titles","40px to 72px section titles","48px to 68px Six Caps numerals in a ring","52px to 92px the one headline per view","120px to 230px Six Caps numeral on a cue"]
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Hind+Madurai:wght@400;500;600&family=Six+Caps&display=swap

### Radii

- **None**: 0px
- **Md**: 24px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Pool**: 0 0 0 12px rgba(255,185,56,.2), a flat ring of marquee glow around the chosen pool
- **Bulb**: drop-shadow(0 0 7px rgba(255,185,56,.55)) on the lit footlights only
- **Lift**: 0 28px 56px -24px rgba(3,7,22,.9), only on a menu, dialog, toast or tooltip
- **None**: everything else is flat

### Spacing

- **Base**: 8px
- **Scale**: ["4px","8px","12px","16px","20px","24px","32px","48px","72px","140px"]

### Surfaces

- **Treatment**: proscenium-stage
- **Ground**: Ink navy #0F1838, flat. The page is the stage.
- **Card Style**: One wing-floor card #19254F with radius 24 holds the stage plan, a cue panel, the roster or a form group. Nothing is nested and no card carries a line, bar or stripe on any side.
- **Wells**: Inputs, selects and chips are pills on the wing floor; inside a card they drop to the stage colour.
- **Curtain**: Coral wings at 9 percent of the width at each side of the hero, a scalloped valance across the top and a closed coral curtain as the finale.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, no rules and no card edges. Rings are filled arcs, the unlit track is a tint and focus is a 3px cream outline offset 4px.

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.16, 0.84, 0.3, 1)
- **Draw**: 1.6s: the wings open from 52 percent to 9 percent on load, then slide outward at 0.35 of the scroll
- **Light**: 1.5s: the footlights switch on one by one, steps(21), up to the charge
- **Spot**: .9s: the spotlight circle widens from 300px to 560px and returns to full colour
- **Philosophy**: Settled first and gated by html.anim; every effect is skipped under prefers-reduced-motion and the leg and reveal controls need no script.

### Controls

- **Button Height**: 56px (44 small, 64 large)
- **Input Height**: 56px
- **Radius**: 9999px, 24px on a textarea
- **Focus**: 3px cream outline at 4px offset

## Rules

### Composition

- Build every landing on the proscenium: coral wings and a valance at the edges of the first screen, one flat navy stage between them.
- Keep one lit runner at a time: the stage plan shows all legs as pools and only the chosen one is at full light with its cue panel open.
- Set the headline and copy on flat navy beside the picture, never on the beam of light; on phones the picture sits on top and the text on flat ground.
- End the page on the closed curtain, with one navy button on it.

### Hierarchy

- Hierarchy comes from the curtain, the lit pool and the size of the display face before any other emphasis.
- One headline per view in Abril Fatface 52 to 92px; section titles 40 to 72px; cue names 22 to 26px.
- Body is Hind Madurai 400 at 17 to 19px; labels are 500 at 15px.
- State is told by a pool colour and always by a word: amber complete, periwinkle charging, coral priority.

### Density

Theatrical and calm: a large, flat stage with one focal moment per scene, 72 to 140px between sections, 20px between pools and 24 to 48px inside a card.

### Signature Patterns

- Proscenium: coral curtain wings at 9 percent of the width, a scalloped valance and a flat navy stage; the wings draw open from 52 percent on load and slide outward as you scroll.
- Footlights: 24 round bulbs along the foot of the stage that count the charge, lit one by one up to 21 of 24 (88 percent) and drawn as a flat amber row with a soft glow.
- Stage plan: five pools, filled rings with Six Caps numerals sized by charge, where choosing a leg lights its pool and swaps the cue panel, with no script.
- Spotlight reveal: a circular portrait that starts small, dim and desaturated and widens to full colour with a marquee glow ring when you stage the reveal.
- Closed curtain: the finale is a full coral curtain of vertical folds, with a valance-free edge, one navy button and the colophon.

## Layout

### Grid

- **Type**: proscenium page: full-bleed stage hero, then a contained column
- **Max Width**: 1240px content, 1160px inside the hero, centred and capped above 1440px
- **Gutter**: clamp(20px, 5vw, 72px)
- **Column Behavior**: Hero copy and picture sit in two columns from 900px; the stage plan is a row of five pools from 601px and a stack of rows below; every grid child has min-width:0.

### Whitespace

- **Section Gap**: clamp(72px, 10vw, 140px) top and bottom
- **Card Gap**: 20px between pools, 20px between a plan and its cue panel
- **Content Padding**: 24 to 48px inside a card
- **Approach**: Space and tint separate things. The only shapes with weight are the curtain, the lit pools and the spotlight.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"56px","input_height":"56px","row_height":"56 to 64px table rows"}

### Responsive

Phones (390px) stack to one column: the picture sits on top with a 7 percent curtain at each side and 12 footlights, the headline and copy sit below on flat ground, the stage plan becomes a stack of rows and the table keeps leg, runner and status. The tablet band (601 to 1199px) keeps the row of pools and a single column of copy. Above 1440px the copy and plan are capped and centred and only the stage and curtain span the viewport.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Wide**: 1441px
- **Ultrawide**: 2560px

## Guidance

### Do

- Start on flat ink navy and let the curtain, the pools and the spotlight be the only weighty things.
- Pair every state colour with its word: Complete, Charging, Priority.
- Size a ring by its charge and fill it clockwise from the top.
- Keep one amber button per view and let every other action step back to a surface pill or a lit word.
- Set headlines in Abril Fatface at -0.02em and numerals in Six Caps.
- Give the hero a calm navy area for type and keep the lit beam clear of copy.
- Respect prefers-reduced-motion and keep the leg and reveal controls working without script.

### Don't

- Don't put a line, bar, bracket or stripe on any side of a card.
- Don't use cyan, magenta or a violet-black ground.
- Don't lay a gradient or a faded picture behind text.
- Don't use tracked mono labels, numbered section tags or highlighter marks.
- Don't use more than one amber button in a view, or amber for anything that is not lit or primary.
- Don't use square corners, a 16px radius or a pill on a card; cards are 24 and controls are pills.
- Don't nest cards or box the navigation into a bar.

### Accessibility

AA and better on the stage: cream #FBF3E4 is 15.8:1 and haze #B7BEDD is 9.5:1 on #0F1838; marquee #FFB938 is 10.1:1, periwinkle #A3BCFF 9.3:1 and curtain coral #F2644B 5.5:1 on the stage, and coral is 4.7:1 on the wing floor #19254F; the button label #0F1838 on marquee is 10.1:1 and on coral 5.5:1. State is never carried by colour alone: every ring and chip sits beside a word. Focus is a 3px cream outline at 4px offset. The leg and reveal controls are radio inputs and a checkbox that work with no script, the footlights are decorative and aria-hidden, and the curtain draw and the footlight sequence are skipped under prefers-reduced-motion.

### Usage Context

Live control rooms, race and event dashboards, launch and reveal pages, sports and performance products, and any interface where the next moment should feel staged.

## Imagery Direction

### Pairs With

keylight-cel-anime

### Art Style Id

en-019efd96-a348-76f0-bf47-46a01216e947

### Summary

Keylight cel-anime plates re-lit for the stage: a relay runner in a navy and cream jacket caught in one amber follow-spot confined to the right third, with a calm empty navy stage on the left 60 percent for type, and a close portrait with a calm navy top and bottom for the circular spotlight. Flat saturated cels, crisp ink line, speed streaks and small blooms on an ink-navy ground, in amber, coral and periwinkle rather than cyan and magenta.

### Subjects

- a relay runner holding a baton alone in a warm follow-spot
- a close portrait of the anchor in a navy and cream team jacket
- an empty proscenium stage with a pool of amber light
- a baton handoff at the line

### Usage

One full-bleed stage plate per landing, painted with var(--hero-image) at 100% 50%, the lit beam kept to the right third so the copy sits on calm navy at every width; on phones the plate sits on top and the copy below on flat ground. One square portrait for the circular spotlight reveal, shown through var(--portrait-image). Inside pages carry no illustration; the pools are the object.

### Avoid

Text over the beam, a darkening scrim or fade over the plate, cyan or magenta light, photography, 3D renders, and a second hero image.

---
version: "alpha"
name: "Limelight"
description: "Limelight stages an interface as a proscenium. Coral curtain wings and a scalloped valance frame one ink-navy stage, a row of footlights counts the charge, and the page is lit one runner at a time: you pick a leg on the stage plan and it..."
colors:
  bg: "#0F1838"
  surface: "#19254F"
  text: "#FBF3E4"
  muted: "#B7BEDD"
  border: "#2A3A73"
  accent: "#FFB938"
  on_accent: "#0F1838"
  success: "#76D8B6"
  warning: "#FFB938"
  error: "#FF9DB0"
  info: "#A3BCFF"
  coral: "#F2644B"
  fold: "#E85A40"
typography:
  headline-lg:
    fontFamily: "Abril Fatface"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Abril Fatface"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Hind Madurai"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Hind Madurai"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "24px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "32px"
  4xl: "48px"
  step-8: "72px"
  step-9: "140px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  color-reference-coral:
    backgroundColor: "{colors.coral}"
  color-reference-fold:
    backgroundColor: "{colors.fold}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    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"
---

# Limelight

## Overview

Limelight stages an interface as a proscenium. Coral curtain wings and a scalloped valance frame one ink-navy stage, a row of footlights counts the charge, and the page is lit one runner at a time: you pick a leg on the stage plan and its pool of light follows, and when the anchor is ready the spotlight widens and the stage lifts them into colour. It keeps the drama of a relay finish and drops the gacha gloss, the metallic frames and the cyan glow.

### Values

- The page is a stage: the curtain draws open on load and the stage is lit from the footlights up.
- One lit runner at a time: choosing a leg lights its pool and swaps its cue panel.
- Light means state: marquee amber is complete, periwinkle is charging, curtain coral is priority, and every colour sits beside a word.
- Pools are size and fill: a ring grows and fills as a leg nears the handoff, so charge reads before any number.
- Calm ground for type: headlines sit on flat navy, never on the lit beam of the picture.
- A fat display face, a fine body and tall numerals, so the page reads from across a room.

### Anti-Values

- Corner brackets, spark meters and key-light frames around every card.
- Cyan, magenta and violet glow on a near-black ground.
- Tracked mono labels, numbered section tags and highlighter marks on the last word of a headline.
- A darkening gradient laid over the hero picture, or a faded picture behind text.
- Any line, bar or stripe on a side of a card.
- Metallic double frames, jewel corners and gacha ornament.

### Visual Character

- Ink navy #0F1838 ground with cream #FBF3E4 type, flat and unlit until something is chosen.
- Coral and fold curtain wings, a scalloped valance and a closed-curtain finale, drawn as flat vertical folds.
- A row of 24 round footlights in marquee amber #FFB938 that counts the charge, lit one by one.
- Stage-plan pools: filled rings with Six Caps numerals, sized by charge and coloured gold, periwinkle or coral by state.
- A circular spotlight portrait that starts small and dim and widens to full colour for the reveal.
- Abril Fatface display set tight, Hind Madurai body at fine weight, Six Caps numerals.
- Pills for every control and one 24px radius for every card.

### Lineage

> Generation 3 of Limelight, revised in place from arni's approved round 9 specimen (limelight-d). It keeps the relay world (Yokohama Night Relay, five legs, 88 percent anchor charge, Ren Asano on the bridge), the state logic and the Keylight pairing, and replaces the charge-frame bracket and spark meter with a proscenium.

## 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 | `#0F1838` |
| surface | `#19254F` |
| text | `#FBF3E4` |
| muted | `#B7BEDD` |
| border | `#2A3A73` |
| accent | `#FFB938` |
| on_accent | `#0F1838` |
| success | `#76D8B6` |
| warning | `#FFB938` |
| error | `#FF9DB0` |
| info | `#A3BCFF` |
| coral | `#F2644B` |
| fold | `#E85A40` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Hind+Madurai:wght@400;500;600&family=Six+Caps&display=swap

- **Headline-Lg**: Abril Fatface, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Abril Fatface, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Hind Madurai, 17px, weight 400, line-height 1.5.
- **Label-Md**: Hind Madurai, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `20px`
- **2xl**: `24px`
- **3xl**: `32px`
- **4xl**: `48px`
- **Step-8**: `72px`
- **Step-9**: `140px`

### Grid

- **Type**: proscenium page: full-bleed stage hero, then a contained column
- **Max Width**: 1240px content, 1160px inside the hero, centred and capped above 1440px
- **Gutter**: clamp(20px, 5vw, 72px)
- **Column Behavior**: Hero copy and picture sit in two columns from 900px; the stage plan is a row of five pools from 601px and a stack of rows below; every grid child has min-width:0.

### Whitespace

- **Section Gap**: clamp(72px, 10vw, 140px) top and bottom
- **Card Gap**: 20px between pools, 20px between a plan and its cue panel
- **Content Padding**: 24 to 48px inside a card
- **Approach**: Space and tint separate things. The only shapes with weight are the curtain, the lit pools and the spotlight.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"56px","input_height":"56px","row_height":"56 to 64px table rows"}

### Responsive

Phones (390px) stack to one column: the picture sits on top with a 7 percent curtain at each side and 12 footlights, the headline and copy sit below on flat ground, the stage plan becomes a stack of rows and the table keeps leg, runner and status. The tablet band (601 to 1199px) keeps the row of pools and a single column of copy. Above 1440px the copy and plan are capped and centred and only the stage and curtain span the viewport.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 600px
- **Tablet**: 834px
- **Desktop**: 1280px
- **Wide**: 1441px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Pool**: 0 0 0 12px rgba(255,185,56,.2), a flat ring of marquee glow around the chosen pool
- **Bulb**: drop-shadow(0 0 7px rgba(255,185,56,.55)) on the lit footlights only
- **Lift**: 0 28px 56px -24px rgba(3,7,22,.9), only on a menu, dialog, toast or tooltip
- **None**: everything else is flat

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `24px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: proscenium-stage
- **Ground**: Ink navy #0F1838, flat. The page is the stage.
- **Card Style**: One wing-floor card #19254F with radius 24 holds the stage plan, a cue panel, the roster or a form group. Nothing is nested and no card carries a line, bar or stripe on any side.
- **Wells**: Inputs, selects and chips are pills on the wing floor; inside a card they drop to the stage colour.
- **Curtain**: Coral wings at 9 percent of the width at each side of the hero, a scalloped valance across the top and a closed coral curtain as the finale.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, no rules and no card edges. Rings are filled arcs, the unlit track is a tint and focus is a 3px cream outline offset 4px.

## Components

### Composition

- Build every landing on the proscenium: coral wings and a valance at the edges of the first screen, one flat navy stage between them.
- Keep one lit runner at a time: the stage plan shows all legs as pools and only the chosen one is at full light with its cue panel open.
- Set the headline and copy on flat navy beside the picture, never on the beam of light; on phones the picture sits on top and the text on flat ground.
- End the page on the closed curtain, with one navy button on it.

### Hierarchy

- Hierarchy comes from the curtain, the lit pool and the size of the display face before any other emphasis.
- One headline per view in Abril Fatface 52 to 92px; section titles 40 to 72px; cue names 22 to 26px.
- Body is Hind Madurai 400 at 17 to 19px; labels are 500 at 15px.
- State is told by a pool colour and always by a word: amber complete, periwinkle charging, coral priority.

### Density

Theatrical and calm: a large, flat stage with one focal moment per scene, 72 to 140px between sections, 20px between pools and 24 to 48px inside a card.

### Signature Patterns

- Proscenium: coral curtain wings at 9 percent of the width, a scalloped valance and a flat navy stage; the wings draw open from 52 percent on load and slide outward as you scroll.
- Footlights: 24 round bulbs along the foot of the stage that count the charge, lit one by one up to 21 of 24 (88 percent) and drawn as a flat amber row with a soft glow.
- Stage plan: five pools, filled rings with Six Caps numerals sized by charge, where choosing a leg lights its pool and swaps the cue panel, with no script.
- Spotlight reveal: a circular portrait that starts small, dim and desaturated and widens to full colour with a marquee glow ring when you stage the reveal.
- Closed curtain: the finale is a full coral curtain of vertical folds, with a valance-free edge, one navy button and the colophon.

## 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-01a1379a-e350-71f2-9d3e-0c2bc76ae2b8/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a1379a-e350-71f2-9d3e-0c2bc76ae2b8/shadcn.json` (registry theme), `/language/en-01a1379a-e350-71f2-9d3e-0c2bc76ae2b8/shadcn-components.md` (component recipes) and `/language/en-01a1379a-e350-71f2-9d3e-0c2bc76ae2b8/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 Start on flat ink navy and let the curtain, the pools and the spotlight be the only weighty things.
- Do Pair every state colour with its word: Complete, Charging, Priority.
- Do Size a ring by its charge and fill it clockwise from the top.
- Do Keep one amber button per view and let every other action step back to a surface pill or a lit word.
- Do Set headlines in Abril Fatface at -0.02em and numerals in Six Caps.
- Do Give the hero a calm navy area for type and keep the lit beam clear of copy.
- Do Respect prefers-reduced-motion and keep the leg and reveal controls working without script.
- Don't Don't put a line, bar, bracket or stripe on any side of a card.
- Don't Don't use cyan, magenta or a violet-black ground.
- Don't Don't lay a gradient or a faded picture behind text.
- Don't Don't use tracked mono labels, numbered section tags or highlighter marks.
- Don't Don't use more than one amber button in a view, or amber for anything that is not lit or primary.
- Don't Don't use square corners, a 16px radius or a pill on a card; cards are 24 and controls are pills.
- Don't Don't nest cards or box the navigation into a bar.

### Accessibility

AA and better on the stage: cream #FBF3E4 is 15.8:1 and haze #B7BEDD is 9.5:1 on #0F1838; marquee #FFB938 is 10.1:1, periwinkle #A3BCFF 9.3:1 and curtain coral #F2644B 5.5:1 on the stage, and coral is 4.7:1 on the wing floor #19254F; the button label #0F1838 on marquee is 10.1:1 and on coral 5.5:1. State is never carried by colour alone: every ring and chip sits beside a word. Focus is a 3px cream outline at 4px offset. The leg and reveal controls are radio inputs and a checkbox that work with no script, the footlights are decorative and aria-hidden, and the curtain draw and the footlight sequence are skipped under prefers-reduced-motion.

### Usage Context

Live control rooms, race and event dashboards, launch and reveal pages, sports and performance products, and any interface where the next moment should feel staged.

## Imagery Direction

### Pairs With

keylight-cel-anime

### Art Style Id

en-019efd96-a348-76f0-bf47-46a01216e947

### Summary

Keylight cel-anime plates re-lit for the stage: a relay runner in a navy and cream jacket caught in one amber follow-spot confined to the right third, with a calm empty navy stage on the left 60 percent for type, and a close portrait with a calm navy top and bottom for the circular spotlight. Flat saturated cels, crisp ink line, speed streaks and small blooms on an ink-navy ground, in amber, coral and periwinkle rather than cyan and magenta.

### Subjects

- a relay runner holding a baton alone in a warm follow-spot
- a close portrait of the anchor in a navy and cream team jacket
- an empty proscenium stage with a pool of amber light
- a baton handoff at the line

### Usage

One full-bleed stage plate per landing, painted with var(--hero-image) at 100% 50%, the lit beam kept to the right third so the copy sits on calm navy at every width; on phones the plate sits on top and the copy below on flat ground. One square portrait for the circular spotlight reveal, shown through var(--portrait-image). Inside pages carry no illustration; the pools are the object.

### Avoid

Text over the beam, a darkening scrim or fade over the plate, cyan or magenta light, photography, 3D renders, and a second hero image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "limelight",
  "type": "registry:theme",
  "title": "Limelight shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0F1838",
      "foreground": "#FBF3E4",
      "card": "#19254F",
      "card-foreground": "#FBF3E4",
      "popover": "#19254F",
      "popover-foreground": "#FBF3E4",
      "primary": "#FBF3E4",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#B7BEDD",
      "muted-foreground": "#FBF3E4",
      "accent": "#FFB938",
      "accent-foreground": "#111111",
      "destructive": "#FF9DB0",
      "border": "#2A3A73",
      "input": "#2A3A73",
      "ring": "#FFB938",
      "chart-1": "#FBF3E4",
      "chart-2": "#f4f4f5",
      "chart-3": "#FFB938",
      "chart-4": "#76D8B6",
      "chart-5": "#FFB938",
      "sidebar": "#19254F",
      "sidebar-foreground": "#FBF3E4",
      "sidebar-primary": "#FBF3E4",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#A3BCFF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2A3A73",
      "sidebar-ring": "#FFB938",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#FBF3E4",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FFB938",
      "accent-foreground": "#111111",
      "destructive": "#FF9DB0",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FFB938",
      "chart-1": "#FBF3E4",
      "chart-2": "#f4f4f5",
      "chart-3": "#FFB938",
      "chart-4": "#76D8B6",
      "chart-5": "#FFB938",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#FBF3E4",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#FFB938",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FFB938",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a1379a-e350-71f2-9d3e-0c2bc76ae2b8",
    "slug": "limelight",
    "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",
        "bg",
        "border",
        "coral",
        "error",
        "fold",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "derived": [
        "curtain",
        "glow",
        "overlay_shadow",
        "unlit"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "numeral_font",
        "numeral_weight",
        "scale"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "bulb",
        "lift",
        "none",
        "pool"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card_style",
        "curtain",
        "ground",
        "treatment",
        "wells"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "draw",
        "duration",
        "easing",
        "light",
        "philosophy",
        "spot"
      ],
      "controls": [
        "button_height",
        "focus",
        "input_height",
        "radius"
      ]
    }
  }
}
```