$lerpa --theme studio↳ 6 presets · runtime swappable

Theme
studio.

Click a swatch — the whole app recolors live. Drop the exported :root block into globals.css to lock in a new default.

lime--theme · applied at runtime · no rebuildLIVE

Buttons

Code

❯ lerpa set lime
↳ theme applied · 4 ms
↳ 1179 components re-tokened
✓ done.

Tokens

Chart

$lerpa --theme customize↳ full token control · live

Make it
yours.

Pick any accent, background, and text color — the surface ladder, edges, accent glow, radius, and font all derive live across the whole app. Export the full :root block.

Core colors

AccentBackgroundText

Semantic colors

SuccessWarningDangerInfo

Shape & type

Radius · 22pxBorder · 8%Font

Derived ramp

bg

bg-2

bg-3

bg-4

text

text-2

text-3

edge

Presets

WCAG contrast

AAA ≥ 7 · AA ≥ 4.5 · Large ≥ 3

Text on Background

17.67:1AAA

Accent on Background

16.78:1AAA

Success on Background

10.39:1AAA

Warning on Background

12.37:1AAA

Danger on Background

6.13:1AA

Info on Background

9.20:1AAA

Live preview

Theme saved

Your changes persist to a shareable link automatically.

Revenue

+12.4%

$48,250

Goal72%

3 online

AccentBetaLive

Notifications

Muted helper text uses the text-3 ladder step.

lerpa-theme.css · 1624 bytes

:root {
  --bg: #0a0a0f;
  --bg-2: color-mix(in srgb, #f4f1f8 6%, #0a0a0f);
  --bg-3: color-mix(in srgb, #f4f1f8 11%, #0a0a0f);
  --bg-4: color-mix(in srgb, #f4f1f8 16%, #0a0a0f);
  --text: #f4f1f8;
  --text-2: color-mix(in srgb, #0a0a0f 22%, #f4f1f8);
  --text-3: color-mix(in srgb, #0a0a0f 45%, #f4f1f8);
  --text-4: color-mix(in srgb, #0a0a0f 62%, #f4f1f8);
  --text-5: color-mix(in srgb, #0a0a0f 72%, #f4f1f8);
  --edge: color-mix(in srgb, #f4f1f8 8%, transparent);
  --edge-2: color-mix(in srgb, #f4f1f8 15.2%, transparent);
  --edge-3: color-mix(in srgb, #f4f1f8 24%, transparent);
  --accent: #c9ff37;
  --accent-glow: color-mix(in srgb, #c9ff37 55%, transparent);
  --accent-soft: color-mix(in srgb, #c9ff37 14%, transparent);
  --accent-d: color-mix(in srgb, #c9ff37 80%, #000000);
  --success: #46d39a;
  --success-soft: color-mix(in srgb, #46d39a 14%, transparent);
  --success-glow: color-mix(in srgb, #46d39a 50%, transparent);
  --warning: #ffc347;
  --warning-soft: color-mix(in srgb, #ffc347 14%, transparent);
  --warning-glow: color-mix(in srgb, #ffc347 50%, transparent);
  --danger: #ff4d6a;
  --danger-soft: color-mix(in srgb, #ff4d6a 14%, transparent);
  --danger-glow: color-mix(in srgb, #ff4d6a 50%, transparent);
  --info: #5fb8ff;
  --info-soft: color-mix(in srgb, #5fb8ff 14%, transparent);
  --info-glow: color-mix(in srgb, #5fb8ff 50%, transparent);
  --radius: 1.375rem;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 15px;
  --radius-xl: 19px;
  --radius-2xl: 22px;
  --radius-3xl: 29px;
  --font-sans: var(--font-geist-sans, "Geist"), "Inter", ui-sans-serif, system-ui, sans-serif;
}

$cat themes/lime.css↳ 344 bytes

Export the
CSS.

The active theme is just a data-theme attribute on <html>. To bake the look in permanently, copy this block into your project. No build step.

01

02

03

04

05

06

07

08

09

10

11

12

13

14

:root[data-theme="lime"] {
  --bg:        #08060c;
  --bg-2:      #0e0b15;
  --bg-3:      #16121f;
  --bg-4:      #1c1828;
  --text:      #f4f1f8;
  --text-2:    #b8b3c2;
  --text-3:    #756e80;
  --accent:        #c9ff37;
  --accent-soft:   rgba(201,255,55,0.14);
  --edge:      rgba(255,255,255,0.07);
  --edge-2:    rgba(255,255,255,0.14);
}

Themestudio.

Make ityours.