Color Themes

Every landing page picks from one of 34 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

Lime

#65a30d

Light bg

#f7fee7

Light card

#ecfccb

Dark bg

#1a2e05

Dark card

#365314

Fuchsia

#d946ef

Light bg

#fdf4ff

Light card

#fae8ff

Dark bg

#4a044e

Dark card

#701a75

Sky

#0284c7

Light bg

#f0f9ff

Light card

#e0f2fe

Dark bg

#082f49

Dark card

#0c4a6e

Cyan

#0891b2

Light bg

#ecfeff

Light card

#cffafe

Dark bg

#083344

Dark card

#155e75

Forest

#15803d

Light bg

#f0fdf4

Light card

#bbf7d0

Dark bg

#052e16

Dark card

#14532d

Coral

#fb7185

Light bg

#fff1f2

Light card

#ffe4e6

Dark bg

#4c0519

Dark card

#9f1239

Graphite

#1d1d1f

Light bg

#fbfbfd

Light card

#f5f5f7

Dark bg

#0b0b0d

Dark card

#161618

Azure

#0067b8

Light bg

#f3f7fb

Light card

#e6eef7

Dark bg

#04121f

Dark card

#0b1e30

Circuit

#3f7d0e

Light bg

#f4f8ee

Light card

#e6f0d8

Dark bg

#0d1405

Dark card

#16210b

Ember

#b45309

Light bg

#fdf8f2

Light card

#faeede

Dark bg

#131313

Dark card

#1f1a14

Signal

#1a73e8

Light bg

#f6f9fe

Light card

#e8f0fe

Dark bg

#0a1020

Dark card

#101a2e

Cobalt

#0b5fd0

Light bg

#f5f8ff

Light card

#e7f0ff

Dark bg

#0a0f1a

Dark card

#111827

Claret

#9b1c2e

Light bg

#fdf6f6

Light card

#f8e8ea

Dark bg

#160a0c

Dark card

#241114

Bronze

#8a6d3b

Light bg

#fbf9f4

Light card

#f2ecdf

Dark bg

#14120c

Dark card

#201c13

Crimson steel

#cc0000

Light bg

#faf7f7

Light card

#f3eaea

Dark bg

#0d0d0f

Dark card

#191a1d

Harbor

#00437a

Light bg

#f4f7fa

Light card

#e6edf4

Dark bg

#050f18

Dark card

#0c1b28

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.