- 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 unapologetically square and blocky. There aren’t many circles or curves here.
- Follow good accessibility practices. Use contrasting colours, write good copy.
- That’s basically it. I’m not a Fortune 500 company or anything.
Logo
As of July 2026, the site for this logo and related projects is the Ash tail. This has been adapted, with permission, from an emoji originally created by Caius Nocturne.
Given these are quite new (as of writing) they may undergo some further revisions and refinement. Watch this space. Or don’t. I’m not your boss.
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
About page icons
Detailed icons used on the about page to illustrate each section. These adapt their colours according to the current theme of the page. Designed for use at 80×80 pixels.
Utility icons
Some custom made icons for generic uses. These are all designed to be used at 20×20 pixels.