CDN demo · zero JavaScript

MADS works anywhere

Drop one <link> tag, get the entire design system. Plain HTML. No build step. No framework.

Drop-in usage

<link rel="stylesheet"
      href="https://design.chaozcode.com/mads.css">
<body data-cx>
  <button class="cx-btn cx-btn-primary">Click me</button>
</body>

Buttons

Six variants, four sizes. Each one is a single cx-btn-* class.

primary

secondary ghost outline

danger success disabled

Badges & status

Purple Cyan Green Amber Red Blue

connected warning error synced

Stats grid

Components

1,233

Cards

Three card variants, GPU-accelerated hover.

Standard

Quick note

Deploy scheduled for 2:00 AM UTC.

Glow + shine

Reminder

Review PR #437 before EOD.

Frosted

Update

Node.js upgraded to v20.11.0.

Inputs

Live animations

All effects run on the GPU compositor — pure transform/opacity.

🎈

cx-animate-float

cx-glow-pulse

fx-spin

Typography

Beautiful by default

Secondary body text — readable on dark backgrounds.

Muted helper text — for hints, metadata, footers.