Ship beautifully.
No build step required.
Every component on this page is a cx-* CSS class. No JavaScript framework. Just <link rel="stylesheet"> and write HTML.
What you get
⚡ Drop-in CSS
One <link> tag. Every cx-* class instantly available across React, Vue, Svelte, Astro, vanilla HTML.
🎨 12 themes
midnight · light · contrast · amber · emerald · crimson · rose · cyber · terra · aurora · mono · candy
📱 Mobile-tested
44px touch targets, 16px text floor (no iOS zoom), GPU-accelerated transforms, opt-in motion.
♿ WCAG AAA
Built-in contrast theme, RTL support, semantic landmarks, full keyboard nav, focus-visible rings.
🪝 Tokens
CSS custom properties for everything. Override --cx-accent per app, no Sass build.
🤖 LLM-ready
JSON-LD manifest at /manifest.json. Self-describing for any AI agent integration.
Buttons & actions
Variants
Sizes
Forms
Sign in
Compose
Input variants
Badges, pills, status
Alerts & feedback
Production v1.4.0 is live across 12 regions.
Sunday 02:00 UTC, ~30 min downtime in us-east-1.
87% of monthly API quota consumed.
Update your card to maintain service.
Data table
| Project | Owner | Branch | Status | Updated |
|---|---|---|---|---|
| acme-monorepo | alice | main | ● Healthy | 2m |
| mobile-app | bob | release/v2 | ● Healthy | 1h |
| design-tokens | elena | main | ● Warning | 3h |
| docs-site | marcus | main | ● Healthy | 6h |
| experiments | alice | feature/llm | ● Critical | 8h |
Pricing
- ✓ 3 projects
- ✓ Community support
- ✓ 1 GB storage
- ✓ Unlimited projects
- ✓ Priority support
- ✓ 100 GB storage
- ✓ Custom domains
- ✓ Everything in Pro
- ✓ SSO & SAML
- ✓ 1 TB storage
- ✓ Audit logs
Layout primitives cx-row · cx-grid · cx-sidebar · cx-stack · cx-cluster · cx-split · cx-frame
Container-query-based responsive layout. Compact MADS aesthetic at every viewport. Wrap any region in cx-container to opt into container-query mode (children adapt to wrapper width not viewport).
cx-row · min=160 · auto-stack
cx-grid · min=200 · auto-fit
cx-sidebar · 200px nav + flex main
cx-cluster · wrapping inline items
cx-split · 50/50 with collapse
cx-frame · aspect-ratio-locked
Fluid typography · clamp-based
Integration
This entire page is built from:
<link rel="stylesheet" href="https://cdn.chaozcode.com/latest/mads.css">That's it. No npm install. No build step. No JavaScript framework. Just one HTML file and the CDN. For React components + theme system, see the React demo →