Clay is one design system that speaks every platform's language: Web, iOS, Android, macOS, Windows and Linux. Pick a platform, tune colour, type and radius live, then ship with one CDN line or export native tokens.
The markup below is identical in all six cards. Only data-clay-os changes. Switches, segmented controls, inputs and buttons take on each platform's own shape, type and motion.
More than 120 CSS custom properties cover colour, shape, type, spacing, density, depth and motion. Change one variable and every component follows. Light, dark and auto modes come built in, and colour ramps are derived for you with color-mix().
Phone, tablet, desktop, watch and TV breakpoints, with device frames for mockups and safe-area aware bars.
Native elements, ARIA roles, keyboard navigation, visible focus rings, a contrast checker and reduced-motion support.
One CSS file and one optional JS file. Works with plain HTML, React, Vue, Svelte, Angular, Astro, Rails, Laravel and Django.
Ship the same theme to SwiftUI, Jetpack Compose, Flutter, WinUI/XAML, GTK, Tailwind, SCSS and Figma (DTCG).
Drag a slider and watch the whole system respond. Your theme is saved locally, shareable by link and exportable to any platform.
Colour, radius, typeface, density, spacing, shadows and motion live in the Foundations panel on the components page.
Open the playground Export tokensDrop the stylesheet and runtime into any page. No build step.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/clay-ds@1/dist/clay.min.css"> <script src="https://cdn.jsdelivr.net/npm/clay-ds@1/dist/clay.min.js" defer></script>
Set it in HTML, or let Clay detect the visitor's OS.
<html data-clay-os="auto" data-clay-mode="auto"> <body class="clay"> <button class="clay-btn">Continue</button>
Theme at runtime, or export tokens to native apps.
Clay.init({ os: 'auto', mode: 'auto' });
Clay.setTheme({ primary: '#e11d48', radius: 16 });
Clay.export('swiftui'); // or compose, flutter…
Clay is open source and free for personal and commercial projects. Star it, fork it and make it yours.