Playground

Theme playground

Tune Axie color, radius, density, and motion tokens against a real product panel.

Matcha

Matcha theme

Matcha green. Warm paper.

Collected$8,428

Pending$642

Failed2

Workspace nameShown on receipts and exports.ReceiptsSend a receipt after each renewal.

Projected total$184.20

Presets

Radius12pxDensity14pxMotion260ms

CSS variablesshow

:root {
  --axie-color-ink: #263024;
  --axie-color-paper: #f4f1e6;
  --axie-color-surface: #fffdf4;
  --axie-color-surface-soft: #e8ead6;
  --axie-color-muted: #68705d;
  --axie-color-line: #d7d2b9;
  --axie-color-accent: #6f7f3f;
  --axie-color-accent-soft: #e0e8c7;
  --axie-radius-card: 14px;
  --axie-radius-control: 12px;
  --axie-space-md: 14px;
  --axie-motion-base: 260ms;
}

Handoff

Copy the generated variables into your app stylesheet, or promote the values into a named theme.

The preview uses the same CSS custom properties as the package stylesheet, so changes map directly to `--axie-*` variables without a second token layer.