- Last updated
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 unaplogetically 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
|
#4b4b4b
|
| Supporting text |
#f5f5f5
|
#6d6d6e
|
| Accent text and links |
#0ff10f
|
#578057
|
| Hovered and visited links |
#0bc148
|
#6c9679
|
| Canvas |
#252134
|
#f9f9f9
|
| Surface |
#302750
|
#ffffff
|
| Page furniture |
#7c56fc
|
#786999
|
Typography
Hubot Sans is used for the majority of text.
As a variable font, it’s available in all weights from heavy (900) to light (200), can be compressed and expanded from 75% to 125%, and has real italics, allowing for a wide variety of expression.
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.
Code samples are set in the device’s default monospace font.
Iconography
Robat icon
The logo of the website (and pretty much just this website). This has been a symbol I’ve used for longer than you’d expect, since around 2010.
Utility icons
Some custom made icons for custom made uses.