California Design System

Experimental palette

Not married to the specific colors here. I'm more interested in exploring systems approaches to color.

This experiment limits the number of colors in the palette to only 7. Light and dark versions of each color are provided.

The goal here is to limit the number of colors a designer needs to think about, while still providing flexibility.

In common usage, these colors are divided into:

Finally, while I didn't do any fine tuning on the colors, I did generate all of the palettes on the same lightness curve using OKLCH. It's possible to use math to simplify this palette (by dynamically adding alpha or lightness in code). But I figured I'd just do the whole thing to get nicer hue/chroma for each tint/shade.

coastal

Light tints CTA Dark shades coastal-1-dark coastal-2-dark coastal-3-dark coastal-4-dark coastal-5-dark coastal-6-dark coastal-7-dark coastal-1 coastal-2 coastal-3 coastal-4 coastal-5 coastal-6 coastal-7 coastal-1-light coastal-2-light coastal-3-light coastal-4-light coastal-5-light coastal-6-light coastal-7-light Light/dark example usage coastal-surface-1 coastal-surface-2 coastal-surface-3 coastal-cta coastal-line-3 coastal-line-2 coastal-line-1

desert

Light tints CTA Dark shades desert-1-dark desert-2-dark desert-3-dark desert-4-dark desert-5-dark desert-6-dark desert-7-dark desert-1 desert-2 desert-3 desert-4 desert-5 desert-6 desert-7 desert-1-light desert-2-light desert-3-light desert-4-light desert-5-light desert-6-light desert-7-light Light/dark example usage desert-surface-1 desert-surface-2 desert-surface-3 desert-cta desert-line-3 desert-line-2 desert-line-1

mountain

Light tints CTA Dark shades mountain-1-dark mountain-2-dark mountain-3-dark mountain-4-dark mountain-5-dark mountain-6-dark mountain-7-dark mountain-1 mountain-2 mountain-3 mountain-4 mountain-5 mountain-6 mountain-7 mountain-1-light mountain-2-light mountain-3-light mountain-4-light mountain-5-light mountain-6-light mountain-7-light Light/dark example usage mountain-surface-1 mountain-surface-2 mountain-surface-3 mountain-cta mountain-line-3 mountain-line-2 mountain-line-1

valley

Light tints CTA Dark shades valley-1-dark valley-2-dark valley-3-dark valley-4-dark valley-5-dark valley-6-dark valley-7-dark valley-1 valley-2 valley-3 valley-4 valley-5 valley-6 valley-7 valley-1-light valley-2-light valley-3-light valley-4-light valley-5-light valley-6-light valley-7-light Light/dark example usage valley-surface-1 valley-surface-2 valley-surface-3 valley-cta valley-line-3 valley-line-2 valley-line-1

gray-cool

Light tints CTA Dark shades gray-cool-1-dark gray-cool-2-dark gray-cool-3-dark gray-cool-4-dark gray-cool-5-dark gray-cool-6-dark gray-cool-7-dark gray-cool-1 gray-cool-2 gray-cool-3 gray-cool-4 gray-cool-5 gray-cool-6 gray-cool-7 gray-cool-1-light gray-cool-2-light gray-cool-3-light gray-cool-4-light gray-cool-5-light gray-cool-6-light gray-cool-7-light Light/dark example usage gray-cool-surface-1 gray-cool-surface-2 gray-cool-surface-3 gray-cool-cta gray-cool-line-3 gray-cool-line-2 gray-cool-line-1

gray-warm

Light tints CTA Dark shades gray-warm-1-dark gray-warm-2-dark gray-warm-3-dark gray-warm-4-dark gray-warm-5-dark gray-warm-6-dark gray-warm-7-dark gray-warm-1 gray-warm-2 gray-warm-3 gray-warm-4 gray-warm-5 gray-warm-6 gray-warm-7 gray-warm-1-light gray-warm-2-light gray-warm-3-light gray-warm-4-light gray-warm-5-light gray-warm-6-light gray-warm-7-light Light/dark example usage gray-warm-surface-1 gray-warm-surface-2 gray-warm-surface-3 gray-warm-cta gray-warm-line-3 gray-warm-line-2 gray-warm-line-1

danger

Light tints CTA Dark shades danger-1-dark danger-2-dark danger-3-dark danger-4-dark danger-5-dark danger-6-dark danger-7-dark danger-1 danger-2 danger-3 danger-4 danger-5 danger-6 danger-7 danger-1-light danger-2-light danger-3-light danger-4-light danger-5-light danger-6-light danger-7-light Light/dark example usage danger-surface-1 danger-surface-2 danger-surface-3 danger-cta danger-line-3 danger-line-2 danger-line-1

ongoing

Light tints CTA Dark shades ongoing-1-dark ongoing-2-dark ongoing-3-dark ongoing-4-dark ongoing-5-dark ongoing-6-dark ongoing-7-dark ongoing-1 ongoing-2 ongoing-3 ongoing-4 ongoing-5 ongoing-6 ongoing-7 ongoing-1-light ongoing-2-light ongoing-3-light ongoing-4-light ongoing-5-light ongoing-6-light ongoing-7-light Light/dark example usage ongoing-surface-1 ongoing-surface-2 ongoing-surface-3 ongoing-cta ongoing-line-3 ongoing-line-2 ongoing-line-1

warning

Light tints CTA Dark shades warning-1-dark warning-2-dark warning-3-dark warning-4-dark warning-5-dark warning-6-dark warning-7-dark warning-1 warning-2 warning-3 warning-4 warning-5 warning-6 warning-7 warning-1-light warning-2-light warning-3-light warning-4-light warning-5-light warning-6-light warning-7-light Light/dark example usage warning-surface-1 warning-surface-2 warning-surface-3 warning-cta warning-line-3 warning-line-2 warning-line-1

success

Light tints CTA Dark shades success-1-dark success-2-dark success-3-dark success-4-dark success-5-dark success-6-dark success-7-dark success-1 success-2 success-3 success-4 success-5 success-6 success-7 success-1-light success-2-light success-3-light success-4-light success-5-light success-6-light success-7-light Light/dark example usage success-surface-1 success-surface-2 success-surface-3 success-cta success-line-3 success-line-2 success-line-1

info

Light tints CTA Dark shades info-1-dark info-2-dark info-3-dark info-4-dark info-5-dark info-6-dark info-7-dark info-1 info-2 info-3 info-4 info-5 info-6 info-7 info-1-light info-2-light info-3-light info-4-light info-5-light info-6-light info-7-light Light/dark example usage info-surface-1 info-surface-2 info-surface-3 info-cta info-line-3 info-line-2 info-line-1