One stylesheet for every Swivel surface.

Get started.

Link the stylesheet from any origin. Fonts are served with CORS, so it works from a prototype on your laptop as well as from a product domain.

<link rel="stylesheet" href="https://design-system.swivel-dev.net/stylesheet.css">

Then build from the system's classes and tokens. Nothing else is required.

<h1 class="t-h1">A million decisionS a minute.</h1>
<p class="t-body">You set the rules. Swivel executes against them.</p>
<button class="btn btn-accent">Run playbook</button>

Working with an agent.

Point Claude, Cursor, or any coding agent at https://design-system.swivel-dev.net/llms.txt. It carries the theme contract, the component selection rules, page patterns, copy rules, and every token with both theme values, all generated from the same source as this page.

Use the Swivel design system. Read https://design-system.swivel-dev.net/llms.txt first and follow it.

Dark by default.

With no attribute set, every token resolves to its dark value. data-theme="light" opts a page or any subtree into light, and data-theme="dark" nests a dark island inside a light page. The token names stay the same, so markup is written once.

Every artifact ships a working switch.

Use the canonical .theme-switch: sun, track, moon, and no text label. It is a switch, never a button group, and aria-checked="true" means dark. Persist the choice to localStorage under swivel-theme and apply it in <head> before first paint. The one in this page's header is the real thing.

<button type="button" class="theme-switch" role="switch" aria-checked="true" aria-label="Dark mode" data-theme-switch>
  <span class="ts-ico ts-sun material-symbols-outlined">light_mode</span>
  <span class="ts-track"></span>
  <span class="ts-ico ts-moon material-symbols-outlined">dark_mode</span>
</button>

The full script, including the before-first-paint step, is in llms.txt under Theming.

Four colors, used with discipline.

Switch, Graphite, Slate, and white. No other hues, and no gradients unless they come from the palette. Status colors mark data states only, never decoration.

Tokens.

Each swatch paints with its variable, so it follows the theme switch. D is the dark value, L the light one. Names describe a role, and the ramps invert between themes to keep it: --graphite-90 is primary text in both.

Avantt speaks, Antarctica explains.

Avantt carries headlines and display moments. Antarctica Condensed carries body and UI. JetBrains Mono is for IDs, code, and data. Every headline ends with a period.

Sharp edges, structural space.

Space runs on a 4px base. Radii lean sharp, and shadows are reserved for floating layers. Inline cards get a hairline, not a drop shadow.

Radius.

Elevation.

Directional, never bouncy.

Motion references lines and arrows in motion. Transitions are sharp and directional. There are no springs, no squash and stretch, and no parallax. Press is a 0.98 scale over 80ms.

Full guidance with live curves: Motion reference.

Components.

Every specimen below is plain HTML on the system's own classes, straight from stylesheet.css. The same classes back the React components in _ds_bundle.js. The component library has every variant and state.

When a row counts child objects, the count is a square .count-btn. Clicking it opens those records as a sub-table directly beneath the row, and clicking it again closes it. Try it: open a campaign's demand tags, then its creatives.

Every page sits in the app shell.

The header pins to the top. The sidenav and the scrolling main region share the row below, and the header's hamburger collapses the nav. A screen outside the shell is unreachable and unthemed.

Page layouts.

Regions, required parts, and rules for each: Page patterns and patterns.json.

Arrows are part of the brand.

Product UI uses Material Symbols Outlined, already loaded by the stylesheet. Marketing uses Lucide. Never mix the two on one surface, and never use emoji.

The approved subset and reserved Swivel objects: Iconography and icons.json.

Practitioners talking to practitioners.

Confident, authoritative, and empathetic, occasionally sassy. We have been in the chair. AI augments operators and never replaces them.

Rules.

• Every headline ends with a period.
• No em dashes. Use a comma, a period, a colon, or a rewrite.
• Every sentence has a subject and a verb. No staccato stabs.
• Prefer "you" and "we". Write "Loading your data." and not "Data is being loaded."
• No ALL CAPS body copy, no emoji, and no named customer categories in public copy.

Every rule with its severity: llms.txt, Voice and copy.

Brand assets.

Use the files as they are. Do not alter, rotate, recolor, or add effects to the logo.

swivel-lockup-switch.svg

swivel-lockup-white.svg

swivel-lockup-graphite.svg

swivel-symbol-switch.svg

swivel-symbol-graphite.svg

swivel-symbol-slate.svg

Resources.

Humans read the showcase pages. Machines read the data files. Both come from the same source.