Color

The palettes, and how color is used in a page.

Each palette sets its own grays, not just an accent hue. That is deliberate: swapping only the accent on one neutral ramp is exactly what makes generated sites feel like the same site in different shirts. A warm cream ramp and a cold slate ramp read as different businesses even with identical layout.

You get one accent. It marks the most important action in a section and nothing else. A second accent is how a page stops having a hierarchy.

Warm paper

light

Off-white and ink, with a clay accent. Reads as printed matter rather than software.

Primary action Secondary Quiet text

surface-base #FAF8F5

surface-raised #FFFFFF

surface-sunken #F1EDE7

border-default #D8D0C4

text-primary #1F1B16

text-secondary #5C534A

accent #B4532A

success #3F7A52

warning #9A6B15

danger #A8402F

Deep forest

dark

Near-black with a green cast and a pale sage accent. Calm, natural, expensive.

Primary action Secondary Quiet text

surface-base #0B0F0D

surface-raised #141A17

surface-sunken #070A09

border-default #2A362F

text-primary #E8EDE9

text-secondary #9BAAA1

accent #9DC08B

success #78B08C

warning #C9A159

danger #C97B6E

Ink and cream

light

Almost no color at all. Black type on cream, one red for emphasis.

Primary action Secondary Quiet text

surface-base #FDFCF8

surface-raised #FFFFFF

surface-sunken #F2F0EA

border-default #CFCBBF

text-primary #100F0D

text-secondary #4A473F

accent #C02F1D

success #2E6B45

warning #8A5A0B

danger #C02F1D

Midnight slate

dark

Cool blue-gray with an amber accent. Technical, but warmer than pure gray.

Primary action Secondary Quiet text

surface-base #0D1117

surface-raised #161B22

surface-sunken #090C10

border-default #2D353F

text-primary #E6EDF3

text-secondary #9AA7B4

accent #E3A008

success #57AB7A

warning #E3A008

danger #E5534B

Clinical white

light

True white, crisp hairlines, a single confident blue. Precise and unsentimental.

Primary action Secondary Quiet text

surface-base #FFFFFF

surface-raised #FFFFFF

surface-sunken #F4F6F8

border-default #D5DCE3

text-primary #0F1720

text-secondary #4C5866

accent #1F5FD6

success #1C7C4A

warning #946400

danger #C4302B

Terracotta and sand

light

Sun-baked earth tones. Hospitable and tactile — food, travel, wellbeing.

Primary action Secondary Quiet text

surface-base #FBF4EC

surface-raised #FFFCF8

surface-sunken #F2E6D8

border-default #D9C3A9

text-primary #3B2A1E

text-secondary #6E5745

accent #C2603C

success #5C7F52

warning #A9731C

danger #AE4334

Monochrome

light

Greyscale only, no accent hue. Contrast and type do all the work.

Primary action Secondary Quiet text

surface-base #FFFFFF

surface-raised #FFFFFF

surface-sunken #F5F5F5

border-default #D4D4D4

text-primary #171717

text-secondary #525252

accent #171717

success #2F6B43

warning #7A5A12

danger #A33028

Plum dusk

dark

Aubergine shadows with a warm rose accent. Atmospheric, for arts and nightlife.

Primary action Secondary Quiet text

surface-base #120E16

surface-raised #1B151F

surface-sunken #0C090F

border-default #372C3D

text-primary #F0EAF2

text-secondary #A99CAF

accent #E5849B

success #7FB08E

warning #D2A65E

danger #D9736F

High voltage

dark

Flat black with one electric hue. Loud on purpose — statements and launches.

Primary action Secondary Quiet text

surface-base #000000

surface-raised #0E0E0E

surface-sunken #000000

border-default #2B2B2B

text-primary #FFFFFF

text-secondary #A3A3A3

accent #E8FF59

success #5DD39E

warning #E8FF59

danger #FF6B5D

Nordic mist

light

Cool pale gray-blue with a muted teal. Quiet, orderly, Scandinavian.

Primary action Secondary Quiet text

surface-base #F7F9FA

surface-raised #FFFFFF

surface-sunken #EDF1F3

border-default #CCD6DB

text-primary #1B2429

text-secondary #4E5D65

accent #2C7A7B

success #2F7D52

warning #8C6416

danger #A93F35

Two rules worth knowing

Contrast is not a preference: Body text needs 4.5 times more contrast than its background, large text 3 times. Gray-on-gray looks refined on your monitor and is unreadable in sunlight or with older eyes. Every palette here already meets it — this matters if you override a color by hand.
Never carry meaning in color alone: Around one man in twelve cannot reliably separate red from green. A red border saying "invalid" needs words beside it.

Next Type →