Module 2 · Your brand

Colors and fonts

Pick an accessible palette with light and dark versions and a font pair, then map them onto the template.

8 min

Every site template uses the same seven colors, set once in src/content/brand.json and used everywhere. The site turns them into CSS tokens (accentFg becomes --accent-fg), so dark mode, the browser bar and the share image all follow them. Each template comes with its own palette in those seven. Your job here is to choose your own seven, twice: once for light mode and once for dark mode. Here is what each one is for.

This lesson is part of the course

Get every lesson, every screen and every prompt, plus the Build Kit.

Already bought it? Sign in with the email you paid with.