Clay

---
name: Clay
slug: clay
version: 1.1.0
family: clay
tagline: A little warmth. A little give.
description: A sun-warmed claymorphism system in vanilla, apricot and terracotta. Sculpted surfaces, cushioned controls and a soft retro serif bring a tactile golden-hour feeling to the everyday.
---

Clay

Direction

Golden hour, made tangible. Think warm ceramic, a thumb pressed into modelling clay, an apricot on a cream linen table. The composition is editorial and spacious; the controls feel soft and substantial. The demo is Plume, a fictional wellness app with small interactive rituals.

One light source, above and to the left, unifies the page. A raised object needs a curved highlight, a shaded opposite edge, a tight contact shadow and a softer cast shadow. A recessed object needs an inward shadow. A single blurred shadow underneath a flat rectangle is insufficient.

Palette

Token	Light	Dark	Role
--bg	#F1E4D2	#2D231E	Biscuit canvas
--ink	#49362B	#F5E6CF	Primary text
--muted	#796354	#C4AA95	Supporting text
--cream	#FBF2E3	#47382C	Vanilla cards and secondary controls
--apricot	#EDB580	#C78C5C	Primary controls and one featured card
--terra	#C87B59	#AD684A	Script accent, switches, focus rings
--well	#E4CFB5	#251C17	Recessed surfaces
--light	#FFF5E4	#EAC39A	Warm highlights
--umber	#754629	#120B07	Shadow pigment
--line	#D9C4AB	#614A38	Quiet editorial dividers

Keep the majority of the page cream. Apricot carries the hero sculpture and main action; terracotta is a restrained accent. Avoid introducing blue, mint or purple into this theme. Dark mode becomes warm espresso, never neutral black. Chart materials retain their warm pigments in dark mode against espresso surfaces.

Typography

• Fraunces Soft, 700 for the logo and headings. The embedded font uses the soft, wonky cut. Hero 58–88 px, line-height .99, tracking -4 px; section titles 36–41 px, line-height 1.08, tracking -1.7 px.
• Yellowtail, 400 for one word in the hero. Terracotta, slightly oversized, rotated -5 degrees. Do not use script in navigation, buttons or body text.
• Manrope, 400–700 for body text and controls. Body 13–14 px with generous line-height; controls 12 px / 700; supporting labels 10–11 px. Editorial eyebrows 9 px / 700 with 2 px letter-spacing.
• All three fonts are embedded as WOFF2 data URLs in the demo. The preview must make no external requests.

Composition

The desktop canvas is at most 1120 px wide, with at least 32 px side gutters. Header height 100 px. A two-column hero pairs expressive typography with a straight, upright breathing sculpture. Keep the intro short and the two primary actions together.

The hero visual is an upright apricot arch framing a vanilla rim, a recessed well and an orange breathing dome. A cream pause/resume control overlaps its lower edge. Keep the arch and its label straight and remove decorative stars.

Place the weekly rest chart below the ritual cards, beside a short editorial introduction. It sits in a horizontal vanilla slab with a small crescent moon and an evening note underneath. Seven warm capsule bars have rounded ends, curved lighting, contact shadows and cast shadows. Avoid isolated egg-shaped ornaments. The chart carries illustrative data explicitly labelled “Sample week”; selecting a bar reveals its day and value.

Follow the hero with a fine editorial divider, then three equal ritual cards. Only the mood card is coloured. Finish with a short statement and a material selector demonstrating the same reusable button recipe. No invented testimonials, user counts or nonfunctional signup forms.

At 850 px, reduce spacing and chart dimensions. At 620 px, stack the hero and all cards, hide the middle navigation, and use 20 px side gutters. The page must fit 360 px without horizontal scrolling.

Material recipes

The demo HTML is the runnable reference. These are its exact core recipes. Set --surface on an element to reuse the material with another colour; never tint the entire control with opacity.

.clay{--surface:var(--cream);--shade:color-mix(in srgb,var(--surface) 38%,var(--umber));border:0;border-radius:999px;background:radial-gradient(ellipse at 30% 0%,color-mix(in srgb,var(--light) 65%,transparent),transparent 70%),linear-gradient(173deg,var(--surface) 40%,color-mix(in srgb,var(--surface) 80%,var(--shade)));box-shadow:inset 3px 4px 7px color-mix(in srgb,var(--light) 70%,transparent),inset -4px -6px 9px color-mix(in srgb,var(--shade) 27%,transparent),2px 4px 3px -2px color-mix(in srgb,var(--shade) 30%,transparent),5px 10px 12px -5px color-mix(in srgb,var(--shade) 45%,transparent);transition:transform .18s,box-shadow .18s;padding:14px 25px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:18px}

.clay:hover{transform:translateY(-2px)}

.clay:active,.clay[aria-pressed=true]{transform:translateY(2px);box-shadow:inset 3px 4px 8px color-mix(in srgb,var(--shade) 45%,transparent),inset -3px -3px 6px color-mix(in srgb,var(--light) 45%,transparent)}

.slab{--surface:var(--cream);background:linear-gradient(140deg,color-mix(in srgb,var(--surface) 80%,var(--light)),var(--surface));border-radius:25px;box-shadow:inset 2px 3px 5px color-mix(in srgb,var(--light) 65%,transparent),inset -3px -5px 7px #75462912,5px 11px 16px -8px #75462940;padding:25px;position:relative}

Chart capsules are shaded into canvas pixels using rounded-solid normals, a top-left light vector (-0.48, -0.55, 0.68), diffuse illumination, a broad highlight and a gentle bounce. Lighting is calculated in linear RGB and converted back to sRGB. The hemispherical ends use the same lighting as the cylindrical body. Keep the two CSS cast shadows and the small contact shadow underneath each bar.

Each canvas is resized through ResizeObserver, with pixel density capped at 2. Repaint only when dimensions change; do not run an animation loop. The outer button provides keyboard focus, an accessible day/value label and exclusive aria-pressed state. Canvas is decorative. Use the implementation in demo/index.html as the reference for this shader.

A subtle embedded SVG grain covers the page at 3.5% opacity with pointer events disabled. Do not use texture as a substitute for correct shading.

Components and states

• Button: rounded cushion; top-left highlight, lower-right bevel, two cast shadows. Hover lifts 2 px. Press sinks 2 px and changes to inset shadows. Keyboard focus has a 3 px terracotta outline with a 6 px offset.
• Card: 25 px corners, 25 px padding, quiet bevel and short warm shadow. Cards are containers, not giant buttons.
• Switch: recessed pill track, raised cream thumb. Native checkbox semantics; checked moves the thumb 15 px and warms the track to terracotta.
• Mood selector: three text-labelled cushions (Low, Okay, Good) inside a recessed rounded track. Each has a small warm material dot, 17 px corners and a 61 px height. Use readable labels instead of isolated mouth glyphs or ambiguous faces. The selected cushion sinks, gains an apricot tint and an outlined indicator; exclusive aria-pressed and a polite status message identify the choice. Never communicate selection through colour alone.
• Water ritual: local count from 3 to 8, matching fill level and disabled increment at the maximum. This is demo state, not health advice or a prescribed target.
• Breathing sculpture: four seconds in, four seconds out. Pause/resume controls the counter and dome; the hero action resets the cycle. Keep the phase legible and do not announce every second with a live region. Reduced motion disables the dome transition.
• Rest chart: seven labelled, keyboard-accessible bars. Clicking selects a day and announces its hours in a status region. Heights are proportional to the sample values.
• Material selector: Vanilla, Apricot and Terracotta change the actual shared button surface. Use pressed semantics and a visible selected outline.

For a shadcn implementation, map these tokens to the app's semantic tokens (background, foreground, card, primary, secondary, muted-foreground, ring) and apply these recipes in the shared Button, Card and Switch components. Do not reproduce the appearance with isolated demo-only components. The Drop Design preview itself is intentionally self-contained HTML.

Interaction and accessibility

All demonstration actions run locally and reset on reload. Internal links prevent navigation and scroll to sections. Do not add tracking, network requests or fake success confirmations. Support parent messages { type: "cyn-theme", theme: "light" | "dark" } and an in-preview theme switch.

Respect prefers-reduced-motion: disable animations and transitions and use immediate anchor scrolling. Keep native keyboard behaviour, visible focus, accessible names for icon buttons and status regions for user-triggered changes. Decorative elements must not obstruct chart controls.

Avoid

Cold shadows, glossy chrome, hard black outlines, huge diffuse shadows on every surface, excessive floating cards, coloured body text, repeated script words, unrelated accent colours, and flat capsules presented as 3D objects.

Keep chart cards horizontal and aligned with the page grid. Do not add decorative stars or asterisks around the hero or controls.

Design system reference

Copyable reference tables. They mirror the specimen demo/system.html, and the values come from demo/index.html and shadcn.css. Tokens are defined on :root and redefined on [data-theme="dark"]. Values marked fixed are literals in the demo and do not change with the theme.

Color tokens

Name	Variable	Light	Dark	Role
Canvas	--bg	#F1E4D2	#2D231E	Page background (plus a 45 % --light glow at 15 % 0 %)
Vanilla	--cream	#FBF2E3	#47382C	Cards, secondary controls
Well	--well	#E4CFB5	#251C17	Recessed tracks, fields, tags
Ink	--ink	#49362B	#F5E6CF	Primary text
Muted	--muted	#796354	#C4AA95	Supporting text, placeholders
Apricot	--apricot	#EDB580	#C78C5C	Primary control, featured card
Terracotta	--terra	#C87B59	#AD684A	Script word, switch on, focus ring
Highlight	--light	#FFF5E4	#EAC39A	Bevel highlights, canvas glow
Umber	--umber	#754629	#120B07	Shadow pigment
Line	--line	#D9C4AB	#614A38	Dividers, field border
On apricot	literal	#4E2B19	#4E2B19 (fixed)	Text on .orange and terracotta cushions
On mood card	literal	#493020	#493020 (fixed)	Text on the apricot card (meta text #66422D)
Ring	--ring (shadcn)	#A6603E	#E7B083	Field focus ring
Destructive	--destructive (shadcn)	#B43838	#FF9999	Invalid and destructive feedback
Capsule 1–4	literal	#D59768 #EAD3AA #EDB580 #C87B59	same (fixed)	Rest-chart capsule pigments

The theme has no success, warning or info colours. Status is carried by text in a role="status" region, not by colour.

Contrast (WCAG 2.2, as computed in the specimen):

Pair	Light	Dark
--ink / --bg	9.08 AAA	12.48 AAA
--ink / --cream	10.25 AAA	9.15 AAA
--ink / --well	7.53 AAA	13.60 AAA
--muted / --bg	4.50 AA	6.95 AA
--muted / --cream	5.08 AA	5.10 AA
--muted / --well	3.73 AA large	7.58 AAA
#4E2B19 / --apricot	6.84 AA	4.36 AA large
#4E2B19 / --terra	3.82 AA large	2.88 fail
--terra / --bg	2.61 fail	3.54 AA large
--ring / --well (non-text, 3:1)	3.18 pass	8.70 pass
--destructive / --cream	5.31 AA	5.49 AA
--ink / --apricot	6.24 AA	2.33 fail

Terracotta is not a text colour for small type. In dark mode, keep --ink off apricot surfaces, and keep the terracotta cushion to large or bold labels.

Type scale

Style	Family	Size (px)	Line-height	Tracking (px)	Weight
Display (h1)	Fraunces Soft	clamp(58px,6.8vw,88px); 88 ≥1300, 62 ≤850, 67 ≤620	.99	-4 (-3 ≤850)	700
Script accent (h1 em)	Yellowtail	1.17em	.9	-2	400, --terra, rotate -5°
Section title (h2)	Fraunces Soft	41 (36 ≤620; statement 38)	1.08	-1.7	700
Panel title (chart h2)	Fraunces Soft	32 (29 ≤850, 27 ≤620)	1.08	-1.3	700
Wordmark	Fraunces Soft	30	normal	-1.6	700
Card title (h3)	Fraunces Soft	25	1.15	-.7	700
Numeral	Fraunces Soft	38	normal	0	700
Lead / intro	Manrope	13	1.85	0	400, --muted
Body	Manrope	14	1.7	0	400
Small / card copy	Manrope	11 (fine print 10)	1.7	0	400, --muted
Control	Manrope	12	1.7	0	700
Navigation	Manrope	12	1.7	0	600
Eyebrow	Manrope	9, uppercase	1.7	2	700
Meta label (card top)	Manrope	9, uppercase	1.7	1	400
Micro (chart day)	Manrope	8, uppercase	1.7	.6	700
Mono	none	—	—	—	Use Manrope with tabular-nums

Spacing

Clay has no numeric spacing tokens. These are the values that recur in the demo:

px	Use
6	Recessed track inset (mood selector)
9	Segmented gap, tag padding
12	Default flex gap, chart column gap
14	Label and control gap
16	Hero action gap
20	Mobile gutter (≤620), card padding ≤850
22	Card grid gap, floating panel padding
25	.slab padding, control inline padding
32	Desktop gutter, statement padding
40	Hero column gap
72	Section padding (48 ≤620)

Radii

Value	Use
999 px	.clay controls, tags, switch track
32 px	Feature slab (.rest-card)
25 px	.slab card
22 px	Floating panel, recessed mood track
20 px	--radius (shadcn adapter)
17 px	Mood cushion
15 px	Icon tile
12 px	Field, calc(var(--radius) * .6)
8 px	Badge, calc(var(--radius) * .4)
50 %	Dots, dome, round icon buttons

Material levels

Level	Recipe	Shadow stack
-1 Recessed well	--well background	inset 2px 3px 4–5px #75462933 (tag: inset 1px 2px 3px #75462918)
0 Canvas	body	No shadow; --light glow and 3.5 % SVG grain
1 Slab	.slab	inset 2px 3px 5px light 65 %, inset -3px -5px 7px #75462912, 5px 11px 16px -8px #75462940. Dark: inset 2px 3px 5px #eac39a13, 5px 11px 16px -8px #120b0770
2 Feature slab	.slab.rest-card	adds 8px 16px 15px -9px #75462940, 18px 29px 33px -15px #75462933
2 Floating panel	.breath-control	inset 2px 2px 4px var(--light), inset -2px -3px 5px #75462914, 8px 15px 18px -8px #75462950
3 Cushion	.clay	two inner bevels, contact 2px 4px 3px -2px, cast 5px 10px 12px -5px (shade-based)
-1 Cushion pressed	.clay:active, [aria-pressed=true]	inset 3px 4px 8px shade 45 %, inset -3px -3px 6px light 45 %; translateY(2px)
4 Sculpture	.tray / .sun	Hero only; fixed pigments; .arch takes brightness(.8) in dark

Component-state matrix

Component	States	Key tokens
Button primary (.clay.orange)	default, hover -2px, pressed +2px inset, focus-visible, disabled .55	--apricot, text #4E2B19, focus 3px solid --terra offset 6px
Button secondary (.clay)	same as primary	--cream, --ink
Button terracotta	same as primary	--surface: var(--terra), text #4E2B19
Icon button	default, pressed, disabled at limit	43 × 43 or 36 × 36, radius 999 px
Ghost / nav link	default, hover, pressed, focus-visible, disabled	no material; --well tint on hover
Text field	default, focus-visible, filled, invalid, disabled .5	--well, 1px --line, radius 12, ring 3px --ring offset 3px, invalid --destructive border + 2px outline
Select	default, focus-visible, disabled	field recipe + chevron in --muted
Checkbox / radio	off, on, focus-visible, disabled	off --well, on --apricot, mark #4E2B19
Switch	off, on, focus-visible, disabled	track --well, on --terra, thumb moves 15 px
Segmented (mood)	default, hover, selected (pressed + outlined dot), focus-visible, disabled	recessed track #a3673520, selected --apricot, 17 px corners, 61 px high, exclusive aria-pressed
Badge / tag	neutral, featured, destructive, recessed tag	--well, --line, --apricot, --destructive
Card	default, apricot variant	.slab; apricot text #493020, meta #66422D
Alert / toast	neutral, destructive, toast with action, status line	.slab; destructive 12 % tint on --bg + 1px border; toast = floating panel
Rest chart	default, hover -4px, selected (lift + underlined day), focus-visible	capsule pigments, drop-shadows #75462930 / #75462926
Material selector	default, selected	39 × 39 cushions, selected outline 1px --terra offset 5px

Complete shadcn integration

This theme applies to shared primitives, not just the marketing preview. The downloadable adapter is shadcn.css, also reproduced below so DESIGN.md remains self-contained. It targets the modern shadcn data-slot contract and recognises both Radix data-state and Base UI data-checked/data-selected attributes. Projects with older or custom wrappers must add the matching slots; CSS alone cannot infer them.

Install and scope

1. Load this adapter after Tailwind and remove previous material overrides from the same components. No old clay/glass classes should fight this layer.
2. Put data-design="clay" on the root <html>, not a preview div: menus, dialogs and toasts render through portals under body. Use .dark or data-theme="dark" on that same root. The design attribute and dark mode are separate.
3. Preserve the standard shadcn semantic Tailwind mapping to --background, --foreground, --card, --primary, --popover, --ring, the radius scale, chart and sidebar tokens. These values are CSS colours, not HSL channel tuples: use var(--primary), not hsl(var(--primary)).
4. Load Fraunces Soft for headings, Manrope for UI and Yellowtail only for the hero accent. Set --font-sans, --font-heading and --font-mono accordingly. Fonts and layout metrics are not automatically installed by the CSS adapter.
5. Forward data-variant={variant} from shared Button and Badge wrappers. Keep data-slot on every styled primitive, including portal contents. Do not replace the component's focus, selection, disabled or invalid attributes.
6. Keep primitive sizing, positioning, keyboard logic, RTL and accessibility intact. Adapt provider-specific calendar/Sonner APIs as described in the matrix.

<html data-design="clay" className={isDark ? "dark" : undefined}>
  {/* Both the app and portal content inherit the same theme. */}
</html>

// Inside the existing shared Button wrapper:
<ButtonPrimitive data-slot="button" data-variant={variant} {...props} />

Coverage and explicit composition rules

Components	Shared design treatment
Button, Button Group, Toggle, Toggle Group	All six Button variants; raised/pressed Clay, optical Nimbus, flat Manifesto; preserve connected group edges.
Card, Item, Empty, Alert	Theme surfaces, headings, descriptions, borders; destructive alerts retain meaning.
Input, Textarea, Native Select, Input Group, Input OTP	Recessed Clay wells, luminous Nimbus fields, ruled Manifesto fields; placeholders, invalid, disabled, focus. Keep Input Group children visually borderless where the wrapper owns the field.
Field, Label, Form	Shared label/error/description tokens; preserve React Hook Form wiring and ARIA associations. Form is a composition, not a new visual container.
Checkbox, Radio Group, Switch	Track, checked state and thumb/indicator. Keep native geometry and keyboard behaviour; material must not move the state indicator incorrectly.
Slider, Progress	Theme track, fill and thumb. Preserve orientation, range geometry and indeterminate behaviour.
Tabs, Accordion, Collapsible	Theme list/trigger, selected state and separating rules; content itself stays a layout surface.
Select, Combobox, Command	Fields plus readable overlay, selected/highlighted rows and separators. Keep search, empty and disabled states.
Dropdown Menu, Context Menu, Menubar, Navigation Menu	Surface, submenus, labels, separators, highlighted/checked rows. Do not turn each row into a raised button.
Dialog, Alert Dialog, Sheet, Drawer	Portal surfaces, overlay, titles and actions; preserve focus trap, dismiss semantics and docking. Override global maximum dimensions for intentionally full-screen sheets.
Popover, Hover Card, Tooltip	Readable theme popovers, independent of the page scene. Tooltip needs sufficient opacity behind text.
Toast, Sonner	Theme notification surface and destructive feedback. For Sonner pass shared classes using toastOptions.classNames; it does not expose the shadcn data-slot contract.
Table, Data Table	Themed header/body/rules/selected rows. Keep sorting, filtering, column sizing and scroll behaviour. Data Table is a composition of Table and controls.
Calendar, Date Picker	Themed calendar container and popover. Map DayPicker classNames for day buttons, today, range, outside and disabled dates; selected days use primary/primary-foreground, range interiors use accent.
Badge, Avatar, Kbd	Theme small surfaces and readable labels. Avatar photos remain unfiltered; status is never colour-only.
Breadcrumb, Pagination, Sidebar	Muted navigation, active-page/selected styling and full sidebar token set; preserve collapsed and mobile modes.
Separator, Scroll Area, Resizable	Theme lines and handles; do not override scrolling or panel geometry.
Skeleton, Spinner	Theme muted skeleton and currentColor spinner; reduced-motion alternative must still convey loading.
Chart	Use chart-1 through chart-5 and theme tooltip surfaces. Clay's rounded-volume bars are a separate renderer as documented above; do not turn line charts into capsules. Manifesto also differentiates series through dashes/labels.
Carousel, Aspect Ratio	Keep geometry, clipping and navigation logic; theme only the visible viewport and arrow buttons.
Direction	Behaviour-only context. Inherit tokens and use logical edges for RTL rather than adding a visible surface.
Attachment, Bubble, Message, Message Scroller, Marker, Questionnaire	Project-specific extensions: map container to Card/Item, actions to Button, inputs to Field, status to Badge and errors to Alert. Keep their content and scrolling behaviour.

States and responsive acceptance

Verify default, hover, active, selected, checked, indeterminate, focus-visible, invalid, disabled and loading. Preserve semantic destructive styling after applying the material. Form error text must remain legible; a decorative inset shadow cannot replace the focus ring.

At 360 px, long button labels must wrap or use an intentional compact variant; button groups and tabs need wrapping or an accessible horizontal scroll. Inputs/selects fill their column. Tables scroll inside their wrapper, not the page. Popovers fit the viewport; sheets retain their docking; dialogs use a scrollable body and visible close action. Portals must render the same theme in light and dark mode. Provide at least a 44 px touch hit area even when the visible control is smaller.

These are reusable styles and integration requirements. The standalone preview is HTML, not a claim that every React primitive has been mounted or behaviour-tested in Drop Design. Verify the actual installed shadcn/Base UI/Radix versions in the consuming app.

Copyable shared stylesheet

/* Drop Design / clay — shared shadcn slots, Base UI and Radix states.
   Set data-design on <html> so portal content inherits the theme.
   Load after Tailwind and remove conflicting legacy material CSS. */
html[data-design="clay"] {
  --background: #f1e4d2;
  --foreground: #49362b;
  --card: #fbf2e3;
  --card-foreground: #49362b;
  --popover: #fbf2e3;
  --popover-foreground: #49362b;
  --primary: #edb580;
  --primary-foreground: #4e2b19;
  --secondary: #c87b59;
  --secondary-foreground: #49362b;
  --muted: #e4cfb5;
  --muted-foreground: #796354;
  --accent: #e4cfb5;
  --accent-foreground: #49362b;
  --destructive: #b43838;
  --border: #d9c4ab;
  --input: #d9c4ab;
  --ring: #a6603e;
  --radius: 20px;
  --dd-field: #e4cfb5;
  --dd-light: #fff5e4;
  --dd-umber: #754629;
  --chart-1: #edb580;
  --chart-2: #c87b59;
  --chart-3: #796354;
  --chart-4: #a6603e;
  --chart-5: #49362b;
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}
html[data-design="clay"]:is(.dark,[data-theme="dark"]) {
  --background: #2d231e;
  --foreground: #f5e6cf;
  --card: #47382c;
  --card-foreground: #f5e6cf;
  --popover: #47382c;
  --popover-foreground: #f5e6cf;
  --primary: #c78c5c;
  --primary-foreground: #332014;
  --secondary: #ad684a;
  --secondary-foreground: #f5e6cf;
  --muted: #251c17;
  --muted-foreground: #c4aa95;
  --accent: #251c17;
  --accent-foreground: #f5e6cf;
  --destructive: #ff9999;
  --border: #614a38;
  --input: #614a38;
  --ring: #e7b083;
  --radius: 20px;
  --dd-field: #251c17;
  --dd-light: #bca080;
  --dd-umber: #120b07;
  --chart-1: #c78c5c;
  --chart-2: #ad684a;
  --chart-3: #c4aa95;
  --chart-4: #e7b083;
  --chart-5: #f5e6cf;
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
}
html[data-design="clay"] :is(body) { background:var(--background);color:var(--foreground);font-family:var(--font-sans,system-ui,sans-serif); }
html[data-design="clay"] :is(:is([data-slot="card-title"],[data-slot="dialog-title"],[data-slot="alert-dialog-title"],[data-slot="sheet-title"],[data-slot="drawer-title"],[data-slot="alert-title"],[data-slot="empty-title"],[data-slot="item-title"],[data-slot="toast-title"])) { font-family:var(--font-heading,Georgia,serif);letter-spacing:-.025em; }
html[data-design="clay"] :is([data-slot]) { border-color:var(--border); }
html[data-design="clay"] :is(:is([data-slot="card"],[data-slot="alert"],[data-slot="item"],[data-slot="empty"],[data-slot="calendar"],[data-slot="command"],[data-slot="menubar"],[data-slot="navigation-menu-content"],[data-slot="sidebar"],[data-slot="sidebar-inner"],[data-slot="carousel"])) { background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius); }
html[data-design="clay"] :is(:is([data-slot="dialog-content"],[data-slot="alert-dialog-content"],[data-slot="sheet-content"],[data-slot="drawer-content"],[data-slot="popover-content"],[data-slot="hover-card-content"],[data-slot="dropdown-menu-content"],[data-slot="dropdown-menu-sub-content"],[data-slot="context-menu-content"],[data-slot="context-menu-sub-content"],[data-slot="menubar-content"],[data-slot="menubar-sub-content"],[data-slot="select-content"],[data-slot="select-positioner"],[data-slot="combobox-content"],[data-slot="combobox-list"],[data-slot="toast"],[data-slot="tooltip-content"])) { background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:var(--radius);max-width:calc(100vw - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto; }
html[data-design="clay"] :is(:is([data-slot="input"],[data-slot="textarea"],[data-slot="native-select"],[data-slot="select-trigger"],[data-slot="combobox-input"],[data-slot="combobox-trigger"],[data-slot="input-group"],[data-slot="input-otp-slot"],[data-slot="command-input-wrapper"])) { background:var(--dd-field);color:var(--foreground);border:1px solid var(--border);border-radius:calc(var(--radius)*.6);box-shadow:none;min-width:0; }
html[data-design="clay"] :is(:is([data-slot="input"],[data-slot="textarea"],[data-slot="native-select"])::placeholder) { color:var(--muted-foreground);opacity:1; }
html[data-design="clay"] :is(:is([data-slot="button"],[data-slot="toggle"],[data-slot="tabs-trigger"],[data-slot="pagination-link"],[data-slot="navigation-menu-trigger"],[data-slot="menubar-trigger"],[data-slot="sidebar-menu-button"],[data-slot="toast-action"],[data-slot="carousel-previous"],[data-slot="carousel-next"])) { border-radius:calc(var(--radius)*.6);background:var(--card);color:var(--foreground);border:1px solid var(--border); }
html[data-design="clay"] :is([data-slot="button"]:not([data-variant]),[data-slot="button"][data-variant="default"]) { background:var(--primary);color:var(--primary-foreground); }
html[data-design="clay"] :is([data-slot="button"][data-variant="secondary"]) { background:var(--secondary);color:var(--secondary-foreground); }
html[data-design="clay"] :is(:is([data-slot="checkbox"],[data-slot="radio-group-item"],[data-slot="switch"])) { background:var(--dd-field);color:var(--primary-foreground);border:1px solid var(--border);box-shadow:none; }
html[data-design="clay"] :is(:is([data-slot="checkbox"],[data-slot="radio-group-item"],[data-slot="switch"]):is([data-state="checked"],[data-state="on"],[data-state="active"],[data-checked]:not([data-checked="false"]),[data-selected]:not([data-selected="false"]),[aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],[aria-current="page"])) { background:var(--primary);color:var(--primary-foreground);border-color:var(--primary); }
html[data-design="clay"] :is([data-slot="switch-thumb"],[data-slot="slider-thumb"]) { background:var(--background);border:1px solid var(--border);box-shadow:none; }
html[data-design="clay"] :is([data-slot="slider-track"],[data-slot="progress"],[data-slot="tabs-list"]) { background:var(--dd-field);border-radius:var(--radius); }
html[data-design="clay"] :is([data-slot="slider-range"],[data-slot="progress-indicator"]) { background:var(--primary); }
html[data-design="clay"] :is(:is([data-slot="button"],[data-slot="toggle"],[data-slot="tabs-trigger"],[data-slot="pagination-link"],[data-slot="navigation-menu-trigger"],[data-slot="menubar-trigger"],[data-slot="sidebar-menu-button"],[data-slot="toast-action"],[data-slot="carousel-previous"],[data-slot="carousel-next"]):is([data-state="checked"],[data-state="on"],[data-state="active"],[data-checked]:not([data-checked="false"]),[data-selected]:not([data-selected="false"]),[aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],[aria-current="page"])) { background:var(--primary);color:var(--primary-foreground);border-color:var(--primary); }
html[data-design="clay"] :is(:is([data-slot="dropdown-menu-item"],[data-slot="dropdown-menu-checkbox-item"],[data-slot="dropdown-menu-radio-item"],[data-slot="context-menu-item"],[data-slot="context-menu-checkbox-item"],[data-slot="context-menu-radio-item"],[data-slot="menubar-item"],[data-slot="menubar-checkbox-item"],[data-slot="menubar-radio-item"],[data-slot="select-item"],[data-slot="combobox-item"],[data-slot="command-item"],[data-slot="sidebar-menu-button"]):is(:hover,:focus-visible,[data-highlighted],[data-state="checked"],[data-selected],[aria-selected="true"])) { background:var(--accent);color:var(--accent-foreground); }
html[data-design="clay"] :is(:is([data-slot="badge"],[data-slot="kbd"],[data-slot="avatar-fallback"],[data-slot="avatar-group-count"])) { background:var(--muted);color:var(--foreground);border:1px solid var(--border);border-radius:calc(var(--radius)*.4); }
html[data-design="clay"] :is(:is([data-slot="separator"],[data-slot="dropdown-menu-separator"],[data-slot="context-menu-separator"],[data-slot="menubar-separator"],[data-slot="command-separator"],[data-slot="item-separator"],[data-slot="sidebar-separator"])) { background:var(--border); }
html[data-design="clay"] :is([data-slot="table"]) { border-collapse:collapse;color:var(--foreground); }
html[data-design="clay"] :is([data-slot="table-row"],[data-slot="accordion-item"]) { border-bottom:1px solid var(--border); }
html[data-design="clay"] :is([data-slot="table-row"]:is(:hover,[data-state="selected"])) { background:var(--muted); }
html[data-design="clay"] :is([data-slot="table-head"],[data-slot="table-caption"],[data-slot$="description"],[data-slot="breadcrumb-link"]) { color:var(--muted-foreground); }
html[data-design="clay"] :is([data-slot="skeleton"]) { background:var(--muted);border-radius:calc(var(--radius)*.5); }
html[data-design="clay"] :is([data-slot="scroll-area-thumb"],[data-slot="resizable-handle"]) { background:var(--border); }
html[data-design="clay"] :is([data-slot="dialog-overlay"],[data-slot="alert-dialog-overlay"],[data-slot="sheet-overlay"],[data-slot="drawer-overlay"]) { background:color-mix(in srgb,var(--foreground) 25%,transparent); }
html[data-design="clay"] :is(:is([data-slot="card"],[data-slot="alert"],[data-slot="item"],[data-slot="empty"],[data-slot="calendar"],[data-slot="command"],[data-slot="menubar"],[data-slot="navigation-menu-content"],[data-slot="sidebar"],[data-slot="sidebar-inner"],[data-slot="carousel"])) { background:linear-gradient(145deg,color-mix(in srgb,var(--dd-light) 28%,transparent),transparent 65%),var(--card);border-color:transparent;box-shadow:inset 3px 4px 7px color-mix(in srgb,var(--dd-light) 65%,transparent),inset -4px -7px 10px color-mix(in srgb,var(--dd-umber) 13%,transparent),6px 12px 12px -4px color-mix(in srgb,var(--dd-umber) 24%,transparent); }
html[data-design="clay"] :is(:is([data-slot="button"],[data-slot="toggle"],[data-slot="tabs-trigger"],[data-slot="pagination-link"],[data-slot="navigation-menu-trigger"],[data-slot="menubar-trigger"],[data-slot="sidebar-menu-button"],[data-slot="toast-action"],[data-slot="carousel-previous"],[data-slot="carousel-next"])) { --dd-surface:var(--card);background:radial-gradient(ellipse at 30% 0%,color-mix(in srgb,var(--dd-light) 65%,transparent),transparent 70%),var(--dd-surface);border-color:transparent;border-radius:999px;box-shadow:inset 3px 4px 7px color-mix(in srgb,var(--dd-light) 70%,transparent),inset -4px -6px 9px color-mix(in srgb,var(--dd-umber) 27%,transparent),5px 10px 12px -5px color-mix(in srgb,var(--dd-umber) 35%,transparent); }
html[data-design="clay"] :is([data-slot="button"]:is(:not([data-variant]),[data-variant="default"]),:is([data-slot="button"],[data-slot="toggle"],[data-slot="tabs-trigger"],[data-slot="pagination-link"],[data-slot="navigation-menu-trigger"],[data-slot="menubar-trigger"],[data-slot="sidebar-menu-button"],[data-slot="toast-action"],[data-slot="carousel-previous"],[data-slot="carousel-next"]):is([data-state="checked"],[data-state="on"],[data-state="active"],[data-checked]:not([data-checked="false"]),[data-selected]:not([data-selected="false"]),[aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],[aria-current="page"])) { --dd-surface:var(--primary);background:radial-gradient(ellipse at 30% 0%,color-mix(in srgb,var(--dd-light) 65%,transparent),transparent 70%),var(--dd-surface); }
html[data-design="clay"] :is(:is([data-slot="input"],[data-slot="textarea"],[data-slot="native-select"],[data-slot="select-trigger"],[data-slot="combobox-input"],[data-slot="combobox-trigger"],[data-slot="input-group"],[data-slot="input-otp-slot"],[data-slot="command-input-wrapper"]),[data-slot="switch"],[data-slot="slider-track"],[data-slot="tabs-list"]) { box-shadow:inset 2px 3px 5px color-mix(in srgb,var(--dd-umber) 25%,transparent),inset -2px -3px 5px color-mix(in srgb,var(--dd-light) 35%,transparent); }
html[data-design="clay"] :is(:is([data-slot="button"],[data-slot="toggle"],[data-slot="tabs-trigger"],[data-slot="pagination-link"],[data-slot="navigation-menu-trigger"],[data-slot="menubar-trigger"],[data-slot="sidebar-menu-button"],[data-slot="toast-action"],[data-slot="carousel-previous"],[data-slot="carousel-next"]):active,:is([data-slot="button"],[data-slot="toggle"],[data-slot="tabs-trigger"],[data-slot="pagination-link"],[data-slot="navigation-menu-trigger"],[data-slot="menubar-trigger"],[data-slot="sidebar-menu-button"],[data-slot="toast-action"],[data-slot="carousel-previous"],[data-slot="carousel-next"]):is([data-state="checked"],[data-state="on"],[data-state="active"],[data-checked]:not([data-checked="false"]),[data-selected]:not([data-selected="false"]),[aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],[aria-current="page"])) { box-shadow:inset 3px 4px 8px color-mix(in srgb,var(--dd-umber) 32%,transparent),inset -3px -3px 6px color-mix(in srgb,var(--dd-light) 35%,transparent); }
html[data-design="clay"] :is(:is([data-slot="dialog-content"],[data-slot="alert-dialog-content"],[data-slot="sheet-content"],[data-slot="drawer-content"],[data-slot="popover-content"],[data-slot="hover-card-content"],[data-slot="dropdown-menu-content"],[data-slot="dropdown-menu-sub-content"],[data-slot="context-menu-content"],[data-slot="context-menu-sub-content"],[data-slot="menubar-content"],[data-slot="menubar-sub-content"],[data-slot="select-content"],[data-slot="select-positioner"],[data-slot="combobox-content"],[data-slot="combobox-list"],[data-slot="toast"],[data-slot="tooltip-content"])) { box-shadow:inset 2px 3px 5px color-mix(in srgb,var(--dd-light) 55%,transparent),8px 16px 24px -10px color-mix(in srgb,var(--dd-umber) 40%,transparent); }
html[data-design="clay"] :is([data-slot="button"]:is([data-variant="ghost"],[data-variant="link"])) { background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none; }
html[data-design="clay"] :is([data-slot="button"][data-variant="link"]) { color:var(--ring);text-decoration:underline;text-underline-offset:4px; }
html[data-design="clay"] :is([data-slot="button"][data-variant="outline"]) { background:transparent;border-color:var(--border); }
html[data-design="clay"] :is([data-variant="destructive"],[data-slot="alert"][data-variant="destructive"]) { background:color-mix(in srgb,var(--destructive) 12%,var(--background));color:var(--destructive);border-color:var(--destructive); }
html[data-design="clay"] :is([data-slot]:focus-visible) { outline:3px solid var(--ring);outline-offset:3px; }
html[data-design="clay"] :is([data-slot][aria-invalid="true"]) { border-color:var(--destructive);outline:2px solid var(--destructive);outline-offset:2px; }
html[data-design="clay"] :is([data-slot]:is(:disabled,[data-disabled]:not([data-disabled="false"]),[aria-disabled="true"])) { opacity:.5;cursor:not-allowed;transform:none; }
html[data-design="clay"] :is([data-slot="field-error"]) { color:var(--destructive); }
html[data-design="clay"] :is([data-slot="button-group"] > [data-slot="button"]) { border-radius:0; }
html[data-design="clay"] :is([data-slot="button-group"] > [data-slot="button"]:first-child) { border-start-start-radius:var(--radius);border-end-start-radius:var(--radius); }
html[data-design="clay"] :is([data-slot="button-group"] > [data-slot="button"]:last-child) { border-start-end-radius:var(--radius);border-end-end-radius:var(--radius); }
@media(prefers-reduced-motion:reduce) { html[data-design="clay"] [data-slot] {animation:none!important;transition:none!important;} }

/* Interaction refinements; preserve provider positioning and sizing. */
html[data-design="clay"] :is([data-slot="button"],[data-slot="toggle"]):hover:not(:disabled):not([aria-disabled="true"]):not([data-disabled]) { filter:brightness(1.04); }
html[data-design="clay"] [data-slot="input-group"] :is([data-slot="input"],[data-slot="textarea"]) { background:transparent;border:0;box-shadow:none; }
html[data-design="clay"] :is([data-slot="button"],[data-slot="toggle"]):active:not(:disabled) { translate:0 1px; }
html[data-design="clay"] [data-slot="button"][data-variant="ghost"]:hover:not(:disabled) { background:var(--muted); }