Writing about design

Where to start

Two of these change how people work rather than just explaining something. The WCAG contrast ratio turns an aesthetic argument into a number anyone can check, and px against rem against em settles a decision that silently determines whether your site respects someone's browser font size.

After those, hex, RGB and HSL is the foundation the rest of the colour pieces build on, and it is short.

What these pieces have in common

Every value in a stylesheet is a decision someone made about a trade-off, and most of them have a default that quietly wins when nobody decides. A unit chooses between your control and the reader's. A colour space chooses between how a value is stored and how it is perceived. A contrast ratio chooses between the look you wanted and the people who can read it.

The writing here is about what each value actually controls, including the cases where the honest answer is that it does not matter. Border radius and box shadow are mostly syntax. sRGB against Display P3 and choosing colours for dark mode are not, and both of them catch people who assumed a palette would simply carry over.

Frequently asked questions

Should I use px, rem or em in CSS?

Use rem for font sizes and most spacing, because it scales with the reader’s browser setting and someone who enlarged their default text gets what they asked for. Use em when a value should scale relative to the element’s own font size, such as padding inside a button. Use px for things that are genuinely fixed, like a one pixel border.

Why do my colours look duller after I export a screenshot?

Because the original was captured in a wide gamut such as Display P3 and the destination assumed sRGB. The numbers are carried over without the profile that gave them meaning, so saturated colours land inside the smaller space and flatten. Converting deliberately, rather than letting it happen, keeps the intent.

Can I make a dark theme by inverting my light one?

Not successfully. Pure white on pure black causes halation that makes text hard to read, saturated colours appear to glow against a dark background, and every contrast ratio that passed in the light theme has to be measured again. A dark theme is a second palette rather than a transformation of the first.