Theme playground

Make it yours.

Move a slider and every component on the right follows, because they only speak in tokens. When it looks like your brand, copy the CSS.

BetaLive

1 selected

AOAda Okaforada@northwind.devOwnerActive

LBLeo Brandtleo@halcyon.healthAdminInvited

MSMira Satomira@parabola.studioMemberActive

TRTomás Reyestomas@kestrel.ioMemberSuspended

12,480

+18.2%

Signups this week · hover a bar

2,240

MonTueWedThuFriSatSun

⌘K

Weekly digestA Monday summary of activity

Product updatesNew features, once a month

Security alertsSign-ins from new devices

Welcome back. Pick up where you left off.

globals.csscss

:root {
  --accent: oklch(0.53 0.215 283);
  --accent-hover: oklch(0.48 0.215 283);
  --accent-fg: oklch(0.47 0.2 283);
  --accent-soft: oklch(0.53 0.215 283 / 0.09);
  --accent-line: oklch(0.53 0.215 283 / 0.28);
  --accent-2: oklch(0.62 0.185 318);
  --bg: oklch(0.985 0.0015 264);
  --sunken: oklch(0.967 0.0025 264);
  --border: oklch(0.917 0.004 264);
  --border-strong: oklch(0.862 0.006 264);
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
}

.dark {
  --accent: oklch(0.7 0.165 283);
  --accent-hover: oklch(0.76 0.15 283);
  --accent-fg: oklch(0.78 0.13 283);
  --accent-soft: oklch(0.7 0.165 283 / 0.13);
  --accent-line: oklch(0.7 0.165 283 / 0.35);
  --accent-2: oklch(0.76 0.12000000000000001 323);
  --bg: oklch(0.145 0.004 264);
  --sunken: oklch(0.125 0.004 264);
  --border: oklch(0.262 0.006 264);
  --border-strong: oklch(0.33 0.008 264);
}