v136 · css

Design System

A complete UI component library — buttons, badges, avatars, cards, inputs — all driven by two CSS custom properties: --ds-shape and --ds-radius. Switch the design theme at the root and every component morphs together: round, squircle, or sharp bevel.

Feature detection: checking…

Switch the design theme. All components share the same token variables — one :root update ripples through the whole system.

Buttons
Badges & Chips
New Active Deprecated Beta Chrome 136+
Avatars
PK
AM
JD
??
Inputs
Cards
Notification
Your export is ready. Download
Warning
API rate limit at 80%. Consider batching requests.

design token reference

tokenroundsquirclebevelsharp
--ds-shape round squircle bevel round
--ds-radius 0.5rem 0.5rem 0.5rem 0
--ds-radius-sm 0.3rem 0.3rem 0.3rem 0
--ds-radius-full 50% 30% 50% 50%
--ds-shape-full round squircle round round 
/* Design token system — one variable per role */
:root {
  --ds-shape: squircle;
  --ds-radius: 0.5rem;
  --ds-radius-sm: 0.3rem;
  --ds-radius-full: 30%;   /* squircle avatars */
  --ds-shape-full: squircle;
}

/* Components consume the tokens */
.btn   { border-radius: var(--ds-radius);      corner-shape: var(--ds-shape); }
.badge { border-radius: var(--ds-radius-sm);   corner-shape: var(--ds-shape); }
.avatar{ border-radius: var(--ds-radius-full); corner-shape: var(--ds-shape-full); }

/* Theme swap: ONE :root update morphs everything */
:root[data-theme="bevel"] {
  --ds-shape: bevel;
}

see also