Manifesto

---
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

.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.

<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

/* 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; }