A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.
A cross-section dial of concentric jewel strata is the primary instrument; candy slabs carry supporting readouts, and strata-bars break the rhythm. Layouts are orbital (embodiment), hero-overlay (landing), and sidebar-grid (dashboard) — never an equal-card grid.
Hierarchy is made by jewel role and fill before quantity of colour: cherry is the one emphasis, amber the middle, teal the base; surfaces step liquorice -> slab -> recess; the lacquer sheen marks a sealed shell.
Airy low-to-medium density; tight 4-12px control clusters and 24-112px gaps between major groups for clean bench air.
Cross-section dial of concentric jewel strata with fill arcs; one convex lacquer meniscus per surface; candy strata-bars for progress/composition; a three-ring boule seal mark. Surface roles: .slab, .recess (surface-2), and the dial .ring/.arc/.core.
Contained content caps at 1180px and centres. Embodiment uses an orbital console (dial + legend, then strata bars, readouts, controls, log, notices); dashboard uses a 248px sidebar + fluid main with KPI / dial-strata / log grids.
72-120px outer section spacing, 24-48px between panels, 4-12px between labels and values.
Low-to-medium density for a confectioner's bench workflow.
Stacks to one column on mobile; the full-bleed hero spans 100vw and 100svh; grid children use minmax(0,1fr) + min-width:0 so nothing overflows; sidebar collapses to a top strip on mobile.
glace-atelier
Subjects sealed in the Glace Atelier candy glaze, then sliced to a cross-section: a glossy boiled-sweet form revealing concentric jewel strata (teal base, amber middle, cherry core), one clean gloss band, an aqua condensation rim, lit dramatically on a deep liquorice near-black ground so the sugar is the only thing that glows.
One full-bleed candy-glaze hero per landing with dark negative space on one side for a legible overlay; feature crops use the same technique. Keep the ground liquorice-dark, the jewels saturated, and the gloss band singular. Avoid pale grounds, rainbow refraction, and neon glow.
# Boule ## Philosophy Boule is a hard-candy formulation console that reads a boiled sweet by its cut: every module is a cross-section of concentric jewel strata pressed into a glossy lacquer shell, set on liquorice-dark glass so the sugar is the only thing that glows. It is conceived from the same idea as its parent — an interface treated like a thin candy shell over translucent layers — but takes the opposite path: hard, dark and jewelled rather than soft, pale and milky. ### Values - The cut is the readout: a pour is data you read by slicing the candy, layer by concentric layer. - Three boiled-sweet jewels do the work of a whole palette, used like highlighters and always paired with a label. - One even lacquer sheen per surface is the only shine; an even band means a sealed shell. - Dark is functional: jewel sugars read true on near-black glass, the way they look pulled fresh from the mould. ### Anti-Values - No pale or white ground, no pastel washes, no milky frost — Boule is jewelled and dark, not a frosted dragée. - No gloss-band-on-rectangle panels borrowed from a soft-glass console; the cross-section dial is the organizing form. - No rainbow refraction, neon glow, or more than three accents competing with the strata. - No hard grey borders, accent edges, boxed pill nav, or nested cards. ### Visual Character - A cross-section dial of concentric jewel strata — teal base, amber middle, cherry core — each ring darkened to show its fill. - Candy slabs on a deep liquorice ground, each carrying one convex lacquer sheen at the top-left. - Progress and composition rendered as stacked candy strata-bars in the jewel accents, never flat neutral fills. - Heavy grotesk display (Hanken Grotesk), Space Mono readouts, rounded continuous geometry. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#16120F` | | surface | `#211B17` | | surface_2 | `#2B231E` | | text | `#F4EDE3` | | muted | `#A99A88` | | border | `#3A3029` | | accent | `#F0476A` | | accent_2 | `#F2A93B` | | accent_3 | `#3FC7C2` | | on_accent | `#1A0E12` | | success | `#6FCF97` | | warning | `#F2A93B` | | error | `#F0476A` | | info | `#3FC7C2` | | primary | `#F0476A` | | secondary | `#2B231E` | ### Typography - **Base Size**: 17px - **Body Font**: Inter Tight - **Heading Font**: Hanken Grotesk - **Mono Font**: Space Mono - **Heading Weight**: 800 - **Heading Transform**: none - **Letter Spacing**: -0.03em - **Line Height**: 1.55 - **Scale Ratio**: 1.25 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap ### Radii - **None**: 0 - **Sm**: 16px - **Md**: 24px - **Lg**: 24px - **Xl**: 24px - **Full**: 9999px ### Shadows - **Sm**: 0 1px 2px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.25) - **Md**: 0 24px 56px rgba(0,0,0,.4), inset 0 0 0 1px #3A3029 - **Lg**: 0 40px 90px rgba(0,0,0,.5), inset 0 0 0 1px #3A3029 ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,88,112] ### Surfaces - **Treatment**: Candy slabs (#211B17 / recess #2B231E) on a deep liquorice #16120F ground; each surface carries one convex lacquer sheen at the top-left via radial-gradient(120% 70% at 30% -18%, rgba(255,255,255,.16), transparent 60%). - **Card Style**: 24px rounded candy slab, low cool shadow, hairline toffee rim (inset, not a hard border), one lacquer sheen; no accent edges, no nested cards. - **Bg Pattern**: Quiet teal and cherry radial blooms at ~8% opacity in opposite corners over the liquorice ground; the candy is the only thing that glows. ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: Hairline toffee rims via inset box-shadow rgba(58,48,41,1); focus rings inset 2px teal #3FC7C2; never a hard grey border. - **Character**: Rims behave like the edge of a lacquer shell: near-invisible on neutral surfaces, a bright teal ring on focus. ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(.2,.8,.2,1) - **Philosophy**: Humidity-soft: the lacquer sheen and section reveals fade only; the settled state is the default and renders with no JS; respects prefers-reduced-motion. ## Rules ### Composition A cross-section dial of concentric jewel strata is the primary instrument; candy slabs carry supporting readouts, and strata-bars break the rhythm. Layouts are orbital (embodiment), hero-overlay (landing), and sidebar-grid (dashboard) — never an equal-card grid. ### Hierarchy Hierarchy is made by jewel role and fill before quantity of colour: cherry is the one emphasis, amber the middle, teal the base; surfaces step liquorice -> slab -> recess; the lacquer sheen marks a sealed shell. ### Density Airy low-to-medium density; tight 4-12px control clusters and 24-112px gaps between major groups for clean bench air. ### Signature Cross-section dial of concentric jewel strata with fill arcs; one convex lacquer meniscus per surface; candy strata-bars for progress/composition; a three-ring boule seal mark. Surface roles: .slab, .recess (surface-2), and the dial .ring/.arc/.core. ## Layout ### Grid Contained content caps at 1180px and centres. Embodiment uses an orbital console (dial + legend, then strata bars, readouts, controls, log, notices); dashboard uses a 248px sidebar + fluid main with KPI / dial-strata / log grids. ### Whitespace 72-120px outer section spacing, 24-48px between panels, 4-12px between labels and values. ### Density Low-to-medium density for a confectioner's bench workflow. ### Responsive Stacks to one column on mobile; the full-bleed hero spans 100vw and 100svh; grid children use minmax(0,1fr) + min-width:0 so nothing overflows; sidebar collapses to a top strip on mobile. ### Breakpoints - **Mobile**: <= 640px - **Tablet**: 641px-980px - **Desktop**: >= 981px ## Guidance ### Do - Make the cross-section dial the hero instrument; read layers by jewel colour and fill arc. - Keep the ground deep liquorice; reserve cherry for the one emphasis, amber and teal for the other strata. - Give every surface one even lacquer sheen; separate by space, the recess surface, and soft shadow. - Render progress and composition as candy strata-bars in the jewel accents. - Set batch ids, grams, percentages, and times in Space Mono; pair every accent with a label. ### Don't - Do not default to a pale or white ground, or wash surfaces in pastel. - Do not flatten the strata into one bar or one colour, or use more than three jewel accents. - Do not add a second shine, a hard grey border, an accent edge, or a boxed nav widget. - Do not nest cards or rely on colour alone for state. - Do not borrow the soft-glass gloss-band-on-rectangle motif; the cross-section is the form. ### Accessibility Maintain WCAG AA contrast: cream #F4EDE3 on liquorice #16120F and on slabs; visible teal focus rings on every control; jewel state always paired with a text label; respect prefers-reduced-motion. ## Imagery Direction ### Pairs With glace-atelier ### Summary Subjects sealed in the Glace Atelier candy glaze, then sliced to a cross-section: a glossy boiled-sweet form revealing concentric jewel strata (teal base, amber middle, cherry core), one clean gloss band, an aqua condensation rim, lit dramatically on a deep liquorice near-black ground so the sugar is the only thing that glows. ### Subjects - sliced boiled-sweet and hard-candy cross-sections - glossy domed confections on dark glass - layered sugar-glass still-life studies - single rounded candy forms under hot studio light ### Usage One full-bleed candy-glaze hero per landing with dark negative space on one side for a legible overlay; feature crops use the same technique. Keep the ground liquorice-dark, the jewels saturated, and the gloss band singular. Avoid pale grounds, rainbow refraction, and neon glow.
---
version: "alpha"
name: "Boule"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#16120F"
surface: "#211B17"
surface_2: "#2B231E"
text: "#F4EDE3"
muted: "#A99A88"
border: "#3A3029"
accent: "#F0476A"
accent_2: "#F2A93B"
accent_3: "#3FC7C2"
on_accent: "#1A0E12"
success: "#6FCF97"
warning: "#F2A93B"
error: "#F0476A"
info: "#3FC7C2"
primary: "#F0476A"
secondary: "#2B231E"
typography:
headline-lg:
fontFamily: "Hanken Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.03em"
headline-md:
fontFamily: "Hanken Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.03em"
body-md:
fontFamily: "Inter Tight"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.55
letterSpacing: "-0.03em"
label-md:
fontFamily: "Space Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "16px"
md: "24px"
lg: "24px"
xl: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "88px"
step-9: "112px"
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-accent:
backgroundColor: "{colors.accent}"
color-reference-accent_2:
backgroundColor: "{colors.accent_2}"
color-reference-accent_3:
backgroundColor: "{colors.accent_3}"
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-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
button-primary:
backgroundColor: "{colors.primary}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Boule
## Overview
Boule is a hard-candy formulation console that reads a boiled sweet by its cut: every module is a cross-section of concentric jewel strata pressed into a glossy lacquer shell, set on liquorice-dark glass so the sugar is the only thing that glows. It is conceived from the same idea as its parent — an interface treated like a thin candy shell over translucent layers — but takes the opposite path: hard, dark and jewelled rather than soft, pale and milky.
### Values
- The cut is the readout: a pour is data you read by slicing the candy, layer by concentric layer.
- Three boiled-sweet jewels do the work of a whole palette, used like highlighters and always paired with a label.
- One even lacquer sheen per surface is the only shine; an even band means a sealed shell.
- Dark is functional: jewel sugars read true on near-black glass, the way they look pulled fresh from the mould.
### Anti-Values
- No pale or white ground, no pastel washes, no milky frost — Boule is jewelled and dark, not a frosted dragée.
- No gloss-band-on-rectangle panels borrowed from a soft-glass console; the cross-section dial is the organizing form.
- No rainbow refraction, neon glow, or more than three accents competing with the strata.
- No hard grey borders, accent edges, boxed pill nav, or nested cards.
### Visual Character
- A cross-section dial of concentric jewel strata — teal base, amber middle, cherry core — each ring darkened to show its fill.
- Candy slabs on a deep liquorice ground, each carrying one convex lacquer sheen at the top-left.
- Progress and composition rendered as stacked candy strata-bars in the jewel accents, never flat neutral fills.
- Heavy grotesk display (Hanken Grotesk), Space Mono readouts, rounded continuous geometry.
## 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 | `#16120F` |
| surface | `#211B17` |
| surface_2 | `#2B231E` |
| text | `#F4EDE3` |
| muted | `#A99A88` |
| border | `#3A3029` |
| accent | `#F0476A` |
| accent_2 | `#F2A93B` |
| accent_3 | `#3FC7C2` |
| on_accent | `#1A0E12` |
| success | `#6FCF97` |
| warning | `#F2A93B` |
| error | `#F0476A` |
| info | `#3FC7C2` |
| primary | `#F0476A` |
| secondary | `#2B231E` |
## Typography
- **Headline-Lg**: Hanken Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Hanken Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter Tight, 17px, weight 400, line-height 1.55.
- **Label-Md**: Space 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**: `88px`
- **Step-9**: `112px`
### Grid
Contained content caps at 1180px and centres. Embodiment uses an orbital console (dial + legend, then strata bars, readouts, controls, log, notices); dashboard uses a 248px sidebar + fluid main with KPI / dial-strata / log grids.
### Whitespace
72-120px outer section spacing, 24-48px between panels, 4-12px between labels and values.
### Density
Low-to-medium density for a confectioner's bench workflow.
### Responsive
Stacks to one column on mobile; the full-bleed hero spans 100vw and 100svh; grid children use minmax(0,1fr) + min-width:0 so nothing overflows; sidebar collapses to a top strip on mobile.
### Breakpoints
- **Mobile**: <= 640px
- **Tablet**: 641px-980px
- **Desktop**: >= 981px
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 2px rgba(0,0,0,.4), 0 8px 18px rgba(0,0,0,.25)
- **Md**: 0 24px 56px rgba(0,0,0,.4), inset 0 0 0 1px #3A3029
- **Lg**: 0 40px 90px rgba(0,0,0,.5), inset 0 0 0 1px #3A3029
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `16px`
- **Md**: `24px`
- **Lg**: `24px`
- **Xl**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: Candy slabs (#211B17 / recess #2B231E) on a deep liquorice #16120F ground; each surface carries one convex lacquer sheen at the top-left via radial-gradient(120% 70% at 30% -18%, rgba(255,255,255,.16), transparent 60%).
- **Card Style**: 24px rounded candy slab, low cool shadow, hairline toffee rim (inset, not a hard border), one lacquer sheen; no accent edges, no nested cards.
- **Bg Pattern**: Quiet teal and cherry radial blooms at ~8% opacity in opposite corners over the liquorice ground; the candy is the only thing that glows.
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: Hairline toffee rims via inset box-shadow rgba(58,48,41,1); focus rings inset 2px teal #3FC7C2; never a hard grey border.
- **Character**: Rims behave like the edge of a lacquer shell: near-invisible on neutral surfaces, a bright teal ring on focus.
## Components
### Composition
A cross-section dial of concentric jewel strata is the primary instrument; candy slabs carry supporting readouts, and strata-bars break the rhythm. Layouts are orbital (embodiment), hero-overlay (landing), and sidebar-grid (dashboard) — never an equal-card grid.
### Hierarchy
Hierarchy is made by jewel role and fill before quantity of colour: cherry is the one emphasis, amber the middle, teal the base; surfaces step liquorice -> slab -> recess; the lacquer sheen marks a sealed shell.
### Density
Airy low-to-medium density; tight 4-12px control clusters and 24-112px gaps between major groups for clean bench air.
### Signature
Cross-section dial of concentric jewel strata with fill arcs; one convex lacquer meniscus per surface; candy strata-bars for progress/composition; a three-ring boule seal mark. Surface roles: .slab, .recess (surface-2), and the dial .ring/.arc/.core.
## 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-019ef9ed-10eb-7901-bd3e-d5c1df9f83ea/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 Make the cross-section dial the hero instrument; read layers by jewel colour and fill arc.
- Do Keep the ground deep liquorice; reserve cherry for the one emphasis, amber and teal for the other strata.
- Do Give every surface one even lacquer sheen; separate by space, the recess surface, and soft shadow.
- Do Render progress and composition as candy strata-bars in the jewel accents.
- Do Set batch ids, grams, percentages, and times in Space Mono; pair every accent with a label.
- Don't Do not default to a pale or white ground, or wash surfaces in pastel.
- Don't Do not flatten the strata into one bar or one colour, or use more than three jewel accents.
- Don't Do not add a second shine, a hard grey border, an accent edge, or a boxed nav widget.
- Don't Do not nest cards or rely on colour alone for state.
- Don't Do not borrow the soft-glass gloss-band-on-rectangle motif; the cross-section is the form.
### Accessibility
Maintain WCAG AA contrast: cream #F4EDE3 on liquorice #16120F and on slabs; visible teal focus rings on every control; jewel state always paired with a text label; respect prefers-reduced-motion.
## Imagery Direction
### Pairs With
glace-atelier
### Summary
Subjects sealed in the Glace Atelier candy glaze, then sliced to a cross-section: a glossy boiled-sweet form revealing concentric jewel strata (teal base, amber middle, cherry core), one clean gloss band, an aqua condensation rim, lit dramatically on a deep liquorice near-black ground so the sugar is the only thing that glows.
### Subjects
- sliced boiled-sweet and hard-candy cross-sections
- glossy domed confections on dark glass
- layered sugar-glass still-life studies
- single rounded candy forms under hot studio light
### Usage
One full-bleed candy-glaze hero per landing with dark negative space on one side for a legible overlay; feature crops use the same technique. Keep the ground liquorice-dark, the jewels saturated, and the gloss band singular. Avoid pale grounds, rainbow refraction, and neon glow.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "boule",
"type": "registry:theme",
"title": "Boule shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#16120F",
"foreground": "#F4EDE3",
"card": "#211B17",
"card-foreground": "#F4EDE3",
"popover": "#211B17",
"popover-foreground": "#F4EDE3",
"primary": "#F0476A",
"primary-foreground": "#ffffff",
"secondary": "#2B231E",
"secondary-foreground": "#ffffff",
"muted": "#A99A88",
"muted-foreground": "#F4EDE3",
"accent": "#F0476A",
"accent-foreground": "#ffffff",
"destructive": "#F0476A",
"border": "#3A3029",
"input": "#3A3029",
"ring": "#F0476A",
"chart-1": "#F0476A",
"chart-2": "#2B231E",
"chart-3": "#F0476A",
"chart-4": "#6FCF97",
"chart-5": "#F2A93B",
"sidebar": "#211B17",
"sidebar-foreground": "#F4EDE3",
"sidebar-primary": "#F0476A",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#3FC7C2",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#3A3029",
"sidebar-ring": "#F0476A",
"radius": "24px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#F0476A",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#F0476A",
"accent-foreground": "#ffffff",
"destructive": "#F0476A",
"border": "#303642",
"input": "#303642",
"ring": "#F0476A",
"chart-1": "#F0476A",
"chart-2": "#2B231E",
"chart-3": "#F0476A",
"chart-4": "#6FCF97",
"chart-5": "#F2A93B",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#F0476A",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#F0476A",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#F0476A",
"radius": "24px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef9ed-10eb-7901-bd3e-d5c1df9f83ea",
"slug": "boule",
"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",
"info",
"muted",
"on_accent",
"primary",
"secondary",
"success",
"surface",
"surface_2",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm",
"xl"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"style"
],
"motion": [
"duration",
"easing",
"philosophy"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Keep Boule and swap a palette and an art style onto it. The landing & dashboard recolor live.
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: #16120F;
--foreground: #F4EDE3;
--card: #211B17;
--card-foreground: #F4EDE3;
--popover: #211B17;
--popover-foreground: #F4EDE3;
--primary: #F0476A;
--primary-foreground: #ffffff;
--secondary: #2B231E;
--secondary-foreground: #ffffff;
--muted: #A99A88;
--muted-foreground: #F4EDE3;
--accent: #F0476A;
--accent-foreground: #ffffff;
--destructive: #F0476A;
--border: #3A3029;
--input: #3A3029;
--ring: #F0476A;
--chart-1: #F0476A;
--chart-2: #2B231E;
--chart-3: #F0476A;
--chart-4: #6FCF97;
--chart-5: #F2A93B;
--sidebar: #211B17;
--sidebar-foreground: #F4EDE3;
--sidebar-primary: #F0476A;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #3FC7C2;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #3A3029;
--sidebar-ring: #F0476A;
--radius: 24px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #F0476A;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #F0476A;
--accent-foreground: #ffffff;
--destructive: #F0476A;
--border: #303642;
--input: #303642;
--ring: #F0476A;
--chart-1: #F0476A;
--chart-2: #2B231E;
--chart-3: #F0476A;
--chart-4: #6FCF97;
--chart-5: #F2A93B;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #F0476A;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #F0476A;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #F0476A;
--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 BouleShadcnKit() {
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">Boule</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": "boule",
"type": "registry:theme",
"title": "Boule",
"description": "Hard-candy formulation console. Dark liquorice ground, jewel strata accents used like highlighters: cherry primary, amber middle, teal base. Heavy grotesk voice (Hanken Grotesk display + Inter Tight body + Space Mono labels). Rounded continuous geometry (16/24/full); every surface carries one convex lacquer sheen; no hard borders, no boxed nav. Dark mode is the point.",
"cssVars": {
"theme": {
"font-sans": "Inter Tight, system-ui, sans-serif",
"font-mono": "Space Mono, ui-monospace, monospace",
"font-display": "Hanken Grotesk, system-ui, sans-serif",
"font-heading": "Hanken Grotesk, system-ui, sans-serif",
"radius": "24px"
},
"dark": {
"background": "#16120F",
"foreground": "#F4EDE3",
"card": "#211B17",
"card-foreground": "#F4EDE3",
"popover": "#211B17",
"popover-foreground": "#F4EDE3",
"primary": "#F0476A",
"primary-foreground": "#1A0E12",
"secondary": "#2B231E",
"secondary-foreground": "#F4EDE3",
"accent": "#3FC7C2",
"accent-foreground": "#0D2B2A",
"muted": "#2B231E",
"muted-foreground": "#A99A88",
"destructive": "#F0476A",
"destructive-foreground": "#1A0E12",
"success": "#6FCF97",
"warning": "#F2A93B",
"border": "#3A3029",
"input": "#2B231E",
"ring": "#3FC7C2",
"radius": "24px"
},
"light": {
"background": "#16120F",
"foreground": "#F4EDE3",
"card": "#211B17",
"card-foreground": "#F4EDE3",
"popover": "#211B17",
"popover-foreground": "#F4EDE3",
"primary": "#F0476A",
"primary-foreground": "#1A0E12",
"secondary": "#2B231E",
"secondary-foreground": "#F4EDE3",
"accent": "#3FC7C2",
"accent-foreground": "#0D2B2A",
"muted": "#2B231E",
"muted-foreground": "#A99A88",
"destructive": "#F0476A",
"destructive-foreground": "#1A0E12",
"success": "#6FCF97",
"warning": "#F2A93B",
"border": "#3A3029",
"input": "#2B231E",
"ring": "#3FC7C2",
"radius": "24px"
}
}
}
# Boule shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef9ed-10eb-7901-bd3e-d5c1df9f83ea`
Slug: `boule`
## Intent
Boule is a hard-candy formulation console that reads a boiled sweet by its cut: every module is a cross-section of concentric jewel strata pressed into a glossy lacquer shell, set on liquorice-dark glass so the sugar is the only thing that glows. It is conceived from the same idea as its parent — an interface treated like a thin candy shell over translucent layers — but takes the opposite path: hard, dark and jewelled rather than soft, pale and milky.
## 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": "#16120F",
"surface": "#211B17",
"surface_2": "#2B231E",
"text": "#F4EDE3",
"muted": "#A99A88",
"border": "#3A3029",
"accent": "#F0476A",
"accent_2": "#F2A93B",
"accent_3": "#3FC7C2",
"on_accent": "#1A0E12",
"success": "#6FCF97",
"warning": "#F2A93B",
"error": "#F0476A",
"info": "#3FC7C2",
"primary": "#F0476A",
"secondary": "#2B231E"
}
Typography:
{
"base_size": "17px",
"body_font": "Inter Tight",
"heading_font": "Hanken Grotesk",
"mono_font": "Space Mono",
"heading_weight": "800",
"heading_transform": "none",
"letter_spacing": "-0.03em",
"line_height": 1.55,
"scale_ratio": 1.25,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800&family=Inter+Tight:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap"
}
## Visual character to preserve
- A cross-section dial of concentric jewel strata — teal base, amber middle, cherry core — each ring darkened to show its fill.
- Candy slabs on a deep liquorice ground, each carrying one convex lacquer sheen at the top-left.
- Progress and composition rendered as stacked candy strata-bars in the jewel accents, never flat neutral fills.
- Heavy grotesk display (Hanken Grotesk), Space Mono readouts, rounded continuous geometry.
## 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/boule/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: Make the cross-section dial the hero instrument; read layers by jewel colour and fill arc.; Keep the ground deep liquorice; reserve cherry for the one emphasis, amber and teal for the other strata.; Give every surface one even lacquer sheen; separate by space, the recess surface, and soft shadow.; Render progress and composition as candy strata-bars in the jewel accents.; Set batch ids, grams, percentages, and times in Space Mono; pair every accent with a label.
- Do not: Do not default to a pale or white ground, or wash surfaces in pastel.; Do not flatten the strata into one bar or one colour, or use more than three jewel accents.; Do not add a second shine, a hard grey border, an accent edge, or a boxed nav widget.; Do not nest cards or rely on colour alone for state.; Do not borrow the soft-glass gloss-band-on-rectangle motif; the cross-section is the form.
## 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 BouleShadcnKit() {
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">Boule</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": "Contained content caps at 1180px and centres. Embodiment uses an orbital console (dial + legend, then strata bars, readouts, controls, log, notices); dashboard uses a 248px sidebar + fluid main with KPI / dial-strata / log grids.",
"whitespace": "72-120px outer section spacing, 24-48px between panels, 4-12px between labels and values.",
"density": "Low-to-medium density for a confectioner's bench workflow.",
"responsive": "Stacks to one column on mobile; the full-bleed hero spans 100vw and 100svh; grid children use minmax(0,1fr) + min-width:0 so nothing overflows; sidebar collapses to a top strip on mobile.",
"breakpoints": {
"mobile": "<= 640px",
"tablet": "641px-980px",
"desktop": ">= 981px"
}
}
{
"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": "", "name": "Boule", "slug": "boule" },
"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": [
"Read the candy by its cut — surfaces are candy slabs on a deep liquorice ground (#16120F), each carrying one convex lacquer sheen at the top-left.",
"Jewel strata are the accents, used like highlighters: cherry #F0476A primary, amber #F2A93B middle, teal #3FC7C2 base. Pair every accent with a label.",
"Heavy Hanken Grotesk display, Inter Tight body, Space Mono labels; rounded continuous geometry (16/24/full); no hard borders (hairline toffee rims only), no boxed nav."
],
"visualProfile": {
"family": "candy",
"material": "glossy",
"contour": "rounded",
"border": "hairline",
"underlay": true,
"grain": false,
"stickerBadges": false,
"motion": "soft",
"density": "balanced",
"accents": ["primary", "accent", "warning"]
},
"shots": [
{
"id": "application-shell",
"title": "Bench monitor",
"viewport": "desktop",
"primitives": ["button", "card", "input", "select", "tabs", "badge", "separator", "table"],
"composition": "A confectioner's bench monitor on liquorice-dark glass: a candy KPI row with jewel deltas, the cross-section dial reading three strata, a strata-fill panel, and a pour-log table with jewel status badges.",
"mustShow": ["cherry primary button vs quiet liquorice-surface secondary", "candy slab cards with one lacquer sheen, no hard border", "teal / amber / cherry status badges paired with labels", "rounded 24px geometry on a #16120F ground"],
"avoid": ["hard grey borders, divider hairlines, or accent edges", "pale or white grounds", "pastel washes or rainbow glass", "boxed pill navigation"],
"scene": {
"eyebrow": "the bench",
"headline": "Bench monitor — Line 2",
"description": "Every pour read as a cross-section: concentric jewel strata in a lacquer shell, on liquorice-dark glass.",
"primaryAction": "Start a pour",
"secondaryAction": "Export shift",
"stats": [
{ "label": "yield today", "value": "2,140", "tone": "default" },
{ "label": "shell clarity", "value": "96%", "tone": "accent" },
{ "label": "reject rate", "value": "3.1%", "tone": "warning" }
],
"rows": [
{ "label": "B-204 Sour Cherry", "value": "Teal · Amber · Cherry · 09:12 · 96%", "status": "clear" },
{ "label": "B-203 Yuzu Drop", "value": "Teal · Amber · 08:40 · 91%", "status": "holding" },
{ "label": "B-202 Blood Orange", "value": "Amber · Cherry · 08:05 · 88%", "status": "recut" },
{ "label": "B-201 Sea Mint", "value": "Teal · 07:30 · 97%", "status": "clear" }
],
"statuses": ["clear", "holding", "recut"]
}
},
{
"id": "detail-editor",
"title": "Pour controls",
"viewport": "desktop",
"primitives": ["input", "textarea", "select", "checkbox", "switch", "slider", "button", "badge", "tooltip"],
"composition": "A pour-setup card: batch name, sugar profile, a candy tartaric-acid slider, a pour-order chip set, bench notes, and a lacquer auto-temper toggle — every control explicitly styled on the recess fill, cherry focus rings.",
"mustShow": ["fully-styled candy controls (slider thumb, candy switch, select) on the #2B231E recess fill", "teal focus ring on inputs", "one cherry primary 'Queue pour' button", "labels in Space Mono uppercase"],
"avoid": ["browser-default controls", "hard grey borders", "pale grounds", "more than three accent colours"],
"scene": {
"eyebrow": "pour controls",
"headline": "Queue a pour — Sour Cherry Boule",
"description": "Set the sugar profile and acid, lay the strata, and let the shell auto-temper for an even gloss band.",
"primaryAction": "Queue pour",
"secondaryAction": "Save draft",
"fields": [
{ "label": "batch name", "value": "Sour Cherry Boule", "type": "input" },
{ "label": "sugar profile", "value": "Hard crack · 149–154°C", "type": "select" },
{ "label": "tartaric acid", "value": "62%", "type": "slider" },
{ "label": "bench notes", "value": "Held base 4m before the amber pour; shell stayed clear to the rim.", "type": "textarea" },
{ "label": "auto-temper the lacquer shell", "value": "on", "type": "switch" }
],
"statuses": ["clear", "holding"]
}
},
{
"id": "data-operations",
"title": "Strata library",
"viewport": "desktop",
"primitives": ["table", "badge", "dropdown-menu", "button", "checkbox", "separator", "tooltip"],
"composition": "A strata library table: each sugar layer with its colour stratum, target window, and current fill rendered as a candy strata-bar; row actions in a dropdown; jewel badges for layer roles.",
"mustShow": ["strata-fill bars in teal/amber/cherry, not flat neutral fills", "jewel layer-role badges with labels", "candy slab table rows with rounded ends and no hard borders", "Space Mono numerics on a liquorice ground"],
"avoid": ["grey ruled tables", "pale zebra rows", "pastel fills", "accent edges on rows"],
"scene": {
"eyebrow": "strata library",
"headline": "Strata library — base, middle, core",
"description": "Every sugar layer with its target window and live fill, read as a candy stratum.",
"primaryAction": "Add a stratum",
"secondaryAction": "Filter layers",
"rows": [
{ "label": "Peppermint base", "value": "Teal · 720 / 1000 g · 72%", "status": "base" },
{ "label": "Burnt-sugar middle", "value": "Amber · 540 / 1000 g · 54%", "status": "middle" },
{ "label": "Sour-cherry core", "value": "Cherry · 380 / 1000 g · 38%", "status": "core" },
{ "label": "Sea-mint glass", "value": "Teal · 910 / 1000 g · 91%", "status": "base" }
],
"statuses": ["base", "middle", "core"]
}
}
],
"componentRecipes": [
{ "primitive": "button", "intent": "Hierarchy by jewel: one cherry primary (radial candy gloss, ink label) = the single emphasis; liquorice-surface secondary = quiet; teal-outline ghost = navigational. Pill (full radius), one shared height, label centred." },
{ "primitive": "card", "intent": "A candy slab: #211B17 surface, 24px radius, one convex lacquer sheen at top-left, low cool shadow, hairline toffee rim — never a hard border or an accent edge." },
{ "primitive": "input", "intent": "Recess fill (#2B231E), no border; teal focus ring inset 2px, cherry inset when invalid; 16px radius; Space Mono label above." },
{ "primitive": "textarea", "intent": "Same recess + focus rhythm for longer bench notes; Inter Tight, generous, 16px radius." },
{ "primitive": "select", "intent": "Profile / layer picking with a candy recess trigger, custom toffee chevron, clear selected contrast." },
{ "primitive": "dialog", "intent": "A 'Queue this pour?' confirm on a candy slab with the lacquer sheen; cherry primary action, quiet secondary, dimmed liquorice backdrop." },
{ "primitive": "sheet", "intent": "A side bench drawer for a batch's full strata detail; slab material, soft slide, rounded inner corners." },
{ "primitive": "tabs", "intent": "Switch bench views (Monitor / Pours / Strata); the active tab carries a cherry underline pill, the rest stay toffee-muted." },
{ "primitive": "badge", "intent": "Jewel status pills paired with a label and a tiny dot: teal=clear/base, amber=holding/middle, cherry=recut/core — never colour alone." },
{ "primitive": "separator", "intent": "A near-invisible toffee hairline used sparingly; rhythm comes from space and the candy slabs, not rules." },
{ "primitive": "checkbox", "intent": "Rounded candy check on the recess fill; cherry fill with a cream tick when set; teal focus ring." },
{ "primitive": "switch", "intent": "A candy toggle: recess track, glossy cream knob; on = cherry candy track with a lit knob; teal focus ring." },
{ "primitive": "slider", "intent": "Acid / temperature control: cherry-filled candy track, glossy cream knob with a soft drop shadow." },
{ "primitive": "tooltip", "intent": "A small candy slab with the lacquer sheen and cream text; appears immediately, no bounce." },
{ "primitive": "dropdown-menu", "intent": "Row actions on a candy slab; hovered item lifts to the recess fill, the active item carries a teal dot." },
{ "primitive": "table", "intent": "Candy slab rows (#2B231E) with rounded first/last cells and a slab gap between rows — no grey rules; numerics in Space Mono; strata fills rendered as candy bars." }
],
"qualityRules": {
"do": [
"Read the candy by its cut: render layers as concentric strata / candy bars, with a fill that means something.",
"Keep the ground deep liquorice (#16120F); reserve cherry for the one emphasis, teal and amber for the other two strata.",
"Give every surface one even lacquer sheen; separate by space, the recess surface, and soft shadow.",
"Set batch ids, grams, percentages, and times in Space Mono; everything else in Hanken/Inter Tight.",
"Pair every jewel accent with a text label."
],
"dont": [
"Add hard grey borders, divider hairlines, top rules, or accent edges.",
"Default to a pale or white ground, or wash surfaces in pastel.",
"Flatten the strata into one bar or one colour, or use more than three jewel accents.",
"Box the navigation into a floating pill bar or nest cards."
]
}
}