Sprout
A little curious. A little further.
/01 Usage
curl -O https://dropdesign.cynthiacaron.com/themes/sprout/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 Sprout 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="sprout" on <html>.
A playful learning system with creamy surfaces, strawberry pink, forest green and buttery yellow. Generous rounded cards, friendly typography and graphic illustrations make everyday progress feel inviting.
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: Sprout slug: sprout version: 1.0.0 family: soft tagline: A little curious. A little further. description: A playful learning system with creamy surfaces, strawberry pink, forest green and buttery yellow. ---
Sprout
Character
A warm, playful learning interface. Generous rounded cards, small graphic illustrations and a calm, legible hierarchy turn a dashboard into a place to explore. The material is matte and flat. Personality comes from colour, silhouette and composition rather than glass, glossy gradients or extruded shadows. Use cream and evergreen as anchors, with strawberry, lilac, mint and butter as contained accents.
The preview is an original fictional learning app. Names, activity and rankings are sample data. Preview interactions are local and reset on reload. No account, notification or course purchase is created.
Palette
| Role | Light | Dark |
|---|---|---|
| Page | #F4F1E9 |
#172720 |
| Card / popover | #FFFDF7 |
#22372E |
| Text | #26372F |
#F8F6E9 |
| Secondary text | #657168 |
#B3C4B7 |
| Field | #EEEEE3 |
#2D4438 |
| Separator | #E3E6DA |
#415448 |
| Input border | #C3CBBF |
#6C8374 |
| Focus / progress | #327966 |
#A9D5BD |
| Error | #A82F45 |
#FFACBA |
Accent panels: pink #EFA4BD, butter #F6D77E, lilac #C1B7EC, mint #DCE9D8, peach #F5BE96, pale cream #FAF6D9. These coloured panels retain dark #26372F text in both modes. The evergreen leaderboard retains #327966 and cream text. Never put low-contrast white labels on pale pink or yellow.
Typography
Plus Jakarta Sans, weights 400, 700 and 800; Arial and sans-serif fallbacks. Use 800 for major headings and metric numbers, 700 for controls, and 400 for supporting text. No uppercase display headlines. Small overlines use 10 px / 700 with .09 em tracking, sparingly.
- Display: 34 px desktop, 29 px mobile; specimen display up to 46 px.
- Hero: 33–39 px desktop, 32 px mobile, line-height 1.2.
- Section: 22 px / 800. Card title: 17–19 px / 800.
- Body: 13 px / 1.6. Compact metadata: 10–11 px / 1.6.
- Metrics: 31–51 px / 800, with units smaller and visible.
- Heading tracking: -.045 em. Body and controls: normal tracking.
The previews embed licensed font data to remain offline. Keep FONT-LICENSE.txt with redistributions. For a production application, self-host Plus Jakarta Sans and load its weights in the application's font setup; the CSS adapter declares the family but does not download a font. Honour OS text scaling; do not clip labels at fixed heights.
Composition and responsive behaviour
The desktop app uses a 208 px sidebar, a fluid main column, and a 286 px complementary column. Main content has 34 px horizontal padding, a 22 px card gap, and a 1480 px maximum page width. The left column contains a pink course feature, three compact metrics and a weekly chart. The right column contains a learning plan, evergreen ranking and a peach daily question.
Below 1100 px, reduce sidebar and gutters. Below 900 px, use an 80 px icon rail with accessible link names; course cards become two columns. At 640 px and below, replace the rail with a top navigation, use 18 px side gutters, stack dashboard regions and course cards, retain all data and actions, and allow filters to span the row. Card padding is 20–25 px. Mobile reads hero → metrics → chart → learning plan → community → courses.
Spacing scale: 4, 8, 12, 16, 24, 32, 48 px. Keep layouts upright. Do not rotate containers, add floating ornamental stars, or scatter random badges across the interface.
Surfaces and geometry
Cards use 28 px radii (25 px mobile), 24 px padding and an almost invisible shadow 0 6px 20px #23362D05. Nested illustrations use 18 px radii. Fields use 15 px radii. Segmented controls, pills and buttons use full rounding. Avatars are circles.
Use tonal separation for cards, visible input borders for fields and thin rules for tables. Do not outline every surface. Only overlays need a stronger 0 12px 40px #14221B18 shadow. Dark mode removes the card shadow. A modal backdrop may blur; cards and buttons must not look like glass.
Buttons, fields and states
Primary controls use forest ink on light surfaces and pale green on dark surfaces, with contrasting text. Colourful story panels may retain dark primary buttons in both themes. Secondary controls use strawberry pink with dark text. Neutral controls use the field tone. Outline controls use a 1 px input border. Keep ghost and link treatments visually light. Minimum primary-button height: 44 px; standard horizontal padding: 20 px. Standalone icons also need accessible names and adequate touch targets.
Hover moves active buttons up by 2 px, press down by 1 px, over 180 ms. Disabled controls have .5 opacity, do not translate, and retain native disabled semantics. Focus-visible uses a 3 px green outline, offset by 4 px. Errors pair a semantic message with a red border; associate the message using aria-describedby and set aria-invalid. Checked, selected and pressed states must expose their native or ARIA state and remain discernible without colour alone.
Use native forms and keep provider keyboard handling. Inputs have clear visible labels. Checkbox, radio and switch states use the green primary colour. Tabs are inset in a neutral capsule; selected tabs receive a raised cream surface with a subtle shadow. Progress is a thin rounded green track with a visible percentage and accessible numeric values.
Illustration and charts
Course covers use an original illustrated series generated with image_gen: a creative sketching scene, an illustrated notebook still life, and a musician at a keyboard. Use a gouache and screenprint finish with tactile paper grain, organic edges and the same lilac, butter and evergreen colour anchors. Compose complete scenes rather than oversized isolated pictograms. Keep the image free of baked-in labels; status pills and course titles remain real HTML.
Course covers keep a 3:2 aspect ratio at all breakpoints, with 18 px rounded corners and object-fit: cover. Optimized 960 × 640 WebP masters live in demo/assets; prompts and provenance are recorded in demo/assets/PROMPTS.md. Each image is embedded in demo/index.html so downloaded previews stay self-contained. Decorative cover images have empty alt text because the adjacent course title supplies the context. The hero uses growing-ideas.webp, a transparent gouache book and flowering plant. The sidebar uses little-by-little.webp, a painted potted plant on books. Preserve alpha transparency, use object-fit: contain and keep clear space around the headline and button. Both assets are embedded in the demo; their masters and prompts live in demo/assets. The hero has an accessible label; the sidebar art is decorative. Do not reuse another brand's characters or add external asset requests.
The learning chart is a 3 px pink line above a faint area fill, with fine dashed horizontal guides. Its SVG is responsive; strokes keep a constant visual width. Period controls update the path, summary, axis, explanatory caption and accessible description together. Always provide units and a textual alternative. Avoid decorative data and misleading comparisons. Sample weekly values are 20, 45, 30, 65, 30, 40, 40 minutes (4.5 hours); monthly values are 1.5, 2.5, 3.5, 4.5 hours (12 hours).
Preview interactions and accessibility
Course filters update visible cards and a live result count. Weekly/monthly buttons update the learning chart and leaderboard independently. A native dialog presents a short sample exercise; Escape and Close return the user to the page. Incorrect answers get helpful feedback. A correct answer counts each demo lesson once and updates the completion count, percentage and progressbar together. The initial completion is 34 of 44 lessons, rounded to 77%.
Preserve keyboard access, visible focus, radio-group semantics, accessible chart summaries, reduced-motion behaviour, and readable content at 360 px. All demo links prevent navigation and scroll locally. The Light/Dark parent message is accepted only from the parent and only for valid theme values. Previews must run without external requests.
Design system reference
Copyable reference that mirrors demo/system.html. Values come from demo/index.html (tokens, literals, type, layout) and shadcn.css (adapter-only values, marked as such). Accent panels and literals marked "fixed" do not change with the theme.
Color tokens
| Name | Variable | Light | Dark | Role |
|---|---|---|---|---|
| Page | --bg |
#F4F1E9 |
#172720 |
Page background |
| Card | --card |
#FFFDF7 |
#22372E |
Cards, popovers, raised segment, switch thumb |
| Field | --field |
#EEEEE3 |
#2D4438 |
Inputs, segmented capsule, neutral button, pills |
| Ink | --ink |
#26372F |
#F8F6E9 |
Primary text and headings |
| Muted | --muted |
#657168 |
#B3C4B7 |
Supporting text, placeholders, axis |
| Line | --line |
#E3E6DA |
#415448 |
Hairlines, table rows, chart guides |
| Green | --green |
#327966 |
#A9D5BD |
Focus ring, progress, checked controls, links |
| Green deep | --green-dark |
#225B4B |
#C6E9D4 |
Declared in the demo, not used by any rule |
| Error | --error |
#A82F45 |
#FFACBA |
Invalid border and message, destructive |
| Strawberry | --pink |
#EFA4BD |
same | Story panel, secondary button, first rank, chart area |
| Butter | --yellow |
#F6D77E |
same | Accent panel, third rank |
| Lilac | --lilac |
#C1B7EC |
same | Stat tile, avatar, course cover |
| Mint | --mint |
#DCE9D8 |
same | Stat tile, growth chip, icon dots, side note |
| Peach | --peach |
#F5BE96 |
same | Daily question panel |
| Card shadow | --shadow |
0 6px 20px #23362D05 |
none |
L1 elevation |
| On accent (fixed) | — | #26372F |
same | Text on every accent panel; story button fill |
| Story button hover (fixed) | — | #3F564A |
same | .btn:hover |
| Story button text (fixed) | — | #FFFDF7 |
same | .btn label; text on evergreen |
| Evergreen (fixed) | — | #327966 |
same | Ranking card, plan progress fill, chart dot |
| Evergreen soft (fixed) | — | #D3E6DB / #E4EEE5 |
same | Small copy / footer on evergreen |
| Plan cream (fixed) | — | #FAF6D9 |
same | Learning plan panel |
| Plan track (fixed) | — | #E6E3C9 |
same | Progress track on plan cream |
| Butter tile (fixed) | — | #EEE9CF |
same | Second stat tile |
| Ranking row (fixed) | — | #EFF2DE |
same | Default ranking row |
| Growth text (fixed) | — | #285441 |
same | Text on the mint growth chip |
| Chart line (fixed) | — | #CE718F |
same | Learning chart stroke |
| Primary (adapter) | --primary |
#26372F |
#A9D5BD |
Solid button, checked controls in shadcn |
| Input (adapter) | --input |
#C3CBBF |
#6C8374 |
Field edge, outline button |
| Accent (adapter) | --accent |
#DCE9D8 |
#365746 |
Badge, highlighted menu item |
| Chart 1–5 (adapter) | --chart-1…--chart-5 |
#327966 #BD567A #8975BE #9C7628 #657168 |
#A9D5BD #EFA4BD #C1B7EC #F6D77E #B3C4B7 |
Chart series |
Measured contrast
WCAG 2 ratios computed live in the specimen (truncated to two decimals). Text: AAA ≥ 7, AA ≥ 4.5, AA large ≥ 3. UI pairs are non-text and need 3:1.
| Pair | Use | Light | Dark |
|---|---|---|---|
--ink / --bg |
body, headings | 11.14 AAA | 14.36 AAA |
--ink / --card |
card text | 12.36 AAA | 11.69 AAA |
--ink / --field |
input value, pills | 10.76 AAA | 9.69 AAA |
--muted / --bg |
intro, dates | 4.52 AA | 8.53 AAA |
--muted / --card |
descriptions | 5.01 AA | 6.95 AA |
--muted / --field |
placeholder | 4.36 AA large | 5.76 AA |
--green / --card |
link, focus ring | 5.08 AA | 7.82 AAA |
--error / --card |
field message | 6.53 AA | 7.17 AAA |
--primary-foreground / --primary |
solid button label | 12.36 AAA | 9.60 AAA |
--background / --destructive |
destructive button label | 5.89 AA | 8.80 AAA |
#26372F / --pink |
story panel, secondary button | 6.41 AA | same |
#26372F / --yellow |
third rank | 8.94 AAA | same |
#26372F / --lilac |
stat tile, cover | 6.73 AA | same |
#26372F / --peach |
daily question | 7.59 AAA | same |
#26372F / #FAF6D9 |
learning plan | 11.52 AAA | same |
#285441 / --mint |
growth chip | 6.85 AA | same |
#FFFDF7 / #327966 |
ranking heading | 5.08 AA | same |
#D3E6DB / #327966 |
10 px ranking copy | 3.96 AA large only | same |
#CE718F / --card (UI) |
chart line | 3.23 pass | 3.85 pass |
--input / --field (UI) |
field edge on its well | 1.42 fail | 2.57 fail |
--input / --card (UI) |
field edge on a card | 1.63 fail | 3.10 pass |
#26372F / --card (UI) |
story button on a card | 12.36 pass | 1.00 fail |
The field edge relies on the tonal well plus the label; the story button must stay on accent panels in dark mode, where it reads against the panel colour.
Type scale
Family: "Plus Jakarta Sans", Arial, sans-serif, embedded weights 400, 700 and 800. No monospace face: values and code use Plus Jakarta 700 with tabular figures. Values are measured from the specimen at desktop width.
| Style | Family | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| Display / specimen | sans | 46px; 34px ≤640 | 1.2 | −.045em (−2.07px) | 800 |
| Display / h1 | sans | 34px; 29px ≤640 | 1.2 | −.045em (−1.53px) | 800 |
| Metric XL / plan | sans | 51px, unit 22px | 1 | −3px (unit −1px) | 800 |
| Metric / chart | sans | 40px; 34px ≤900, unit 16px | 1 | −2px | 700 (strong) |
| Hero / story panel | sans | 33px; 39px ≥1400, 29px ≤1100, 32px ≤640 | 1.2 | −.045em (−1.49px) | 800 |
| Metric / stat tile | sans | 31px; 26px ≤900, 28px ≤640, unit 11px / 400 | 1 | −1.5px | 700 (strong) |
| Wordmark | sans | 29px; 25px ≤1100 | 1.6 | −1.7px | 800 |
| H2 / section | sans | 22px | 1.2 | −.045em (−.99px) | 800 |
| H2 / panel (plan, ranking) | sans | 19px | 1.2 | −.045em (−.85px) | 800 |
| H3 / card | sans | 17px | 1.2 | −.045em (−.77px) | 800 |
| H3 / course | sans | 15px; 17px ≤640 | 1.2 | −.045em (−.68px) | 800 |
| Lead / intro | sans | 13px, --muted |
1.6 | 0 | 400 |
| Body | sans | 13px | 1.6 | 0 | 400 |
| Small / supporting | sans | 11px | 1.6 | 0 | 400 |
| Label / field | sans | 11px | 1.6 | 0 | 700 |
| Control / button | sans | 11px | 1.6 | 0 | 700 |
| Segment / pill | sans | 10px | 1.6 | 0 | 700 |
| Eyebrow / overline (upper) | sans | 10px | 1.6 | .09em (.9px) | 700 |
| Compact meta | sans | 10px | 1.6 | 0 | 400 |
| Axis | sans | 9px | 1.6 | 0 | 400 |
Spacing
| Value | Role | Where |
|---|---|---|
| 4px | Base step | icon to label, segmented capsule padding |
| 8px | Step 2 | label to field, pill gap |
| 12px | Step 3 | default row gap, stat gap |
| 16px | Step 4 | section-head gap, compact padding |
| 24px | Step 5 | card padding, intro margin |
| 32px | Step 6 | large block spacing |
| 48px | Step 7 | section rhythm |
| 18px | Layout | side gutter ≤640 |
| 20px | Layout | button inline padding; card padding ≤1100 |
| 22px | Layout | card gap (16 ≤1100, 18 ≤640) |
| 34px | Layout | main horizontal padding (22 ≤1100) |
| 44px | Layout | minimum control height |
| 80 / 208 / 286px | Layout | icon rail ≤900 / sidebar (164 ≤1100) / right column (246 ≤1100, 306 ≥1400) |
| 1480px | Layout | maximum page width |
Radii
| Value | Where |
|---|---|
| 999px | Buttons, pills, segmented control, switch, progress track |
| 30px | Dialog |
| 28px | Card; --radius: 1.75rem |
| 25px | Card ≤640 |
| 24px | Course card, side note, popover and toast (adapter) |
| 23px | Stat tile |
| 18px | Cover art, nav link, swatch chip |
| 17px | Ranking row |
| 16px | Dialog answer option |
| 15px | Field, skeleton (adapter) |
| 12px | Menu item, tooltip (adapter) |
| 6px | Checkbox (adapter), inline code |
| 50% | Avatar, icon button |
Borders and elevation
| Level | Recipe |
|---|---|
| Hairline | 1px solid var(--line): sidebar rule, icon button, table rows, dialog answers |
| Field edge | 1px solid var(--input): inputs, selects, checkbox and radio off, outline button |
| Invalid | border-color: var(--error) + outline: 2px solid var(--error), offset 2px |
| Focus-visible | outline: 3px solid var(--green), offset 4px |
| Chart guide | stroke: var(--line), stroke-dasharray: 4 5 |
| L0 Page | --bg, flat |
| L1 Card | box-shadow: 0 6px 20px #23362D05; none in dark |
| L1 Raised segment | 0 2px 7px #26372F0B; cover pill 0 2px 8px #26372F0A |
| Thumb (adapter) | 0 2px 5px #14221B12 |
| L2 Overlay (adapter) | 0 12px 40px #14221B18, 1px --border, 24px radius |
| L3 Dialog (demo) | 0 20px 80px #14221B33, 30px radius |
| Scrim | #172B2470 + backdrop-filter: blur(4px); modal only |
Component-state matrix
| Component | States | Key tokens |
|---|---|---|
| Button primary | default, hover (−2px; #3F564A light, brightness 1.04 dark), active (+1px), focus-visible (3px --green, offset 4), disabled (.5, no translate) |
--primary, --primary-foreground, --green |
| Button secondary | same states; hover brightness 1.04 | --pink, #26372F |
| Button neutral | same states | --field, --ink |
| Button outline | same states | transparent, 1px --input, --ink |
| Button ghost | same states; hover --field fill |
--ink, --field |
| Button link | same states; underline offset 4 | --green |
| Button destructive | same states; hover brightness 1.04 | --error, label --bg |
Story button .btn |
same states; fixed in both themes, accent panels only | #26372F, #3F564A, #FFFDF7 |
| Icon button | default, focus-visible (no hover change in the demo); 42px (36px in course cards) | --card, --line, --field |
| Text field | default, focus-visible, filled, invalid (aria-invalid + aria-describedby), disabled (.5) |
--field, --input, --muted, --error, --green |
| Select | default, focus-visible, invalid, disabled; 2px --muted chevron |
field tokens |
| Checkbox / radio | off, on, focus-visible, disabled; 20px, checkbox radius 6 | --field, --input, --green, mark #FFFDF7 / #172720 |
| Switch | off, on (+18px), focus-visible, disabled; 44 × 26 track, 20px thumb | --field, --input, --green, --card |
| Badge / pill | pill, cover pill, growth chip, badge, secondary, destructive (12% --error tint), eyebrow, avatar |
--field, --mint, --accent, --pink, --error |
| Card | card, accent panel, evergreen panel | --card, --shadow, accent palette, #327966 |
| Segmented control | default, selected (aria-pressed, raised --card), focus-visible, disabled; on evergreen (#FFFFFF12 capsule, #FFFDF7 selected) |
--field, --card, --ink |
| Alert | default (card recipe + mint icon), destructive (12% tint, --error border) |
--card, --mint, --error |
| Toast | default with action (overlay recipe) | --card, --line, overlay shadow |
| Feedback line | success, error; role="status" |
--ink, --error |
| Progress | adapter (--field track, --green fill), plan (#E6E3C9 track, #327966 fill); visible percentage |
--field, --green |
| Learning chart | week, month (period toggle updates path, value, axis, caption and label) | #CE718F, --pink, --line, #327966, --card |
| Sidebar nav | default (--muted), hover and current (--card surface, --ink), focus-visible |
--muted, --card, --ink |
shadcn integration
Import shadcn.css after Tailwind. Put data-design="sprout" on html, and use .dark or data-theme="dark" on that same element so portals inherit tokens. Keep the application's existing primitive behaviour and data-slot attributes. Expose each button's variant as data-variant where its implementation does not already do so.
The adapter maps semantic tokens and shared slots for buttons, toggles, fields, input groups, OTP, selection controls, sliders, progress, badges, avatars, cards, alerts, tables, tabs, accordions, navigation, sidebar, menus, comboboxes, command, calendar, dialogs, sheets, drawers, popovers, tooltips, toast, skeleton, scroll areas and carousel controls. Provider-managed placement, transforms, focus management and component sizing remain the application's responsibility. This repository ships HTML previews and the CSS adapter, not a running React shadcn installation.
Calendar internals (for example DayPicker), chart libraries and Sonner may have provider-specific class names instead of data-slot. Map their selected-day, range, tooltip, toast and chart surfaces to these tokens without replacing the provider's semantics. Prefer rounded day controls, mint selected ranges, the green selected day and readable error/success messages. Chart series use the chart tokens; colour panels use the accent palette above.
Shared CSS
/* Sprout / shared shadcn theme. Import after Tailwind. Set data-design="sprout"
on html so dialogs and other portalled content inherit these tokens.
Keep native/provider behaviour, sizing, positioning and accessibility. */
html[data-design="sprout"] {
--font-sans:"Plus Jakarta Sans",Arial,sans-serif;
--background:#f4f1e9;--foreground:#26372f;
--card:#fffdf7;--card-foreground:#26372f;
--popover:#fffdf7;--popover-foreground:#26372f;
--primary:#26372f;--primary-foreground:#fffdf7;
--secondary:#efa4bd;--secondary-foreground:#26372f;
--muted:#eeeee3;--muted-foreground:#657168;
--accent:#dce9d8;--accent-foreground:#26372f;
--destructive:#a82f45;--border:#e3e6da;--input:#c3cbbf;--ring:#327966;
--radius:1.75rem;--sprout-field:#eeeee3;--sprout-shadow:0 6px 20px #23362d05;
--chart-1:#327966;--chart-2:#bd567a;--chart-3:#8975be;--chart-4:#9c7628;--chart-5:#657168;
--sidebar:var(--background);--sidebar-foreground:var(--foreground);
--sidebar-primary:var(--primary);--sidebar-primary-foreground:var(--primary-foreground);
--sidebar-accent:var(--card);--sidebar-accent-foreground:var(--foreground);
--sidebar-border:var(--border);--sidebar-ring:var(--ring);
}
html[data-design="sprout"]:is(.dark,[data-theme="dark"]) {
--background:#172720;--foreground:#f8f6e9;
--card:#22372e;--card-foreground:#f8f6e9;
--popover:#22372e;--popover-foreground:#f8f6e9;
--primary:#a9d5bd;--primary-foreground:#172720;
--secondary:#efa4bd;--secondary-foreground:#26372f;
--muted:#2d4438;--muted-foreground:#b3c4b7;
--accent:#365746;--accent-foreground:#f8f6e9;
--destructive:#ffacba;--border:#415448;--input:#6c8374;--ring:#a9d5bd;
--sprout-field:#2d4438;--sprout-shadow:none;
--chart-1:#a9d5bd;--chart-2:#efa4bd;--chart-3:#c1b7ec;--chart-4:#f6d77e;--chart-5:#b3c4b7;
}
html[data-design="sprout"] body {background:var(--background);color:var(--foreground);font-family:var(--font-sans)}
html[data-design="sprout"] [data-slot] {border-color:var(--border)}
html[data-design="sprout"] :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-inner"],[data-slot="carousel"]) {background:var(--card);color:var(--card-foreground);border:1px solid transparent;border-radius:var(--radius);box-shadow:var(--sprout-shadow)}
html[data-design="sprout"] :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="combobox-content"],[data-slot="toast"],[data-slot="tooltip-content"]) {background:var(--popover);color:var(--popover-foreground);border:1px solid var(--border);border-radius:24px;box-shadow:0 12px 40px #14221b18;max-width:calc(100vw - 2rem);max-height:calc(100dvh - 2rem);overflow-y:auto}
html[data-design="sprout"] :is([data-slot="tooltip-content"]) {border-radius:12px;font-size:12px}
html[data-design="sprout"] :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(--sprout-field);color:var(--foreground);border:1px solid var(--input);border-radius:15px;box-shadow:none;min-width:0}
html[data-design="sprout"] :is([data-slot="input"],[data-slot="textarea"],[data-slot="native-select"])::placeholder {color:var(--muted-foreground);opacity:1}
html[data-design="sprout"] :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:1px solid transparent;border-radius:999px;background:transparent;color:var(--foreground);font-family:var(--font-sans);font-weight:700;text-transform:none;letter-spacing:0;box-shadow:none}
html[data-design="sprout"] :is([data-slot="button"]):not([data-variant]) {background:var(--primary);color:var(--primary-foreground);min-height:44px;padding-inline:20px;transition:background .18s,translate .18s}
html[data-design="sprout"] :is([data-slot="button"])[data-variant="default"] {background:var(--primary);color:var(--primary-foreground);min-height:44px;padding-inline:20px;transition:background .18s,translate .18s}
html[data-design="sprout"] :is([data-slot="button"])[data-variant="secondary"] {background:var(--secondary);color:var(--secondary-foreground)}
html[data-design="sprout"] :is([data-slot="button"])[data-variant="outline"] {background:transparent;border-color:var(--input);color:var(--foreground)}
html[data-design="sprout"] :is([data-slot="button"])[data-variant="ghost"] {background:transparent;color:var(--foreground)}
html[data-design="sprout"] :is([data-slot="button"])[data-variant="link"] {background:transparent;color:var(--ring);text-decoration:underline;text-underline-offset:4px}
html[data-design="sprout"] :is([data-slot="button"])[data-variant="destructive"] {background:var(--destructive);color:var(--background)}
html[data-design="sprout"] :is([data-slot="button"],[data-slot="toggle"]):hover:not(:disabled):not([aria-disabled="true"]):not([data-disabled]) {translate:0 -2px;filter:brightness(1.04)}
html[data-design="sprout"] :is([data-slot="button"],[data-slot="toggle"]):active:not(:disabled):not([aria-disabled="true"]):not([data-disabled]) {translate:0 1px}
html[data-design="sprout"] :is([data-slot="button"])[data-variant="ghost"]:hover:not(:disabled) {background:var(--muted)}
html[data-design="sprout"] :is([data-slot="tabs-list"]) {padding:4px;background:var(--muted);border-radius:999px}
html[data-design="sprout"] :is([data-slot="tabs-trigger"],[data-slot="toggle"],[data-slot="pagination-link"],[data-slot="sidebar-menu-button"]):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(--card);color:var(--foreground);box-shadow:0 2px 7px #26372f0b}
html[data-design="sprout"] :is([data-slot="checkbox"],[data-slot="radio-group-item"],[data-slot="switch"]) {background:var(--sprout-field);color:var(--primary-foreground);border:1px solid var(--input);box-shadow:none}
html[data-design="sprout"] :is([data-slot="checkbox"]) {border-radius:6px}
html[data-design="sprout"] :is([data-slot="radio-group-item"],[data-slot="switch"],[data-slot="switch-thumb"]) {border-radius:999px}
html[data-design="sprout"] :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="sprout"] :is([data-slot="switch-thumb"],[data-slot="slider-thumb"]) {background:var(--card);border:1px solid var(--border);box-shadow:0 2px 5px #14221b12;border-radius:999px}
html[data-design="sprout"] :is([data-slot="progress"],[data-slot="slider-track"]) {background:var(--muted);border-radius:999px;overflow:hidden}
html[data-design="sprout"] :is([data-slot="progress-indicator"],[data-slot="slider-range"]) {background:var(--ring);border-radius:inherit}
html[data-design="sprout"] :is([data-slot="badge"],[data-slot="kbd"],[data-slot="avatar-fallback"],[data-slot="avatar-group-count"]) {background:var(--accent);color:var(--accent-foreground);border:1px solid transparent;border-radius:999px;font-weight:700}
html[data-design="sprout"] :is([data-slot="badge"])[data-variant="secondary"] {background:var(--secondary);color:var(--secondary-foreground)}
html[data-design="sprout"] :is([data-slot="badge"],[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="sprout"] :is([data-slot="avatar"]) {border-radius:50%}
html[data-design="sprout"] :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"]) {border-radius:12px}
html[data-design="sprout"] :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"]):is(:focus-visible,[data-highlighted],[data-state="checked"],[data-selected]:not([data-selected="false"]),[aria-selected="true"]) {background:var(--accent);color:var(--accent-foreground)}
html[data-design="sprout"] :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="sprout"] :is([data-slot="table"]) {border-collapse:collapse;color:var(--foreground)}
html[data-design="sprout"] :is([data-slot="table-row"],[data-slot="accordion-item"]) {border-bottom:1px solid var(--border)}
html[data-design="sprout"] :is([data-slot="table-row"]):is(:hover,[data-state="selected"]) {background:var(--muted)}
html[data-design="sprout"] :is([data-slot="table-head"],[data-slot="table-caption"],[data-slot="breadcrumb-link"]) {color:var(--muted-foreground)}
html[data-design="sprout"] :is([data-slot="card-description"],[data-slot="dialog-description"],[data-slot="alert-description"],[data-slot="sheet-description"],[data-slot="drawer-description"],[data-slot="empty-description"],[data-slot="item-description"],[data-slot="field-description"]) {color:var(--muted-foreground);line-height:1.6}
html[data-design="sprout"] :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-sans);font-weight:800;letter-spacing:-.045em;line-height:1.2;text-transform:none}
html[data-design="sprout"] :is([data-slot="accordion-trigger"],[data-slot="collapsible-trigger"],[data-slot="label"],[data-slot="field-label"],[data-slot="field-legend"]) {font-family:var(--font-sans);font-weight:700;letter-spacing:0;text-transform:none}
html[data-design="sprout"] :is([data-slot="skeleton"]) {background:var(--muted);border-radius:15px}
html[data-design="sprout"] :is([data-slot="scroll-area-thumb"],[data-slot="resizable-handle"]) {background:var(--input);border-radius:99px}
html[data-design="sprout"] :is([data-slot="dialog-overlay"],[data-slot="alert-dialog-overlay"],[data-slot="sheet-overlay"],[data-slot="drawer-overlay"]) {background:#172b2470;backdrop-filter:blur(4px)}
html[data-design="sprout"] :is([data-slot="field-error"]) {color:var(--destructive)}
html[data-design="sprout"] [data-slot]:focus-visible {outline:3px solid var(--ring);outline-offset:4px}
html[data-design="sprout"] [data-slot][aria-invalid="true"] {border-color:var(--destructive);outline:2px solid var(--destructive);outline-offset:2px}
html[data-design="sprout"] [data-slot]:is(:disabled,[data-disabled]:not([data-disabled="false"]),[aria-disabled="true"]) {opacity:.5;cursor:not-allowed;translate:none;filter:none}
html[data-design="sprout"] [data-slot="input-group"] :is([data-slot="input"],[data-slot="textarea"]) {border:0;background:transparent;box-shadow:none}
html[data-design="sprout"] [data-slot="button-group"] > [data-slot="button"] {border-radius:0}
html[data-design="sprout"] [data-slot="button-group"] > [data-slot="button"]:first-child {border-radius:999px 0 0 999px}
html[data-design="sprout"] [data-slot="button-group"] > [data-slot="button"]:last-child {border-radius:0 999px 999px 0}
html[data-design="sprout"] [data-slot="button-group"] > [data-slot="button"]:only-child {border-radius:999px}
@media(prefers-reduced-motion:reduce){html[data-design="sprout"] [data-slot]{animation:none!important;transition:none!important}}