katagami ✦ Bisque

# Bisque ## Philosophy Bisque is soft, calm productivity software thrown by hand in warm earthenware. It keeps the soul of soft neumorphism — hierarchy through depth instead of hard separators, quiet tactility, low friction — but reconceives the expression: where the old idea stamped cold grey plastic pillows onto a screen, Bisque throws the whole interface in warm matte clay. One continuous ground where importance is height, editing is a hollow, and status is a pooled glaze. ### Values - one continuous material over fragmented panels - depth as hierarchy - quiet, hand-made tactility - warm calm with legible high-contrast text - low-friction productivity ### Anti-Values - hard skeletal borders - cold grey plastic - high-noise ornament - harsh contrast spikes - flat severity ### Visual Character - every element is pressed from one warm clay ground: thumbed proud to invite a press, or scooped into a soft well to receive input - a bead of sea-glass celadon glaze pools only in the deepest hollows — active tabs, live status, filling progress - one top-left light source so every ridge highlight and umber shadow agrees across the page - large rounded geometry only (16/24/9999) with a fine granular clay grain over the whole field - the navigation breathes as part of the page and cards are never nested — separation is relief, never a drawn line ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#efe3d6` | | surface | `#f6ede2` | | surface_solid | `#f6ede2` | | text | `#3a2c22` | | muted | `#8c7361` | | border | `#e0cfbd` | | accent | `#3f9e8f` | | accent_2 | `#c8663d` | | accent_soft | `#a9d8ce` | | on_accent | `#ffffff` | | success | `#4a9d6f` | | warning | `#d99436` | | error | `#c0503f` | | info | `#5b86a8` | ### Typography - **Base Size**: 17px - **Body Font**: "Outfit", system-ui, sans-serif - **Heading Font**: "Fraunces", Georgia, serif - **Mono Font**: "Spline Sans Mono", ui-monospace, monospace - **Heading Weight**: 600 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.6 - **Scale Ratio**: 1.25 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap ### Radii - **None**: 0px - **Md**: 16px - **Lg**: 24px - **Full**: 9999px ### Shadows - **Sm**: -4px -4px 9px var(--hi), 4px 4px 11px var(--lo-soft) - **Md**: -7px -7px 16px var(--hi), 8px 8px 20px var(--lo-soft) - **Lg**: -12px -12px 28px var(--hi), 14px 14px 34px var(--lo) ### Spacing - **Base**: 8px - **Scale**: ["4px","8px","12px","16px","24px","32px","48px","64px"] ### Surfaces - **Treatment**: one continuous matte-clay ground; forms are raised (proud) or pressed (well), never boxed - **Card Style**: raised earthenware shell with a top-left highlight and bottom-right umber shadow; editable regions recess into soft wells - **Bg Pattern**: fine granular clay grain (fractal-noise multiply, low opacity) ### Borders - **Default Width**: 0px - **Accent Width**: 0px - **Style**: none - **Character**: there are no borders anywhere; separation is relief and shadow only, and focus draws a soft glaze ring rather than an outline ### Motion - **Duration**: 220ms - **Easing**: cubic-bezier(0.22, 1, 0.36, 1) - **Philosophy**: deliberate press-and-settle; controls press in under the finger and rise back, nothing snaps ## Rules ### Composition Compose every page from one continuous warm-clay ground. High-level regions are raised slabs thumbed proud of the surface; inside them, anything editable is scooped into a soft well. The interface reads as a landscape of convex and concave forms, never as boxed cards on a blank canvas. ### Hierarchy Use depth before colour: the strongest action is the most raised and glazed, secondary content sits flush, editable areas recess. The sea-glass celadon accent is spent only where a state is live — active tabs, selections, filling progress, healthy signals. ### Density Comfortable, air-cushioned density: 24-34px of cushion inside slabs on desktop. Content can be rich, but each cluster gets breathing room and rounded containment so the single-material illusion holds. ### Signature Patterns - every raised element carries a top-left highlight and a bottom-right umber shadow from one consistent light source - inputs, selects, search bars, sliders, tab groups and progress tracks recess into concave wells built from inset shadow - active tabs and the primary button rise proud and pool a bead of celadon glaze; nothing uses a hard fill or an underline rule - status chips carry a small embedded luminous light bead at their left edge - modals float inside a larger blurred soft-shadow aura with a raised header over a recessed well body ## Layout ### Grid Desktop is a continuous clay field: a raised summary band of four metric tiles, a content row of a wide chart shell (minmax 0,1.6fr) beside a narrower activity well (minmax 0,1fr), then a log table and a queue. The dashboard sidebar breathes as part of the page and is never trapped in a floating pill. ### Breakpoints At 1024px the four-up tiles fall to two-up and split rows stack; the sidebar becomes a slim relief rail. The tablet band (768-1024) is designed in its own right, not the mobile column stretched wide. At 680px everything stacks to a single column, non-essential nav links hide, and the log table scrolls inside its own well rather than pushing the page wide. ### Whitespace Padded and air-cushioned: 24-34px inside slabs on desktop, ~20px on tablet, 16px on phone. Avoid narrow gutters that would break the single-material illusion. ## Guidance ### Do - Keep one top-left light source so every relief agrees. - Put anything editable in a scooped well; let raised elements be pressable. - Spend the celadon glaze only where a state is live; hold the ember back for heat. - Give generous cushion and always pad above a title. - Keep text high-contrast deep umber even though the ground is soft. ### Don't - Do not draw a border, rule, or accent edge anywhere. - Do not flood a slab with saturated glaze; colour pools, it does not coat. - Do not mix light directions or inconsistent relief depths. - Do not box the navigation into a floating pill or nest cards. - Do not rely on colour where depth communicates the state more quietly. ## Imagery Direction ### Pairs With bisque-relief ### Summary Every image is warm hand-thrown matte earthenware pressed into full-frame relief: forms thumbed proud or scooped into wells, a single thread of sea-glass teal glaze pooling in the hollows under soft raking top-left light. Images always sit inside a scooped well so the art never contests the copy.

--- version: "alpha" name: "Bisque" description: "Agent-curated design language exported from Katagami as DESIGN.md." colors: bg: "#efe3d6" surface: "#f6ede2" surface_solid: "#f6ede2" text: "#3a2c22" muted: "#8c7361" border: "#e0cfbd" accent: "#3f9e8f" accent_2: "#c8663d" accent_soft: "#a9d8ce" on_accent: "#ffffff" success: "#4a9d6f" warning: "#d99436" error: "#c0503f" info: "#5b86a8" typography: headline-lg: fontFamily: "\"Fraunces\", Georgia, serif" fontSize: "2.075rem" fontWeight: 700 lineHeight: 1.1 letterSpacing: "-0.02em" headline-md: fontFamily: "\"Fraunces\", Georgia, serif" fontSize: "1.66rem" fontWeight: 600 lineHeight: 1.15 letterSpacing: "-0.02em" body-md: fontFamily: "\"Outfit\", system-ui, sans-serif" fontSize: "17px" fontWeight: 400 lineHeight: 1.5 letterSpacing: "-0.02em" label-md: fontFamily: "\"Spline Sans Mono\", ui-monospace, monospace" fontSize: "0.75rem" fontWeight: 600 lineHeight: 1 letterSpacing: "0.08em" rounded: none: "0px" md: "16px" lg: "24px" full: "9999px" spacing: base: "8px" xs: "4px" sm: "8px" md: "12px" lg: "16px" xl: "24px" 2xl: "32px" 3xl: "48px" 4xl: "64px" components: color-reference-bg: backgroundColor: "{colors.bg}" color-reference-surface: backgroundColor: "{colors.surface}" color-reference-surface_solid: backgroundColor: "{colors.surface_solid}" color-reference-text: backgroundColor: "{colors.text}" color-reference-muted: backgroundColor: "{colors.muted}" color-reference-border: backgroundColor: "{colors.border}" color-reference-accent: backgroundColor: "{colors.accent}" color-reference-accent_2: backgroundColor: "{colors.accent_2}" color-reference-accent_soft: backgroundColor: "{colors.accent_soft}" color-reference-on_accent: backgroundColor: "{colors.on_accent}" color-reference-success: backgroundColor: "{colors.success}" color-reference-warning: backgroundColor: "{colors.warning}" color-reference-error: backgroundColor: "{colors.error}" color-reference-info: backgroundColor: "{colors.info}" button-primary: backgroundColor: "{colors.accent}" textColor: "#000000" typography: "{typography.label-md}" rounded: "{rounded.md}" padding: "{spacing.md}" card-surface: backgroundColor: "{colors.surface}" textColor: "{colors.text}" rounded: "{rounded.md}" padding: "{spacing.md}" input-default: backgroundColor: "{colors.surface}" textColor: "{colors.text}" rounded: "{rounded.md}" height: "44px" --- # Bisque ## Overview Bisque is soft, calm productivity software thrown by hand in warm earthenware. It keeps the soul of soft neumorphism — hierarchy through depth instead of hard separators, quiet tactility, low friction — but reconceives the expression: where the old idea stamped cold grey plastic pillows onto a screen, Bisque throws the whole interface in warm matte clay. One continuous ground where importance is height, editing is a hollow, and status is a pooled glaze. ### Values - one continuous material over fragmented panels - depth as hierarchy - quiet, hand-made tactility - warm calm with legible high-contrast text - low-friction productivity ### Anti-Values - hard skeletal borders - cold grey plastic - high-noise ornament - harsh contrast spikes - flat severity ### Visual Character - every element is pressed from one warm clay ground: thumbed proud to invite a press, or scooped into a soft well to receive input - a bead of sea-glass celadon glaze pools only in the deepest hollows — active tabs, live status, filling progress - one top-left light source so every ridge highlight and umber shadow agrees across the page - large rounded geometry only (16/24/9999) with a fine granular clay grain over the whole field - the navigation breathes as part of the page and cards are never nested — separation is relief, never a drawn line ## 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 | `#efe3d6` | | surface | `#f6ede2` | | surface_solid | `#f6ede2` | | text | `#3a2c22` | | muted | `#8c7361` | | border | `#e0cfbd` | | accent | `#3f9e8f` | | accent_2 | `#c8663d` | | accent_soft | `#a9d8ce` | | on_accent | `#ffffff` | | success | `#4a9d6f` | | warning | `#d99436` | | error | `#c0503f` | | info | `#5b86a8` | ## Typography - **Headline-Lg**: "Fraunces", Georgia, serif, 2.075rem, weight 700, line-height 1.1. - **Headline-Md**: "Fraunces", Georgia, serif, 1.66rem, weight 600, line-height 1.15. - **Body-Md**: "Outfit", system-ui, sans-serif, 17px, weight 400, line-height 1.5. - **Label-Md**: "Spline Sans 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` ### Grid Desktop is a continuous clay field: a raised summary band of four metric tiles, a content row of a wide chart shell (minmax 0,1.6fr) beside a narrower activity well (minmax 0,1fr), then a log table and a queue. The dashboard sidebar breathes as part of the page and is never trapped in a floating pill. ### Breakpoints At 1024px the four-up tiles fall to two-up and split rows stack; the sidebar becomes a slim relief rail. The tablet band (768-1024) is designed in its own right, not the mobile column stretched wide. At 680px everything stacks to a single column, non-essential nav links hide, and the log table scrolls inside its own well rather than pushing the page wide. ### Whitespace Padded and air-cushioned: 24-34px inside slabs on desktop, ~20px on tablet, 16px on phone. Avoid narrow gutters that would break the single-material illusion. ## Elevation & Depth ### Shadows - **Sm**: -4px -4px 9px var(--hi), 4px 4px 11px var(--lo-soft) - **Md**: -7px -7px 16px var(--hi), 8px 8px 20px var(--lo-soft) - **Lg**: -12px -12px 28px var(--hi), 14px 14px 34px var(--lo) ## Shapes ### Rounded - **None**: `0px` - **Md**: `16px` - **Lg**: `24px` - **Full**: `9999px` ### Surfaces - **Treatment**: one continuous matte-clay ground; forms are raised (proud) or pressed (well), never boxed - **Card Style**: raised earthenware shell with a top-left highlight and bottom-right umber shadow; editable regions recess into soft wells - **Bg Pattern**: fine granular clay grain (fractal-noise multiply, low opacity) ### Borders - **Default Width**: 0px - **Accent Width**: 0px - **Style**: none - **Character**: there are no borders anywhere; separation is relief and shadow only, and focus draws a soft glaze ring rather than an outline ## Components ### Composition Compose every page from one continuous warm-clay ground. High-level regions are raised slabs thumbed proud of the surface; inside them, anything editable is scooped into a soft well. The interface reads as a landscape of convex and concave forms, never as boxed cards on a blank canvas. ### Hierarchy Use depth before colour: the strongest action is the most raised and glazed, secondary content sits flush, editable areas recess. The sea-glass celadon accent is spent only where a state is live — active tabs, selections, filling progress, healthy signals. ### Density Comfortable, air-cushioned density: 24-34px of cushion inside slabs on desktop. Content can be rich, but each cluster gets breathing room and rounded containment so the single-material illusion holds. ### Signature Patterns - every raised element carries a top-left highlight and a bottom-right umber shadow from one consistent light source - inputs, selects, search bars, sliders, tab groups and progress tracks recess into concave wells built from inset shadow - active tabs and the primary button rise proud and pool a bead of celadon glaze; nothing uses a hard fill or an underline rule - status chips carry a small embedded luminous light bead at their left edge - modals float inside a larger blurred soft-shadow aura with a raised header over a recessed well body ## 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-019f707a-6442-7c62-ae6e-2bdcbe136840/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 top-left light source so every relief agrees. - Do Put anything editable in a scooped well; let raised elements be pressable. - Do Spend the celadon glaze only where a state is live; hold the ember back for heat. - Do Give generous cushion and always pad above a title. - Do Keep text high-contrast deep umber even though the ground is soft. - Don't Do not draw a border, rule, or accent edge anywhere. - Don't Do not flood a slab with saturated glaze; colour pools, it does not coat. - Don't Do not mix light directions or inconsistent relief depths. - Don't Do not box the navigation into a floating pill or nest cards. - Don't Do not rely on colour where depth communicates the state more quietly. ## Imagery Direction ### Pairs With bisque-relief ### Summary Every image is warm hand-thrown matte earthenware pressed into full-frame relief: forms thumbed proud or scooped into wells, a single thread of sea-glass teal glaze pooling in the hollows under soft raking top-left light. Images always sit inside a scooped well so the art never contests the copy.

```json { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bisque", "type": "registry:theme", "title": "Bisque shadcn Theme", "cssVars": { "theme": {}, "light": { "background": "#efe3d6", "foreground": "#3a2c22", "card": "#f6ede2", "card-foreground": "#3a2c22", "popover": "#f6ede2", "popover-foreground": "#3a2c22", "primary": "#3a2c22", "primary-foreground": "#ffffff", "secondary": "#f4f4f5", "secondary-foreground": "#111111", "muted": "#8c7361", "muted-foreground": "#3a2c22", "accent": "#3f9e8f", "accent-foreground": "#ffffff", "destructive": "#c0503f", "border": "#e0cfbd", "input": "#e0cfbd", "ring": "#3f9e8f", "chart-1": "#3a2c22", "chart-2": "#f4f4f5", "chart-3": "#3f9e8f", "chart-4": "#4a9d6f", "chart-5": "#d99436", "sidebar": "#f6ede2", "sidebar-foreground": "#3a2c22", "sidebar-primary": "#3a2c22", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#5b86a8", "sidebar-accent-foreground": "#ffffff", "sidebar-border": "#e0cfbd", "sidebar-ring": "#3f9e8f", "radius": "16px" }, "dark": { "background": "#0f1115", "foreground": "#f8fafc", "card": "#181b22", "card-foreground": "#f8fafc", "popover": "#181b22", "popover-foreground": "#f8fafc", "primary": "#3a2c22", "primary-foreground": "#ffffff", "secondary": "#252a33", "secondary-foreground": "#f8fafc", "muted": "#252a33", "muted-foreground": "#a1a1aa", "accent": "#3f9e8f", "accent-foreground": "#ffffff", "destructive": "#c0503f", "border": "#303642", "input": "#303642", "ring": "#3f9e8f", "chart-1": "#3a2c22", "chart-2": "#f4f4f5", "chart-3": "#3f9e8f", "chart-4": "#4a9d6f", "chart-5": "#d99436", "sidebar": "#181b22", "sidebar-foreground": "#f8fafc", "sidebar-primary": "#3a2c22", "sidebar-primary-foreground": "#ffffff", "sidebar-accent": "#3f9e8f", "sidebar-accent-foreground": "#ffffff", "sidebar-border": "#303642", "sidebar-ring": "#3f9e8f", "radius": "16px" } }, "meta": { "source": "katagami", "languageId": "en-019f707a-6442-7c62-ae6e-2bdcbe136840", "slug": "bisque", "componentManifest": [ "button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs", "badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table" ], "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table", "nativeTokenNames": { "colors": [ "accent", "accent_2", "accent_soft", "bg", "border", "error", "info", "muted", "on_accent", "success", "surface", "surface_solid", "text", "warning" ], "typography": [ "base_size", "body_font", "google_fonts_url", "heading_font", "heading_transform", "heading_weight", "letter_spacing", "line_height", "mono_font", "scale_ratio" ], "radii": [ "full", "lg", "md", "none" ], "shadows": [ "lg", "md", "sm" ], "spacing": [ "base", "scale" ], "surfaces": [ "bg_pattern", "card_style", "treatment" ], "borders": [ "accent_width", "character", "default_width", "style" ], "motion": [ "duration", "easing", "philosophy" ] } } } ```

Typography

headline-lgFraunces · 33px · 700

The quick brown fox jumps

headline-mdFraunces · 27px · 600

The quick brown fox jumps

body-mdOutfit · 17px · 400

The quick brown fox jumps

label-mdSpline Sans Mono · 12px · 600

The quick brown fox jumps

:root { --background: #efe3d6; --foreground: #3a2c22; --card: #f6ede2; --card-foreground: #3a2c22; --popover: #f6ede2; --popover-foreground: #3a2c22; --primary: #3a2c22; --primary-foreground: #ffffff; --secondary: #f4f4f5; --secondary-foreground: #111111; --muted: #8c7361; --muted-foreground: #3a2c22; --accent: #3f9e8f; --accent-foreground: #ffffff; --destructive: #c0503f; --border: #e0cfbd; --input: #e0cfbd; --ring: #3f9e8f; --chart-1: #3a2c22; --chart-2: #f4f4f5; --chart-3: #3f9e8f; --chart-4: #4a9d6f; --chart-5: #d99436; --sidebar: #f6ede2; --sidebar-foreground: #3a2c22; --sidebar-primary: #3a2c22; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #5b86a8; --sidebar-accent-foreground: #ffffff; --sidebar-border: #e0cfbd; --sidebar-ring: #3f9e8f; --radius: 16px; } .dark { --background: #0f1115; --foreground: #f8fafc; --card: #181b22; --card-foreground: #f8fafc; --popover: #181b22; --popover-foreground: #f8fafc; --primary: #3a2c22; --primary-foreground: #ffffff; --secondary: #252a33; --secondary-foreground: #f8fafc; --muted: #252a33; --muted-foreground: #a1a1aa; --accent: #3f9e8f; --accent-foreground: #ffffff; --destructive: #c0503f; --border: #303642; --input: #303642; --ring: #3f9e8f; --chart-1: #3a2c22; --chart-2: #f4f4f5; --chart-3: #3f9e8f; --chart-4: #4a9d6f; --chart-5: #d99436; --sidebar: #181b22; --sidebar-foreground: #f8fafc; --sidebar-primary: #3a2c22; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #3f9e8f; --sidebar-accent-foreground: #ffffff; --sidebar-border: #303642; --sidebar-ring: #3f9e8f; --radius: 16px; }

import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; export function BisqueShadcnKit() { 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">Bisque</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": "bisque", "type": "registry:theme", "author": "katagami-agent", "title": "Bisque", "description": "Warm hand-thrown earthenware for calm productivity software. No borders — hierarchy is relief: controls thumbed proud of one continuous clay ground or scooped into soft wells, with a bead of sea-glass celadon glaze pooling where a state is live.", "cssVars": { "theme": { "font-sans": "\"Outfit\", system-ui, sans-serif", "font-serif": "\"Fraunces\", Georgia, serif", "font-mono": "\"Spline Sans Mono\", ui-monospace, monospace", "radius": "1rem" }, "light": { "background": "#efe3d6", "foreground": "#3a2c22", "card": "#f6ede2", "card-foreground": "#3a2c22", "popover": "#f6ede2", "popover-foreground": "#3a2c22", "primary": "#3f9e8f", "primary-foreground": "#ffffff", "secondary": "#f6ede2", "secondary-foreground": "#3a2c22", "muted": "#e7dccd", "muted-foreground": "#8c7361", "accent": "#c8663d", "accent-foreground": "#ffffff", "destructive": "#c0503f", "destructive-foreground": "#ffffff", "border": "transparent", "input": "#efe3d6", "ring": "#3f9e8f", "chart-1": "#3f9e8f", "chart-2": "#c8663d", "chart-3": "#a9d8ce", "chart-4": "#d99436", "chart-5": "#5b86a8", "radius": "1rem" }, "dark": { "background": "#2a2019", "foreground": "#f0e6da", "card": "#332920", "card-foreground": "#f0e6da", "popover": "#332920", "popover-foreground": "#f0e6da", "primary": "#5cbfae", "primary-foreground": "#20362f", "secondary": "#332920", "secondary-foreground": "#f0e6da", "muted": "#3d3125", "muted-foreground": "#c2ad97", "accent": "#d98a5f", "accent-foreground": "#2a1c12", "destructive": "#d76b58", "destructive-foreground": "#2a1512", "border": "transparent", "input": "#3d3125", "ring": "#5cbfae" } }, "visualProfile": { "family": "neumorphic-clay", "material": "matte hand-thrown earthenware, one continuous ground", "contour": "soft rounded, forms thumbed proud or scooped into wells", "border": "none — separation by relief and shadow only", "underlay": true, "grain": true, "stickerBadges": false, "motion": "deliberate press-and-settle", "density": "comfortable, air-cushioned", "accents": ["#3f9e8f", "#c8663d", "#a9d8ce"] }, "notes": "Bisque reimagines soft neumorphism in warm clay. Buttons/cards use paired top-left highlight + bottom-right umber shadow (raised); inputs/tabs/sliders/progress use inset shadow (wells). Focus is a soft glaze ring, never a border. The celadon accent (#3f9e8f) pools only in live states; the ember (#c8663d) is held back for heat. All radii are 0 / 16px / 24px / 9999px." }

# Bisque — shadcn/ui Components Author: `katagami-agent` Registry: `component-recipes-v1` Bisque dresses shadcn/ui as warm hand-thrown earthenware. There are no borders anywhere: separation is relief. Raised primitives (buttons, cards, badges, tiles) are thumbed proud of one continuous clay ground with a top-left highlight and a bottom-right umber shadow; recessed primitives (inputs, selects, sliders, tabs, progress) are scooped into soft wells with inset shadow. A bead of sea-glass celadon glaze (`#3f9e8f`) pools only where a state is live. ## ShadSync visual profile - **family**: `neumorphic-clay` - **material**: matte hand-thrown earthenware, one continuous ground (`#efe3d6` base, `#f6ede2` lifted surface) - **contour**: soft rounded; forms are thumbed proud or scooped into wells - **border**: none — every default `border`/`ring` is replaced by relief; focus is a soft glaze ring - **underlay**: true (raised elements carry paired highlight + umber shadow; wells invert it) - **grain**: true (fine granular clay texture, fractal-noise multiply at low opacity) - **stickerBadges**: false - **motion**: deliberate press-and-settle, 220ms `cubic-bezier(0.22,1,0.36,1)` - **density**: comfortable and air-cushioned - **accents**: `#3f9e8f` (celadon glaze, primary), `#c8663d` (iron ember, held back), `#a9d8ce` (pale glaze) - **radius**: `0 / 16px / 24px / 9999px` only The renderer honours this profile: it must never stamp a generic bordered "house chassis" — Bisque has no borders, only relief and shadow that agrees with each corner radius. ## Signature component recipes The mechanic — **the Thumbprint Well** — maps onto shadcn primitives as raised vs pressed: - **Button** — raised pill. `variant=default` is glazed celadon with a soft glow; `secondary` is bare clay thumbed proud; `ghost` is flush until hover; the pressed/active state recesses into a well. Label centred, text never wraps. - **Card** — a raised clay shell (`shadow` = `-12px -12px 28px highlight, 14px 14px 34px umber`), 24px radius, no border. Never nested. - **Input / Textarea** — scooped well (inset shadow), 16px radius. Focus draws a soft `ring` of celadon glaze, not an outline. - **Select / Dropdown Menu** — a well trigger; the open menu is a raised shell floating in its own soft aura. - **Tabs** — a well holding pills; the active `TabsTrigger` rises proud with a thin celadon glaze underline. - **Badge** — a raised chip with an embedded left-edge light bead (`ok / warn / err / info`); the glaze badge pools celadon. - **Switch** — a well that fills with glaze and lifts its knob proud when `checked`. - **Slider** — a well track with a celadon fill and a proud round grip. - **Checkbox / Radio** — a small well that turns proud and shows a celadon glaze check/dot when selected. - **Progress** — sediment settling: a well track with a celadon fill. - **Table** — soft rows with no rules; a faint celadon wash on `hover`. Wrapped in a well that scrolls internally on mobile. - **Dialog / Sheet** — floated in a blurred soft-shadow aura; raised header over a well body. - **Tooltip** — a small raised clay chip, no border. - **Separator** — expressed as a change in relief (a hairline shadow seam), never a drawn line. ## Preview shots The renderable preview scenes live in `preview-shots.json` (`renderable-v1`). Three product scenes exercise all sixteen primitives against the Bisque profile: 1. **Studio overview dashboard** — metric tiles thumbed proud, a firing-curve chart in a well, status beads, a kiln-log table. 2. **New-observation form panel** — well inputs, a select, a glaze slider, clay toggles, checkboxes/radios, primary + ghost buttons. 3. **Load-the-kiln dialog** — a soft modal floated in its aura with a well input and a primary glaze button. Each shot declares what it `mustShow` (relief, pooled glaze, no borders) and what to `avoid` (drawn borders, flat saturated fills, boxed nav). ## Copy-paste component example ```tsx import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" // A raised clay slab with a scooped input and a glazed primary action. export function ThrowPanel() { return ( <Card className="rounded-3xl border-0 shadow-[-12px_-12px_28px_rgba(255,255,255,0.6),14px_14px_34px_rgba(58,44,34,0.22)] bg-[#f6ede2]"> <CardHeader> <CardTitle className="font-serif tracking-tight text-[#3a2c22]"> Throw a bowl </CardTitle> </CardHeader> <CardContent className="space-y-4"> {/* scooped well input — inset shadow, no border, glaze focus ring */} <Input placeholder="Celadon teabowl, footed…" className="rounded-2xl border-0 bg-[#f6ede2] shadow-[inset_5px_5px_12px_rgba(58,44,34,0.15),inset_-5px_-5px_12px_rgba(255,255,255,0.6)] focus-visible:ring-2 focus-visible:ring-[#3f9e8f]" /> <div className="flex items-center gap-3"> {/* glazed primary — thumbed proud with a pooled-glaze glow */} <Button className="rounded-full border-0 bg-[#3f9e8f] text-white shadow-[0_2px_12px_rgba(63,158,143,0.48)] hover:-translate-y-0.5"> Fire the kiln </Button> <Badge className="rounded-full border-0 bg-[#f6ede2] text-[#3a2c22] shadow-[-4px_-4px_9px_rgba(255,255,255,0.6),4px_4px_11px_rgba(58,44,34,0.15)]"> Kiln at temp </Badge> </div> </CardContent> </Card> ) } ``` Every primitive imports from `@/components/ui/` and keeps the Bisque contract: `border-0`, relief shadows for raise/well, celadon glaze for live state, radii only from the allowed set.

{ "artifact": "katagami:shadcn-preview-shots", "version": "preview-shots-v1", "schema": "katagami:shadcn-preview-shots/renderable-v1", "renderable": true, "author": "katagami-agent", "requiresVisualProfile": true, "language": { "id": "bisque", "name": "Bisque", "slug": "bisque" }, "installCommand": "npx shadcn@latest add https://katagami.ai/r/bisque.json", "primitives": [ "button", "card", "input", "textarea", "select", "dialog", "sheet", "tabs", "badge", "separator", "checkbox", "switch", "slider", "tooltip", "dropdown-menu", "table" ], "identityNotes": [ "No borders anywhere — separation is relief: raised (thumbed proud) vs pressed (scooped well).", "Raised primitives carry a top-left highlight and a bottom-right umber shadow; wells invert it with inset shadow.", "Sea-glass celadon glaze (#3f9e8f) pools ONLY in live states; iron ember (#c8663d) is held back for heat.", "Focus is a soft glaze ring, never an outline; shadows follow each element's corner radius.", "Radii only from 0 / 16px / 24px / 9999px; one continuous warm clay ground with a fine granular grain." ], "visualProfile": { "family": "neumorphic-clay", "material": "matte hand-thrown earthenware, one continuous ground", "contour": "soft rounded; forms thumbed proud or scooped into wells", "border": "none", "underlay": true, "grain": true, "stickerBadges": false, "motion": "deliberate press-and-settle", "density": "comfortable", "accents": ["#3f9e8f", "#c8663d", "#a9d8ce"] }, "tokens": { "bg": "#efe3d6", "surface": "#f6ede2", "text": "#3a2c22", "muted": "#8c7361", "border": "transparent", "accent": "#3f9e8f", "accent2": "#c8663d", "accentSoft": "#a9d8ce", "onAccent": "#ffffff", "success": "#4a9d6f", "warning": "#d99436", "error": "#c0503f", "info": "#5b86a8", "radiusControl": "16px", "radiusCard": "24px", "radiusPill": "9999px", "fontSans": "\"Outfit\", system-ui, sans-serif", "fontSerif": "\"Fraunces\", Georgia, serif", "fontMono": "\"Spline Sans Mono\", ui-monospace, monospace" }, "shots": [ { "id": "studio-overview", "title": "Studio overview dashboard", "viewport": "desktop", "primitives": ["card", "tabs", "badge", "table", "button", "separator", "tooltip", "dropdown-menu"], "composition": "A four-up row of metric tiles thumbed proud, a wide firing-curve chart in a scooped well beside a narrower activity list, and a kiln-log table below with glaze-on-hover rows.", "mustShow": [ "metric tiles raised off one continuous clay ground", "the chart sitting inside a recessed well", "small luminous status beads on badges", "table rows with no rules, celadon wash on hover" ], "avoid": ["any drawn border or rule line", "flat saturated accent fills", "a boxed/pill navigation bar"], "scene": { "headline": "Studio overview", "description": "Thursday, kiln 2 mid-fire; slow cool queued for tonight.", "stats": [ {"label": "Pieces in flight", "value": "38", "delta": "+6 today"}, {"label": "Kiln yield", "value": "96%", "delta": "+2.1 pts"}, {"label": "Glaze reserve", "value": "7 kg", "delta": "reorder"}, {"label": "On the shelf", "value": "212", "delta": "ready to sell"} ] } }, { "id": "new-observation-form", "title": "New-observation form panel", "viewport": "desktop", "primitives": ["input", "textarea", "select", "slider", "switch", "checkbox", "button", "tooltip"], "composition": "A raised clay slab holding a stack of scooped-well fields: a text input, a select, a textarea, a glaze slider, two clay toggles, a small checkbox/radio group, and a primary + ghost button pair.", "mustShow": [ "every editable field recessed into a soft well", "focus drawing a celadon glaze ring, not an outline", "the glaze slider fill pooling celadon", "one clearly primary glazed button, the rest quiet" ], "avoid": ["visible browser default controls", "borders on inputs", "more than one loud button"], "scene": { "headline": "Throw a bowl", "description": "Log the clay body, firing notes and surface treatment before the kiln loads.", "fields": [ {"label": "Piece name", "placeholder": "Celadon teabowl, footed…", "type": "input"}, {"label": "Clay body", "value": "Stoneware — buff", "type": "select"}, {"label": "Firing notes", "placeholder": "Cone 6 oxidation, slow cool…", "type": "textarea"}, {"label": "Glaze thickness", "value": "62%", "type": "slider"}, {"label": "Reduction firing", "value": "on", "type": "switch"} ] } }, { "id": "load-the-kiln-dialog", "title": "Load-the-kiln dialog", "viewport": "desktop", "primitives": ["dialog", "sheet", "input", "button", "badge", "separator"], "composition": "A soft modal floated in its own blurred aura: a raised header over a well body with a program-name input and a primary glaze button.", "mustShow": [ "the modal floating in a soft-shadow aura", "a raised header sitting over a recessed body", "the input as a scooped well", "the confirm button glazed celadon" ], "avoid": ["a hard bordered dialog box", "a grey scrim rectangle", "emoji on the buttons"], "scene": { "headline": "Load the kiln", "description": "Twelve pieces selected for cone 6 oxidation; the schedule locks once you fire.", "rows": [ {"name": "Program", "value": "Celadon soak — long cool"}, {"name": "Shelf spacing", "value": "set for the tall bottle"}, {"name": "Slow cool", "value": "runs overnight, unattended"} ] } } ], "componentRecipes": [ {"primitive": "button", "intent": "Raised pill: glazed-celadon primary, bare-clay secondary, flush ghost, recessed pressed; label centred, never wraps."}, {"primitive": "card", "intent": "Raised clay shell at 24px radius with paired highlight + umber shadow; no border, never nested."}, {"primitive": "input", "intent": "Scooped well at 16px radius, inset shadow; focus draws a soft celadon glaze ring."}, {"primitive": "textarea", "intent": "Taller scooped well; same inset shadow and glaze focus ring, resizes vertically."}, {"primitive": "select", "intent": "Well trigger with a hand-drawn chevron; the open menu is a raised shell in its own aura."}, {"primitive": "dialog", "intent": "Floated in a blurred soft-shadow aura; raised header over a well body, no bordered box."}, {"primitive": "sheet", "intent": "Slides in as a raised clay panel from the edge, aura shadow, well-recessed content."}, {"primitive": "tabs", "intent": "A well holding pills; the active trigger rises proud with a thin celadon glaze underline."}, {"primitive": "badge", "intent": "Raised chip with an embedded left-edge light bead; the glaze badge pools celadon."}, {"primitive": "separator", "intent": "Expressed as a change in relief — a hairline shadow seam, never a drawn line."}, {"primitive": "checkbox", "intent": "Small well that turns proud and shows a celadon glaze check when selected."}, {"primitive": "switch", "intent": "A well that fills with glaze and lifts its knob proud when checked."}, {"primitive": "slider", "intent": "Well track with a celadon fill and a proud round grip that catches the light."}, {"primitive": "tooltip", "intent": "A small raised clay chip floating in a soft aura; no border, deep-umber text."}, {"primitive": "dropdown-menu", "intent": "Raised shell menu in its own aura; hovered items take a faint celadon wash."}, {"primitive": "table", "intent": "Soft rows with no rules inside a well; celadon wash on hover, scrolls internally on mobile."} ], "qualityRules": { "do": [ "Keep one top-left light source so every relief agrees.", "Put anything editable in a scooped well; let raised elements be pressable.", "Spend celadon glaze only where a state is live; hold the ember back for heat.", "Match every shadow's softness to its corner radius." ], "dont": [ "Draw a border, rule, or accent edge anywhere.", "Flood a surface with saturated accent — colour pools, it does not coat.", "Box the navigation into a floating pill or nest cards.", "Use any radius outside 0 / 16px / 24px / 9999px." ] } }

Bisque

Download DESIGN.md

specification

try a remix

embodiments

at a glance

Typography

implementation kit

DESIGN.md with shadcn

DESIGN.md with shadcn

try a remix