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 pages as plateaus and grooves carved from one continuous near-black field, not boxed cards on a blank canvas. High-level regions rise into raised plateaus; inside them, data, controls and inputs sink into incised grooves, so the page reads as a landscape of convex and concave forms under one lower-right rake.
Use depth before colour. The strongest action is the most raised element; secondary content sits flush; editable areas recess inward. The cyan vein is reserved for lit incised lips, progress fills, active-tab rings and small status beads.
Moderate density with generous cushion around every cluster — 24-32px inside trays on desktop. Content can be information-rich, but each cluster keeps breathing room and large rounded containment so the single-material illusion holds.
The incised cut: every module is carved from one near-black mineral field with a paired highlight/shadow set (light lower-right); inputs and tables sink into incised grooves; the cyan mineral vein appears only as a thin lit seam on an incised lip and as small left-edge beads, never as a flat fill.
Desktop is a carved dashboard / scrolling-section grid: a full-bleed relievo hero, then contained sections capped at ~1140px. Dashboards use a 248px raised sidebar tray plus a fluid main column of raised plateaus and incised grooves. Tablet reduces multi-column splits to stacked trays; phone is a single stack preserving the nested grooves.
At 1100px the readout grid drops to two columns and the split stacks. At 860px the dashboard sidebar collapses to a wrapped horizontal nav. At 680px all grids become a single column and non-essential table columns drop. At 560px readouts go single-column. At 390px action clusters go full-width, the headline clamps and wraps, the coordinate strip wraps, and nothing overflows horizontally.
Padded and air-cushioned: 24-32px inside trays on desktop, 20px on tablet, 16-18px on phone. Avoid narrow gutters that would break the single-material illusion.
Renders from ~390px to 2560px+; only the hero spans 100vw, contained content is capped and centred on ultra-wide.
relievo
Subjects rendered as low-relief sculpture carved from one continuous matte near-black mineral material, read entirely through a single low LOWER-RIGHT raking light — raised highlights, recessed shadows, no outlines — with a single cyan mineral accent appearing only as a thin lit seam on an incised lip and as small glowing beads.
One full-bleed landing hero of a carved dark-stone monolith with bare moulded material in the lower-left for the headline overlay; feature and spot images keep generous bare material as negative space and one lit cyan seam.
# Intaglio ## Philosophy Intaglio carves the interface INTO one dark slab of mineral stone, read by a single low light from the lower-right. Plateaus rise off the field to act, grooves sink into it to receive, and a single luminous cyan mineral vein lights only the lip the rake catches. It is an evolution of the neumorphic idea worked in the opposite direction from its warm-clay sibling: a near-black ground instead of a pale field, an inverse lower-right rake, a cut-geometric display face instead of a serif, and one rationed cyan vein instead of a pastel fill. Depth is the hierarchy; light is the only edge; borders never enter. ### Values - one continuous dark slab over fragmented boxes - depth as hierarchy, height as priority - carved tactility, calm at full density - one mineral vein, used like a highlighter - honest bone-on-stone contrast ### Anti-Values - drawn borders and single-edge accents - pastel washes or accent floods - mixed light directions - the soft startup serif and the serif/italic word-swap - defaulting to a white ground ### Visual Character - every region is carved from one near-black mineral field using a paired highlight/shadow set instead of borders, lit from a single LOWER-RIGHT rake - raised plateaus act and incised grooves receive, so depth alone tells you what a thing is - large soft fillets dominate; radii are 16 or 24px and nothing has a sharp corner - the cyan mineral vein appears only as a thin lit seam on an incised lip and as small glowing beads, never as a flat fill - alerts and status chips carry a small left-edge light-bead; inputs and tables sink into incised wells ## Tokens ### Colors | Name | Value | |------|-------| | primary | `#2FE0C8` | | secondary | `#6F94BC` | | accent | `#2FE0C8` | | background | `#15171A` | | surface | `#1C1F23` | | surface_2 | `#232830` | | well | `#0F1114` | | text | `#ECE9E3` | | muted | `#939AA3` | | border | `#2A2F36` | | on_accent | `#0B1311` | | error | `#E0685F` | | success | `#57C99A` | | warning | `#E8A04A` | | info | `#6F94BC` | ### Typography - **Heading Font**: "Space Grotesk", "Inter", system-ui, sans-serif - **Body Font**: "Inter", system-ui, sans-serif - **Mono Font**: "IBM Plex Mono", ui-monospace, monospace - **Base Size**: 18px - **Scale Ratio**: 1.2 - **Line Height**: 1.6 - **Letter Spacing**: -0.011em - **Heading Weight**: 600 - **Heading Transform**: none - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap ### Spacing - **Base Unit**: 8px - **Base**: 8px - **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px","96px"] ### Radii - **None**: 0px - **Sm**: 16px - **Md**: 24px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Raise**: 9px 9px 22px rgba(0,0,0,0.55), -7px -7px 18px rgba(255,255,255,0.030) - **Raise Sm**: 5px 5px 13px rgba(0,0,0,0.5), -4px -4px 11px rgba(255,255,255,0.028) - **Raise Lg**: 14px 14px 34px rgba(0,0,0,0.6), -10px -10px 26px rgba(255,255,255,0.034) - **Incise**: inset 7px 7px 15px rgba(0,0,0,0.62), inset -6px -6px 13px rgba(255,255,255,0.026) - **Incise Sm**: inset 4px 4px 9px rgba(0,0,0,0.6), inset -4px -4px 9px rgba(255,255,255,0.024) ### Surfaces - **Treatment**: relief - **Card Style**: raised plateaus carved from one continuous near-black mineral field; inner regions sink into incised grooves - **Bg Pattern**: none ### Borders - **Default Width**: 0px - **Accent Width**: 0px - **Style**: none - **Character**: no borders anywhere; separation is relief, the cyan vein only on a lit incised lip ### Motion - **Duration**: 220ms - **Easing**: cubic-bezier(0.22, 1, 0.36, 1) - **Philosophy**: deliberate, cushioned; sections reveal on scroll over a fully-rendered no-JS settled state; respects prefers-reduced-motion ### Responsive - **Breakpoints**: [1200,1100,980,860,680,560,430,390] - **Column Progression**: 12 → 8 → 4 → 1 ## Rules ### Composition Compose pages as plateaus and grooves carved from one continuous near-black field, not boxed cards on a blank canvas. High-level regions rise into raised plateaus; inside them, data, controls and inputs sink into incised grooves, so the page reads as a landscape of convex and concave forms under one lower-right rake. ### Hierarchy Use depth before colour. The strongest action is the most raised element; secondary content sits flush; editable areas recess inward. The cyan vein is reserved for lit incised lips, progress fills, active-tab rings and small status beads. ### Density Moderate density with generous cushion around every cluster — 24-32px inside trays on desktop. Content can be information-rich, but each cluster keeps breathing room and large rounded containment so the single-material illusion holds. ### Signature The incised cut: every module is carved from one near-black mineral field with a paired highlight/shadow set (light lower-right); inputs and tables sink into incised grooves; the cyan mineral vein appears only as a thin lit seam on an incised lip and as small left-edge beads, never as a flat fill. ### Signature Patterns - every major module uses the paired highlight/shadow relief to lift a raised plateau off the field; primary actions are the most raised - inputs, selects, search bars, sliders, progress tracks and tables sit inside concave incised grooves built with inset shadows - active tabs and badges are capsules with a small cyan bead, never hard fills or underlines - alerts and status chips carry a small glowing light-bead aligned to the left edge instead of a coloured panel - the cyan accent only ever appears where the rake catches an incised lip — a thin lit seam — or as a status bead ## Layout ### Grid Desktop is a carved dashboard / scrolling-section grid: a full-bleed relievo hero, then contained sections capped at ~1140px. Dashboards use a 248px raised sidebar tray plus a fluid main column of raised plateaus and incised grooves. Tablet reduces multi-column splits to stacked trays; phone is a single stack preserving the nested grooves. ### Breakpoints At 1100px the readout grid drops to two columns and the split stacks. At 860px the dashboard sidebar collapses to a wrapped horizontal nav. At 680px all grids become a single column and non-essential table columns drop. At 560px readouts go single-column. At 390px action clusters go full-width, the headline clamps and wraps, the coordinate strip wraps, and nothing overflows horizontally. ### Whitespace Padded and air-cushioned: 24-32px inside trays on desktop, 20px on tablet, 16-18px on phone. Avoid narrow gutters that would break the single-material illusion. ### Responsive Renders from ~390px to 2560px+; only the hero spans 100vw, contained content is capped and centred on ultra-wide. ### Breakpoints Map - **Xl**: 1200 - **Lg**: 1100 - **Md**: 860 - **Sm**: 680 - **Xs**: 390 ## Guidance ### Do - Keep one consistent light from the lower-right; raise to act, sink to receive. - Ration the cyan vein to lit lips, beads, fills and rings — never a panel flood. - Use depth, not colour, to carry hierarchy and state. - Keep bone text at honest contrast on the dark stone; use mono for engraved labels. - Use large soft fillets and generous cushion so the single-material illusion holds. ### Don't - Do not draw borders or single-edge accents around containers. - Do not flood panels with the cyan accent. - Do not mix light directions or inconsistent relief depths. - Do not use the soft startup serif or the serif/italic headline swap. - Do not default to a white ground — the relief and vein read on dark stone. ### Accessibility Bone text (#ECE9E3) on stone (#15171A/#1C1F23) holds well above 4.5:1. State is never carried by the cyan vein alone — status beads also carry shape and position, and labels are explicit. Motion respects prefers-reduced-motion; the settled state renders with no JavaScript. ## Imagery Direction ### Pairs With relievo ### Summary Subjects rendered as low-relief sculpture carved from one continuous matte near-black mineral material, read entirely through a single low LOWER-RIGHT raking light — raised highlights, recessed shadows, no outlines — with a single cyan mineral accent appearing only as a thin lit seam on an incised lip and as small glowing beads. ### Subjects - a carved mineral monolith whose incised channels read as moulded interface panels - a face in low relief cut into dark stone - a small city as continuous relief on a slab - a single object such as a teapot pressed in relief - an engraved botanical sprig ### Usage One full-bleed landing hero of a carved dark-stone monolith with bare moulded material in the lower-left for the headline overlay; feature and spot images keep generous bare material as negative space and one lit cyan seam. ### Engine Hints - **Model**: gpt-image-2 - **Provider**: openai - **Tool**: openai-image MCP - **Size**: 1536x1024 - **Quality**: high
---
version: "alpha"
name: "Intaglio"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
primary: "#2FE0C8"
secondary: "#6F94BC"
accent: "#2FE0C8"
background: "#15171A"
surface: "#1C1F23"
surface_2: "#232830"
well: "#0F1114"
text: "#ECE9E3"
muted: "#939AA3"
border: "#2A2F36"
on_accent: "#0B1311"
error: "#E0685F"
success: "#57C99A"
warning: "#E8A04A"
info: "#6F94BC"
typography:
headline-lg:
fontFamily: "\"Space Grotesk\", \"Inter\", system-ui, sans-serif"
fontSize: "2.197rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.011em"
headline-md:
fontFamily: "\"Space Grotesk\", \"Inter\", system-ui, sans-serif"
fontSize: "1.758rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.011em"
body-md:
fontFamily: "\"Inter\", system-ui, sans-serif"
fontSize: "18px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.011em"
label-md:
fontFamily: "\"IBM Plex Mono\", ui-monospace, monospace"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "16px"
md: "24px"
lg: "24px"
full: "9999px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
base_unit: "8px"
components:
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-well:
backgroundColor: "{colors.well}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-info:
backgroundColor: "{colors.info}"
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"
---
# Intaglio
## Overview
Intaglio carves the interface INTO one dark slab of mineral stone, read by a single low light from the lower-right. Plateaus rise off the field to act, grooves sink into it to receive, and a single luminous cyan mineral vein lights only the lip the rake catches. It is an evolution of the neumorphic idea worked in the opposite direction from its warm-clay sibling: a near-black ground instead of a pale field, an inverse lower-right rake, a cut-geometric display face instead of a serif, and one rationed cyan vein instead of a pastel fill. Depth is the hierarchy; light is the only edge; borders never enter.
### Values
- one continuous dark slab over fragmented boxes
- depth as hierarchy, height as priority
- carved tactility, calm at full density
- one mineral vein, used like a highlighter
- honest bone-on-stone contrast
### Anti-Values
- drawn borders and single-edge accents
- pastel washes or accent floods
- mixed light directions
- the soft startup serif and the serif/italic word-swap
- defaulting to a white ground
### Visual Character
- every region is carved from one near-black mineral field using a paired highlight/shadow set instead of borders, lit from a single LOWER-RIGHT rake
- raised plateaus act and incised grooves receive, so depth alone tells you what a thing is
- large soft fillets dominate; radii are 16 or 24px and nothing has a sharp corner
- the cyan mineral vein appears only as a thin lit seam on an incised lip and as small glowing beads, never as a flat fill
- alerts and status chips carry a small left-edge light-bead; inputs and tables sink into incised wells
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| primary | `#2FE0C8` |
| secondary | `#6F94BC` |
| accent | `#2FE0C8` |
| background | `#15171A` |
| surface | `#1C1F23` |
| surface_2 | `#232830` |
| well | `#0F1114` |
| text | `#ECE9E3` |
| muted | `#939AA3` |
| border | `#2A2F36` |
| on_accent | `#0B1311` |
| error | `#E0685F` |
| success | `#57C99A` |
| warning | `#E8A04A` |
| info | `#6F94BC` |
## Typography
- **Headline-Lg**: "Space Grotesk", "Inter", system-ui, sans-serif, 2.197rem, weight 700, line-height 1.1.
- **Headline-Md**: "Space Grotesk", "Inter", system-ui, sans-serif, 1.758rem, weight 600, line-height 1.15.
- **Body-Md**: "Inter", system-ui, sans-serif, 18px, weight 400, line-height 1.5.
- **Label-Md**: "IBM Plex Mono", ui-monospace, monospace, 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`
- **Base Unit**: `8px`
### Grid
Desktop is a carved dashboard / scrolling-section grid: a full-bleed relievo hero, then contained sections capped at ~1140px. Dashboards use a 248px raised sidebar tray plus a fluid main column of raised plateaus and incised grooves. Tablet reduces multi-column splits to stacked trays; phone is a single stack preserving the nested grooves.
### Breakpoints
At 1100px the readout grid drops to two columns and the split stacks. At 860px the dashboard sidebar collapses to a wrapped horizontal nav. At 680px all grids become a single column and non-essential table columns drop. At 560px readouts go single-column. At 390px action clusters go full-width, the headline clamps and wraps, the coordinate strip wraps, and nothing overflows horizontally.
### Whitespace
Padded and air-cushioned: 24-32px inside trays on desktop, 20px on tablet, 16-18px on phone. Avoid narrow gutters that would break the single-material illusion.
### Responsive
Renders from ~390px to 2560px+; only the hero spans 100vw, contained content is capped and centred on ultra-wide.
### Breakpoints Map
- **Xl**: 1200
- **Lg**: 1100
- **Md**: 860
- **Sm**: 680
- **Xs**: 390
## Elevation & Depth
### Shadows
- **Raise**: 9px 9px 22px rgba(0,0,0,0.55), -7px -7px 18px rgba(255,255,255,0.030)
- **Raise Sm**: 5px 5px 13px rgba(0,0,0,0.5), -4px -4px 11px rgba(255,255,255,0.028)
- **Raise Lg**: 14px 14px 34px rgba(0,0,0,0.6), -10px -10px 26px rgba(255,255,255,0.034)
- **Incise**: inset 7px 7px 15px rgba(0,0,0,0.62), inset -6px -6px 13px rgba(255,255,255,0.026)
- **Incise Sm**: inset 4px 4px 9px rgba(0,0,0,0.6), inset -4px -4px 9px rgba(255,255,255,0.024)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `16px`
- **Md**: `24px`
- **Lg**: `24px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: relief
- **Card Style**: raised plateaus carved from one continuous near-black mineral field; inner regions sink into incised grooves
- **Bg Pattern**: none
### Borders
- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: no borders anywhere; separation is relief, the cyan vein only on a lit incised lip
## Components
### Composition
Compose pages as plateaus and grooves carved from one continuous near-black field, not boxed cards on a blank canvas. High-level regions rise into raised plateaus; inside them, data, controls and inputs sink into incised grooves, so the page reads as a landscape of convex and concave forms under one lower-right rake.
### Hierarchy
Use depth before colour. The strongest action is the most raised element; secondary content sits flush; editable areas recess inward. The cyan vein is reserved for lit incised lips, progress fills, active-tab rings and small status beads.
### Density
Moderate density with generous cushion around every cluster — 24-32px inside trays on desktop. Content can be information-rich, but each cluster keeps breathing room and large rounded containment so the single-material illusion holds.
### Signature
The incised cut: every module is carved from one near-black mineral field with a paired highlight/shadow set (light lower-right); inputs and tables sink into incised grooves; the cyan mineral vein appears only as a thin lit seam on an incised lip and as small left-edge beads, never as a flat fill.
### Signature Patterns
- every major module uses the paired highlight/shadow relief to lift a raised plateau off the field; primary actions are the most raised
- inputs, selects, search bars, sliders, progress tracks and tables sit inside concave incised grooves built with inset shadows
- active tabs and badges are capsules with a small cyan bead, never hard fills or underlines
- alerts and status chips carry a small glowing light-bead aligned to the left edge instead of a coloured panel
- the cyan accent only ever appears where the rake catches an incised lip — a thin lit seam — or as a status bead
## 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-019efd75-929a-7390-b28a-de3e519642fd/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 Keep one consistent light from the lower-right; raise to act, sink to receive.
- Do Ration the cyan vein to lit lips, beads, fills and rings — never a panel flood.
- Do Use depth, not colour, to carry hierarchy and state.
- Do Keep bone text at honest contrast on the dark stone; use mono for engraved labels.
- Do Use large soft fillets and generous cushion so the single-material illusion holds.
- Don't Do not draw borders or single-edge accents around containers.
- Don't Do not flood panels with the cyan accent.
- Don't Do not mix light directions or inconsistent relief depths.
- Don't Do not use the soft startup serif or the serif/italic headline swap.
- Don't Do not default to a white ground — the relief and vein read on dark stone.
### Accessibility
Bone text (#ECE9E3) on stone (#15171A/#1C1F23) holds well above 4.5:1. State is never carried by the cyan vein alone — status beads also carry shape and position, and labels are explicit. Motion respects prefers-reduced-motion; the settled state renders with no JavaScript.
## Imagery Direction
### Pairs With
relievo
### Summary
Subjects rendered as low-relief sculpture carved from one continuous matte near-black mineral material, read entirely through a single low LOWER-RIGHT raking light — raised highlights, recessed shadows, no outlines — with a single cyan mineral accent appearing only as a thin lit seam on an incised lip and as small glowing beads.
### Subjects
- a carved mineral monolith whose incised channels read as moulded interface panels
- a face in low relief cut into dark stone
- a small city as continuous relief on a slab
- a single object such as a teapot pressed in relief
- an engraved botanical sprig
### Usage
One full-bleed landing hero of a carved dark-stone monolith with bare moulded material in the lower-left for the headline overlay; feature and spot images keep generous bare material as negative space and one lit cyan seam.
### Engine Hints
- **Model**: gpt-image-2
- **Provider**: openai
- **Tool**: openai-image MCP
- **Size**: 1536x1024
- **Quality**: high
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "intaglio",
"type": "registry:theme",
"title": "Intaglio shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#15171A",
"foreground": "#ECE9E3",
"card": "#1C1F23",
"card-foreground": "#ECE9E3",
"popover": "#1C1F23",
"popover-foreground": "#ECE9E3",
"primary": "#2FE0C8",
"primary-foreground": "#111111",
"secondary": "#6F94BC",
"secondary-foreground": "#ffffff",
"muted": "#939AA3",
"muted-foreground": "#ECE9E3",
"accent": "#2FE0C8",
"accent-foreground": "#111111",
"destructive": "#E0685F",
"border": "#2A2F36",
"input": "#2A2F36",
"ring": "#2FE0C8",
"chart-1": "#2FE0C8",
"chart-2": "#6F94BC",
"chart-3": "#2FE0C8",
"chart-4": "#57C99A",
"chart-5": "#E8A04A",
"sidebar": "#1C1F23",
"sidebar-foreground": "#ECE9E3",
"sidebar-primary": "#2FE0C8",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#6F94BC",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#2A2F36",
"sidebar-ring": "#2FE0C8",
"radius": "24px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#2FE0C8",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#2FE0C8",
"accent-foreground": "#111111",
"destructive": "#E0685F",
"border": "#303642",
"input": "#303642",
"ring": "#2FE0C8",
"chart-1": "#2FE0C8",
"chart-2": "#6F94BC",
"chart-3": "#2FE0C8",
"chart-4": "#57C99A",
"chart-5": "#E8A04A",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#2FE0C8",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#2FE0C8",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#303642",
"sidebar-ring": "#2FE0C8",
"radius": "24px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019efd75-929a-7390-b28a-de3e519642fd",
"slug": "intaglio",
"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",
"background",
"border",
"error",
"info",
"muted",
"on_accent",
"primary",
"secondary",
"success",
"surface",
"surface_2",
"text",
"warning",
"well"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"spacing": [
"base",
"base_unit",
"scale"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"shadows": [
"incise",
"incise_sm",
"raise",
"raise_lg",
"raise_sm"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"character",
"default_width",
"style"
],
"motion": [
"duration",
"easing",
"philosophy"
],
"responsive": [
"breakpoints",
"column_progression"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Agent-generated
produced by opus-4.8 · sourced by opus-4.8 · images by gpt-image-2
Keep Intaglioand 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: #15171A;
--foreground: #ECE9E3;
--card: #1C1F23;
--card-foreground: #ECE9E3;
--popover: #1C1F23;
--popover-foreground: #ECE9E3;
--primary: #2FE0C8;
--primary-foreground: #111111;
--secondary: #6F94BC;
--secondary-foreground: #ffffff;
--muted: #939AA3;
--muted-foreground: #ECE9E3;
--accent: #2FE0C8;
--accent-foreground: #111111;
--destructive: #E0685F;
--border: #2A2F36;
--input: #2A2F36;
--ring: #2FE0C8;
--chart-1: #2FE0C8;
--chart-2: #6F94BC;
--chart-3: #2FE0C8;
--chart-4: #57C99A;
--chart-5: #E8A04A;
--sidebar: #1C1F23;
--sidebar-foreground: #ECE9E3;
--sidebar-primary: #2FE0C8;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #6F94BC;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #2A2F36;
--sidebar-ring: #2FE0C8;
--radius: 24px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #2FE0C8;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #2FE0C8;
--accent-foreground: #111111;
--destructive: #E0685F;
--border: #303642;
--input: #303642;
--ring: #2FE0C8;
--chart-1: #2FE0C8;
--chart-2: #6F94BC;
--chart-3: #2FE0C8;
--chart-4: #57C99A;
--chart-5: #E8A04A;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #2FE0C8;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #2FE0C8;
--sidebar-accent-foreground: #111111;
--sidebar-border: #303642;
--sidebar-ring: #2FE0C8;
--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 IntaglioShadcnKit() {
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">Intaglio</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": "intaglio",
"type": "registry:theme",
"cssVars": {
"theme": {
"font-sans": "Inter, system-ui, sans-serif",
"font-display": "Space Grotesk, Inter, sans-serif",
"font-mono": "IBM Plex Mono, ui-monospace, monospace",
"radius": "1.5rem"
},
"light": {
"background": "#15171A",
"foreground": "#ECE9E3",
"card": "#1C1F23",
"card-foreground": "#ECE9E3",
"popover": "#1C1F23",
"popover-foreground": "#ECE9E3",
"primary": "#2FE0C8",
"primary-foreground": "#0B1311",
"secondary": "#232830",
"secondary-foreground": "#ECE9E3",
"muted": "#0F1114",
"muted-foreground": "#939AA3",
"accent": "#232830",
"accent-foreground": "#2FE0C8",
"destructive": "#E0685F",
"destructive-foreground": "#0B1311",
"border": "#2A2F36",
"input": "#0F1114",
"ring": "#2FE0C8",
"chart-1": "#2FE0C8",
"chart-2": "#6F94BC",
"chart-3": "#E8A04A",
"chart-4": "#57C99A",
"chart-5": "#939AA3",
"radius": "1.5rem"
},
"dark": {
"background": "#15171A",
"foreground": "#ECE9E3",
"card": "#1C1F23",
"card-foreground": "#ECE9E3",
"popover": "#1C1F23",
"popover-foreground": "#ECE9E3",
"primary": "#2FE0C8",
"primary-foreground": "#0B1311",
"secondary": "#232830",
"secondary-foreground": "#ECE9E3",
"muted": "#0F1114",
"muted-foreground": "#939AA3",
"accent": "#232830",
"accent-foreground": "#2FE0C8",
"destructive": "#E0685F",
"destructive-foreground": "#0B1311",
"border": "#2A2F36",
"input": "#0F1114",
"ring": "#2FE0C8",
"chart-1": "#2FE0C8",
"chart-2": "#6F94BC",
"chart-3": "#E8A04A",
"chart-4": "#57C99A",
"chart-5": "#939AA3",
"radius": "1.5rem"
}
},
"visualProfile": {
"mode": "dark",
"ground": "near-black mineral stone (#15171A), single continuous material",
"material": "neumorphic relief — paired highlight/shadow, light from the LOWER-RIGHT; raised plateaus act, incised wells receive",
"borders": "none — separation is relief, never a drawn edge; the only line is a thin lit cyan seam on an incised lip",
"radius": "16px / 24px / 9999px — large soft fillets, no sharp corners",
"accent": "one mineral-vein cyan (#2FE0C8) used like a highlighter on lit lips, beads, fills and rings; never a flat fill",
"shadow": "dual relief shadows; raise = lower-right highlight + upper-left shadow; incise = inset",
"typography": "Space Grotesk display (cut, geometric), Inter body, IBM Plex Mono labels",
"elevation": "depth before colour — the most raised element is the strongest action"
}
}
# Intaglio shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019efd75-929a-7390-b28a-de3e519642fd`
Slug: `intaglio`
## Intent
Intaglio carves the interface INTO one dark slab of mineral stone, read by a single low light from the lower-right. Plateaus rise off the field to act, grooves sink into it to receive, and a single luminous cyan mineral vein lights only the lip the rake catches. It is an evolution of the neumorphic idea worked in the opposite direction from its warm-clay sibling: a near-black ground instead of a pale field, an inverse lower-right rake, a cut-geometric display face instead of a serif, and one rationed cyan vein instead of a pastel fill. Depth is the hierarchy; light is the only edge; borders never enter.
## 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:
{
"primary": "#2FE0C8",
"secondary": "#6F94BC",
"accent": "#2FE0C8",
"background": "#15171A",
"surface": "#1C1F23",
"surface_2": "#232830",
"well": "#0F1114",
"text": "#ECE9E3",
"muted": "#939AA3",
"border": "#2A2F36",
"on_accent": "#0B1311",
"error": "#E0685F",
"success": "#57C99A",
"warning": "#E8A04A",
"info": "#6F94BC"
}
Typography:
{
"heading_font": "\"Space Grotesk\", \"Inter\", system-ui, sans-serif",
"body_font": "\"Inter\", system-ui, sans-serif",
"mono_font": "\"IBM Plex Mono\", ui-monospace, monospace",
"base_size": "18px",
"scale_ratio": "1.2",
"line_height": "1.6",
"letter_spacing": "-0.011em",
"heading_weight": "600",
"heading_transform": "none",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap"
}
## Visual character to preserve
- every region is carved from one near-black mineral field using a paired highlight/shadow set instead of borders, lit from a single LOWER-RIGHT rake
- raised plateaus act and incised grooves receive, so depth alone tells you what a thing is
- large soft fillets dominate; radii are 16 or 24px and nothing has a sharp corner
- the cyan mineral vein appears only as a thin lit seam on an incised lip and as small glowing beads, never as a flat fill
- alerts and status chips carry a small left-edge light-bead; inputs and tables sink into incised wells
## ShadSync visual profile
{
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": true,
"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/intaglio/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: Keep one consistent light from the lower-right; raise to act, sink to receive.; Ration the cyan vein to lit lips, beads, fills and rings — never a panel flood.; Use depth, not colour, to carry hierarchy and state.; Keep bone text at honest contrast on the dark stone; use mono for engraved labels.; Use large soft fillets and generous cushion so the single-material illusion holds.
- Do not: Do not draw borders or single-edge accents around containers.; Do not flood panels with the cyan accent.; Do not mix light directions or inconsistent relief depths.; Do not use the soft startup serif or the serif/italic headline swap.; Do not default to a white ground — the relief and vein read on dark stone.
## 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 IntaglioShadcnKit() {
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">Intaglio</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": "Desktop is a carved dashboard / scrolling-section grid: a full-bleed relievo hero, then contained sections capped at ~1140px. Dashboards use a 248px raised sidebar tray plus a fluid main column of raised plateaus and incised grooves. Tablet reduces multi-column splits to stacked trays; phone is a single stack preserving the nested grooves.",
"breakpoints": "At 1100px the readout grid drops to two columns and the split stacks. At 860px the dashboard sidebar collapses to a wrapped horizontal nav. At 680px all grids become a single column and non-essential table columns drop. At 560px readouts go single-column. At 390px action clusters go full-width, the headline clamps and wraps, the coordinate strip wraps, and nothing overflows horizontally.",
"whitespace": "Padded and air-cushioned: 24-32px inside trays on desktop, 20px on tablet, 16-18px on phone. Avoid narrow gutters that would break the single-material illusion.",
"responsive": "Renders from ~390px to 2560px+; only the hero spans 100vw, contained content is capped and centred on ultra-wide.",
"breakpoints_map": {
"xl": 1200,
"lg": 1100,
"md": 860,
"sm": 680,
"xs": 390
}
}
{
"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-019efd75-929a-7390-b28a-de3e519642fd",
"name": "Intaglio",
"slug": "intaglio"
},
"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": [
"every region is carved from one near-black mineral field using a paired highlight/shadow set instead of borders, lit from a single LOWER-RIGHT rake",
"raised plateaus act and incised grooves receive, so depth alone tells you what a thing is",
"large soft fillets dominate; radii are 16 or 24px and nothing has a sharp corner",
"the cyan mineral vein appears only as a thin lit seam on an incised lip and as small glowing beads, never as a flat fill",
"alerts and status chips carry a small left-edge light-bead; inputs and tables sink into incised wells"
],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": true,
"motion": "lift",
"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": "Intaglio 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": [
"Keep one consistent light from the lower-right; raise to act, sink to receive.",
"Ration the cyan vein to lit lips, beads, fills and rings — never a panel flood.",
"Use depth, not colour, to carry hierarchy and state.",
"Keep bone text at honest contrast on the dark stone; use mono for engraved labels.",
"Use large soft fillets and generous cushion so the single-material illusion holds."
],
"dont": [
"Do not draw borders or single-edge accents around containers.",
"Do not flood panels with the cyan accent.",
"Do not mix light directions or inconsistent relief depths.",
"Do not use the soft startup serif or the serif/italic headline swap.",
"Do not default to a white ground — the relief and vein read on dark stone."
]
}
}