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.
Compose screens as a leaded window: glowing tissue panes pressed into a dark came grid over a deep night ground, with a tall feature pane and supporting panes filling the leading around it. Nav sits openly across the header; the dashboard spine is an open rail, never a boxed widget.
Oversized Fraunces serif headings with one italic amber accent word first, mono kickers as captions second, calm Inter Tight body on the night third. One button is clearly primary (amber); the rest are quieter.
Medium-low density with generous breathing room and large touch targets; short clusters of related controls per pane.
The leaded pane: every surface is a translucent tissue pane lit from behind in dark leading, and coloured tissues multiply where they overlap into a glowing deeper third tone.
A leaded-window grid of tissue panes pressed into a dark came frame, using minmax(0,1fr) columns and min-width:0 children so panes never overflow; a tall feature pane with supporting panes (scene mosaic), plus split and three-up pane rows.
Generous outer margins and plush internal pane padding; soft blooms breathe in the night around content.
Medium-low; large controls, short clusters.
Renders from ~390px to 2560px+: single stacked column on mobile with non-essential nav and table columns hidden, full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.
glassine
Translucent dyed-tissue layers lit from behind against a deep night ground, colours multiplying where sheets overlap, glue-wash edges and crinkle fibre texture. Subjects are evening lantern-walk scenes — strung paper lanterns, a lantern-lit hillside, a paper carp set adrift.
One full-bleed hero in the Glassine technique, lit from behind so the tissue glows against the dark indigo sky, with calm dark negative space reserved for the headline. Generated with nano-banana-pro.
# Lantern ## Philosophy A lit-from-behind tissue language. Every surface is a dyed-tissue pane set into thin dark leading (the came), lit from behind so depth, focus and emphasis come from how brightly a pane glows rather than from any outline. Three luminous colours are laid like light through paper over a deep night ground, and the whole interface reads like a paper-lantern walk after dusk. It is a parallel reimagining of the tissue-paper storybook idea, conceived from the same brief but resolved differently: where the storybook pastes opaque cut-paper on a warm cream page, Lantern hangs translucent tissue in dark leading and lights it from behind. ### Values - Depth and focus from light through paper, never from an outline - A deep night ground so translucent tissue can glow against the dark - Three luminous colours used like light through paper; overlaps deepen, never dull - Calm, legible warmth — a lantern walk, not a dense dashboard ### Anti-Values - Hard borders, single-accent card edges, or nested boxed chrome - Warm-cream daylight collage or opaque cut-paper shapes - Muddy or greyed overlaps; glassmorphism, neon glow, metallic gradients - Rounded children's-sans headings; tiny dense data-first layouts ### Visual Character - Surfaces are tissue panes pressed into a thin dark came grid, lit from behind so each pane glows upward as if a candle sat behind it; the came is the only line on the page and depth comes from the bloom, never from a heavier edge. - Coloured shapes multiply where they overlap into a glowing third tone (amber over rose reads as ember), the lit-from-behind glassine signature, carried in the brand mark, hero, overlap demo and KPI motifs. - Headings are a warm optical serif (Fraunces) at display size with a single italic accent word in amber; mono kickers sit as small uppercase captions like handmade page annotations. - Glowing tissue colour drifts as soft blurred blooms inside panes, giving the night ground a lantern-walk depth without stealing focus. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#16122A` | | surface | `#211C3E` | | surface_2 | `#2C2552` | | text | `#F4ECDA` | | muted | `#9C90BA` | | border | `#0A0816` | | accent | `#F3A93C` | | on_accent | `#16122A` | | rose | `#E5577A` | | teal | `#3FB8A6` | | overlap_amber_rose | `#DD6440` | | overlap_teal_amber | `#86B264` | | overlap_rose_teal | `#936FA4` | | success | `#3FB8A6` | | warning | `#F3A93C` | | error | `#E5577A` | | info | `#5B9BD9` | ### Typography - **Base Size**: 17px - **Body Font**: Inter Tight - **Heading Font**: Fraunces - **Mono Font**: Spline Sans Mono - **Heading Weight**: 800 - **Heading Transform**: none - **Letter Spacing**: -0.025em - **Line Height**: 1.6 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,800;1,9..144,500&family=Inter+Tight:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap ### Radii - **None**: 0 - **Pane**: 2px - **Soft**: 16px - **Full**: 9999px ### Shadows - **Sm**: 0 2px 10px rgba(0,0,0,0.45) - **Md**: 0 18px 48px rgba(0,0,0,0.55) - **Glow Amber**: 0 0 40px rgba(243,169,60,0.42) - **Glow Rose**: 0 0 40px rgba(229,87,122,0.40) - **Glow Teal**: 0 0 40px rgba(63,184,166,0.38) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Treatment**: translucent dyed tissue lit from behind - **Card Style**: A tissue pane pressed into a thin dark came (leading), lit from behind in one of three colours via a soft gradient wash plus a blurred corner bloom; depth and focus come from the glow, never from a border. Panes are never nested and never carry a single accent edge. - **Bg Pattern**: deep night indigo with soft luminous colour blooms ### Borders - **Default Width**: 0 - **Style**: none - **Character**: No structural borders. The dark came (a 3px gap between panes) and the lit-from-behind glow are the structure; the only border token is the came colour, never drawn as an outline on a pane. ### Motion - **Duration**: 320ms - **Easing**: cubic-bezier(0.22, 1, 0.36, 1) - **Philosophy**: Snappy paper-press: controls drop 2px on active; landing panes rise gently as they enter view, gated behind a JS class on <html> so the settled state shows with no JavaScript, and respect prefers-reduced-motion. ## Rules ### Composition Compose screens as a leaded window: glowing tissue panes pressed into a dark came grid over a deep night ground, with a tall feature pane and supporting panes filling the leading around it. Nav sits openly across the header; the dashboard spine is an open rail, never a boxed widget. ### Hierarchy Oversized Fraunces serif headings with one italic amber accent word first, mono kickers as captions second, calm Inter Tight body on the night third. One button is clearly primary (amber); the rest are quieter. ### Density Medium-low density with generous breathing room and large touch targets; short clusters of related controls per pane. ### Signature The leaded pane: every surface is a translucent tissue pane lit from behind in dark leading, and coloured tissues multiply where they overlap into a glowing deeper third tone. ## Layout ### Grid A leaded-window grid of tissue panes pressed into a dark came frame, using minmax(0,1fr) columns and min-width:0 children so panes never overflow; a tall feature pane with supporting panes (scene mosaic), plus split and three-up pane rows. ### Whitespace Generous outer margins and plush internal pane padding; soft blooms breathe in the night around content. ### Density Medium-low; large controls, short clusters. ### Responsive Renders from ~390px to 2560px+: single stacked column on mobile with non-essential nav and table columns hidden, full-bleed hero spans 100vw, contained content caps and centres on ultra-wide. ### Breakpoints - **Mobile**: 560px - **Tablet**: 860px - **Desktop**: default - **Ultrawide**: 1240px cap ## Guidance ### Do - Build every surface as a lit tissue pane in dark leading; let the glow carry hierarchy. - Let overlapping colours multiply into a glowing third tone; that is the signature. - Keep the deep night ground; use the three colours like light through paper. - Use mono kickers as captions and keep one button clearly primary (amber). ### Don't - Do not add borders, single-accent card edges, or nested cards; the came and the glow are the structure. - Do not let overlaps go grey or muddy; they deepen and glow. - Do not trap the nav in a floating pill; let it sit openly across the header. - Do not use glassmorphism, neon, metallic gradients, or a warm-cream daylight ground. ### Accessibility Body 17px+, table rows 15px+, warm paper-light ink on the night ground for high contrast. Every form control is explicitly styled with a visible 3px amber focus glow. Motion is gated behind a JS class and reduced under prefers-reduced-motion; the settled state renders with no JavaScript. ## Imagery Direction ### Pairs With glassine ### Summary Translucent dyed-tissue layers lit from behind against a deep night ground, colours multiplying where sheets overlap, glue-wash edges and crinkle fibre texture. Subjects are evening lantern-walk scenes — strung paper lanterns, a lantern-lit hillside, a paper carp set adrift. ### Subjects - a strung row of glowing paper lanterns at dusk - a lantern-lit hillside and riverbank at evening - a single tissue lantern glowing against the night - a paper carp lantern set adrift on dark water ### Usage One full-bleed hero in the Glassine technique, lit from behind so the tissue glows against the dark indigo sky, with calm dark negative space reserved for the headline. Generated with nano-banana-pro. ### Engine Hints - **Generator**: nano-banana-pro - **Model**: gemini-3-pro-image-preview - **Provider**: google - **Tool**: nano-banana-pro MCP - **Aspect**: 16:9 - **Size**: 2K - **Fallback Reason**: openai-image is billing-capped; used nano-banana-pro directly per task instruction.
---
version: "alpha"
name: "Lantern"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#16122A"
surface: "#211C3E"
surface_2: "#2C2552"
text: "#F4ECDA"
muted: "#9C90BA"
border: "#0A0816"
accent: "#F3A93C"
on_accent: "#16122A"
rose: "#E5577A"
teal: "#3FB8A6"
overlap_amber_rose: "#DD6440"
overlap_teal_amber: "#86B264"
overlap_rose_teal: "#936FA4"
success: "#3FB8A6"
warning: "#F3A93C"
error: "#E5577A"
info: "#5B9BD9"
typography:
headline-lg:
fontFamily: "Fraunces"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.025em"
headline-md:
fontFamily: "Fraunces"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.025em"
body-md:
fontFamily: "Inter Tight"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.6
letterSpacing: "-0.025em"
label-md:
fontFamily: "Spline Sans Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
pane: "2px"
soft: "16px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-rose:
backgroundColor: "{colors.rose}"
color-reference-teal:
backgroundColor: "{colors.teal}"
color-reference-overlap_amber_rose:
backgroundColor: "{colors.overlap_amber_rose}"
color-reference-overlap_teal_amber:
backgroundColor: "{colors.overlap_teal_amber}"
color-reference-overlap_rose_teal:
backgroundColor: "{colors.overlap_rose_teal}"
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.none}"
padding: "{spacing.md}"
card-surface:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.none}"
padding: "{spacing.md}"
input-default:
backgroundColor: "{colors.surface}"
textColor: "{colors.text}"
rounded: "{rounded.none}"
height: "44px"
---
# Lantern
## Overview
A lit-from-behind tissue language. Every surface is a dyed-tissue pane set into thin dark leading (the came), lit from behind so depth, focus and emphasis come from how brightly a pane glows rather than from any outline. Three luminous colours are laid like light through paper over a deep night ground, and the whole interface reads like a paper-lantern walk after dusk. It is a parallel reimagining of the tissue-paper storybook idea, conceived from the same brief but resolved differently: where the storybook pastes opaque cut-paper on a warm cream page, Lantern hangs translucent tissue in dark leading and lights it from behind.
### Values
- Depth and focus from light through paper, never from an outline
- A deep night ground so translucent tissue can glow against the dark
- Three luminous colours used like light through paper; overlaps deepen, never dull
- Calm, legible warmth — a lantern walk, not a dense dashboard
### Anti-Values
- Hard borders, single-accent card edges, or nested boxed chrome
- Warm-cream daylight collage or opaque cut-paper shapes
- Muddy or greyed overlaps; glassmorphism, neon glow, metallic gradients
- Rounded children's-sans headings; tiny dense data-first layouts
### Visual Character
- Surfaces are tissue panes pressed into a thin dark came grid, lit from behind so each pane glows upward as if a candle sat behind it; the came is the only line on the page and depth comes from the bloom, never from a heavier edge.
- Coloured shapes multiply where they overlap into a glowing third tone (amber over rose reads as ember), the lit-from-behind glassine signature, carried in the brand mark, hero, overlap demo and KPI motifs.
- Headings are a warm optical serif (Fraunces) at display size with a single italic accent word in amber; mono kickers sit as small uppercase captions like handmade page annotations.
- Glowing tissue colour drifts as soft blurred blooms inside panes, giving the night ground a lantern-walk depth without stealing focus.
## 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 | `#16122A` |
| surface | `#211C3E` |
| surface_2 | `#2C2552` |
| text | `#F4ECDA` |
| muted | `#9C90BA` |
| border | `#0A0816` |
| accent | `#F3A93C` |
| on_accent | `#16122A` |
| rose | `#E5577A` |
| teal | `#3FB8A6` |
| overlap_amber_rose | `#DD6440` |
| overlap_teal_amber | `#86B264` |
| overlap_rose_teal | `#936FA4` |
| success | `#3FB8A6` |
| warning | `#F3A93C` |
| error | `#E5577A` |
| info | `#5B9BD9` |
## Typography
- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter Tight, 17px, weight 400, line-height 1.6.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
### Grid
A leaded-window grid of tissue panes pressed into a dark came frame, using minmax(0,1fr) columns and min-width:0 children so panes never overflow; a tall feature pane with supporting panes (scene mosaic), plus split and three-up pane rows.
### Whitespace
Generous outer margins and plush internal pane padding; soft blooms breathe in the night around content.
### Density
Medium-low; large controls, short clusters.
### Responsive
Renders from ~390px to 2560px+: single stacked column on mobile with non-essential nav and table columns hidden, full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.
### Breakpoints
- **Mobile**: 560px
- **Tablet**: 860px
- **Desktop**: default
- **Ultrawide**: 1240px cap
## Elevation & Depth
### Shadows
- **Sm**: 0 2px 10px rgba(0,0,0,0.45)
- **Md**: 0 18px 48px rgba(0,0,0,0.55)
- **Glow Amber**: 0 0 40px rgba(243,169,60,0.42)
- **Glow Rose**: 0 0 40px rgba(229,87,122,0.40)
- **Glow Teal**: 0 0 40px rgba(63,184,166,0.38)
## Shapes
### Rounded
- **None**: `0px`
- **Pane**: `2px`
- **Soft**: `16px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: translucent dyed tissue lit from behind
- **Card Style**: A tissue pane pressed into a thin dark came (leading), lit from behind in one of three colours via a soft gradient wash plus a blurred corner bloom; depth and focus come from the glow, never from a border. Panes are never nested and never carry a single accent edge.
- **Bg Pattern**: deep night indigo with soft luminous colour blooms
### Borders
- **Default Width**: 0
- **Style**: none
- **Character**: No structural borders. The dark came (a 3px gap between panes) and the lit-from-behind glow are the structure; the only border token is the came colour, never drawn as an outline on a pane.
## Components
### Composition
Compose screens as a leaded window: glowing tissue panes pressed into a dark came grid over a deep night ground, with a tall feature pane and supporting panes filling the leading around it. Nav sits openly across the header; the dashboard spine is an open rail, never a boxed widget.
### Hierarchy
Oversized Fraunces serif headings with one italic amber accent word first, mono kickers as captions second, calm Inter Tight body on the night third. One button is clearly primary (amber); the rest are quieter.
### Density
Medium-low density with generous breathing room and large touch targets; short clusters of related controls per pane.
### Signature
The leaded pane: every surface is a translucent tissue pane lit from behind in dark leading, and coloured tissues multiply where they overlap into a glowing deeper third tone.
## 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-019ef94b-23a6-7ff3-bbe5-6bd693b94931/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 Build every surface as a lit tissue pane in dark leading; let the glow carry hierarchy.
- Do Let overlapping colours multiply into a glowing third tone; that is the signature.
- Do Keep the deep night ground; use the three colours like light through paper.
- Do Use mono kickers as captions and keep one button clearly primary (amber).
- Don't Do not add borders, single-accent card edges, or nested cards; the came and the glow are the structure.
- Don't Do not let overlaps go grey or muddy; they deepen and glow.
- Don't Do not trap the nav in a floating pill; let it sit openly across the header.
- Don't Do not use glassmorphism, neon, metallic gradients, or a warm-cream daylight ground.
### Accessibility
Body 17px+, table rows 15px+, warm paper-light ink on the night ground for high contrast. Every form control is explicitly styled with a visible 3px amber focus glow. Motion is gated behind a JS class and reduced under prefers-reduced-motion; the settled state renders with no JavaScript.
## Imagery Direction
### Pairs With
glassine
### Summary
Translucent dyed-tissue layers lit from behind against a deep night ground, colours multiplying where sheets overlap, glue-wash edges and crinkle fibre texture. Subjects are evening lantern-walk scenes — strung paper lanterns, a lantern-lit hillside, a paper carp set adrift.
### Subjects
- a strung row of glowing paper lanterns at dusk
- a lantern-lit hillside and riverbank at evening
- a single tissue lantern glowing against the night
- a paper carp lantern set adrift on dark water
### Usage
One full-bleed hero in the Glassine technique, lit from behind so the tissue glows against the dark indigo sky, with calm dark negative space reserved for the headline. Generated with nano-banana-pro.
### Engine Hints
- **Generator**: nano-banana-pro
- **Model**: gemini-3-pro-image-preview
- **Provider**: google
- **Tool**: nano-banana-pro MCP
- **Aspect**: 16:9
- **Size**: 2K
- **Fallback Reason**: openai-image is billing-capped; used nano-banana-pro directly per task instruction.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "lantern",
"type": "registry:theme",
"title": "Lantern shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#16122A",
"foreground": "#F4ECDA",
"card": "#211C3E",
"card-foreground": "#F4ECDA",
"popover": "#211C3E",
"popover-foreground": "#F4ECDA",
"primary": "#F4ECDA",
"primary-foreground": "#111111",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#9C90BA",
"muted-foreground": "#F4ECDA",
"accent": "#F3A93C",
"accent-foreground": "#ffffff",
"destructive": "#E5577A",
"border": "#0A0816",
"input": "#0A0816",
"ring": "#F3A93C",
"chart-1": "#F4ECDA",
"chart-2": "#f4f4f5",
"chart-3": "#F3A93C",
"chart-4": "#3FB8A6",
"chart-5": "#F3A93C",
"sidebar": "#211C3E",
"sidebar-foreground": "#F4ECDA",
"sidebar-primary": "#F4ECDA",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#5B9BD9",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#0A0816",
"sidebar-ring": "#F3A93C",
"radius": "0.625rem"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#F4ECDA",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#F3A93C",
"accent-foreground": "#ffffff",
"destructive": "#E5577A",
"border": "#303642",
"input": "#303642",
"ring": "#F3A93C",
"chart-1": "#F4ECDA",
"chart-2": "#f4f4f5",
"chart-3": "#F3A93C",
"chart-4": "#3FB8A6",
"chart-5": "#F3A93C",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#F4ECDA",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#F3A93C",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#F3A93C",
"radius": "0.625rem"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef94b-23a6-7ff3-bbe5-6bd693b94931",
"slug": "lantern",
"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",
"error",
"info",
"muted",
"on_accent",
"overlap_amber_rose",
"overlap_rose_teal",
"overlap_teal_amber",
"rose",
"success",
"surface",
"surface_2",
"teal",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font"
],
"radii": [
"full",
"none",
"pane",
"soft"
],
"shadows": [
"glow_amber",
"glow_rose",
"glow_teal",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"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 Lanternand 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: #16122A;
--foreground: #F4ECDA;
--card: #211C3E;
--card-foreground: #F4ECDA;
--popover: #211C3E;
--popover-foreground: #F4ECDA;
--primary: #F4ECDA;
--primary-foreground: #111111;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #9C90BA;
--muted-foreground: #F4ECDA;
--accent: #F3A93C;
--accent-foreground: #ffffff;
--destructive: #E5577A;
--border: #0A0816;
--input: #0A0816;
--ring: #F3A93C;
--chart-1: #F4ECDA;
--chart-2: #f4f4f5;
--chart-3: #F3A93C;
--chart-4: #3FB8A6;
--chart-5: #F3A93C;
--sidebar: #211C3E;
--sidebar-foreground: #F4ECDA;
--sidebar-primary: #F4ECDA;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #5B9BD9;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #0A0816;
--sidebar-ring: #F3A93C;
--radius: 0.625rem;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #F4ECDA;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #F3A93C;
--accent-foreground: #ffffff;
--destructive: #E5577A;
--border: #303642;
--input: #303642;
--ring: #F3A93C;
--chart-1: #F4ECDA;
--chart-2: #f4f4f5;
--chart-3: #F3A93C;
--chart-4: #3FB8A6;
--chart-5: #F3A93C;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #F4ECDA;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #F3A93C;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #F3A93C;
--radius: 0.625rem;
}
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 LanternShadcnKit() {
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">Lantern</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": "lantern",
"type": "registry:theme",
"author": "katagami-agent",
"visualProfile": {
"mode": "dark",
"ground": "deep night indigo, tissue lit from behind",
"material": "translucent dyed-tissue panes set in thin dark leading (cames); depth from glow, never from outline",
"radius": "sharp panes (0-2px); pills and dots full; fields and buttons 16px",
"borders": "none — the came (dark gap) and the lit-from-behind glow are the structure",
"shadow": "soft outward colour glow (amber/rose/teal) plus deep night drop shadow",
"accentUsage": "three luminous tissue colours used like light through paper; amber primary",
"typography": "Fraunces serif display with italic accent; Inter Tight body; Spline Sans Mono labels"
},
"cssVars": {
"theme": {
"font-sans": "Inter Tight, system-ui, sans-serif",
"font-serif": "Fraunces, Georgia, serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"radius": "16px"
},
"dark": {
"background": "#16122A",
"foreground": "#F4ECDA",
"card": "#211C3E",
"card-foreground": "#F4ECDA",
"popover": "#211C3E",
"popover-foreground": "#F4ECDA",
"primary": "#F3A93C",
"primary-foreground": "#16122A",
"secondary": "#2C2552",
"secondary-foreground": "#F4ECDA",
"muted": "#2C2552",
"muted-foreground": "#9C90BA",
"accent": "#E5577A",
"accent-foreground": "#16122A",
"destructive": "#E5577A",
"destructive-foreground": "#F4ECDA",
"border": "#0A0816",
"input": "#2C2552",
"ring": "#F3A93C",
"chart-1": "#F3A93C",
"chart-2": "#E5577A",
"chart-3": "#3FB8A6",
"chart-4": "#DD6440",
"chart-5": "#936FA4",
"radius": "16px"
},
"light": {
"background": "#16122A",
"foreground": "#F4ECDA",
"card": "#211C3E",
"card-foreground": "#F4ECDA",
"primary": "#F3A93C",
"primary-foreground": "#16122A",
"border": "#0A0816",
"ring": "#F3A93C"
}
}
}
# Lantern shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef94b-23a6-7ff3-bbe5-6bd693b94931`
Slug: `lantern`
## Intent
A lit-from-behind tissue language. Every surface is a dyed-tissue pane set into thin dark leading (the came), lit from behind so depth, focus and emphasis come from how brightly a pane glows rather than from any outline. Three luminous colours are laid like light through paper over a deep night ground, and the whole interface reads like a paper-lantern walk after dusk. It is a parallel reimagining of the tissue-paper storybook idea, conceived from the same brief but resolved differently: where the storybook pastes opaque cut-paper on a warm cream page, Lantern hangs translucent tissue in dark leading and lights it from behind.
## 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": "#16122A",
"surface": "#211C3E",
"surface_2": "#2C2552",
"text": "#F4ECDA",
"muted": "#9C90BA",
"border": "#0A0816",
"accent": "#F3A93C",
"on_accent": "#16122A",
"rose": "#E5577A",
"teal": "#3FB8A6",
"overlap_amber_rose": "#DD6440",
"overlap_teal_amber": "#86B264",
"overlap_rose_teal": "#936FA4",
"success": "#3FB8A6",
"warning": "#F3A93C",
"error": "#E5577A",
"info": "#5B9BD9"
}
Typography:
{
"base_size": "17px",
"body_font": "Inter Tight",
"heading_font": "Fraunces",
"mono_font": "Spline Sans Mono",
"heading_weight": "800",
"heading_transform": "none",
"letter_spacing": "-0.025em",
"line_height": 1.6,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,800;1,9..144,500&family=Inter+Tight:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap"
}
## Visual character to preserve
- Surfaces are tissue panes pressed into a thin dark came grid, lit from behind so each pane glows upward as if a candle sat behind it; the came is the only line on the page and depth comes from the bloom, never from a heavier edge.
- Coloured shapes multiply where they overlap into a glowing third tone (amber over rose reads as ember), the lit-from-behind glassine signature, carried in the brand mark, hero, overlap demo and KPI motifs.
- Headings are a warm optical serif (Fraunces) at display size with a single italic accent word in amber; mono kickers sit as small uppercase captions like handmade page annotations.
- Glowing tissue colour drifts as soft blurred blooms inside panes, giving the night ground a lantern-walk depth without stealing focus.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"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/lantern/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: Build every surface as a lit tissue pane in dark leading; let the glow carry hierarchy.; Let overlapping colours multiply into a glowing third tone; that is the signature.; Keep the deep night ground; use the three colours like light through paper.; Use mono kickers as captions and keep one button clearly primary (amber).
- Do not: Do not add borders, single-accent card edges, or nested cards; the came and the glow are the structure.; Do not let overlaps go grey or muddy; they deepen and glow.; Do not trap the nav in a floating pill; let it sit openly across the header.; Do not use glassmorphism, neon, metallic gradients, or a warm-cream daylight ground.
## 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 LanternShadcnKit() {
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">Lantern</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": "A leaded-window grid of tissue panes pressed into a dark came frame, using minmax(0,1fr) columns and min-width:0 children so panes never overflow; a tall feature pane with supporting panes (scene mosaic), plus split and three-up pane rows.",
"whitespace": "Generous outer margins and plush internal pane padding; soft blooms breathe in the night around content.",
"density": "Medium-low; large controls, short clusters.",
"responsive": "Renders from ~390px to 2560px+: single stacked column on mobile with non-essential nav and table columns hidden, full-bleed hero spans 100vw, contained content caps and centres on ultra-wide.",
"breakpoints": {
"mobile": "560px",
"tablet": "860px",
"desktop": "default",
"ultrawide": "1240px cap"
}
}
{
"artifact": "katagami:shadcn-preview-shots",
"version": "preview-shots-v1",
"generator": "katagami-ui-compatibility-projection",
"generatedBy": "katagami-ui-projection",
"requiresVisualProfile": true,
"schema": "katagami:shadcn-preview-shots/renderable-v1",
"renderable": true,
"language": {
"id": "en-019ef94b-23a6-7ff3-bbe5-6bd693b94931",
"name": "Lantern",
"slug": "lantern"
},
"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": [
"Surfaces are tissue panes pressed into a thin dark came grid, lit from behind so each pane glows upward as if a candle sat behind it; the came is the only line on the page and depth comes from the bloom, never from a heavier edge.",
"Coloured shapes multiply where they overlap into a glowing third tone (amber over rose reads as ember), the lit-from-behind glassine signature, carried in the brand mark, hero, overlap demo and KPI motifs.",
"Headings are a warm optical serif (Fraunces) at display size with a single italic accent word in amber; mono kickers sit as small uppercase captions like handmade page annotations.",
"Glowing tissue colour drifts as soft blurred blooms inside panes, giving the night ground a lantern-walk depth without stealing focus."
],
"visualProfile": {
"family": "editorial",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
},
"shots": [
{
"id": "application-shell",
"title": "Application shell",
"viewport": "desktop",
"primitives": [
"button",
"card",
"input",
"select",
"tabs",
"badge",
"separator",
"table"
],
"composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
"mustShow": [
"primary and secondary actions",
"card hierarchy",
"filterable state",
"table or list density"
],
"avoid": [
"component inventory walls",
"placeholder-only content",
"generic rounded SaaS chrome"
],
"scene": {
"eyebrow": "workspace spread",
"headline": "Lantern launch room",
"description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
"primaryAction": "Apply theme",
"secondaryAction": "Review states",
"stats": [
{
"label": "components",
"value": "16",
"tone": "accent"
},
{
"label": "states",
"value": "ready"
},
{
"label": "density",
"value": "balanced",
"tone": "warning"
}
],
"rows": [
{
"label": "Primary flow",
"value": "mapped",
"status": "active"
},
{
"label": "Token coverage",
"value": "semantic",
"status": "synced"
},
{
"label": "Responsive proof",
"value": "queued",
"status": "review"
}
],
"statuses": [
"Active",
"Synced",
"Draft"
]
}
},
{
"id": "detail-editor",
"title": "Detail editor",
"viewport": "tablet",
"primitives": [
"button",
"card",
"input",
"textarea",
"select",
"checkbox",
"switch",
"slider",
"dialog",
"sheet"
],
"composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
"mustShow": [
"focus ring",
"error or destructive state",
"dialog or sheet treatment",
"written guidance content"
],
"avoid": [
"unstyled browser controls",
"floating cards inside cards",
"missing labels"
],
"scene": {
"eyebrow": "editing flow",
"headline": "Language recipe editor",
"description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
"primaryAction": "Save recipe",
"secondaryAction": "Open sheet",
"fields": [
{
"label": "Component family",
"value": "Narrative cards"
},
{
"label": "State treatment",
"value": "Visible focus + validation"
},
{
"label": "Motion",
"value": "Small lift, no opacity-only fade"
}
],
"statuses": [
"Focus",
"Invalid",
"Confirmed"
]
}
},
{
"id": "data-operations",
"title": "Data operations",
"viewport": "mobile",
"primitives": [
"button",
"tabs",
"badge",
"dropdown-menu",
"table",
"tooltip",
"separator"
],
"composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
"mustShow": [
"responsive reflow",
"dense row styling",
"menu affordance",
"status badge system"
],
"avoid": [
"desktop-only tables",
"text overflow",
"default shadcn spacing without Katagami character"
],
"scene": {
"eyebrow": "operations",
"headline": "Compact review queue",
"description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
"primaryAction": "Resolve",
"secondaryAction": "Filter",
"rows": [
{
"label": "Button hierarchy",
"value": "approved",
"status": "ok"
},
{
"label": "Table rhythm",
"value": "needs pass",
"status": "watch"
},
{
"label": "Empty state",
"value": "designed",
"status": "done"
}
],
"statuses": [
"Queued",
"Blocked",
"Done"
]
}
}
],
"componentRecipes": [
{
"primitive": "button",
"intent": "Prove action hierarchy, focus, disabled, and destructive states."
},
{
"primitive": "card",
"intent": "Carry the language surface, border, elevation, and density rules."
},
{
"primitive": "input",
"intent": "Show labels, focus rings, validation, and spacing rhythm."
},
{
"primitive": "textarea",
"intent": "Show longer guidance, validation copy, and writing density."
},
{
"primitive": "select",
"intent": "Show filtering, selection contrast, and menu trigger styling."
},
{
"primitive": "dialog",
"intent": "Show centered decision states and overlay treatment."
},
{
"primitive": "sheet",
"intent": "Show contextual side panels and responsive editing."
},
{
"primitive": "tabs",
"intent": "Show navigational structure and active/inactive contrast."
},
{
"primitive": "badge",
"intent": "Show compact status vocabulary and semantic colors."
},
{
"primitive": "separator",
"intent": "Show section rhythm without generic gray dividers."
},
{
"primitive": "checkbox",
"intent": "Show binary selection with visible focus and checked states."
},
{
"primitive": "switch",
"intent": "Show settings toggles and on/off contrast."
},
{
"primitive": "slider",
"intent": "Show numeric adjustment with track/thumb styling."
},
{
"primitive": "tooltip",
"intent": "Show concise explanation styling above compact controls."
},
{
"primitive": "dropdown-menu",
"intent": "Show action menus, destructive items, and grouped choices."
},
{
"primitive": "table",
"intent": "Show dense operational data, separators, row states, and responsive behavior."
}
],
"qualityRules": {
"do": [
"Build every surface as a lit tissue pane in dark leading; let the glow carry hierarchy.",
"Let overlapping colours multiply into a glowing third tone; that is the signature.",
"Keep the deep night ground; use the three colours like light through paper.",
"Use mono kickers as captions and keep one button clearly primary (amber)."
],
"dont": [
"Do not add borders, single-accent card edges, or nested cards; the came and the glow are the structure.",
"Do not let overlaps go grey or muddy; they deepen and glow.",
"Do not trap the nav in a floating pill; let it sit openly across the header.",
"Do not use glassmorphism, neon, metallic gradients, or a warm-cream daylight ground."
]
}
}