Color Themes

Every landing page picks from one of 18 preset color themes. Each theme tunes three things: the accent color (buttons, links, focus rings), the page background, and the section card background - all with matching shades for light and dark mode. There's no free-form hex picker by design; preset themes keep pages looking professional without design effort.

All themes

Emerald

#10b981

Light bg

#f0fdf4

Light card

#dcfce7

Dark bg

#022c22

Dark card

#064e3b

Indigo

#6366f1

Light bg

#eef2ff

Light card

#e0e7ff

Dark bg

#1e1b4b

Dark card

#312e81

Rose

#f43f5e

Light bg

#fff1f2

Light card

#ffe4e6

Dark bg

#4c0519

Dark card

#881337

Slate

#64748b

Light bg

#f8fafc

Light card

#e2e8f0

Dark bg

#020617

Dark card

#0f172a

Sunset

#f97316

Light bg

#fff7ed

Light card

#ffedd5

Dark bg

#431407

Dark card

#7c2d12

Ocean

#0891b2

Light bg

#ecfeff

Light card

#cffafe

Dark bg

#083344

Dark card

#164e63

Violet

#8b5cf6

Light bg

#f5f3ff

Light card

#ede9fe

Dark bg

#2e1065

Dark card

#4c1d95

Amber

#f59e0b

Light bg

#fffbeb

Light card

#fef3c7

Dark bg

#451a03

Dark card

#78350f

Teal

#14b8a6

Light bg

#f0fdfa

Light card

#ccfbf1

Dark bg

#042f2e

Dark card

#134e4a

Crimson

#dc2626

Light bg

#fef2f2

Light card

#fee2e2

Dark bg

#450a0a

Dark card

#7f1d1d

White + Amber

#f59e0b

Light bg

#ffffff

Light card

#f8fafc

Dark bg

#ffffff

Dark card

#f8fafc

White + Emerald

#10b981

Light bg

#ffffff

Light card

#f8fafc

Dark bg

#ffffff

Dark card

#f8fafc

White + Indigo

#6366f1

Light bg

#ffffff

Light card

#f8fafc

Dark bg

#ffffff

Dark card

#f8fafc

White + Rose

#f43f5e

Light bg

#ffffff

Light card

#f8fafc

Dark bg

#ffffff

Dark card

#f8fafc

Dark + Amber

#fbbf24

Light bg

#0a0a0b

Light card

#16161a

Dark bg

#0a0a0b

Dark card

#16161a

Dark + Emerald

#34d399

Light bg

#0a0a0b

Light card

#16161a

Dark bg

#0a0a0b

Dark card

#16161a

Dark + Indigo

#818cf8

Light bg

#0a0a0b

Light card

#16161a

Dark bg

#0a0a0b

Dark card

#16161a

Dark + Rose

#fb7185

Light bg

#0a0a0b

Light card

#16161a

Dark bg

#0a0a0b

Dark card

#16161a

How themes apply

At publish time, the renderer injects theme-specific CSS custom properties at :root:

--lp-accent — button background, link color, focus ring
--lp-bg — page background (tinted per theme)
--lp-card — features + FAQ alt-section background

All theme colors exist in both light and dark mode - the browser picks automatically based on the visitor's prefers-color-scheme preference. Text, muted text, and the subtle border color stay neutral so copy readability doesn't fight the brand accent.

Changing a page's theme

Two places:

When you create the page - the signup wizard and the New page form both show the theme picker.
From any existing page's editor - the Page metadata card has the theme picker. Switching themes recompiles on save; the live URL picks it up immediately.

Input border contrast

Landing-page forms use a dedicated --lp-input-border color (#94a3b8 light / #64748b dark) that's distinct from the neutral section border, so form fields read clearly against every theme's tinted background. Focus lights up the accent color with a 3px halo.