beeps’ brand

A lot of famous individuals are well known for always wearing the same clothes. Usually they credit this to reducing “decision fatigue”—not having to choose how to dress every day leaves time to mull over the more important decisions.

I don’t wear exactly the same clothes every day, but when it comes to building random pages and side projects, I usually spend more time thinking about how it looks than how it works. Consequentially, since late-2021, I’ve tried to cut down on decision fatigue by making my personal projects follow the same set of basic design rules.

---

General principles

• Be square and blocky. There aren’t many circles or curves here.
• Follow good accessibility practices. Use contrasting colours, write good copy.

Colours

I maintain a pretty limited palette of base colours. Shades and tints of each are allowed.

Always aim to achieve at least a 4.5:1 contrast ratio between text and background colours, in accordance with the WCAG Level AA criterion.

Usage	Dark	Light
Text	#ffffff	#334139
Supporting text	#d4d4d7	#586b60
Accent text and links	#00fa17	#12803b
Hovered and visited links	#12c873	#2baf5d
Canvas	#2a2536	#ffffff
Surface	#3d364f	#f2f3f2
Page furniture	#786999	#786999

Typography

Space Grotesk is used for the majority of text. As a variable font, it’s available in all widths from bold (700) to thin (300).

We choose to go to the Moon. We choose to go to the Moon... We choose to go to the Moon in this decade and do the other things, not because they are easy, but because they are hard; because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one we intend to win, and the others, too.

Space Mono is used for code snippets and as a stylistic alternative for small amounts of text. It’s used in bold (700) and regular (400) weights.

Robat icon

This isn’t used that much, but in places where a logo or icon is useful, there’s an icon.