Nimbus
Light, with substance.
/01 Usage
curl -O https://dropdesign.cynthiacaron.com/themes/nimbus/DESIGN.mdRun this command from your project root, then paste these lines into your CLAUDE.md or AGENTS.md so your coding agent follows the theme:
## Design system Follow DESIGN.md (the Nimbus theme from dropdesign.md) for all UI work: tokens, typography, components and rules. Do not introduce styles it does not define. shadcn components are themed by shadcn.css: import it after Tailwind and set data-design="nimbus" on <html>.
A tinted frosted-glass theme in violet and aqua. Translucent surfaces, soft reflections and luminous layers bring depth to the interface. Includes interactive component and cloud-workspace previews.
An original direction authored for this catalogue — not an analysis of any existing brand. Free to use in any project, no sign-up.
/02 Preview
--- name: Nimbus slug: nimbus version: 1.2.0 family: glass tagline: Light, with substance. description: A tinted frosted-glass theme in violet and aqua. Translucent surfaces, soft reflections and luminous layers bring depth to the interface. Includes interactive component and cloud-workspace previews. ---
Nimbus
Direction
Tinted frosted glass: a warm mineral background, a darker slate region behind the glass, violet and aqua controls, soft edge reflections and layered translucency. The material feels softly diffused and luminous. The preview demonstrates shared working controls before showing them in a cloud dashboard.
The look is produced with CSS gradients, backdrop blur, edge reflections and shadows. It is a visual approximation, not physical ray tracing. Avoid SVG displacement effects that introduce pointed or star-shaped artefacts.
Palette
| Token | Light | Dark |
|---|---|---|
--bg |
#E4DDD3 |
#252C37 |
--ink |
#242C37 |
#F4F2FF |
--muted |
#535B65 |
#C1C6D3 |
--accent |
#6540B8 |
#C2A5FF |
--edge |
#FFFFFF85 |
#E7F3FF68 |
--glass |
#FFFFFF12 |
#FFFFFF08 |
--card |
#FFFFFF38 |
#20293840 |
--field |
#FFFFFF58 |
#C3D8EF25 |
--line |
#4A526729 |
#E4E9FF30 |
--shadow |
#20273966 |
#080D1C99 |
--chart |
#7253CC |
#BEA5FF |
Scene pigments: cream #F4E8D6, aqua-grey #A6C7C3, slate #6B7489. Dark equivalents: #534B55, #426B70, #18232F. The scene stays fixed and contains one large glass ribbon, not a cloud of arbitrary ornaments.
Violet lenses use #8249EA38 (22% opacity); aqua lenses use #27BDB62E (18% opacity). Keep their centres visibly transparent. Colour is allowed in glass, not restricted to the background. Keep clear variants for supporting actions. The prism card combines peach, violet and cyan transparent gradients, with dark text in both modes.
Typography and layout
Manrope is embedded as WOFF2. System sans is the fallback. Hero 48–76 px, 600, line-height 1.04, tight tracking. Section headings 32–36 px, 550. Body 12–14 px; product labels 9–11 px. Sentence case throughout, no mono eyebrows or gradient text.
Container 1180 px, 32 px outside gutters. Hero: concise copy left and a glass component kit right. The kit contains two tinted lenses, layer controls, a search field, and a prism card. Keep all elements upright. A thin benefit strip follows. The dashboard moves to its own section below, with a maximum width of 900 px, followed by workflow cards and a surface-diffusion specimen.
At 900 px, stack the hero and cap the kit at 570 px. At 640 px, use 18 px gutters, 16–20 px kit padding and a tighter two-column kit. The remaining dashboard/cards/material section stack normally. Verify 360 px and tablet widths without horizontal overflow.
Shared material recipes
.glass {
border: 1px solid var(--edge);
background: linear-gradient(135deg, #ffffff28, transparent 45%, #e3eeff08), var(--glass);
backdrop-filter: blur(var(--frost)) saturate(1.3);
box-shadow: inset 2px 2px 2px #ffffffa0,
inset -2px -2px 2px #d2eaff70,
inset 0 0 0 5px #ffffff08,
8px 16px 18px -10px var(--shadow),
22px 34px 38px -22px var(--shadow);
}
.lens {
--tint: #ffffff08;
isolation: isolate;
overflow: hidden;
border: 1px solid #ffffff55;
border-radius: 99px;
background: linear-gradient(155deg, #ffffff20, transparent 38%, transparent 75%, #ffffff0b), var(--tint);
backdrop-filter: blur(2px) saturate(1.25);
box-shadow: inset 1px 1.5px 2px #ffffffa0,
inset -1px -1px 2px #d7eaff45,
2px 4px 6px -3px #23314b30,
7px 12px 16px -8px #17243640;
}
.lens::after { content: none; }
Default frost is 8 px. The diffusion slider changes shell blur from 0 to 24 px; the data surface retains its own 6 px blur. Copy the violet/aqua gradient variants and pseudo-element reflection strips from demo/index.html. All lenses share the same optical rim and cast shadows, including hero actions and kit controls. Keep text above the decorative layers and sharp. Use broad, low-opacity diagonal highlights and a fine curved rim. Never draw a horizontal white stripe beneath the label. The centre must reveal the background; use dark violet/teal text in light mode and pale text in dark mode.
Hover lifts 2 px and slightly brightens the lens. Press sinks 1 px. Selected tint gets an outside outline as well as aria-pressed. Disabled controls retain readable labels and lose hover motion. With no backdrop-filter support, neutral panels use opaque background tokens.
Interactive components
- Tint buttons switch the prism card between Violet and Aqua and expose exclusive pressed states.
- Plus/minus controls vary the specimen's layer count from 1 to 6 and update its local blur. Disable at each boundary.
- Search filters component names locally and shows a matching or empty-state message.
- Save acknowledges the current look within the current page session only. No account, network or permanent storage.
- Dashboard service and range buttons update sample totals, the SVG chart, dates and accessible description.
- Focus switch updates both the explanatory text and release notification.
- Surface diffusion slider shows the value and has an 8 px reset.
All sample data is labelled. No fake signup, external messages, tracking or remote assets.
Accessibility and delivery
Native buttons, checkbox and range input; labels on search and icon controls. Keep visible focus outlines and status text for user-triggered changes. Text-bearing card gradients must preserve dark-text contrast. Do not put crucial labels over only a bright rim.
Follow the OS theme on first load; support the visible local theme toggle and validated parent {type: "cyn-theme", theme: "light" | "dark"} messages. Internal links prevent iframe navigation and scroll to sections. Reduced motion removes transitions. The demo is one offline HTML file with embedded fonts and SVG.
In a component library, share these tokens and recipes between Button, Card, Input, Switch and Slider rather than limiting the material to a hero illustration.
Design system reference
This section is the tabular version of demo/system.html. The values come from the final cascade of demo/index.html, which later blocks override. Rows marked shadcn come from shadcn.css. Dark values apply under [data-theme="dark"] on <html>.
Color tokens
| Name | Variable | Light | Dark | Role |
|---|---|---|---|---|
| Background | --bg |
#E4DDD3 |
#252C37 |
Page, opaque fallback when backdrop-filter is unsupported |
| Glass | --glass |
#FFFFFF12 |
#FFFFFF08 |
Panel fill under frost |
| Card | --card |
#FFFFFF38 |
#20293840 |
Data surfaces (6 px blur), release toast |
| Field | --field |
#FFFFFF58 |
#C3D8EF25 |
Wells, selected tab, icon tiles, segmented track |
| Scene A (cream) | --scene-a |
#F4E8D6 |
#534B55 |
Top-left radial of the scene |
| Scene B (aqua-grey) | --scene-b |
#A6C7C3 |
#426B70 |
Scene gradient end |
| Scene C (slate) | --scene-c |
#6B7489 |
#18232F |
Darker region behind the glass |
| Ink | --ink |
#242C37 |
#F4F2FF |
Headings, body, controls |
| Muted | --muted |
#535B65 |
#C1C6D3 |
Supporting copy, captions, labels |
| Accent | --accent |
#6540B8 |
#C2A5FF |
Links, focus ring, range thumb, highlighted word |
| Violet tint | .lens.primary --tint |
#8249EA38 |
#9970E82B |
Primary lens body (22% light) |
| Violet label | .lens.primary color |
#392368 |
#F6EFFF |
Text on violet lens |
| Aqua tint | .lens.aqua --tint |
#27BDB62E |
#41CBBB24 |
Secondary lens body (18% light) |
| Aqua label | .lens.aqua color |
#163F40 |
#E4FFF8 |
Text on aqua lens |
| Clear lens tint | .lens --tint |
#FFFFFF08 |
#FFFFFF08 |
Neutral lens body |
| Positive | --mint |
#287968 |
#96DBC5 |
Trends, healthy status, release check |
| Destructive (shadcn) | --destructive |
#B43838 |
#FF9999 |
Errors, invalid fields |
| Primary (shadcn) | --primary |
#8249EA |
#AA78F4 |
Checked checkbox, radio and switch in the adapter |
| Edge | --edge |
#FFFFFF85 |
#E7F3FF68 |
Optical rim, 1 px borders |
| Line | --line |
#4A526729 |
#E4E9FF30 |
Dividers, chart grid, switch off track |
| Shadow | --shadow |
#20273966 |
#080D1C99 |
Cast-shadow colour |
| Chart | --chart |
#7253CC |
#BEA5FF |
Series line, 2.5 px, round caps |
| Chart area | literal | #649FEC |
#649FEC |
Area gradient, stop opacity 0.35 to 0 |
| Frost | --frost |
8px |
8px |
Panel blur; slider range 0–24 px, reset 8 px |
Measured contrast (WCAG 2, translucent layers composited onto --bg, light / dark): ink on bg 10.45 / 12.71; muted on bg 5.11 / 8.22; accent on bg 5.23 / 6.77; ink on card 11.20 / 12.84; muted on card 5.47 / 8.31; ink on field 11.63 / 12.84; positive on bg 3.87 / 8.86; destructive on bg 4.37 / 6.87; violet label on violet lens 7.35 / 10.05; aqua label on aqua lens 7.66 / 10.10; ink on scene slate 3.01 / 14.38. In light mode, --mint and --destructive pass only for large text (AA large) on --bg. Keep body copy off the slate region of the scene.
Type scale
All styles use Manrope, system-ui, sans-serif. Manrope is embedded as a variable WOFF2 (font-weight: 400 700). There is no monospace role. Figures in values are tabular.
| Style | Family | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
Display (.hero h1) |
Manrope | clamp(48px, 5.6vw, 76px); 72 px ≤ 900 px; 62 px ≤ 640 px |
1.04 | −4.5 px | 600 |
Metric (.metric-value) |
Manrope | 40 px (33 px ≤ 900 px) | 1.2 | −2 px | 400, tabular |
Heading 2 (h2) |
Manrope | 36 px (32 px ≤ 640 px) | 1.15 | −1.7 px | 550 |
Card title (.prism-card p) |
Manrope | 22 px (18 px ≤ 640 px) | 1.2 | −0.8 px | 600 |
Wordmark (.brand) |
Manrope | 22 px (20 px ≤ 640 px) | 1.6 | −1 px | 750 (rendered as 700, the axis maximum) |
Panel title (.kit-head b) |
Manrope | 19 px (17 px ≤ 640 px) | 1.6 | −0.7 px | 700 |
Heading 3 (.feature h3) |
Manrope | 15 px | 1.6 | −0.3 px | 600 |
Body (body) |
Manrope | 14 px | 1.6 | 0 | 400 |
Lead (.hero-copy p) |
Manrope | 12 px | 1.9 | 0 | 400, --muted |
Supporting (.feature p, .section-heading p) |
Manrope | 11 px | 1.8 | 0 | 400, --muted |
Control label (.lens) |
Manrope | 11 px | 1.6 | 0 | 700 |
Label (.intro-label, tabs) |
Manrope | 10 px | 1.6 | 0 | 400 |
Caption (.release small, .hero-note) |
Manrope | 9 px | 1.6 | 0 | 400, --muted |
Micro (.chart-labels, .sample, .kit-status) |
Manrope | 8 px | 1.6 | 0 | 400, --muted |
Spacing scale
Nimbus has no spacing token. These are the steps the demo uses, on a loose 2 px grid.
| Value | Used by |
|---|---|
| 4 px | Kit tools margin, focus outline offset |
| 6 px | Tabs gap |
| 8 px | Tool row gap |
| 10 px | Brand gap, inner lens gap on the prism card |
| 12 px | Mini-stats gap |
| 14 px | Hero actions gap |
| 18 px | Card grid gap, tabs vertical margin |
| 20 px | Hero dashboard padding, kit button stack gap |
| 24 px | Kit grid gap |
| 26 px | Feature card padding, section heading margin |
| 32 px | Kit head margin, outer gutter (container min(1180px, 100% − 64px)) |
| 72 px | Section vertical padding (47 px ≤ 640 px) |
Radii
| Value | Used by |
|---|---|
| 8 px | App icon |
| 9 px | Tab button |
| 10 px | Release icon, prism logo |
| 14 px | Route node |
| 14.4 px | shadcn fields and controls (--radius × 0.6) |
| 16 px | Mini stat |
| 18 px | Metric card, release toast |
| 22 px | Prism card |
| 24 px | Feature card, shadcn --radius |
| 26 px | Dashboard |
| 28 px | .glass default |
| 30 px | Component kit (25 px ≤ 640 px) |
| 99 px | Lens, search field, segmented control, switch |
| 50% | Icon lens, avatar, status dot, switch thumb |
Elevation and material levels
| Level | Recipe | Fill | Blur | Shadow |
|---|---|---|---|---|
| L0 Scene | .scene |
Radial --scene-a at 12% 8%, then linear-gradient(123deg, --bg 26%, --scene-c 72%, --scene-b), plus one ribbon |
none | none |
| L1 Glass panel | .glass |
linear-gradient(135deg, #FFFFFF28, transparent 45%, #E3EEFF08), --glass |
blur(var(--frost)) saturate(1.3) |
inset 2px 2px 2px #FFFFFFA0, -2px -2px 2px #D2EAFF70, 0 0 0 5px #FFFFFF08; outer 8px 16px 18px -10px --shadow, 22px 34px 38px -22px --shadow |
| L2 Data card | .metric-card |
--card, 1 px --edge |
blur(6px) |
none |
| L2 Field | --field |
--field, 1 px --edge |
none | none (selected tab: inset 0 1px #FFFFFF70) |
| L3 Lens | .lens |
linear-gradient(155deg, #FFFFFF20, transparent 38%, transparent 75%, #FFFFFF0B), --tint |
blur(2px) saturate(1.25) |
inset 1px 1.5px 2px #FFFFFFA0, -1px -1px 2px #D7EAFF45; outer 2px 4px 6px -3px #23314B30, 7px 12px 16px -8px #17243640 |
| L3 Search field | .kit-search |
#FFFFFF78 (dark #FFFFFFA3), 1 px #FFFFFF8C |
none | inset 0 1px 2px #FFFFFF; outer 5px 9px 10px -5px --shadow |
| L4 Prism card | .prism-card |
Peach, violet and cyan radials over linear-gradient(135deg, #D486EF88, #A192EF88 50%, #6FD4ED5E) |
blur(layers × 3px), 1–6 layers |
inset 2px 2px 3px #FFFFFFB3, -2px -3px 4px #C4FEFFAC; outer 5px 9px 13px -7px #5140A7AA, 10px 25px 30px -16px #693CEE88 |
| L4 Overlay (shadcn) | popover slots | --popover #E1DFEBF2 / #293141F5 |
blur(20px) saturate(1.2) |
inset 1px 1px 2px #FFFFFF80; outer 8px 18px 35px -12px #14203966 |
Component-state matrix
| Component | States | Key tokens |
|---|---|---|
| Lens button (clear, violet, aqua, small, icon) | Default; hover translateY(-2px) + background-color: color-mix(in srgb, var(--tint) 85%, #ffffff15); pressed translateY(1px) + brightness(.97); selected aria-pressed outline 1px #FFFFFF45 offset 3 px; focus-visible 3px solid --accent offset 4 px; disabled opacity 0.5, no motion |
--tint, --ink, --accent, lens shadows |
| Text link | Default; focus-visible. Hover and pressed are not defined | --ink, 11 px |
| Search field | Default; focus-within 2px solid --accent offset 4 px; filled; error --destructive border + 2 px outline offset 2 px (shadcn); disabled opacity 0.5 |
#FFFFFF78, #35404C text, --shadow |
| Text field (shadcn input) | Default; focus-visible 3px --ring; filled; aria-invalid --destructive; disabled 0.5 |
--field, --edge, radius 14.4 px, placeholder --muted |
| Switch | Off --line track; on #47859288 track, thumb +19 px; focus-visible; disabled |
46 × 27 px, thumb linear-gradient(135deg, #FFFFFF, #C9DCEC) |
| Checkbox, radio (shadcn) | Unchecked --field; checked --primary / --primary-foreground; focus-visible; disabled 0.5 |
--field, --edge, --primary |
| Range | Value 0–24, default 8 | accent-color: --accent |
| Segmented control | Unselected; aria-pressed = --card + 0 1px 4px --shadow |
--field track, --edge, 99 px |
| Tabs (pressed buttons) | Unselected; aria-pressed = --field + inset 0 1px #FFFFFF70; focus-visible |
10 px, radius 9 px |
| Badge (shadcn) | Default, accent, positive, destructive | --field, --edge, radius 9.6 px |
| Status and trend | Dot + word, never colour alone | --mint, ring color-mix(--mint 12%) |
| Metric card | Static; range and service switches update the data | --card, blur 6 px, --chart, --line grid |
| Release toast | Status (role=status) |
.glass on --card, icon --field + --mint |
| Destructive alert (shadcn) | Alert | color-mix(--destructive 12%, --bg), --destructive border and text |
| Prism card | Violet (default), aqua (data-tone="aqua"), layers 1–6 |
Text #222E50 / #162842, inner lens #FFFFFF25 |
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
- Load this adapter after Tailwind and remove previous material overrides from the same components. No old clay/glass classes should fight this layer.
- Put
data-design="nimbus"on the root<html>, not a preview div: menus, dialogs and toasts render through portals underbody. Use.darkordata-theme="dark"on that same root. The design attribute and dark mode are separate. - 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: usevar(--primary), nothsl(var(--primary)). - Load Manrope for headings and UI. Set
--font-sans,--font-headingand--font-monoaccordingly. Fonts and layout metrics are not automatically installed by the CSS adapter. - Forward
data-variant={variant}from shared Button and Badge wrappers. Keepdata-sloton every styled primitive, including portal contents. Do not replace the component's focus, selection, disabled or invalid attributes. - Keep primitive sizing, positioning, keyboard logic, RTL and accessibility intact. Adapt provider-specific calendar/Sonner APIs as described in the matrix.
<html data-design="nimbus" 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 / nimbus — 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="nimbus"] {
--background: #e4ddd3;
--foreground: #242c37;
--card: #ffffff38;
--card-foreground: #242c37;
--popover: #e1dfebf2;
--popover-foreground: #242c37;
--primary: #8249ea;
--primary-foreground: #ffffff;
--secondary: #27bdb6;
--secondary-foreground: #163b3c;
--muted: #ffffff58;
--muted-foreground: #535b65;
--accent: #ffffff58;
--accent-foreground: #242c37;
--destructive: #b43838;
--border: #ffffff85;
--input: #ffffff85;
--ring: #6540b8;
--radius: 24px;
--dd-field: #ffffff58;
--dd-light: #fff5e4;
--dd-umber: #754629;
--chart-1: #8249ea;
--chart-2: #27bdb6;
--chart-3: #535b65;
--chart-4: #6540b8;
--chart-5: #242c37;
--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="nimbus"]:is(.dark,[data-theme="dark"]) {
--background: #252c37;
--foreground: #f4f2ff;
--card: #202938eb;
--card-foreground: #f4f2ff;
--popover: #293141f5;
--popover-foreground: #f4f2ff;
--primary: #aa78f4;
--primary-foreground: #201330;
--secondary: #67dacf;
--secondary-foreground: #163b3c;
--muted: #c3d8ef25;
--muted-foreground: #c1c6d3;
--accent: #c3d8ef25;
--accent-foreground: #f4f2ff;
--destructive: #ff9999;
--border: #e7f3ff68;
--input: #e7f3ff68;
--ring: #c2a5ff;
--radius: 24px;
--dd-field: #c3d8ef25;
--dd-light: #bca080;
--dd-umber: #120b07;
--chart-1: #aa78f4;
--chart-2: #67dacf;
--chart-3: #c1c6d3;
--chart-4: #c2a5ff;
--chart-5: #f4f2ff;
--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="nimbus"] :is(body) { background:var(--background);color:var(--foreground);font-family:var(--font-sans,system-ui,sans-serif); }
html[data-design="nimbus"] :is([data-slot]) { border-color:var(--border); }
html[data-design="nimbus"] :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="nimbus"] :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="nimbus"] :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="nimbus"] :is(:is([data-slot="input"],[data-slot="textarea"],[data-slot="native-select"])::placeholder) { color:var(--muted-foreground);opacity:1; }
html[data-design="nimbus"] :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="nimbus"] :is([data-slot="button"]:not([data-variant]),[data-slot="button"][data-variant="default"]) { background:var(--primary);color:var(--primary-foreground); }
html[data-design="nimbus"] :is([data-slot="button"][data-variant="secondary"]) { background:var(--secondary);color:var(--secondary-foreground); }
html[data-design="nimbus"] :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="nimbus"] :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="nimbus"] :is([data-slot="switch-thumb"],[data-slot="slider-thumb"]) { background:var(--background);border:1px solid var(--border);box-shadow:none; }
html[data-design="nimbus"] :is([data-slot="slider-track"],[data-slot="progress"],[data-slot="tabs-list"]) { background:var(--dd-field);border-radius:var(--radius); }
html[data-design="nimbus"] :is([data-slot="slider-range"],[data-slot="progress-indicator"]) { background:var(--primary); }
html[data-design="nimbus"] :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="nimbus"] :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="nimbus"] :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="nimbus"] :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="nimbus"] :is([data-slot="table"]) { border-collapse:collapse;color:var(--foreground); }
html[data-design="nimbus"] :is([data-slot="table-row"],[data-slot="accordion-item"]) { border-bottom:1px solid var(--border); }
html[data-design="nimbus"] :is([data-slot="table-row"]:is(:hover,[data-state="selected"])) { background:var(--muted); }
html[data-design="nimbus"] :is([data-slot="table-head"],[data-slot="table-caption"],[data-slot$="description"],[data-slot="breadcrumb-link"]) { color:var(--muted-foreground); }
html[data-design="nimbus"] :is([data-slot="skeleton"]) { background:var(--muted);border-radius:calc(var(--radius)*.5); }
html[data-design="nimbus"] :is([data-slot="scroll-area-thumb"],[data-slot="resizable-handle"]) { background:var(--border); }
html[data-design="nimbus"] :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="nimbus"] :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(135deg,#ffffff28,transparent 45%,#e3eeff08),var(--card);backdrop-filter:blur(8px) saturate(1.3);box-shadow:inset 2px 2px 2px #ffffffa0,inset -2px -2px 2px #d2eaff70,8px 16px 18px -10px #20273966; }
html[data-design="nimbus"] :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"])) { background:linear-gradient(175deg,#ffffff44,#ffffff05 40%,#ffffff20),var(--card);backdrop-filter:blur(5px) saturate(1.5);border:1px solid #ffffff6b;border-radius:999px;box-shadow:inset 3px 4px 3px -2px #ffffffed,inset -3px -4px 3px -2px #e4f7ffd9,inset 0 -8px 11px -7px #ffffffc0,5px 8px 8px -4px #26304d45,13px 20px 20px -10px #17243659; }
html[data-design="nimbus"] :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"])) { background:linear-gradient(175deg,#cfb3ff80,#b388ff22 34%,#592dd622 75%,#e7d4ff66),var(--primary);color:var(--primary-foreground); }
html[data-design="nimbus"] :is([data-slot="button"][data-variant="secondary"]) { background:linear-gradient(175deg,#befffb80,#73e8dc22 38%,#07978f22 75%,#c9ffef88),var(--secondary);color:var(--secondary-foreground); }
html[data-design="nimbus"] :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"])) { backdrop-filter:blur(20px) saturate(1.2);box-shadow:inset 1px 1px 2px #ffffff80,8px 18px 35px -12px #14203966; }
html[data-design="nimbus"] :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"])) { box-shadow:inset 0 1px 2px #ffffff90,3px 5px 10px -6px #20273944;backdrop-filter:blur(5px); }
@supports not (backdrop-filter:blur(1px)) { html[data-design="nimbus"] :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(--background);} }
html[data-design="nimbus"] :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="nimbus"] :is([data-slot="button"][data-variant="link"]) { color:var(--ring);text-decoration:underline;text-underline-offset:4px; }
html[data-design="nimbus"] :is([data-slot="button"][data-variant="outline"]) { background:transparent;border-color:var(--border); }
html[data-design="nimbus"] :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="nimbus"] :is([data-slot]:focus-visible) { outline:3px solid var(--ring);outline-offset:3px; }
html[data-design="nimbus"] :is([data-slot][aria-invalid="true"]) { border-color:var(--destructive);outline:2px solid var(--destructive);outline-offset:2px; }
html[data-design="nimbus"] :is([data-slot]:is(:disabled,[data-disabled]:not([data-disabled="false"]),[aria-disabled="true"])) { opacity:.5;cursor:not-allowed;transform:none; }
html[data-design="nimbus"] :is([data-slot="field-error"]) { color:var(--destructive); }
html[data-design="nimbus"] :is([data-slot="button-group"] > [data-slot="button"]) { border-radius:0; }
html[data-design="nimbus"] :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="nimbus"] :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="nimbus"] [data-slot] {animation:none!important;transition:none!important;} }
/* Interaction refinements; preserve provider positioning and sizing. */
html[data-design="nimbus"] :is([data-slot="button"],[data-slot="toggle"]):hover:not(:disabled):not([aria-disabled="true"]):not([data-disabled]) { filter:brightness(1.04); }
html[data-design="nimbus"] [data-slot="input-group"] :is([data-slot="input"],[data-slot="textarea"]) { background:transparent;border:0;box-shadow:none; }
html[data-design="nimbus"] :is([data-slot="button"],[data-slot="toggle"]):active:not(:disabled) { translate:0 1px; }
html[data-design="nimbus"] [data-slot="button"][data-variant="ghost"]:hover:not(:disabled) { background:var(--muted); }
/* Clear-glass correction shared with the preview. */
html[data-design="nimbus"] :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"]):not([data-variant="ghost"]):not([data-variant="link"]):not([data-variant="destructive"]) {background:linear-gradient(155deg,#ffffff20,transparent 38%,transparent 75%,#ffffff0b),#ffffff08;border-color:#ffffff55;color:var(--foreground);backdrop-filter:blur(2px) saturate(1.25);box-shadow:inset 1px 1.5px 2px #ffffffa0,inset -1px -1px 2px #d7eaff45,2px 4px 6px -3px #23314b30,7px 12px 16px -8px #17243640;}
html[data-design="nimbus"] [data-slot="button"]:is(:not([data-variant]),[data-variant="default"]) {background:linear-gradient(160deg,#d5bfff40,transparent 42%,#6939c518),#8249ea38;color:#392368;}
html[data-design="nimbus"] [data-slot="button"][data-variant="secondary"] {background:linear-gradient(160deg,#d2fff333,transparent 42%,#159b9014),#27bdb62e;color:#163f40;}
html[data-design="nimbus"]:is(.dark,[data-theme="dark"]) [data-slot="button"]:is(:not([data-variant]),[data-variant="default"]) {color:#f6efff;}
html[data-design="nimbus"]:is(.dark,[data-theme="dark"]) [data-slot="button"][data-variant="secondary"] {color:#e4fff8;}
html[data-design="nimbus"] :is([data-slot="toggle"],[data-slot="tabs-trigger"],[data-slot="navigation-menu-trigger"],[data-slot="sidebar-menu-button"]):is([aria-pressed="true"],[aria-selected="true"],[data-state="active"],[data-state="on"],[data-selected]) {outline:1px solid var(--ring);outline-offset:2px;}