The official book of California Stylesheets


(and that's okay)

It's a book about writing CSS.
And not writing CSS.

You suck at color

Every second spent in a hex color picker is lost forever. It is over 99% design fussing, in service to nobody but the fussing designer.

The color dropper tool with a quick copy/paste is a little bit better. Really though, we should be starting our color process with names, not values.

Colors are flexible concepts. “Cyan” is a light blueish color.

Cyan makes a great palette color. It doesn’t make a great brand color. Your brand color should be a very specific hex value that has been fussed over by a designer. It’s the color you’d go to court over. Or some faceless corporation would go to court with you over, because they trademarked the feelings that color evoked, or that specific wavelength of light, or whatever they’re up to these days.

That court color is called the base color in CASS. It influences how the other colors in the palette will look, in terms of saturation and lightness.

Colors don’t ever truly have a semantic meaning, but this approach imparts “cyan” with its own local meaning for your project. If you get a brighter base color, cyan will be brighter too.

That local color meaning, the name, is preserved even if the base color changes. So the dark cyan and light cyan will still look cyan with any base.

Phew. Has the word “cyan” lost all meaning yet? Cyan. Cyan.

Fix it with CASS

CASS comes with thousands of colors right out of the box. The number is so high because you can combine words in CSS classes to describe colors, like “very dark fuchsia.”

 The adjectives: Bright, light, dark and dim. So you don’t use “green” and “forestgreen,” you use “green” and “dark green.”

On top of that, California Stylesheets supports two adverbs: very and hella. Dark red will be dark, but not as dark as very dark red, which isn’t as dark as hella dark red.

[For anyone not in the know, hella is a Californian slang shortening of “hell of a” and it works like saying “very very”]

There’s another set of helper adjectives which can push the colors in different directions: Cool, neutral and dull.

You can combine the two sets together for things like “bright cool red,” which is, well, a bright cool red.

But it’s not just a bright cool red. It’s a bright cool red that works with your brand color. If you give your whole project a facelift with a new color, all of your “bright cool red” elements will change to fit better with that new color.

Picking colors in this way, with descriptive words instead of a hex color picker, saves tons and tons of time. The colors are right there and self-describing. They don’t need any accompanying hex information. It’s a matter of picking “cool dim cyan” over #335c5c.

Next Chapter: Naming things »

Like the book? Buy it over on Gumroad.

Pay what you want!

The Gumroad version contains a secret chapter that spills the dirt on CSS preprocessors, a tech CASS no longer uses.

California Stylesheets is the awesome CSS file/framework referenced in the book. Get your own California Stylesheet here.

Go to CASS