Theme

We're big nerds about this

Logos

Colors

Base Colors

background

background-2

on-background

background-cta

on-background-cta

Color Tokens

Red

red-1

red-2

red-3

red-4

red-5

red-6

red-7

red-8

red-9

red-10

red-11

red-12

Orange

orange-1

orange-2

orange-3

orange-4

orange-5

orange-6

orange-7

orange-8

orange-9

orange-10

orange-11

orange-12

Yellow

yellow-1

yellow-2

yellow-3

yellow-4

yellow-5

yellow-6

yellow-7

yellow-8

yellow-9

yellow-10

yellow-11

yellow-12

Green

green-1

green-2

green-3

green-4

green-5

green-6

green-7

green-8

green-9

green-10

green-11

green-12

Blue

blue-1

blue-2

blue-3

blue-4

blue-5

blue-6

blue-7

blue-8

blue-9

blue-10

blue-11

blue-12

Purple

purple-1

purple-2

purple-3

purple-4

purple-5

purple-6

purple-7

purple-8

purple-9

purple-10

purple-11

purple-12

Gray

gray-1

gray-2

gray-3

gray-4

gray-5

gray-6

gray-7

gray-8

gray-9

gray-10

gray-11

gray-12

Typography

Display

Gelasio 600 · compact 2.125rem/2.5rem · desktop 2.5rem/2.75rem

Page title

Gelasio 600 · compact 2rem/2.375rem · desktop 2.25rem/2.625rem

Entity title

Gelasio 600 · compact 1.75rem/2.125rem · desktop 2rem/2.375rem

Section title

Gelasio 600 · 1.5rem/1.875rem

Card title

Gelasio 600 · 1.25rem/1.625rem

Group title

Work Sans 600 · 1rem/1.5rem

Body

Work Sans 500 · 1rem/1.5rem

Body compact

Work Sans 500 · 0.9375rem/1.375rem

Support

Work Sans 500 · 0.875rem/1.25rem

Control

Work Sans 600 · 0.875rem/1.25rem

Input

Work Sans 500 · 1rem/1.5rem

Field label

Work Sans 600 · 0.8125rem/1.125rem

Product eyebrow

Work Sans 700 · 0.75rem/1rem · 0.08em tracking

Paragraph

Legacy alias · Work Sans 500 · 1rem/1.5

Paragraph Bold

Legacy alias · Work Sans 600 · 1rem/1.5

Smol

Legacy alias · Work Sans 500 · 0.875rem/1.25rem

Eyebrow

Legacy alias · Work Sans 700 · 0.75rem/1rem · 0.08em tracking

Rainbows

Cool Rainbow

blue-9: var(--blue-9)

green-9: var(--green-9)

purple-9: var(--purple-9)

Warm Rainbow

red-9: var(--red-9)

orange-9: var(--orange-9)

yellow-9: var(--yellow-9)

Full Rainbow

red-9: var(--red-9)

orange-9: var(--orange-9)

yellow-9: var(--yellow-9)

green-9: var(--green-9)

blue-9: var(--blue-9)

purple-9: var(--purple-9)

Glyphs

Twelve single-ink brand glyphs for the ideas Lucide has no word for: 24px grid, 1.5px stroke, currentColor. Each card shows the glyph at 48px, then at 24, 20 and 16px beside a Lucide icon at the same stroke.

referral
invite-code
vouch
evidence
match
chippy
scout
inbound
odds
trust-web
head-start
arc

Spot icons

Six 64px marketing icons: the glyph inside the logo's rainbow ring, shipped as light and dark pairs. Decorative only, one per section, never below 64px.

referral
match
inbound
vouch
odds
head-start