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 moodsWCAG AA verifiedOKLCH · Tailwind v40 deps

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

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

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

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

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

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

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

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

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

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

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

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