A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
Lead with an asymmetric product commerce scene: one dominant product well that crosses column boundaries, one compact purchasing rail offset upward and tighter beside it, and a lower blackline comparison band that breaks the regular column rhythm.
Large black display type and wide whitespace first, then a citrus fill for the next purchase action, with teal only for assurance and detailed specification confidence.
Low-density premium surfaces with compact high-information islands for price, stock, and variant decisions; the largest whitespace gap is dramatically larger than form gaps.
The citrus decision halo: a soft citrus radial field behind the hero product that reappears only under primary purchase or a selected variant; blackline commerce dividers; teal assurance blocks; magnetic option chips (citrus fill + 2px black inset + 2px lift); the dominant-product grid break.
Twelve-column desktop commerce grid with a dominant 7-column product well and a 4-column purchase rail offset upward; mobile collapses into a single purchase-first flow.
Large quiet margins frame the product; internal control groups use 8-16px gaps while hero and section gaps expand to 64px or more.
airy; large product margins, compact high-information islands for price/stock/variants
Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with the purchase rail first; contained content capped and centred on ultra-wide, only the hero spans 100vw.
vitrine-studio
A single dominant product floated centered on a seamless white-to-warm stage, a soft citrus halo blooming behind it, a faint cool-teal contact shadow beneath; quiet premium product-page calm.
One full-bleed Vitrine Studio hero per landing, swapped via --hero-image; product wells inside the UI reuse the citrus halo + cool contact shadow as a CSS treatment.
# Citron Counter ## Philosophy A premium commerce language built like a quiet storefront: black type on a warm-white product stage, one citrus halo that marks the moment you buy, and deep teal that seals the trust. Two vivid hues, never a rainbow. ### Values - product-first whitespace - high-contrast blackline hierarchy - controlled citrus purchase energy - teal assurance without rainbow drift - fast scannable commerce decisions ### Anti-Values - rainbow promotional systems - decorative dotted or square-grid backgrounds - generic dashboard card piles - colored side rails or stripe accents - a third vivid hue creeping in ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#FCFCF8` | | surface | `#FFFFFF` | | recess | `#F4F3EC` | | text | `#0B0C0A` | | muted | `#6F6E66` | | border | `#E2E1D6` | | accent | `#C7F23A` | | accent_deep | `#9BC400` | | on_accent | `#0B0C0A` | | teal | `#063F3D` | | halo | `#E7FF6E` | | success | `#4F7F00` | | warning | `#8A6A00` | | error | `#B42318` | | info | `#063F3D` | ### Typography - **Base Size**: 17px - **Body Font**: Afacad - **Heading Font**: Schibsted Grotesk - **Mono Font**: Spline Sans Mono - **Heading Weight**: 800 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;600;700&family=Schibsted+Grotesk:wght@600;700;800&family=Spline+Sans+Mono:wght@500;600&display=swap ### Radii - **Sm**: 10px - **Md**: 16px - **Lg**: 22px - **Full**: 9999px - **None**: 0 ### Shadows - **Sm**: 0 1px 0 rgba(11,12,10,.06) - **Md**: 0 18px 48px rgba(38,37,29,.08) - **Lg**: 0 34px 88px rgba(38,37,29,.12) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64] ### Surfaces - **Bg Pattern**: none; warm-white product stage with negative space and blackline linework only - **Card Style**: flat white cards, 22px radius, no borders, restrained warm-tinted shadow only on dominant panels; specs and options grouped by blackline hairlines, not by a card per item - **Treatment**: warm off-white and pure white planes with one soft citrus radial halo behind product imagery and primary purchase moments; no dot, grid, stripe, or paper texture ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: solid - **Character**: warm-gray hairlines for structure (the blackline dividers); citrus border only on selected option chips and focus rings, never as decorative side stripes ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(.2,.8,.2,1) - **Philosophy**: commerce feedback feels crisp and magnetic: controls lift 2px, selected chips tighten, product thumbnails scale subtly without layout animation; the settled page is the default, motion is layered on top and respects prefers-reduced-motion ## Rules ### Composition Lead with an asymmetric product commerce scene: one dominant product well that crosses column boundaries, one compact purchasing rail offset upward and tighter beside it, and a lower blackline comparison band that breaks the regular column rhythm. ### Hierarchy Large black display type and wide whitespace first, then a citrus fill for the next purchase action, with teal only for assurance and detailed specification confidence. ### Density Low-density premium surfaces with compact high-information islands for price, stock, and variant decisions; the largest whitespace gap is dramatically larger than form gaps. ### Signature The citrus decision halo: a soft citrus radial field behind the hero product that reappears only under primary purchase or a selected variant; blackline commerce dividers; teal assurance blocks; magnetic option chips (citrus fill + 2px black inset + 2px lift); the dominant-product grid break. ## Layout ### Grid Twelve-column desktop commerce grid with a dominant 7-column product well and a 4-column purchase rail offset upward; mobile collapses into a single purchase-first flow. ### Whitespace Large quiet margins frame the product; internal control groups use 8-16px gaps while hero and section gaps expand to 64px or more. ### Density airy; large product margins, compact high-information islands for price/stock/variants ### Responsive Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with the purchase rail first; contained content capped and centred on ultra-wide, only the hero spans 100vw. ### Breakpoints - **Mobile**: 390px - **Tablet**: 768px - **Desktop**: 1440px - **Reflow**: 900px and 600px ## Guidance ### Do - Use citrus for purchase intent, selected state, availability, focused controls, and the lead metric only. - Use deep teal for assurance, comparison, secure checkout, and specification confidence modules. - Keep backgrounds clean warm-white with no dots, square grids, stripes, or confetti; group with blackline hairlines, the recess surface, and shadow. - Let unframed whitespace and hairline dividers organize content before adding cards. ### Don't - Do not add pink, purple, orange, or a third vivid hue. - Do not create a rainbow palette, colored side rails, border stripes, or swatch-catalog layouts. - Do not turn the embodiment into a SaaS dashboard or generic component inventory. - Do not mix arbitrary radii; keep the committed 22px product-commerce geometry. ### Accessibility High contrast throughout: ink on warm-white, near-white on teal, ink on citrus (citrus is light). Body 17px+, table rows 14.5px+. Focus rings are a teal inset. Motion respects prefers-reduced-motion; the settled page renders with no JavaScript. ## Imagery Direction ### Pairs With vitrine-studio ### Summary A single dominant product floated centered on a seamless white-to-warm stage, a soft citrus halo blooming behind it, a faint cool-teal contact shadow beneath; quiet premium product-page calm. ### Subjects - over-ear headphones - premium consumer hardware - single hero product - matte minimalist objects ### Usage One full-bleed Vitrine Studio hero per landing, swapped via --hero-image; product wells inside the UI reuse the citrus halo + cool contact shadow as a CSS treatment.
---
version: "alpha"
name: "Citron Counter"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#FCFCF8"
surface: "#FFFFFF"
recess: "#F4F3EC"
text: "#0B0C0A"
muted: "#6F6E66"
border: "#E2E1D6"
accent: "#C7F23A"
accent_deep: "#9BC400"
on_accent: "#0B0C0A"
teal: "#063F3D"
halo: "#E7FF6E"
success: "#4F7F00"
warning: "#8A6A00"
error: "#B42318"
info: "#063F3D"
typography:
headline-lg:
fontFamily: "Schibsted Grotesk"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Schibsted Grotesk"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Afacad"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
sm: "10px"
md: "16px"
lg: "22px"
full: "9999px"
none: "0px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-recess:
backgroundColor: "{colors.recess}"
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_deep:
backgroundColor: "{colors.accent_deep}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-teal:
backgroundColor: "{colors.teal}"
color-reference-halo:
backgroundColor: "{colors.halo}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#000000"
typography: "{typography.label-md}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.md}"
height: "44px"
---
# Citron Counter
## Overview
A premium commerce language built like a quiet storefront: black type on a warm-white product stage, one citrus halo that marks the moment you buy, and deep teal that seals the trust. Two vivid hues, never a rainbow.
### Values
- product-first whitespace
- high-contrast blackline hierarchy
- controlled citrus purchase energy
- teal assurance without rainbow drift
- fast scannable commerce decisions
### Anti-Values
- rainbow promotional systems
- decorative dotted or square-grid backgrounds
- generic dashboard card piles
- colored side rails or stripe accents
- a third vivid hue creeping in
## 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 | `#FCFCF8` |
| surface | `#FFFFFF` |
| recess | `#F4F3EC` |
| text | `#0B0C0A` |
| muted | `#6F6E66` |
| border | `#E2E1D6` |
| accent | `#C7F23A` |
| accent_deep | `#9BC400` |
| on_accent | `#0B0C0A` |
| teal | `#063F3D` |
| halo | `#E7FF6E` |
| success | `#4F7F00` |
| warning | `#8A6A00` |
| error | `#B42318` |
| info | `#063F3D` |
## Typography
- **Headline-Lg**: Schibsted Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Schibsted Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Afacad, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
### Grid
Twelve-column desktop commerce grid with a dominant 7-column product well and a 4-column purchase rail offset upward; mobile collapses into a single purchase-first flow.
### Whitespace
Large quiet margins frame the product; internal control groups use 8-16px gaps while hero and section gaps expand to 64px or more.
### Density
airy; large product margins, compact high-information islands for price/stock/variants
### Responsive
Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with the purchase rail first; contained content capped and centred on ultra-wide, only the hero spans 100vw.
### Breakpoints
- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1440px
- **Reflow**: 900px and 600px
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(11,12,10,.06)
- **Md**: 0 18px 48px rgba(38,37,29,.08)
- **Lg**: 0 34px 88px rgba(38,37,29,.12)
## Shapes
### Rounded
- **Sm**: `10px`
- **Md**: `16px`
- **Lg**: `22px`
- **Full**: `9999px`
- **None**: `0px`
### Surfaces
- **Bg Pattern**: none; warm-white product stage with negative space and blackline linework only
- **Card Style**: flat white cards, 22px radius, no borders, restrained warm-tinted shadow only on dominant panels; specs and options grouped by blackline hairlines, not by a card per item
- **Treatment**: warm off-white and pure white planes with one soft citrus radial halo behind product imagery and primary purchase moments; no dot, grid, stripe, or paper texture
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: warm-gray hairlines for structure (the blackline dividers); citrus border only on selected option chips and focus rings, never as decorative side stripes
## Components
### Composition
Lead with an asymmetric product commerce scene: one dominant product well that crosses column boundaries, one compact purchasing rail offset upward and tighter beside it, and a lower blackline comparison band that breaks the regular column rhythm.
### Hierarchy
Large black display type and wide whitespace first, then a citrus fill for the next purchase action, with teal only for assurance and detailed specification confidence.
### Density
Low-density premium surfaces with compact high-information islands for price, stock, and variant decisions; the largest whitespace gap is dramatically larger than form gaps.
### Signature
The citrus decision halo: a soft citrus radial field behind the hero product that reappears only under primary purchase or a selected variant; blackline commerce dividers; teal assurance blocks; magnetic option chips (citrus fill + 2px black inset + 2px lift); the dominant-product grid break.
## 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-019ef966-92a9-77f3-b14b-549b1067eac0/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 Use citrus for purchase intent, selected state, availability, focused controls, and the lead metric only.
- Do Use deep teal for assurance, comparison, secure checkout, and specification confidence modules.
- Do Keep backgrounds clean warm-white with no dots, square grids, stripes, or confetti; group with blackline hairlines, the recess surface, and shadow.
- Do Let unframed whitespace and hairline dividers organize content before adding cards.
- Don't Do not add pink, purple, orange, or a third vivid hue.
- Don't Do not create a rainbow palette, colored side rails, border stripes, or swatch-catalog layouts.
- Don't Do not turn the embodiment into a SaaS dashboard or generic component inventory.
- Don't Do not mix arbitrary radii; keep the committed 22px product-commerce geometry.
### Accessibility
High contrast throughout: ink on warm-white, near-white on teal, ink on citrus (citrus is light). Body 17px+, table rows 14.5px+. Focus rings are a teal inset. Motion respects prefers-reduced-motion; the settled page renders with no JavaScript.
## Imagery Direction
### Pairs With
vitrine-studio
### Summary
A single dominant product floated centered on a seamless white-to-warm stage, a soft citrus halo blooming behind it, a faint cool-teal contact shadow beneath; quiet premium product-page calm.
### Subjects
- over-ear headphones
- premium consumer hardware
- single hero product
- matte minimalist objects
### Usage
One full-bleed Vitrine Studio hero per landing, swapped via --hero-image; product wells inside the UI reuse the citrus halo + cool contact shadow as a CSS treatment.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "citron-counter",
"type": "registry:theme",
"title": "Citron Counter shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#FCFCF8",
"foreground": "#0B0C0A",
"card": "#FFFFFF",
"card-foreground": "#0B0C0A",
"popover": "#FFFFFF",
"popover-foreground": "#0B0C0A",
"primary": "#0B0C0A",
"primary-foreground": "#ffffff",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#6F6E66",
"muted-foreground": "#0B0C0A",
"accent": "#C7F23A",
"accent-foreground": "#111111",
"destructive": "#B42318",
"border": "#E2E1D6",
"input": "#E2E1D6",
"ring": "#C7F23A",
"chart-1": "#0B0C0A",
"chart-2": "#f4f4f5",
"chart-3": "#C7F23A",
"chart-4": "#4F7F00",
"chart-5": "#8A6A00",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#0B0C0A",
"sidebar-primary": "#0B0C0A",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#063F3D",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#E2E1D6",
"sidebar-ring": "#C7F23A",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#0B0C0A",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#C7F23A",
"accent-foreground": "#111111",
"destructive": "#B42318",
"border": "#303642",
"input": "#303642",
"ring": "#C7F23A",
"chart-1": "#0B0C0A",
"chart-2": "#f4f4f5",
"chart-3": "#C7F23A",
"chart-4": "#4F7F00",
"chart-5": "#8A6A00",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#0B0C0A",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#C7F23A",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#303642",
"sidebar-ring": "#C7F23A",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef966-92a9-77f3-b14b-549b1067eac0",
"slug": "citron-counter",
"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_deep",
"bg",
"border",
"error",
"halo",
"info",
"muted",
"on_accent",
"recess",
"success",
"surface",
"teal",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"mono_font"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"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
Agent-generated
Keep Citron Counterand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.
Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #FCFCF8;
--foreground: #0B0C0A;
--card: #FFFFFF;
--card-foreground: #0B0C0A;
--popover: #FFFFFF;
--popover-foreground: #0B0C0A;
--primary: #0B0C0A;
--primary-foreground: #ffffff;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #6F6E66;
--muted-foreground: #0B0C0A;
--accent: #C7F23A;
--accent-foreground: #111111;
--destructive: #B42318;
--border: #E2E1D6;
--input: #E2E1D6;
--ring: #C7F23A;
--chart-1: #0B0C0A;
--chart-2: #f4f4f5;
--chart-3: #C7F23A;
--chart-4: #4F7F00;
--chart-5: #8A6A00;
--sidebar: #FFFFFF;
--sidebar-foreground: #0B0C0A;
--sidebar-primary: #0B0C0A;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #063F3D;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #E2E1D6;
--sidebar-ring: #C7F23A;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #0B0C0A;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #C7F23A;
--accent-foreground: #111111;
--destructive: #B42318;
--border: #303642;
--input: #303642;
--ring: #C7F23A;
--chart-1: #0B0C0A;
--chart-2: #f4f4f5;
--chart-3: #C7F23A;
--chart-4: #4F7F00;
--chart-5: #8A6A00;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #0B0C0A;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #C7F23A;
--sidebar-accent-foreground: #111111;
--sidebar-border: #303642;
--sidebar-ring: #C7F23A;
--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 CitronCounterShadcnKit() {
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">Citron Counter</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": "citron-counter",
"type": "registry:theme",
"title": "Citron Counter",
"description": "Premium commerce interface. Black type on a warm-white product stage; one citrus purchase accent and one deep-teal assurance — two vivid hues, never a rainbow. Grotesk voice (Schibsted Grotesk + Afacad + Spline Sans Mono); committed 22px panels and pill controls; no borders or accent edges — separate by measured whitespace, a warm recess surface, blackline hairlines, and soft shadow.",
"cssVars": {
"theme": {
"font-sans": "Afacad, system-ui, sans-serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"font-display": "Schibsted Grotesk, Helvetica Neue, Arial, sans-serif",
"font-heading": "Schibsted Grotesk, Helvetica Neue, Arial, sans-serif",
"radius": "22px"
},
"light": {
"background": "#FCFCF8",
"foreground": "#0B0C0A",
"card": "#FFFFFF",
"card-foreground": "#0B0C0A",
"popover": "#FFFFFF",
"popover-foreground": "#0B0C0A",
"primary": "#C7F23A",
"primary-foreground": "#0B0C0A",
"secondary": "#063F3D",
"secondary-foreground": "#F3FBF4",
"accent": "#063F3D",
"accent-foreground": "#F3FBF4",
"muted": "#F4F3EC",
"muted-foreground": "#6F6E66",
"destructive": "#B42318",
"destructive-foreground": "#FFFFFF",
"success": "#4F7F00",
"warning": "#8A6A00",
"border": "transparent",
"input": "#F4F3EC",
"ring": "#063F3D",
"radius": "22px"
}
}
}
# Citron Counter shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef966-92a9-77f3-b14b-549b1067eac0`
Slug: `citron-counter`
## Intent
A premium commerce language built like a quiet storefront: black type on a warm-white product stage, one citrus halo that marks the moment you buy, and deep teal that seals the trust. Two vivid hues, never a rainbow.
## 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": "#FCFCF8",
"surface": "#FFFFFF",
"recess": "#F4F3EC",
"text": "#0B0C0A",
"muted": "#6F6E66",
"border": "#E2E1D6",
"accent": "#C7F23A",
"accent_deep": "#9BC400",
"on_accent": "#0B0C0A",
"teal": "#063F3D",
"halo": "#E7FF6E",
"success": "#4F7F00",
"warning": "#8A6A00",
"error": "#B42318",
"info": "#063F3D"
}
Typography:
{
"base_size": "17px",
"body_font": "Afacad",
"heading_font": "Schibsted Grotesk",
"mono_font": "Spline Sans Mono",
"heading_weight": "800",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;600;700&family=Schibsted+Grotesk:wght@600;700;800&family=Spline+Sans+Mono:wght@500;600&display=swap"
}
## Visual character to preserve
- Make the source language's structural identity visible in every component state.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": true,
"stickerBadges": false,
"motion": "lift",
"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/citron-counter/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: Use citrus for purchase intent, selected state, availability, focused controls, and the lead metric only.; Use deep teal for assurance, comparison, secure checkout, and specification confidence modules.; Keep backgrounds clean warm-white with no dots, square grids, stripes, or confetti; group with blackline hairlines, the recess surface, and shadow.; Let unframed whitespace and hairline dividers organize content before adding cards.
- Do not: Do not add pink, purple, orange, or a third vivid hue.; Do not create a rainbow palette, colored side rails, border stripes, or swatch-catalog layouts.; Do not turn the embodiment into a SaaS dashboard or generic component inventory.; Do not mix arbitrary radii; keep the committed 22px product-commerce geometry.
## 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 CitronCounterShadcnKit() {
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">Citron Counter</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": "Twelve-column desktop commerce grid with a dominant 7-column product well and a 4-column purchase rail offset upward; mobile collapses into a single purchase-first flow.",
"whitespace": "Large quiet margins frame the product; internal control groups use 8-16px gaps while hero and section gaps expand to 64px or more.",
"density": "airy; large product margins, compact high-information islands for price/stock/variants",
"responsive": "Renders from ~390px mobile to 2560px+ ultra-wide; single column on mobile with the purchase rail first; contained content capped and centred on ultra-wide, only the hero spans 100vw.",
"breakpoints": {
"mobile": "390px",
"tablet": "768px",
"desktop": "1440px",
"reflow": "900px and 600px"
}
}
{
"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": "Citron Counter", "slug": "citron-counter" },
"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": [
"Citrus marks the purchase — the one primary action, a selected variant, the lead metric carry a citrus fill or halo; never decoration.",
"Teal seals the trust — deep-teal filled blocks for warranty, returns, secure checkout, and the secondary action.",
"No borders, no accent edges: separate by measured whitespace, a warm recess surface, blackline hairlines, and soft shadow; warm-white ground, grotesk voice, 22px panels and pill controls."
],
"visualProfile": {
"family": "commerce",
"material": "flat",
"contour": "rounded",
"border": "none",
"underlay": "halo",
"grain": false,
"stickerBadges": false,
"motion": "magnetic",
"density": "airy",
"radius": 22,
"accents": ["accent", "success", "warning"]
},
"shots": [
{
"id": "application-shell",
"title": "The Citron Counter storefront",
"viewport": "desktop",
"primitives": ["button", "card", "input", "select", "tabs", "badge", "separator", "table"],
"composition": "A premium commerce ops desk: a deep-teal rail, KPI cards (the lead revenue metric carries a citrus halo), a filter row, and the order ledger with status badges and a stock-by-finish chart.",
"mustShow": ["citrus primary action vs teal secondary action", "white 22px cards lifted by shadow with a citrus halo behind the lead metric (no borders)", "citrus + teal + ink status badges on faint tints", "grotesk product rows on a warm-white ledger with recess zebra and hairline separators"],
"avoid": ["borders, divider hairlines across cards, top rules, or accent edges", "arbitrary mixed radii", "background gradients", "a third vivid hue (pink/purple/orange)"],
"scene": {
"eyebrow": "storefront",
"headline": "Storefront — Citron Counter",
"description": "A commerce desk where citrus marks the purchase moments and teal carries the assurance: paid, shipped, backorder.",
"primaryAction": "New product",
"secondaryAction": "Export orders",
"stats": [
{ "label": "revenue today", "value": "$28.4k", "tone": "accent" },
{ "label": "orders", "value": "142", "tone": "default" },
{ "label": "conversion", "value": "3.8%", "tone": "info" }
],
"rows": [
{ "label": "#4821 · Aurale One", "value": "Chalk · $349", "status": "paid" },
{ "label": "#4820 · Aurale Studio", "value": "Graphite · $429", "status": "shipped" },
{ "label": "#4819 · Aurale One", "value": "Teal · $349", "status": "paid" },
{ "label": "#4818 · Aurale Air", "value": "Chalk · $229", "status": "backorder" }
],
"statuses": ["Paid", "Shipped", "Backorder"]
}
},
{
"id": "detail-editor",
"title": "The product buy panel",
"viewport": "tablet",
"primitives": ["button", "card", "input", "textarea", "select", "checkbox", "switch", "slider", "dialog", "sheet"],
"composition": "A product purchase flow: a hero product with a citrus halo, magnetic option chips (citrus-filled when selected), labelled grotesk fields, an invalid (rust) postcode state, a save-card switch, a quantity slider, and a place-order confirm dialog.",
"mustShow": ["magnetic option chip selected (citrus fill, 2px black inset, lift)", "teal focus on inputs", "an invalid (rust) state", "place-order confirm dialog as a formal notice", "real commerce values"],
"avoid": ["unstyled browser controls", "missing labels", "nested cards", "square inputs that break the geometry"],
"scene": {
"eyebrow": "shop",
"headline": "Add to bag — Aurale One",
"description": "A buy panel proving option chips, labelled fields, an invalid postcode state, a save-card toggle, a quantity slider, and an order confirm.",
"primaryAction": "Add to bag · $349",
"secondaryAction": "Buy now",
"fields": [
{ "label": "Colour", "value": "Chalk", "type": "chip-selected" },
{ "label": "Tier", "value": "Pro ANC", "type": "chip-selected" },
{ "label": "Postcode", "value": "— enter a postcode to confirm the 2-day estimate", "type": "invalid" },
{ "label": "Save card for next time", "value": "on", "type": "switch" }
],
"statuses": ["Selected", "Invalid", "Saved"]
}
},
{
"id": "data-operations",
"title": "Order queue",
"viewport": "mobile",
"primitives": ["button", "tabs", "badge", "dropdown-menu", "table", "tooltip", "separator"],
"composition": "A narrow order queue: stacked grotesk rows, per-row dropdown actions, status badges, tooltips, and a backorder state.",
"mustShow": ["responsive reflow", "grotesk product rows", "row action menu with citrus origin markers", "citrus / teal / ink status badges", "a backorder state"],
"avoid": ["desktop-only tables", "text overflow", "generic shadcn spacing without Citron Counter character"],
"scene": {
"eyebrow": "orders",
"headline": "Order queue",
"description": "A compact queue with rows, menus, tooltips, status badges, and a backorder affordance.",
"primaryAction": "Dispatch",
"secondaryAction": "Filter",
"rows": [
{ "label": "#4821 · Aurale One", "value": "Chalk", "status": "paid" },
{ "label": "#4820 · Aurale Studio", "value": "Graphite", "status": "shipped" },
{ "label": "#4818 · Aurale Air", "value": "Chalk", "status": "backorder" }
],
"statuses": ["Paid", "Shipped", "Backorder"]
}
}
],
"componentRecipes": [
{ "primitive": "button", "intent": "Hierarchy: citrus primary = the one purchase emphasis (soft citrus glow shadow); teal = assurance/buy-now; recess-warm = quiet; teal link = navigational; pill corners, no border, a 2px lift on hover, one shared height." },
{ "primitive": "card", "intent": "White 22px panel lifted by soft warm shadow, no border/top-rule; a hero product card adds a citrus halo behind the product image; never nest cards." },
{ "primitive": "input", "intent": "Warm recess fill, no border, 16px radius; teal inset on focus, rust inset when invalid; mono label above." },
{ "primitive": "textarea", "intent": "Longer notes with the same focus + invalid rhythm; Afacad, generous, 16px radius." },
{ "primitive": "select", "intent": "Finish / delivery filtering with a pill trigger and clear selection contrast." },
{ "primitive": "dialog", "intent": "A formal 'Place this order?' confirm — centered, 22px, generous; no border." },
{ "primitive": "sheet", "intent": "The bag / product side rail for contextual editing." },
{ "primitive": "tabs", "intent": "Switch Shop / Compare / Specs; active carries a citrus origin mark, not an underline rule." },
{ "primitive": "badge", "intent": "Flat status chip vocabulary on a faint tint: paid/selected (citrus), shipped/in-stock (teal), backorder (ink)." },
{ "primitive": "separator", "intent": "Open space or a blackline hairline grouping price/options/specs — never a heavy rule across a card." },
{ "primitive": "checkbox", "intent": "Opt-ins with a teal checked state and a clear focus." },
{ "primitive": "switch", "intent": "Save-card / settings toggle; on is teal, off is a flat warm-grey track." },
{ "primitive": "slider", "intent": "Quantity / capacity with a citrus or teal track and a round thumb." },
{ "primitive": "tooltip", "intent": "Concise Afacad notes above compact controls." },
{ "primitive": "dropdown-menu", "intent": "Per-row order actions with citrus origin markers and a destructive 'refund' item." },
{ "primitive": "table", "intent": "The order ledger: mono header, grotesk product rows, warm recess zebra, a status badge per row, a backorder empty state, hairline row separators only." }
],
"qualityRules": {
"do": [
"Mark the one purchase action and the lead metric with citrus (a halo or a fill); mark a selected variant with a magnetic chip.",
"Reserve teal for assurance and the secondary action; keep the ground warm-white.",
"Separate by measured whitespace, the warm recess surface, blackline hairlines, and soft shadow.",
"Set prices, counts, SKUs, and measurements in mono; everything else in grotesk/Afacad."
],
"dont": [
"Add borders, top rules, divider hairlines across cards, or accent edges.",
"Mix arbitrary radii or use background gradients.",
"Nest cards or introduce a third vivid hue (pink/purple/orange).",
"Solve hierarchy with many accent colours when the halo and whitespace can do the work."
]
}
}