$ show running-config brand
Brand guide
How Bits & Bricks looks, sounds and is put together. It's flat, honest and a little nerdy, like a well-labelled rack.
01
Name
In text, write Bits & Bricks with spaces around the ampersand. The wordmark is set tight as Bits&Bricks, with both B's in capitals and the ampersand in green. The domain is always lowercase: bitsandbricks.ch. On GitHub the organisation is bitsandbricks-ch.
The person behind it is always Mike Keller. Nicknames and gaming handles stay off this site.
Tagline: I build networks, and the software that runs on them. Short form: One brick at a time.
02
Logo
The mark is a brick wall, which makes it a firewall, with one green RJ45 port set into it. It says what the projects are about: the solid infrastructure (the bricks) and the one way through it (the bits).
Clear space: keep at least one brick's height free around the mark. Minimum size: 16 px for the mark alone, and 20 px next to the wordmark.
do
- Use the files as they are
- Pair the mark with the wordmark on the left
- Use mono versions on photos or printed one-colour
don't
- Add gradients, glows or shadows
- Rotate, skew or redraw the bricks
- Recolour the bricks green, or the port orange
- Add LEDs or cables to the port
- Put it in a shield or a circle
03
Colour
Two working colours, used in balance: terminal green for buttons and for what is live (LEDs, the port, the core of the network map), and brick orange for links, prompts, labels and the bricks themselves. Headings get one orange and one green brick underneath. Everything else is ink and paper. Every text colour passes WCAG AA on its background.
#43a868 dark
buttons, LEDs, the port
#f27a4f dark
links, prompts, bricks
text on light
dark page #111111
light page
text on dark #ededed
#b3b3b3 dark
body copy
#2e2e2e dark
borders, rules
Hubra and Labdex keep their own violet icons. That's intentional: they're products, and Bits & Bricks is the rack they sit in.
04
Type
Both fonts are open source (SIL OFL) and served from the site itself, with no requests to font services. Headings are always Archivo at 125% width. Mono is for things a machine would say, never for long paragraphs.
05
Voice
Write like a good network engineer writes a change ticket: in the first person, plainly, specific, and short. Humour comes from the CLI framing, not from jokes in the copy.
do
- "Labdex generates DNS, firewall aliases and an Ansible inventory."
- Name real things: OPNsense, VLANs, Swiss QR bills
- Use CLI labels for section headings:
$ show chassis
don't
- "Revolutionising infrastructure with seamless synergy"
- Exclamation marks and emoji
- Fake commands that wouldn't parse
06
Building blocks
The site is made of a few parts taken from real network gear. Reuse them before inventing new ones.
- Prompt: a mono line above each heading, such as
$ show version, with one orange and one green brick under the heading. - Network map: nodes are bricks, links carry small moving packets, and the core is green.
- Rack unit: one per project, with ears, PWR/LINK/ACT LEDs and features shown as labelled ports.
- Console: key-value output for facts, like
show version. - Traceroute: numbered hops for outbound links.
Surfaces: flat colour, 1 px borders, 4 to 8 px corners. No gradients, glows, blur or drop shadows. Motion is limited to blinking LEDs and packets, and it stops when the visitor prefers reduced motion.