design-tokens

Single source of truth for brand color palettes across product & landing repos. Pick a palette, generate a theme for your stack.

@gitconnections/[email protected]11 palettes12 type presets11 image moods63 UI icons (3 sets)sections 01–11WCAG AA verifiedOKLCH · Tailwind v40 deps

How to use →

Live Preview — switch palette above to re-theme

Corporate Dark · Light

Ship beautiful products faster

Design tokens that scale across web, mobile, and brand. One source of truth, infinite themes.

Start for free See demo

Performance New

Token-powered theming with zero runtime cost. OKLCH gamut, WCAG AA verified.

Multi-platform Stable

Web (Tailwind v4), Android Compose, raw JSON. One palette, every target.

Join

⚠️

Demo alert using --destructive token

01How it works

Source of truth — each palette is a palettes/<name>.json file with OKLCH tokens (Tailwind v4 / shadcn) for light + dark.

Generate, don't copy — the apply-palette CLI reads a palette and emits a theme for your chosen target. Edit the JSON, re-run — never hand-edit generated files.

Integrated with new-repo bootstrap — ops/runbooks/new-repo-bootstrap.md step 2b calls apply-palette to seed a new landing's globals.css.

02CLI options

command	what it does
`apply-palette`	Interactive picker — lists palettes with truecolor swatches, then prompts for target & output path.
`apply-palette list`	List all palettes with mood + key hex swatches.
`apply-palette show <name>`	Print a palette's full token set.
`apply-palette <name> --target <web\|android\|json> --out <path>`	Non-interactive: generate & write the theme. Idempotent (reports `unchanged` on no-op).

03Targets

web

Tailwind v4 / shadcn globals.css — :root + .dark with every oklch() token (incl. success/warning/info) + charts, plus an @theme inline color map.

--target web --out app/globals.css

android

Jetpack Compose Color.kt + Theme.kt (Material 3 ColorScheme, light/dark). --out is a directory.

--target android --out .../ui/theme/

json

Raw token JSON for any other consumer (CSS-in-JS, SwiftUI, custom pipelines).

--target json --out design-tokens.json

04Palettes (11)

Corporate Dark

corporate-dark

Trustworthy enterprise SaaS, deep navy authority

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs corporate-dark --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs corporate-dark --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs corporate-dark --target json --out design-tokens.json

token	light	dark
`background`	#ffffff	#0b101e
`foreground`	#0f1729	#f1f5f9
`card`	#ffffff	#11192c
`card-foreground`	#0f1729	#f1f5f9
`popover`	#ffffff	#11192c
`popover-foreground`	#0f1729	#f1f5f9
`primary`	#1a3575	#5aa8f6
`primary-foreground`	#ffffff	#0e1526
`secondary`	#ebeff4	#222f44
`secondary-foreground`	#182544	#f1f5f9
`muted`	#ebeff4	#1f2a3d
`muted-foreground`	#535c6e	#a3b0c2
`accent`	#0a66c2	#5aa8f6
`accent-foreground`	#ffffff	#0e1526
`destructive`	#b81e1e	#e15252
`destructive-foreground`	#ffffff	#0e1526
`success`	#206f48	#68ca99
`success-foreground`	#ffffff	#0f2419
`warning`	#9a6413	#e2b14f
`warning-foreground`	#ffffff	#291c0a
`info`	#1f5cad	#6ca4e5
`info-foreground`	#ffffff	#0d1a26
`border`	#d5dae2	#293951
`input`	#d5dae2	#293951
`ring`	#1a3575	#5aa8f6

In use — light

Card title Tag

Muted description text on the card surface.

Action

Fresh Green

fresh-green

Organic wellness and growth, natural emerald

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs fresh-green --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs fresh-green --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs fresh-green --target json --out design-tokens.json

token	light	dark
`background`	#f8fbf8	#0c1713
`foreground`	#16281f	#ebf4ee
`card`	#ffffff	#14241d
`card-foreground`	#16281f	#ebf4ee
`popover`	#ffffff	#14241d
`popover-foreground`	#16281f	#ebf4ee
`primary`	#1f7a50	#53d494
`primary-foreground`	#ffffff	#0f1f18
`secondary`	#e3f2e8	#283e34
`secondary-foreground`	#19422f	#ebf4ee
`muted`	#e5f0e9	#213129
`muted-foreground`	#517161	#a8c7b4
`accent`	#5b7f25	#a5d65c
`accent-foreground`	#ffffff	#0f1f18
`destructive`	#b62a20	#e46258
`destructive-foreground`	#ffffff	#0f1f18
`success`	#1b7445	#64ce95
`success-foreground`	#ffffff	#0f2419
`warning`	#976a0f	#e7ba50
`warning-foreground`	#ffffff	#291c0a
`info`	#1d78a5	#67bbe0
`info-foreground`	#ffffff	#0d1a26
`border`	#d0e1d6	#31493e
`input`	#d0e1d6	#31493e
`ring`	#1f7a50	#53d494

In use — light

Card title Tag

Muted description text on the card surface.

Action

Luxury Gold

luxury-gold

Premium black-and-gold, refined and exclusive

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs luxury-gold --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs luxury-gold --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs luxury-gold --target json --out design-tokens.json

token	light	dark
`background`	#fcfbf9	#15130f
`foreground`	#252118	#f2eee3
`card`	#fdfdfc	#201d17
`card-foreground`	#252118	#f2eee3
`popover`	#fdfdfc	#201d17
`popover-foreground`	#252118	#f2eee3
`primary`	#2b261d	#e4ba4d
`primary-foreground`	#eadaad	#1d1911
`secondary`	#eee9dd	#3a352c
`secondary-foreground`	#393223	#f2eee3
`muted`	#eeeae1	#312d26
`muted-foreground`	#6e6553	#c9bfa6
`accent`	#8f661f	#e4ba4d
`accent-foreground`	#faf6eb	#1d1911
`destructive`	#a82424	#de5454
`destructive-foreground`	#faf6eb	#1d1911
`success`	#27673d	#70c28c
`success-foreground`	#ffffff	#0f2419
`warning`	#9c6912	#e8b949
`warning-foreground`	#ffffff	#291c0a
`info`	#29648e	#69abd4
`info-foreground`	#ffffff	#0d1a26
`border`	#dfd9cd	#464035
`input`	#dfd9cd	#464035
`ring`	#a07222	#e4ba4d

In use — light

Card title Tag

Muted description text on the card surface.

Action

Minimal Light

minimal-light

Clean monochrome-ish minimalism, airy whitespace

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs minimal-light --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs minimal-light --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs minimal-light --target json --out design-tokens.json

token	light	dark
`background`	#ffffff	#121212
`foreground`	#171717	#f5f5f5
`card`	#ffffff	#1a1a1a
`card-foreground`	#171717	#f5f5f5
`popover`	#ffffff	#1a1a1a
`popover-foreground`	#171717	#f5f5f5
`primary`	#1f1f1f	#f5f5f5
`primary-foreground`	#fafafa	#171717
`secondary`	#f5f5f5	#292929
`secondary-foreground`	#1f1f1f	#f5f5f5
`muted`	#f5f5f5	#262626
`muted-foreground`	#666666	#a8a8a8
`accent`	#f0f0f0	#2e2e2e
`accent-foreground`	#1f1f1f	#f5f5f5
`destructive`	#b81e1e	#e15252
`destructive-foreground`	#fafafa	#171717
`success`	#2a6f47	#77c598
`success-foreground`	#ffffff	#0f2419
`warning`	#93631a	#ddaf5f
`warning-foreground`	#ffffff	#291c0a
`info`	#2962a3	#74a8dc
`info-foreground`	#ffffff	#0d1a26
`border`	#e3e3e3	#383838
`input`	#e3e3e3	#383838
`ring`	#1f1f1f	#cccccc

In use — light

Card title Tag

Muted description text on the card surface.

Action

Monochrome

monochrome

Pure grayscale brutalist, ink on paper

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs monochrome --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs monochrome --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs monochrome --target json --out design-tokens.json

token	light	dark
`background`	#ffffff	#0a0a0a
`foreground`	#0a0a0a	#fafafa
`card`	#ffffff	#141414
`card-foreground`	#0a0a0a	#fafafa
`popover`	#ffffff	#141414
`popover-foreground`	#0a0a0a	#fafafa
`primary`	#0a0a0a	#fafafa
`primary-foreground`	#ffffff	#0a0a0a
`secondary`	#ebebeb	#292929
`secondary-foreground`	#0a0a0a	#fafafa
`muted`	#ebebeb	#242424
`muted-foreground`	#5c5c5c	#a3a3a3
`accent`	#d9d9d9	#333333
`accent-foreground`	#0a0a0a	#fafafa
`destructive`	#333333	#cccccc
`destructive-foreground`	#ffffff	#0a0a0a
`success`	#3f5a49	#96b0a0
`success-foreground`	#ffffff	#0f2419
`warning`	#675a42	#b2a995
`warning-foreground`	#ffffff	#291c0a
`info`	#4b5c6c	#9ca8b4
`info-foreground`	#ffffff	#0d1a26
`border`	#d1d1d1	#3d3d3d
`input`	#d1d1d1	#3d3d3d
`ring`	#0a0a0a	#d6d6d6

In use — light

Card title Tag

Muted description text on the card surface.

Action

Neutral Slate

neutral-slate

Calm professional slate-gray, balanced and neutral

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs neutral-slate --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs neutral-slate --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs neutral-slate --target json --out design-tokens.json

token	light	dark
`background`	#f9fafb	#11161d
`foreground`	#1d2530	#eff2f5
`card`	#ffffff	#19202a
`card-foreground`	#1d2530	#eff2f5
`popover`	#ffffff	#19202a
`popover-foreground`	#1d2530	#eff2f5
`primary`	#364963	#b1c7dd
`primary-foreground`	#f9fafb	#141b24
`secondary`	#eaedf1	#29313d
`secondary-foreground`	#2a3646	#eff2f5
`muted`	#eaedf0	#242a33
`muted-foreground`	#586474	#a6b1bf
`accent`	#1d7aa5	#4cb5e5
`accent-foreground`	#ffffff	#141b24
`destructive`	#b62020	#e15252
`destructive-foreground`	#ffffff	#141b24
`success`	#2e6b4d	#7bc19e
`success-foreground`	#ffffff	#0f2419
`warning`	#93651a	#dcb160
`warning-foreground`	#ffffff	#291c0a
`info`	#2e629e	#79a8d8
`info-foreground`	#ffffff	#0d1a26
`border`	#d5dbe2	#323b48
`input`	#d5dbe2	#323b48
`ring`	#364963	#b1c7dd

In use — light

Card title Tag

Muted description text on the card surface.

Action

Ocean Blue

ocean-blue

Calm coastal blues, fresh and dependable

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs ocean-blue --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs ocean-blue --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs ocean-blue --target json --out design-tokens.json

token	light	dark
`background`	#f8fafc	#0a141f
`foreground`	#122130	#eef4f7
`card`	#ffffff	#111f2c
`card-foreground`	#122130	#eef4f7
`popover`	#ffffff	#111f2c
`popover-foreground`	#122130	#eef4f7
`primary`	#1268a5	#4cbaf0
`primary-foreground`	#ffffff	#0c1722
`secondary`	#e2edf3	#243442
`secondary-foreground`	#1c334a	#eef4f7
`muted`	#e3edf2	#1d2a34
`muted-foreground`	#4f6272	#a6bcc9
`accent`	#1c837a	#40ddd0
`accent-foreground`	#ffffff	#0c1722
`destructive`	#b62020	#e25050
`destructive-foreground`	#ffffff	#0c1722
`success`	#1c725d	#59cfb1
`success-foreground`	#ffffff	#0f2419
`warning`	#9c6810	#e7ba50
`warning-foreground`	#ffffff	#291c0a
`info`	#1773b6	#63bfee
`info-foreground`	#ffffff	#0d1a26
`border`	#cfdbe3	#2c3e4e
`input`	#cfdbe3	#2c3e4e
`ring`	#1268a5	#4cbaf0

In use — light

Card title Tag

Muted description text on the card surface.

Action

Sunset Coral

sunset-coral

Warm coral-and-peach sunset, friendly and inviting

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs sunset-coral --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs sunset-coral --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs sunset-coral --target json --out design-tokens.json

token	light	dark
`background`	#fdf9f7	#1b100d
`foreground`	#321b15	#f8f1ed
`card`	#ffffff	#281915
`card-foreground`	#321b15	#f8f1ed
`popover`	#ffffff	#281915
`popover-foreground`	#321b15	#f8f1ed
`primary`	#c9391d	#f67f5a
`primary-foreground`	#ffffff	#24130f
`secondary`	#f7e8de	#46312a
`secondary-foreground`	#51291f	#f8f1ed
`muted`	#f4e9e1	#382924
`muted-foreground`	#7d5a50	#cfb5a5
`accent`	#8f3db7	#cf85e9
`accent-foreground`	#ffffff	#24130f
`destructive`	#b81e1e	#e45858
`destructive-foreground`	#ffffff	#24130f
`success`	#25743d	#72cb8c
`success-foreground`	#ffffff	#0f2419
`warning`	#ad560b	#ee9e4f
`warning-foreground`	#ffffff	#291c0a
`info`	#1f77a3	#67bbe0
`info-foreground`	#ffffff	#0d1a26
`border`	#e8d8cf	#513a34
`input`	#e8d8cf	#513a34
`ring`	#c9391d	#f67f5a

In use — light

Card title Tag

Muted description text on the card surface.

Action

Tech Neon

tech-neon

Cyberpunk dashboard, neon cyan on near-black

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs tech-neon --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs tech-neon --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs tech-neon --target json --out design-tokens.json

token	light	dark
`background`	#ffffff	#060f13
`foreground`	#121c21	#ebf4f4
`card`	#ffffff	#0d1a21
`card-foreground`	#121c21	#ebf4f4
`popover`	#ffffff	#0d1a21
`popover-foreground`	#121c21	#ebf4f4
`primary`	#077988	#25e9f4
`primary-foreground`	#ffffff	#081217
`secondary`	#eaf3f5	#1e343e
`secondary-foreground`	#123e49	#ebf4f4
`muted`	#ebf3f4	#1a2b32
`muted-foreground`	#53666f	#a6c6ca
`accent`	#ca179d	#fb60d4
`accent-foreground`	#ffffff	#081217
`destructive`	#c31d1d	#e75656
`destructive-foreground`	#ffffff	#081217
`success`	#0e8349	#42f099
`success-foreground`	#ffffff	#0a1f18
`warning`	#986b04	#facc42
`warning-foreground`	#ffffff	#231906
`info`	#087e96	#47def5
`info-foreground`	#ffffff	#081b21
`border`	#d3e0e4	#263f4a
`input`	#d3e0e4	#263f4a
`ring`	#077988	#25e9f4

In use — light

Card title Tag

Muted description text on the card surface.

Action

Vibrant SaaS

vibrant-saas

Energetic violet startup, playful and modern

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs vibrant-saas --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs vibrant-saas --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs vibrant-saas --target json --out design-tokens.json

token	light	dark
`background`	#ffffff	#120d1b
`foreground`	#1c1628	#f5f2f8
`card`	#ffffff	#1b1528
`card-foreground`	#1c1628	#f5f2f8
`popover`	#ffffff	#1b1528
`popover-foreground`	#1c1628	#f5f2f8
`primary`	#6121ce	#a97bf4
`primary-foreground`	#ffffff	#160f24
`secondary`	#f1edf7	#342a46
`secondary-foreground`	#372060	#f5f2f8
`muted`	#f2eef6	#2b2438
`muted-foreground`	#615a72	#b6abc5
`accent`	#d11a82	#f472bb
`accent-foreground`	#ffffff	#160f24
`destructive`	#c31d1d	#e45858
`destructive-foreground`	#ffffff	#160f24
`success`	#1b7e4c	#5ed499
`success-foreground`	#ffffff	#0f2419
`warning`	#9e680a	#eebe4f
`warning-foreground`	#ffffff	#291c0a
`info`	#1c49c4	#6e94ed
`info-foreground`	#ffffff	#0d1a26
`border`	#dfd9e8	#3e3451
`input`	#dfd9e8	#3e3451
`ring`	#6121ce	#a97bf4

In use — light

Card title Tag

Muted description text on the card surface.

Action

Warm Editorial

warm-editorial

Cozy magazine reading, warm paper and terracotta

Light

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Dark

Aa Heading

Muted body text on the surface.

primary

secondary

accent

success

warning

info

destructive

muted

border

Tokens & usage

# apply this palette to a Next.js landing
node bin/apply-palette.mjs warm-editorial --target web --out app/globals.css

# Android Compose theme
node bin/apply-palette.mjs warm-editorial --target android --out app/src/main/.../ui/theme/

# raw tokens
node bin/apply-palette.mjs warm-editorial --target json --out design-tokens.json

token	light	dark
`background`	#fbf8f3	#1c1611
`foreground`	#2e2219	#f4efe7
`card`	#fefdfb	#29201a
`card-foreground`	#2e2219	#f4efe7
`popover`	#fefdfb	#29201a
`popover-foreground`	#2e2219	#f4efe7
`primary`	#ad451f	#ec7f51
`primary-foreground`	#fdfbf7	#211812
`secondary`	#f1eadf	#42372e
`secondary-foreground`	#452f21	#f4efe7
`muted`	#f0eae0	#382f29
`muted-foreground`	#725f4f	#c7bba8
`accent`	#2d7660	#59c0a1
`accent-foreground`	#fdfbf7	#211812
`destructive`	#b62a20	#e46258
`destructive-foreground`	#fdfbf7	#211812
`success`	#267339	#72ca88
`success-foreground`	#ffffff	#0f2419
`warning`	#aa5c0e	#eaa653
`warning-foreground`	#ffffff	#291c0a
`info`	#27749b	#6cb9da
`info-foreground`	#ffffff	#0d1a26
`border`	#e2d8cb	#4d4138
`input`	#e2d8cb	#4d4138
`ring`	#ad451f	#ec7f51

In use — light

Card title Tag

Muted description text on the card surface.

Action

05Typography (12 presets)

Font pairing presets for headings, body, and monospace. Apply via apply-typography. Live samples rendered in each preset's actual fonts.

Shared type scale

xs0.75remSample

sm0.875remSample

base1remSample

lg1.125remSample

xl1.25remSample

2xl1.5remSample

3xl1.875remSample

4xl2.25remSample

5xl3remSample

6xl3.75remSample

7xl4.5remSample

Bold Display

bold-display

Heavy condensed display headings with a calm neutral body.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Anton · Body: Inter · Mono: Space Mono

Classic

classic

Traditional book serifs for a timeless, literary feel.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Libre Baskerville · Body: Lora · Mono: IBM Plex Mono

Clean Corporate

clean-corporate

Single neutral sans across headings and body for SaaS UIs.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Inter · Body: Inter · Mono: JetBrains Mono

Editorial Serif

editorial-serif

High-contrast display serif paired with a readable text serif.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Playfair Display · Body: Source Serif 4 · Mono: IBM Plex Mono

Elegant Contrast

elegant-contrast

Elegant display serif headings over a crisp neutral body.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Cormorant Garamond · Body: Inter · Mono: IBM Plex Mono

Friendly Rounded

friendly-rounded

Warm rounded headings with a soft, approachable body.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Fredoka · Body: Nunito · Mono: Fira Code

Geometric Sans

geometric-sans

Clean geometric headings with a neutral, highly legible body.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Poppins · Body: Inter · Mono: JetBrains Mono

Humanist

humanist

Humanist sans pairing that reads warm and natural.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Work Sans · Body: Source Sans 3 · Mono: Fira Code

Modern Tech

modern-tech

Distinctive grotesque headings for product and tech surfaces.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Space Grotesk · Body: Inter · Mono: Space Mono

Neo Grotesque

neo-grotesque

Modern neo-grotesque headings with a neutral body.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Manrope · Body: Inter · Mono: JetBrains Mono

Tech Mono Accent

tech-mono-accent

IBM Plex system with a monospace accent for technical brands.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: IBM Plex Sans · Body: IBM Plex Sans · Mono: IBM Plex Mono

Warm Editorial

warm-editorial

Soft modern serif headings with a friendly humanist body.

Ag — The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

const tokens = "design";

Heading: Fraunces · Body: Nunito Sans · Mono: IBM Plex Mono

06Images (11 moods)

Curated Unsplash image sets per mood and role. Download locally via assets apply <mood>. Thumbnails below are Unsplash previews.

corporate-dark

Hero Background

allPhoto Bangkok

Road Trip with Raj

Card

Samuel Scalzo

Anthony Fomin

Section Background

Codioful (Formerly Gradienta)

Pawel Czerwinski

fresh-green

Hero Background

Bernardo Lorena Ponte

Rodion Kutsaiev

Card

Josefin

Bozhin Karaivanov

Section Background

Runze Shi

Oliver Guhr

luxury-gold

Hero Background

Katie Harp

Card

Olga Thelavart

Katie Harp

Section Background

Rick Rothenberg

Katie Harp

minimal-light

Hero Background

Joel Filipe

Lim Wu

Card

NordWood Themes

Section Background

Iklas

monochrome

Hero Background

Redd Francisco

Rufat Mammadov

Card

Esther Jiao

Flow Clark

Section Background

Mockaroon

Peter Gargiulo

neutral-slate

Hero Background

Rubén García

Bhavya Kashyap

Card

Martin Adams

Luis de Leon

Section Background

Pascal Meier

Frederico Machado

ocean-blue

Hero Background

Hamdhulla Shakeeb

Michael Olsen

Card

Nattu Adnan

Section Background

Thomas Vimare

manu schwendener

sunset-coral

Hero Background

Lucas George Wendt

Sylvain Cleymans

Card

Veerle Contant

Wolfgang Hasselmann

Section Background

Luke Chesser

Chris Appano

tech-neon

Hero Background

Hiep Duong

Daniam Chou

Card

Madeline Lickteig

Ash Edmonds

Section Background

Pawel Czerwinski

Daniel Falcão

vibrant-saas

Hero Background

Luke Chesser

Oliver Guhr

Card

Luke Chesser

Sincerely Media

Section Background

Pawel Czerwinski

Maxim Berg

warm-editorial

Hero Background

iam_os

Mike Von

Card

Jez Timms

Donald Giannatti

Section Background

Plufow Le Studio

Kim R-K

07Icons (63 UI across 3 sets · 8 brand)

Icon size scale

xs 16px

sm 20px

md 24px

lg 32px

xl 40px

UI icon set comparison 3 sets · same 21 concepts

All icons render in currentColor — they inherit the page text color. Use --icon-size-* tokens for sizing. Choose one set as your project default; swap by changing the import path.

Iconoir is the project default icon set. Phosphor & Solar are available alternatives — swap by changing your import path.

Iconoir Default

Clean outline strokes

MIT / free

arrow-right

bell

calendar

check

download

edit

eye

heart

home

lock

mail

moon

plus

settings

star

sun

trash

user

Phosphor

Dual-tone depth

MIT / free

arrow-right

bell

calendar

check

download

edit

eye

heart

home

lock

mail

moon

plus

settings

star

sun

trash

user

Solar

Bold dual-tone fills

MIT / free

arrow-right

bell

calendar

check

download

edit

eye

heart

home

lock

mail

moon

plus

settings

star

sun

trash

user

Brand logos

cloudflare

github

kotlin

nestjs

react

tailwind

typescript

Background patterns

Tileable SVGs using currentColor. Use as CSS background-image or inline img.

chevron

circles

circuit

concentric-circles

crosshatch

dashes

diagonal-lines

diagonal-stripes

dot-grid

dots-large

graph-paper

hexagons

isometric

line-grid

noise

plus-signs

scales

squares

topographic

triangles

waves

zigzag

08Foundation (layout · effects · interaction · gradients · animations)

Z-index scale

Token	Value
`--z-hide`	-1
`--z-base`	0
`--z-dropdown`	1000
`--z-sticky`	1100
`--z-banner`	1200
`--z-overlay`	1300
`--z-modal`	1400
`--z-popover`	1500
`--z-skipLink`	1600
`--z-toast`	1700
`--z-tooltip`	1800

Breakpoints

Token	Value
`--breakpoint-sm`	640px
`--breakpoint-md`	768px
`--breakpoint-lg`	1024px
`--breakpoint-xl`	1280px
`--breakpoint-2xl`	1536px

Container widths

Token	Value
`--container-sm`	640px
`--container-md`	768px
`--container-lg`	1024px
`--container-xl`	1280px
`--container-2xl`	1536px

Aspect ratios

1 / 1

--aspect-square

16 / 9

--aspect-video

3 / 4

--aspect-portrait

21 / 9

--aspect-wide

Opacity scale

0

5

0.05

10

0.1

20

0.2

40

0.4

60

0.6

80

0.8

100

Blur scale

Each box is a gradient with CSS filter:blur() applied at the token value.

--blur-none

--blur-sm

4px

--blur-md

8px

--blur-lg

12px

--blur-xl

24px

Focus ring

Outline: var(--focus-ring-width) solid var(--ring) — offset: var(--focus-ring-offset)

Gradient vars (ocean-blue palette)

--gradient-brand

--gradient-subtle

--gradient-hero

--gradient-mesh

State-layer opacities

Token	Value	Preview
`--state-hover`	0.08
`--state-press`	0.12
`--state-disabled`	0.5
`--state-dragged`	0.16

Animations css/animations.css

Utility classes using --duration-base and --ease-out. Full prefers-reduced-motion suppression included.

.animate-fade-in

.animate-slide-up

.animate-scale-in

.animate-pulse

.animate-spin

All animations are suppressed when prefers-reduced-motion: reduce is set.

09States & Recipes (skeleton · spinner · empty · error · success · interaction)

Live demos using css/recipes.css. All states use only CSS custom properties — they respond to any palette. Reduced-motion is respected throughout.

Loading — skeleton + spinner

Card skeleton

Spinner variants

1rem (default)

1.5rem

Classes used

.skeleton { background:var(--muted); }
.skeleton::after { shimmer animation overlay }
.skeleton-text:last-child { width:60% }
.skeleton-circle { border-radius:50% }
.spinner { border-top-color:var(--primary) }

Empty state

No results yet

Try a different search term or create a new entry to get started.

Error state

Something went wrong

We couldn't complete your request. Please check your connection and try again.

Success state

Saved! Your changes have been saved successfully.

Interaction states — same button, different states

default

:hover sim

:active sim

:focus-visible sim

.is-disabled

Live interactive button — click and use keyboard Tab/Enter:

Import order: <palette>.css → base.css → animations.css → recipes.css. See packages/tokens/RECIPES.md for full copy-paste examples.

01 Palettes 02 Type 07 Icons 08 Foundation 09 States 10 Components 11 Charts

10UI Component Catalog

All components use --lp-* tokens — switch the palette above to re-theme everything instantly.

Buttons

Form Controls

Default input

Focus ring (click me)

Disabled

Error state

Invalid email address

Select

Textarea

Checkbox on Checkbox off Radio A Radio B Toggle

Badges / Chips

Primary Secondary Muted Success Warning Info Destructive

Alerts

Info

This is an informational message for the user.

Success

Your changes have been saved successfully.

Warning

This action cannot be undone. Proceed with caution.

Error

Something went wrong. Please try again later.

Tabs

Overview content — a brief summary of this item's key properties and status.

Tooltip

This is a tooltip!

Progress

Upload progress70%

Loading…

Avatars

Card Variants

Plain Card

A simple card with title and body text. Used for basic content grouping.

Image Card

Card with a color-block image placeholder.

Action Card

Card with footer action buttons for primary interactions.

Table

Name	Status	Role	Amount
Alice Brown	Active	Admin	$4,200
Bob Chen	Pending	Editor	$1,850
Clara Diaz	Inactive	Viewer	$720

Pagination & Breadcrumb

Home › Products › Details

Stat / KPI Cards

Revenue

$48,200

▲ +12%

Users

1,840

▲ +5%

Conversion

3.2%

▼ -0.4%

Pricing Card

Pro Popular

$49/mo

Unlimited projects
Priority support
Custom domains
Analytics dashboard

01 Palettes 02 Type 07 Icons 10 Components 11 Charts

11Chart Color Tokens

Chart colors come from each palette's chart-1..5 tokens — switch the palette above to re-theme all charts.

Bar Chart — Weekly Activity

Area Chart — Monthly Trends

Series ASeries BSeries C

Donut Chart — Distribution

Alpha 28%

Beta 22%

Gamma 20%

Delta 18%

Epsilon 12%

Sparkline in KPI Card

Revenue

$12,450

▲ +8.3%