Design system · v1

One look, every page.

Every page on agentdex.app uses these tokens and components. They live in one file, /assets/ax-ds.css. If a page needs something that isn't here, add it here first.

See components View ax-ds.css

Principles

Plain, dark, honest.

Dark only. One background (--ds-bg), surfaces step up in white alpha. No light theme.
One accent. Mint means “interactive or good”. Amber is reserved for the Sponsored label. No lime, no pink.
Primary is white. One primary button per view. Everything else is secondary or ghost.
Paid is always labelled. Any sponsored placement carries the amber Sponsored label.
Voice: confident and plain. Short sentences. Say what a thing does. No hype.

Color

Tokens

Use the variable, never the hex.

Background--ds-bg

Surface--ds-surface

Surface 2--ds-surface-2

Text--ds-fg

Muted--ds-mute

Dim--ds-dim

Line--ds-line-2

Accent (mint)--ds-accent

Focus blue--ds-blue

Sponsored amber--ds-amber

Type

Geist, one scale

Geist for text, Geist Mono for code and scores. Headings are 600 with tight tracking.

--ds-t-displayDisplay

--ds-t-h1Heading 1

--ds-t-h2Heading 2

--ds-t-h3Heading 3

--ds-t-lgLead paragraph, 18px

--ds-t-mdBody, 16px

--ds-t-smSmall, 14px

--ds-t-xsEyebrow, 12px

Space

4px base

Sections are 96px apart (--ds-9). Cards pad 24px (--ds-5).

--ds-14px

--ds-28px

--ds-312px

--ds-416px

--ds-524px

--ds-632px

--ds-748px

--ds-864px

--ds-996px

Radius

Five radii

--ds-r-sm6 · badges

--ds-r-md10 · buttons, inputs

--ds-r-lg16 · cards

--ds-r-xl20 · panels

--ds-r-pillpill · chips

Layout

Containers

.ds-container is 1200px with a 24px gutter (16px on mobile). Articles use .ds-prose at 720px. Forms like sign-in use 480px.

Components

Buttons

40px tall, 10px radius, 14px medium. .ds-btn + one variant. Add .ds-btn-sm or .ds-btn-lg for size.

Primary Secondary Ghost Large primary Small

Cards

.ds-card: 16px radius, hairline border, soft gradient. Links lift 3px on hover.

AI IDE

Cursor

A desktop code editor with inline edits and agents.

AI IDEFree start

Your tool here

Paid placements look like this. Always labelled.

Pack

$15

One-time. Files are yours.

Buy · $15

Badges and the Sponsored label

.ds-badge for categories, .ds-badge-accent for good news, .ds-sponsored for paid placements only.

CLI agentApp builderFree startPreliminarySponsored

Inputs

.ds-input: 44px, 10px radius, blue focus ring.

Email Send me Model Pulse. I can unsubscribe any time.

Section heading

Eyebrow + H2, with an optional action on the right: .ds-sh.

Featured

Six tools worth opening first

All tools →

Links

In running text, links are mint with a soft underline, like this blog link.

Footer

One footer on every page, rendered by tools/ds_apply.py: brand, Directory, Company, Legal, and the Model Pulse signup. You're looking at it below.

How it ships

Built in, not bolted on

ax-ds.css is linked after ax-v2.css on every page.
tools/ds_apply.py adds the link and the canonical footer. canon_header.py calls it, and every generator runs canon_header.py.
Bump DS_V in ds_apply.py after editing the CSS to bust caches.