Rally
Small idea. Big energy.
/01 Usage
curl -O https://dropdesign.cynthiacaron.com/themes/rally/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 Rally 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="rally" on <html>.
A playful neo-brutalist system for independent ideas: condensed headlines, inky outlines, pink and yellow colour blocks, graphic illustrations and crisp offset shadows. Bold, tactile and unapologetically direct.
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: Rally slug: rally version: 1.0.0 family: neo-brutalist tagline: Small idea. Big energy. description: A playful neo-brutalist system for independent ideas: condensed headlines, inky outlines, pink and yellow colour blocks, graphic illustrations and crisp offset shadows. Bold, tactile and unapologetically direct. ---
Rally
Direction
Playful neo-brutalism for independent creators. Cream paper, black outlines, vivid flat colour, condensed headlines and crisp offset shadows. The tone is direct and optimistic. This is not Manifesto's restrained editorial grid and not a clone of any marketplace brand. Sidekick is an original fictional storefront built to demonstrate Rally.
Colour
| Token | Light | Dark |
|---|---|---|
| Paper | #F8F5EF | #222222 |
| Ink | #191919 | #F8F5EF |
| Panel | #FFFDF8 | #303030 |
| Muted text | #57544F | #C8C4BC |
| Outline | #191919 | #F8F5EF |
| Shadow | #191919 | #080808 |
| Pink | #F49CE6 | unchanged |
| Yellow | #FFDA18 | unchanged |
| Lilac | #BBB5FA | unchanged |
| Mint | #78C9B3 | unchanged |
Use cream for most of the page. Coloured panels always use dark #191919 text, including in dark mode. Keep vivid colour in selected actions and illustration blocks rather than colouring every text label. Destructive controls retain a separate error colour. Charts use darker, legible counterparts in the shared adapter.
Type
Anton 400, embedded in both HTML previews, is the condensed display face. The font is licensed under SIL OFL; see FONT-LICENSE.txt. Keep the font licence when redistributing the font. Use Arial/system sans for text and UI.
- Hero: 60–98 px, line-height 1.04, uppercase, tracking -1.7 px.
- Section: 40–48 px, Anton 400, uppercase, line-height 1.05.
- Feature heading: 24–28 px, Anton 400, uppercase, line-height 1.1.
- Product title: 19 px bold sans, tracking -.5 px.
- Body: 13–14 px / 1.6–1.8. Supporting copy 11–12 px.
- Labels: 10 px / 700, uppercase, 1 px tracking. Buttons: 11 px bold sans.
Avoid squeezing ordinary body fonts to simulate condensed type. The actual face must be loaded. In consuming apps, set --font-heading to Anton and --font-sans to the chosen plain sans.
Layout and imagery
1180 px content width, 32 px outer gutters. Header has one horizontal rule. The hero is two equal columns, oversized copy left and a flat vector poster right. An illustrated record, notebook, cassette, typographic poster and globe are drawn in inline SVG. Shapes have explicit black contours, solid fills and no gradients or photorealistic shading. Use original imagery and marks rather than copying another product's logo or characters.
A lilac message strip separates hero and content. Follow with three feature panels, a product collection, a split illustrated statement, native FAQ disclosures and a pink closing band. Product cards share aligned image areas, information and actions. The reference shop labels its prices and products as fictional.
At 950 px, gutters become 20 px and the feature grid becomes two columns with a full-width yellow panel. At 640 px, use 16 px gutters and stack the hero, feature panels, products, statement and FAQ. Keep illustrations visible. The header preserves theme and basket controls; only the secondary navigation is hidden.
Components
Button
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 22px;
min-height: 45px;
padding: 12px 20px;
border: 2px solid var(--line);
border-radius: 3px;
background: var(--ink);
color: var(--paper);
box-shadow: 3px 3px 0 var(--shadow);
font: 700 11px Arial, sans-serif;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow:5px 5px 0 var(--shadow); }
.btn:active { transform:translate(3px,3px); box-shadow:none; }
Pink and yellow variants use dark text. Outline uses the page/panel surface. Ghost and link have no material shadow. Disabled controls must not move. Focus uses a 3 px outline with 5 px offset, not another decorative shadow. Do not use blurred shadows or glass highlights.
Surfaces and fields
Cards: 2 px outline, 6–7 px corners, 20–25 px padding, optional 4 px hard shadow. Inputs: 1.5 px border, 3 px corners, paper fill, clear labels. Overlays: the same material, 8 px hard shadow, capped viewport dimensions. Avoid a border around every nested element; most card copy needs no extra container.
Selection and data
Filter chips are flat pills with 1.5 px outlines; selection inverts paper and ink and sets aria-pressed. Checkbox and radio keep their visible checked marker. Tabs may use a pink active surface. Tables use crisp rules, charts use flat marks and explicit labels; no rounded-volume bars. Native FAQ disclosures retain keyboard behaviour and show a plus/minus.
Interaction
The preview supports category filtering, adding unique items to a local basket, removal and a native modal dialog. The basket total is illustrative; there is no checkout or charge. Cart buttons acknowledge added items and become disabled until removed. The dialog traps focus natively, closes with Escape and restores focus. Status updates announce user-triggered changes.
Links prevent iframe navigation and scroll to actual sections. The root supports validated parent cyn-theme light/dark messages and a visible local switch. Both previews embed all assets, make no external requests and respect reduced motion. No fabricated sales metrics, external forms or fake download actions.
Design system reference
Copyable reference tables that mirror demo/system.html. Values come from demo/index.html (tokens, type, layout, component recipes) and from shadcn.css (marked adapter). Tokens are defined on :root and redefined on [data-theme="dark"]. Adapter values are the ones the cascade actually resolves to, which is not always the first value the file declares (see the notes).
Color tokens
| Name | Variable | Light | Dark | Role |
|---|---|---|---|---|
| Paper | --paper |
#F8F5EF |
#222222 |
Page background |
| Panel | --panel |
#FFFDF8 |
#303030 |
Cards, dialog, outline button |
| Soft | --soft |
#ECE8DF |
#3B3B3B |
Quiet fill, table head, inline code |
| Ink | --ink |
#191919 |
#F8F5EF |
Text, primary button fill, focus outline |
| Muted | --muted |
#57544F |
#C8C4BC |
Supporting copy, categories, notes |
| On colour | literal | #191919 |
#191919 (fixed) |
Text on pink, yellow, lilac and mint |
| Pink | --pink |
#F49CE6 |
same | Secondary button, closing band, selected tab |
| Yellow | --yellow |
#FFDA18 |
same | Highlighted word, feature panel |
| Lilac | --lilac |
#BBB5FA |
same | Ticker strip, product art |
| Mint | --mint |
#78C9B3 |
same | Statement art |
| Record shade | literal | #D67AC8 |
same | Illustration only |
| Line | --line |
#191919 |
#F8F5EF |
Outlines and rules |
| Shadow | --shadow |
#191919 |
#080808 |
Hard offset shadow |
| Error | --error |
#AB2424 |
#FFABAB |
Field error text and border (demo) |
| Destructive | --destructive (adapter) |
#AB2424 |
#FFABAB |
Destructive alert, invalid state (same as --error) |
| Ring | --ring (adapter) |
#191919 |
#F8F5EF |
Focus ring, the ink colour, as in the demo |
| Backdrop | literal | #19191966 |
same | Dialog backdrop |
| Chart 1–5 | --chart-1…--chart-5 (adapter) |
#B669A8 #997D00 #6C61BD #237B66 #191919 |
#F49CE6 #FFDA18 #BBB5FA #78C9B3 #F8F5EF |
Series; darker counterparts in light, the brand brights in dark; label every series |
Rally has no success, warning or info colour. Status is carried by words, and by the flat brand blocks when a surface needs emphasis.
Contrast
WCAG 2 ratios, computed live in the specimen.
| Pair | Use | Light | Dark |
|---|---|---|---|
--ink / --paper |
Body, headings | 16.16 AAA | 14.62 AAA |
--ink / --panel |
Card copy | 17.30 AAA | 12.13 AAA |
--ink / --soft |
Code, table head | 14.38 AAA | 10.29 AAA |
--muted / --paper |
Supporting copy | 6.93 AA | 9.15 AAA |
--muted / --panel |
Card copy, categories | 7.41 AAA | 7.59 AAA |
--muted / --soft |
Meta on quiet fill | 6.16 AA | 6.44 AA |
--paper / --ink |
Primary button | 16.16 AAA | 14.62 AAA |
#191919 / --pink |
Pink button, band | 9.00 AAA | 9.00 AAA |
#191919 / --yellow |
Highlight, feature | 12.80 AAA | 12.80 AAA |
#191919 / --lilac |
Ticker | 9.30 AAA | 9.30 AAA |
#191919 / --mint |
Statement art | 9.05 AAA | 9.05 AAA |
--error / --panel |
Field error | 6.86 AA | 7.33 AAA |
--error / --paper |
Field error | 6.41 AA | 8.84 AAA |
--destructive / --panel |
Adapter alert | 5.80 AA | 6.45 AA |
--ring / --paper (non-text, 3:1) |
Adapter focus | 6.25 pass | 8.97 pass |
--line / --paper (non-text, 3:1) |
Outlines | 16.16 pass | 14.62 pass |
Never set --ink on a brand block: in dark mode it becomes cream. Use the literal #191919.
Type scale
Display = Anton, Impact, sans-serif (embedded, 400 only). Sans = Arial, sans-serif (system, 400 and 700). The demo uses no mono; the specimen and the adapter's labels fall back to ui-monospace.
| Style | Family | Size | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| Hero display (h1, upper) | Anton | clamp(55px,7.3vw,98px); 76px ≤950; clamp(60px,16vw,82px) ≤640 |
1.04 | −1.7px | 400 |
| Section (h2, upper) | Anton | 48px; 43px ≤640 (variants: statement 44, band 42, FAQ 40, dialog 34) | 1.05 | 0 | 400 |
| Big number | Anton | 64px | 1 | 0 | 400 |
| Wordmark (upper) | Anton | 32px; 28px ≤640 | 1 | −1px | 400 |
| Feature heading (upper) | Anton | 28px (24px on yellow) | 1.1 | −.3px | 400 |
| Price | Anton | 25px | normal | 0 | 400 |
| Ticker (upper) | Anton | 21px; 16px ≤640 | 1.6 | 0 | 400 |
| Product title | Arial | 19px | 1.6 | −.5px | 700 |
| Lead | Arial | 13px | 1.8 | 0 | 400 |
| Body | Arial | 14px | 1.6 | 0 | 400 |
| Copy | Arial | 12px | 1.8 | 0 | 400 |
| Small | Arial | 11px, --muted |
1.7 | 0 | 400 |
| Question (FAQ summary) | Arial | 13px | 1.6 | 0 | 700 |
| Button | Arial | 11px (10px small) | 1.6 | 0 | 700 |
| Label / eyebrow (upper) | Arial | 10px | 1.6 | 1px | 700 |
| Meta / caption (upper) | Arial | 9px, --muted |
1.6 | .7px | 400 |
| Mono (specimen and adapter only) | ui-monospace | 12px | 1.6 | 0 | 400 |
Spacing
Rally has no numeric spacing tokens. These values recur in the demo.
| px | Use |
|---|---|
| 4 | Header actions gap ≤640 |
| 8 | Filter pill gap, product title margin |
| 12 | Header actions gap, small button inline padding, hero actions ≤640 |
| 15 | Feature grid gap, hero actions gap, ticker gap |
| 16 | Page gutter ≤640, product padding ≤950 |
| 20 | Product grid gap, product padding, button inline padding, gutter ≤950 |
| 25 | Feature padding, section-top gap, footer padding |
| 28 | Dialog padding, closing band padding |
| 32 | Page gutter (min(1180px, 100% − 64px)) |
| 40 | Statement copy padding |
| 55 | Hero bottom, FAQ gap, statement margin |
| 65 | Feature grid bottom padding |
Breakpoints: 950px (gutter 20px, features two columns plus a full-width yellow panel) and 640px (gutter 16px, everything stacks, nav hidden).
Radii
| Value | Use |
|---|---|
| 0 | Bands, ticker, tables |
| 3px | Button, input, select, badge, tab trigger, checkbox |
| 6px | Dialog, adapter card/alert/toast/popover, adapter --radius (light and dark) |
| 7px | Feature panel, product card, statement, swatch |
| 999px | Filter pill, switch track |
| 50% | Radio, switch thumb, illustration dots |
Borders and shadows
| Token | Recipe | Use |
|---|---|---|
| Hairline | 1px solid var(--line) |
Poster caption rule, basket rows, close button |
| Field | 1.5px solid var(--line) |
Input, filter pill, FAQ rules, checkbox |
| Outline | 2px solid var(--line) |
Button, card, header rule, ticker, dialog |
| Focus | outline: 3px solid var(--ink); outline-offset: 5px |
Every focusable element (demo) |
| Rest | box-shadow: 3px 3px 0 var(--shadow) |
Button, tab trigger |
| Card | box-shadow: 4px 4px 0 var(--shadow) |
Product card, adapter card, alert, toast |
| Hover | translate(-1px,-1px) + 5px 5px 0 var(--shadow) |
Button, tab trigger |
| Pressed | translate(3px,3px) + 0 0 0 var(--shadow) |
Button |
| Overlay | box-shadow: 8px 8px 0 var(--shadow) |
Dialog |
| Motion | transition: transform .12s, box-shadow .12s |
Removed under prefers-reduced-motion |
No blur, no gradients, no inset shadows.
Component-state matrix
| Component | States | Key tokens |
|---|---|---|
Button primary .btn |
default, hover (lift), active (press), focus-visible, disabled (.45, no motion) | --ink, --paper, --line, --shadow |
Button pink / yellow .btn.pink .btn.yellow |
same as primary | --pink / --yellow, text #191919 |
Button outline .btn.outline |
same as primary | --panel, --ink |
Button small .btn.sm |
same as primary; 10px, 9px 12px padding, 39px high | as variant |
Inverted on band .end .btn |
same as primary; ink stays #191919 in dark |
local token override |
Filter pill .filter |
default, pressed (aria-pressed, inverts), focus-visible, disabled |
--line, --ink, --paper |
Quiet actions .mode .close .remove |
default, focus-visible, disabled | --ink, --muted, 1px --line |
| Text input | default, focus-visible, filled, error (--error border + message), disabled |
--paper, --line, --muted, --error |
| Select (native) | default, focus-visible, error, disabled | field recipe + ↓ |
| Checkbox / radio | off, on (ink fill, 2px hard shadow), focus-visible, disabled | --paper, --line, --ink |
Switch role=switch |
off (--soft), on (--ink), focus-visible, disabled |
--soft, --ink, --paper |
| Badge | neutral, soft, pink, yellow, lilac, mint, solid, error | --panel, --soft, brand blocks, --error |
| Card | feature, feature yellow, colour block, product (4px shadow), adapter card | --panel, --line, --shadow |
| Tabs (adapter) | default, hover, selected (pink surface), focus-visible, disabled; arrow keys | --panel, --pink, --line, --shadow |
| Alert (adapter) | info, warning, destructive (12 % --destructive tint, text and border) |
--panel, --lilac, --yellow, --destructive |
| Toast (adapter) | default with action and dismiss | --panel, --line, --shadow |
| Chart (adapter) | five flat series with values; no chart in the demo | --chart-1…--chart-5 |
| FAQ disclosure | closed (+), open (−), focus-visible | 1.5px --line, --muted |
| Dialog (bag) | open, with rows, total and note | --panel, --line, 8px shadow |
| Ticker, hero highlight, closing band | static | --lilac, --yellow, --pink, #191919 |
Shared shadcn adapter
Use shadcn.css after Tailwind. Set data-design="rally" on html, alongside .dark or data-theme="dark", so portals inherit it. Preserve data-slot on primitive wrappers and data-variant on Buttons. Keep provider behaviour, sizing and accessibility intact. Remove conflicting legacy material overrides.
Coverage includes buttons/groups, toggles, cards, alerts, fields, select/combobox, OTP, checkbox/radio/switch, sliders, progress, tabs, accordion, dialogs/sheets/drawers, popovers/tooltips, menus, calendar containers, command palette, toast, tables, navigation/sidebar, badge/avatar/kbd, separators, skeletons, scroll areas and resize handles. Layout-only primitives keep their layout. Form, Data Table and Date Picker compose these primitives. For DayPicker day/range states and Sonner notifications, map their provider-specific class names to the same tokens; they do not all expose data-slot.
The adapter contains both Radix and Base UI state selectors. It is a reusable material layer, not a claim that every React component is mounted in these standalone HTML previews. In the consuming app, verify open menus and portals, checked/selected/invalid/disabled states, keyboard focus, reduced motion, 360 px layout and RTL. Tables scroll in their own wrapper; modal bodies stay scrollable and actions reachable.
Shared stylesheet
/* Drop Design / rally — 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="rally"] {
--background: #f8f5ef;
--foreground: #191919;
--card: #f8f5ef;
--card-foreground: #191919;
--popover: #f8f5ef;
--popover-foreground: #191919;
--primary: #191919;
--primary-foreground: #f8f5ef;
--secondary: #f49ce6;
--secondary-foreground: #191919;
--muted: #ece8df;
--muted-foreground: #57544f;
--accent: #ece8df;
--accent-foreground: #191919;
--destructive: #ab2424;
--border: #191919;
--input: #191919;
--ring: #f49ce6;
--radius: 0px;
--dd-field: #ece8df;
--dd-light: #fff5e4;
--dd-umber: #754629;
--chart-1: #191919;
--chart-2: #f49ce6;
--chart-3: #57544f;
--chart-4: #f49ce6;
--chart-5: #191919;
--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="rally"]:is(.dark,[data-theme="dark"]) {
--background: #222222;
--foreground: #f8f5ef;
--card: #222222;
--card-foreground: #f8f5ef;
--popover: #222222;
--popover-foreground: #f8f5ef;
--primary: #f8f5ef;
--primary-foreground: #222222;
--secondary: #f49ce6;
--secondary-foreground: #f8f5ef;
--muted: #3b3b3b;
--muted-foreground: #c8c4bc;
--accent: #3b3b3b;
--accent-foreground: #f8f5ef;
--destructive: #ffabab;
--border: #f8f5ef;
--input: #f8f5ef;
--ring: #f49ce6;
--radius: 0px;
--dd-field: #3b3b3b;
--dd-light: #bca080;
--dd-umber: #120b07;
--chart-1: #f8f5ef;
--chart-2: #f49ce6;
--chart-3: #c8c4bc;
--chart-4: #f49ce6;
--chart-5: #f8f5ef;
--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="rally"] :is(body) { background:var(--background);color:var(--foreground);font-family:var(--font-sans,system-ui,sans-serif); }
html[data-design="rally"] :is([data-slot]) { border-color:var(--border); }
html[data-design="rally"] :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="rally"] :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="rally"] :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="rally"] :is(:is([data-slot="input"],[data-slot="textarea"],[data-slot="native-select"])::placeholder) { color:var(--muted-foreground);opacity:1; }
html[data-design="rally"] :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="rally"] :is([data-slot="button"]:not([data-variant]),[data-slot="button"][data-variant="default"]) { background:var(--primary);color:var(--primary-foreground); }
html[data-design="rally"] :is([data-slot="button"][data-variant="secondary"]) { background:var(--secondary);color:var(--secondary-foreground); }
html[data-design="rally"] :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="rally"] :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="rally"] :is([data-slot="switch-thumb"],[data-slot="slider-thumb"]) { background:var(--background);border:1px solid var(--border);box-shadow:none; }
html[data-design="rally"] :is([data-slot="slider-track"],[data-slot="progress"],[data-slot="tabs-list"]) { background:var(--dd-field);border-radius:var(--radius); }
html[data-design="rally"] :is([data-slot="slider-range"],[data-slot="progress-indicator"]) { background:var(--primary); }
html[data-design="rally"] :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="rally"] :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="rally"] :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="rally"] :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="rally"] :is([data-slot="table"]) { border-collapse:collapse;color:var(--foreground); }
html[data-design="rally"] :is([data-slot="table-row"],[data-slot="accordion-item"]) { border-bottom:1px solid var(--border); }
html[data-design="rally"] :is([data-slot="table-row"]:is(:hover,[data-state="selected"])) { background:var(--muted); }
html[data-design="rally"] :is([data-slot="table-head"],[data-slot="table-caption"],[data-slot$="description"],[data-slot="breadcrumb-link"]) { color:var(--muted-foreground); }
html[data-design="rally"] :is([data-slot="skeleton"]) { background:var(--muted);border-radius:calc(var(--radius)*.5); }
html[data-design="rally"] :is([data-slot="scroll-area-thumb"],[data-slot="resizable-handle"]) { background:var(--border); }
html[data-design="rally"] :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="rally"] :is([data-slot]) { border-radius:0;box-shadow:none;backdrop-filter:none; }
html[data-design="rally"] :is(:is([data-slot="label"],[data-slot="field-label"],[data-slot="field-legend"],[data-slot="table-head"],[data-slot="dropdown-menu-label"],[data-slot="context-menu-label"],[data-slot="menubar-label"]),: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-slot="badge"],[data-slot="kbd"],[data-slot="avatar-fallback"],[data-slot="avatar-group-count"])) { font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em; }
html[data-design="rally"] :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:"Helvetica Neue",Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.03em; }
html[data-design="rally"] :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"]),: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"])) { border:1px solid var(--border);background:var(--card); }
html[data-design="rally"] :is([data-slot="tabs-trigger"]: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:transparent;color:var(--foreground);border-color:transparent;border-bottom:2px solid var(--ring); }
html[data-design="rally"] :is([data-slot="accordion-trigger"],[data-slot="collapsible-trigger"]) { font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em; }
html[data-design="rally"] :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="rally"] :is([data-slot="button"][data-variant="link"]) { color:var(--ring);text-decoration:underline;text-underline-offset:4px; }
html[data-design="rally"] :is([data-slot="button"][data-variant="outline"]) { background:transparent;border-color:var(--border); }
html[data-design="rally"] :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="rally"] :is([data-slot]:focus-visible) { outline:3px solid var(--ring);outline-offset:3px; }
html[data-design="rally"] :is([data-slot][aria-invalid="true"]) { border-color:var(--destructive);outline:2px solid var(--destructive);outline-offset:2px; }
html[data-design="rally"] :is([data-slot]:is(:disabled,[data-disabled]:not([data-disabled="false"]),[aria-disabled="true"])) { opacity:.5;cursor:not-allowed;transform:none; }
html[data-design="rally"] :is([data-slot="field-error"]) { color:var(--destructive); }
html[data-design="rally"] :is([data-slot="button-group"] > [data-slot="button"]) { border-radius:0; }
@media(prefers-reduced-motion:reduce) { html[data-design="rally"] [data-slot] {animation:none!important;transition:none!important;} }
/* Interaction refinements; preserve provider positioning and sizing. */
html[data-design="rally"] :is([data-slot="button"],[data-slot="toggle"]):hover:not(:disabled):not([aria-disabled="true"]):not([data-disabled]) { filter:brightness(1.04); }
html[data-design="rally"] [data-slot="input-group"] :is([data-slot="input"],[data-slot="textarea"]) { background:transparent;border:0;box-shadow:none; }
html[data-design="rally"] :is([data-slot="button"],[data-slot="toggle"]):active:not(:disabled) { translate:0 1px; }
html[data-design="rally"] [data-slot="button"][data-variant="ghost"]:hover:not(:disabled) { background:var(--muted); }
html[data-design="rally"] :is([data-slot="button"],[data-slot="toggle"]):hover:not(:disabled) { filter:none;opacity:.85; }
/* Rally: hard outlines and offset shadows, shared across primitives. */
html[data-design="rally"]{--radius:6px;--secondary:#f49ce6;--secondary-foreground:#191919;--ring:#191919;--chart-1:#b669a8;--chart-2:#997d00;--chart-3:#6c61bd;--chart-4:#237b66;--chart-5:#191919;--dd-shadow:#191919}
html[data-design="rally"]:is(.dark,[data-theme="dark"]){--radius:6px;--dd-shadow:#080808;--ring:#f8f5ef;--secondary-foreground:#191919;--chart-1:#f49ce6;--chart-2:#ffda18;--chart-3:#bbb5fa;--chart-4:#78c9b3;--chart-5:#f8f5ef}
html[data-design="rally"] :is([data-slot="button"],[data-slot="toggle"],[data-slot="tabs-trigger"]){border:2px solid var(--border);border-radius:3px;box-shadow:3px 3px 0 var(--dd-shadow);font-family:Arial,sans-serif;text-transform:none;letter-spacing:0;font-weight:700}
html[data-design="rally"] :is([data-slot="button"],[data-slot="toggle"]):hover:not(:disabled){translate:-1px -1px;box-shadow:5px 5px 0 var(--dd-shadow);opacity:1}
html[data-design="rally"] :is([data-slot="button"],[data-slot="toggle"]):active:not(:disabled){translate:3px 3px;box-shadow:none}
html[data-design="rally"] :is([data-slot="card"],[data-slot="alert"],[data-slot="popover-content"],[data-slot="dialog-content"],[data-slot="alert-dialog-content"],[data-slot="sheet-content"],[data-slot="drawer-content"],[data-slot="dropdown-menu-content"],[data-slot="context-menu-content"],[data-slot="select-content"],[data-slot="combobox-content"],[data-slot="toast"],[data-slot="tooltip-content"]){border:2px solid var(--border);border-radius:6px;box-shadow:4px 4px 0 var(--dd-shadow)}
html[data-design="rally"] :is([data-slot="card-title"],[data-slot="dialog-title"],[data-slot="sheet-title"],[data-slot="alert-dialog-title"]){font-family:var(--font-heading,Anton,Impact,sans-serif);font-weight:400;letter-spacing:-.02em;text-transform:uppercase}
html[data-design="rally"] :is([data-slot="input"],[data-slot="textarea"],[data-slot="select-trigger"],[data-slot="input-group"],[data-slot="native-select"]){border:1.5px solid var(--border);border-radius:3px;background:var(--background)}
html[data-design="rally"] [data-slot="button"]:is([data-variant="ghost"],[data-variant="link"]){box-shadow:none;border-color:transparent;background:transparent}
html[data-design="rally"] [data-slot="button"][data-variant="destructive"]{background:var(--destructive);color:var(--background);border-color:var(--destructive)}
html[data-design="rally"] [data-slot="tabs-trigger"]:is([data-state="active"],[aria-selected="true"],[data-selected]){background:var(--secondary);color:#191919;border:2px solid var(--border)}