---
name: Manifesto
slug: manifesto
version: 1.2.0
family: editorial
tagline: Form follows conviction.
description: An editorial system built on a visible grid: oversized grotesque type, architectural line studies, ruled project layouts and one brick-red accent. Every line has a job.
---

# Manifesto

## Design direction

Form follows conviction. A flat editorial system constructed from visible grids, oversized grotesque type, architectural line drawings and precise spacing. The page should feel typeset, not assembled from rounded cards. Every rule separates, aligns or measures something.

The demo is a fictional design studio with two original concept studies. No fabricated testimonials, revenue claims or real client endorsements. Strong visual work replaces long marketing copy.

## Palette

| Token | Light | Dark | Purpose |
| --- | --- | --- | --- |
| `--paper` | `#F4F1E9` | `#20211E` | Page |
| `--ink` | `#252520` | `#F0EEE5` | Text and inverse band |
| `--accent` | `#B74532` | `#EB8067` | A key word, index or focus outline |
| `--muted` | `#6B6A60` | `#B1B1A7` | Supporting text |
| `--rule` | `#BDBBB0` | `#53554D` | Structural borders |
| `--soft` | `#E7E4DB` | `#2E302B` | Quiet image or specimen field |
| `--grid` | `#2525200B` | `#FFFFFF09` | Faint column guides |

Artwork can use fixed warm monochrome pigments to retain its identity between modes: Atlas `#DAD6CA / #292A24`; Common Ground `#33382F / #ECECDF / #DDD9CB`. Keep UI accents brick red. No arbitrary semantic colours in the demo.

## Typography

`--font-sans: "Helvetica Neue", Arial, sans-serif`; `--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace`. These are intentional local stacks: the offline preview does not claim to load Archivo or Roboto Mono. When changing fonts, recheck line lengths and container sizing.

- Hero: uppercase, 850, .89 line-height, -.07em tracking. Size with `clamp(40px, 15.6cqw, 102px)` inside an inline-size container, so the longest word fits its column. Never hide overflow to disguise a broken heading.
- H2: uppercase, 38–46 px, 750, line-height 1, tracking -2.3 px.
- H3: uppercase, 20–22 px, tracking -.7 px.
- Body: 12–14 px, normal case, line-height 1.75–1.8.
- Labels/navigation: mono, uppercase, 9–10 px, .08em tracking.
- Display numbers: 39–56 px, regular, closely tracked.

The sans speaks; the mono indexes. Use size and placement for emphasis. Reserve red for a small number of deliberate accents.

## Grid and composition

The main sheet has a maximum width of 1184 px, with 32 px outside gutters and 1 px vertical boundary rules. Four faint column guides continue down the sheet. Header: three equal cells. Hero: 1.36 / 1 split, typography on the left, an architectural M study on the right. All cards and illustrations remain straight.

Under the hero, a four-cell discipline strip provides a clear horizontal break. Section openers use a 1 / 2 division for index and title. The project area has two equal ruled columns. Its images are original code-native graphics: a large A on a grid, and a flat book cover specimen. The page then alternates a statement, three method columns, an interactive twelve-column specimen and an inverted closing band.

Use 24 px inner padding as the desktop baseline. Align content to the same rule edges across sections. Give section titles 65 px of space above, then 24 px below. Do not wrap every paragraph in its own bordered rectangle.

### Mobile

At 900 px: 20 px outer gutters, hidden centre navigation, tighter cells. At 620 px: 14 px outer gutters, 15 px inner gutters, stacked hero, projects, method and specimen. The discipline strip becomes 2×2. Project imagery stays visible. Ensure the longest hero word fits the container and the entire document fits 360 px without horizontal scrolling.

## Graphic language

One-pixel strokes, square ends, alignment and repetition. The hero M is a line-built architectural object: no gradients, shadows, simulated gloss or blur. SVG remains crisp and has an accessible description. The Atlas and book illustrations are flat compositions, not stock-image placeholders.

Column guides may use a repeating linear gradient solely to draw flat rules; never use a gradient as a shaded material. No rounded corners. No decorative shadows. No floating stars or tilted panels.

## Components

### Button

```css
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 27px;
  padding: 14px 18px;
  min-height: 44px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font: 10px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.btn.outline {
  background: none;
  color: var(--ink);
  border-color: var(--rule);
}
```

Hover reduces opacity to .8; active moves down 1 px. Keyboard focus uses a 2 px accent outline with 5 px offset. Never simulate relief.

### Project index and filter

Two-column ruled layout. Project metadata: mono index, large title and year. Filters use an accent underline and `aria-pressed`. All / Identity / Editorial actually filter visible studies and update the count. Keep study copy explicit that projects are fictional.

### Disclosure

Native `details` / `summary`, a top hairline and a plus/minus sign. Opening reveals the design rationale. No external navigation, hover-only content or custom keyboard handling.

### Interactive grid specimen

Twelve columns inside a bordered rectangle, with one typographic statement over them. Hide/show guides and invert controls have independent pressed states. Hiding guides does not hide the typography. Inversion changes foreground and background while preserving column readability in both page themes.

### Closing band

Use ink as the background and paper as the text, with one red phrase. Keep the message short and the return link functional. The band inverts naturally in dark mode.

## Behaviour and delivery

All navigation scrolls within the preview and prevents default iframe navigation. Theme follows the OS initially, with a visible override and validated parent cyn-theme messages. Focus rings remain visible, selected states have semantics, and filters announce the resulting count. Respect reduced motion. No network requests, tracking, external fonts or fake contact submissions.

In an application, map the tokens and primitives to shared Button, Tabs, Card and Accordion components. The Drop Design preview is intentionally standalone HTML/CSS/inline SVG.

## Design system reference

Copyable reference that mirrors `demo/system.html`. Values come from `demo/index.html` (tokens, type, layout) and `shadcn.css` (adapter-only values, marked as such).

### Color tokens

| Name | Variable | Light | Dark | Role |
| --- | --- | --- | --- | --- |
| Paper | `--paper` | `#F4F1E9` | `#20211E` | Page, card and popover surface |
| Soft | `--soft` | `#E7E4DB` | `#2E302B` | Specimen field, input well, badge |
| Ink | `--ink` | `#252520` | `#F0EEE5` | Text, solid button, inverse band |
| Muted | `--muted` | `#6B6A60` | `#B1B1A7` | Supporting copy, labels, indexes |
| Accent | `--accent` | `#B74532` | `#EB8067` | Key word, index number, focus outline, selected underline. Never a fill |
| Rule | `--rule` | `#BDBBB0` | `#53554D` | Structural borders, field and card edges |
| Grid | `--grid` | `#2525200B` | `#FFFFFF09` | Faint column guides |
| Destructive (adapter only) | `--destructive` | `#B43838` | `#FF9999` | Field error, destructive alert |
| Chart 1–5 (adapter) | `--chart-1`…`--chart-5` | `#252520` `#B74532` `#6B6A60` `#B74532` `#252520` | `#F0EEE5` `#EB8067` `#B1B1A7` `#EB8067` `#F0EEE5` | Series 4 and 5 repeat 2 and 1: differentiate by dash and label |
| Atlas pigments (fixed) | — | `#DAD6CA` / `#292A24` | same | Artwork only |
| Common Ground pigments (fixed) | — | `#33382F` / `#ECECDF` / `#DDD9CB` | same | Artwork only |

Contrast (WCAG 2, computed): ink/paper 13.64 light, 13.92 dark; muted/paper 4.83 / 7.49; muted/soft 4.28 / 6.17 (AA Large only in light); accent/paper 4.76 / 6.02; accent/ink 2.87 / 2.31 (display sizes only; fails AA Large); destructive/paper 5.22 / 7.91.

### Type scale

Sans = `"Helvetica Neue", Arial, sans-serif`; mono = `"SFMono-Regular", Consolas, "Liberation Mono", monospace`.

| Style | Family | Size | Line-height | Tracking | Weight |
| --- | --- | --- | --- | --- | --- |
| Display / hero (upper) | sans | `clamp(40px, 15.6cqw, 102px)` | .89 | −.07em | 850 |
| Display / band (upper) | sans | `clamp(43px, 6vw, 78px)`; 59px ≤900, 58px ≤620 | .95 | −4px (−3px ≤620) | 750 |
| H2 / section (upper) | sans | 46px; 38px ≤900, 39px ≤620 | 1 | −2.3px | 750 |
| Statement | sans | `clamp(26px, 3.8vw, 44px)`; 34px ≤900, 32px ≤620 | 1.15 | −1.8px (−1.2px ≤620) | 400 |
| Numeral | sans | 56px; 39px ≤620 | 1 | −4px (−2px ≤620) | 400 |
| H3 / project (upper) | sans | 22px; 21px ≤620 | 1.1 | −.8px | 700 |
| H3 / method (upper) | sans | 20px; 18px ≤900 | 1.55 | −.7px | 700 |
| Wordmark (upper) | sans | 19px; 17px ≤620 | 1.55 | −1px | 850 |
| Body | sans | 14px | 1.55 | 0 | 400 |
| Copy / small | sans | 12px | 1.8 | 0 | 400 |
| Caption | sans | 10px | 1.55 | 0 | 400 |
| Button label (upper) | mono | 10px | normal | .08em | 400 |
| Label / index (upper) | mono | 9px | 1.5 | .08em | 400 |
| Micro (upper) | mono | 8px | 1.5 | .08em | 400 |

### Spacing

| Value | Role | Where |
| --- | --- | --- |
| 4px | Column gap S | 12-column specimen ≤620 |
| 8px | Column gap | 12-column specimen |
| 12px | Control gap | Button row |
| 14px | Outer gutter S | Sheet margin ≤620, specimen inset |
| 15px | Inner gutter S | Cell padding ≤620 |
| 20px | Gutter M | Sheet margin and cell padding ≤900 |
| 24px | Inner baseline | Cell padding, space under section titles |
| 32px | Outer gutter L | Sheet margin (`100% − 64px`) |
| 38px | Statement inset | Principle label, closing band |
| 65px | Section opener | Space above section titles |

Sheet: max 1184px, 1px side rules, four column guides. Breakpoints 900px and 620px.

### Radii

| Token | Value |
| --- | --- |
| Global (`*`) | 0 |
| `--radius` (adapter) | 0px |
| Derived ×.6 / ×.5 / ×.4 (controls, skeleton, badges) | 0px |

### Elevation and material levels

| Level | Recipe |
| --- | --- |
| L0 Sheet | `--paper`, 1px `--rule` side rules, 4 guides via `repeating-linear-gradient` in `--grid` |
| L1 Field | `--soft`, no border |
| L1 Ruled cell | transparent, 1px solid `--rule` |
| L2 Inverse band | `--ink` background, `--paper` text |
| Guides | 12 columns, `--soft` fill, 1px `--rule` sides |
| Shadow | `box-shadow: none`; no blur, no shaded gradient |

### Component-state matrix

| Component | States | Key tokens |
| --- | --- | --- |
| Button solid `.btn` | default, hover (opacity .8), active (translateY 1px), focus-visible (2px `--accent` outline, 5px offset), disabled (opacity .5, adapter) | `--ink`, `--paper`, `--accent` |
| Button outline `.btn.outline` | same as solid | `--ink`, `--rule`, `--accent` |
| Text link | default (1px `--ink` underline), hover (`--accent`), focus-visible, disabled | `--ink`, `--accent` |
| Filter | default (`--muted`), pressed (`aria-pressed`, 1px `--accent` underline, `--ink` text), focus-visible | `--muted`, `--ink`, `--accent` |
| Input (adapter) | default, focus-visible (3px `--ring` outline, 3px offset), filled, invalid (`--destructive` border + 2px outline, 2px offset), disabled (.5) | `--soft`, `--rule`, `--muted`, `--destructive` |
| Select, checkbox, radio, switch (adapter) | off, on (`--ink` fill, `--paper` indicator), focus-visible, disabled. Square geometry | `--soft`, `--rule`, `--ink`, `--paper` |
| Badge | default, outline, solid count, index, accent index | `--soft`, `--rule`, `--muted`, `--accent` |
| Card / project card | static; disclosure closed/open/focus | `--rule`, `--paper`, `--muted` |
| Tabs (adapter) | default, hover, selected (2px `--ring` underline), focus-visible, disabled | `--soft`, `--muted`, `--ink`, `--accent` |
| Alert / toast (adapter) | default, destructive (12% `--destructive` in paper, text and border `--destructive`) | `--rule`, `--paper`, `--destructive` |
| Disclosure | closed (+), open (−), focus-visible | `--rule`, `--muted` |
| Grid specimen | guides on/off, inverted on/off (independent `aria-pressed`) | `--soft`, `--rule`, `--ink`, `--paper`, `--muted` |
| Closing band | light / dark (inverts) | `--ink`, `--paper`, `--accent` |

## Complete shadcn integration

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

### Install and scope

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

```tsx
<html data-design="manifesto" 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

```css
/* Drop Design / manifesto — 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="manifesto"] {
  --background: #f4f1e9;
  --foreground: #252520;
  --card: #f4f1e9;
  --card-foreground: #252520;
  --popover: #f4f1e9;
  --popover-foreground: #252520;
  --primary: #252520;
  --primary-foreground: #f4f1e9;
  --secondary: #b74532;
  --secondary-foreground: #252520;
  --muted: #e7e4db;
  --muted-foreground: #6b6a60;
  --accent: #e7e4db;
  --accent-foreground: #252520;
  --destructive: #b43838;
  --border: #bdbbb0;
  --input: #bdbbb0;
  --ring: #b74532;
  --radius: 0px;
  --dd-field: #e7e4db;
  --dd-light: #fff5e4;
  --dd-umber: #754629;
  --chart-1: #252520;
  --chart-2: #b74532;
  --chart-3: #6b6a60;
  --chart-4: #b74532;
  --chart-5: #252520;
  --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="manifesto"]:is(.dark,[data-theme="dark"]) {
  --background: #20211e;
  --foreground: #f0eee5;
  --card: #20211e;
  --card-foreground: #f0eee5;
  --popover: #20211e;
  --popover-foreground: #f0eee5;
  --primary: #f0eee5;
  --primary-foreground: #20211e;
  --secondary: #eb8067;
  --secondary-foreground: #f0eee5;
  --muted: #2e302b;
  --muted-foreground: #b1b1a7;
  --accent: #2e302b;
  --accent-foreground: #f0eee5;
  --destructive: #ff9999;
  --border: #53554d;
  --input: #53554d;
  --ring: #eb8067;
  --radius: 0px;
  --dd-field: #2e302b;
  --dd-light: #bca080;
  --dd-umber: #120b07;
  --chart-1: #f0eee5;
  --chart-2: #eb8067;
  --chart-3: #b1b1a7;
  --chart-4: #eb8067;
  --chart-5: #f0eee5;
  --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="manifesto"] :is(body) { background:var(--background);color:var(--foreground);font-family:var(--font-sans,system-ui,sans-serif); }
html[data-design="manifesto"] :is([data-slot]) { border-color:var(--border); }
html[data-design="manifesto"] :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="manifesto"] :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="manifesto"] :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="manifesto"] :is(:is([data-slot="input"],[data-slot="textarea"],[data-slot="native-select"])::placeholder) { color:var(--muted-foreground);opacity:1; }
html[data-design="manifesto"] :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="manifesto"] :is([data-slot="button"]:not([data-variant]),[data-slot="button"][data-variant="default"]) { background:var(--primary);color:var(--primary-foreground); }
html[data-design="manifesto"] :is([data-slot="button"][data-variant="secondary"]) { background:var(--secondary);color:var(--secondary-foreground); }
html[data-design="manifesto"] :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="manifesto"] :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="manifesto"] :is([data-slot="switch-thumb"],[data-slot="slider-thumb"]) { background:var(--background);border:1px solid var(--border);box-shadow:none; }
html[data-design="manifesto"] :is([data-slot="slider-track"],[data-slot="progress"],[data-slot="tabs-list"]) { background:var(--dd-field);border-radius:var(--radius); }
html[data-design="manifesto"] :is([data-slot="slider-range"],[data-slot="progress-indicator"]) { background:var(--primary); }
html[data-design="manifesto"] :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="manifesto"] :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="manifesto"] :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="manifesto"] :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="manifesto"] :is([data-slot="table"]) { border-collapse:collapse;color:var(--foreground); }
html[data-design="manifesto"] :is([data-slot="table-row"],[data-slot="accordion-item"]) { border-bottom:1px solid var(--border); }
html[data-design="manifesto"] :is([data-slot="table-row"]:is(:hover,[data-state="selected"])) { background:var(--muted); }
html[data-design="manifesto"] :is([data-slot="table-head"],[data-slot="table-caption"],[data-slot$="description"],[data-slot="breadcrumb-link"]) { color:var(--muted-foreground); }
html[data-design="manifesto"] :is([data-slot="skeleton"]) { background:var(--muted);border-radius:calc(var(--radius)*.5); }
html[data-design="manifesto"] :is([data-slot="scroll-area-thumb"],[data-slot="resizable-handle"]) { background:var(--border); }
html[data-design="manifesto"] :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="manifesto"] :is([data-slot]) { border-radius:0;box-shadow:none;backdrop-filter:none; }
html[data-design="manifesto"] :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="manifesto"] :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="manifesto"] :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="manifesto"] :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="manifesto"] :is([data-slot="accordion-trigger"],[data-slot="collapsible-trigger"]) { font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em; }
html[data-design="manifesto"] :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="manifesto"] :is([data-slot="button"][data-variant="link"]) { color:var(--ring);text-decoration:underline;text-underline-offset:4px; }
html[data-design="manifesto"] :is([data-slot="button"][data-variant="outline"]) { background:transparent;border-color:var(--border); }
html[data-design="manifesto"] :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="manifesto"] :is([data-slot]:focus-visible) { outline:3px solid var(--ring);outline-offset:3px; }
html[data-design="manifesto"] :is([data-slot][aria-invalid="true"]) { border-color:var(--destructive);outline:2px solid var(--destructive);outline-offset:2px; }
html[data-design="manifesto"] :is([data-slot]:is(:disabled,[data-disabled]:not([data-disabled="false"]),[aria-disabled="true"])) { opacity:.5;cursor:not-allowed;transform:none; }
html[data-design="manifesto"] :is([data-slot="field-error"]) { color:var(--destructive); }
html[data-design="manifesto"] :is([data-slot="button-group"] > [data-slot="button"]) { border-radius:0; }
@media(prefers-reduced-motion:reduce) { html[data-design="manifesto"] [data-slot] {animation:none!important;transition:none!important;} }

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