Agentic Design System · free

A design system agents can read.

Tokens, themes and component recipes in plain CSS and JSON, with rules an AI agent follows. Free, no sign-up, one zip.

Download the zipRead the rules
  • One token layer. Four presets and light/dark change tokens only. Components never change.
  • Any stack. CSS variables, W3C Design Tokens JSON and semantic HTML. No framework, no build step.
  • Tested rules. Contrast, 44px targets, reduced motion and no sideways scroll are checked on every deploy.

Use it with your agent

Opens your own assistant with this prompt filled in.

Prompt
Use the free design system at https://madhavnair.in/design/llms.txt (tokens: https://madhavnair.in/design/tokens.json, components: https://madhavnair.in/design/components.json). Follow its rules and test checklist exactly. Build me: [describe the page or component]. Output plain HTML and CSS that uses its tokens and c- components, in light and dark mode.

Tokens

Live values from the CSS. They change when you switch theme or mode. W3C format: tokens.json.

Colour

--bg-page
--bg-raised
--bg-sunken
--fg
--fg-2
--fg-muted
--accent
--on-accent
--line
--line-2
--focus-ring
--pill

Type

Product design for AI agents--t-3xl Display ·
Product design for AI agents--t-2xl Heading ·
Product design for AI agents--t-xl Subheading ·
Product design for AI agents--t-lg Lead ·
Product design for AI agents--t-md Body ·
Product design for AI agents--t-sm Small ·
Product design for AI agents--t-xs Caption ·

Spacing

--s-1
--s-2
--s-3
--s-4
--s-5
--s-6
--s-7
--s-8
--s-9

Radii

--r-sm
--r
--r-lg
--r-pill

Motion

--d-base with --ease. Off under reduced motion.

Components

The real components.css markup. Copy puts exactly this HTML on your clipboard. Specs: components.json.

Preview style

Accent
Surface

Card .c-card

One heading per card. If the whole card is a link, use only one <a>. No fixed min-height.

HTML
<article class="c-card"><span class="c-pill"><span class="c-pill__dot"></span>Now</span><h3>Card title</h3><p>Short supporting text.</p><a class="c-card__foot" href="#">Read more</a></article>
Lead
The current thing

One per screen.

HTML
<article class="c-card c-card--lead"><h3>The current thing</h3><p>One per screen.</p></article>
Media
Media card

Image clipped to the card.

HTML
<article class="c-card c-card--media"><div class="ds-ph" role="img" aria-label="Placeholder image">16:9 image</div><div class="c-card__body"><h3>Media card</h3><p>Image clipped to the card.</p></div></article>
Quiet
Quiet card

Sunken, no shadow.

HTML
<article class="c-card c-card--quiet"><h3>Quiet card</h3><p>Sunken, no shadow.</p></article>

Button .c-btn

At least 44×44px. Visible :focus-visible ring ≥3:1. Text on accent ≥4.5:1.

Primary
HTML
<a class="c-btn" href="#"><span class="c-btn__chip" aria-hidden="true">→</span>Primary</a>
Accent
Accent
HTML
<a class="c-btn c-btn--accent" href="#">Accent</a>
Ghost
Ghost
HTML
<a class="c-btn c-btn--ghost" href="#">Ghost</a>

Pill .c-pill

Not interactive. The dot is decorative.

Label
HTML
<span class="c-pill"><span class="c-pill__dot"></span>Label</span>

Chip .c-chip

State via aria-pressed. 44px tap height on touch.

HTML
<button class="c-chip" aria-pressed="true">Selected</button> <button class="c-chip" aria-pressed="false">Filter</button>

Tag .c-tag

Text on accent ≥4.5:1. Never the only signal of state.

New BETA
HTML
<span class="c-tag">New</span> <span class="c-tag c-tag--pixel">BETA</span>

Section .c-section

Has a heading or aria-label.

Section title

Section content.

HTML
<section class="c-section c-section--tight"><div class="c-section__head"><h2>Section title</h2></div><p>Section content.</p></section>

Sticky bar .c-sticky

Solid, never translucent. top = header height (--hh). Anchors need scroll-margin-top.

HTML
<div class="c-sticky" style="position:static"><div style="display:flex;gap:8px;padding-inline:12px"><button class="c-chip" aria-pressed="true">All</button><button class="c-chip" aria-pressed="false">Notes</button></div></div>

Plate .c-plate

Meaningful alt. Lazy-load below the fold.

Caption
HTML
<figure class="c-plate"><div class="ds-ph" role="img" aria-label="Placeholder image">16:9 image</div><figcaption>Caption</figcaption></figure>

Themes

Themes only change tokens. Pick one; this page and the rest of the site follow.

--bg-page
--bg-raised
--fg
--accent
--on-accent
--line-2

Pages

Page layouts as wireframes, built from the same components. Placeholders only.

Home
Story / Work
Note
Contact

ZipDESIGN.mdtokens.jsoncomponents.jsonllms.txt

Free to use. Inter and Geist Pixel are under the SIL Open Font License.