Set System

Brand

The Monospaced visual identity.

The Monospaced wordmark in white monospaced type beside the checkered pixel logomark, on a brand cyan field
Logo
Logo construction
The logomark alone: a narrow vertical checkerboard of white pixel cells centered on a brand cyan field
Logomark
Logomark animation
The wordmark set between two horizontal checkered strips, white on brand cyan
Emblem
Type specimen of Berkeley Mono on near-black, showing 'Hamburgefonstiv' and the digits zero to nine
Typeface
A sample sentence set in light monospaced type on near-black: 'Execute gzip benchmarks to analyse quick dev proxy flaws before building json.'
Prose typography
A code sample distinguishing easily confused glyphs — capital O, zero, capital I, one, and lowercase l — with arrow and comparison ligatures
Technical typography
The twelve-step cyan ramp as vertical columns, running from near-white through saturated mid teal to near-black
Brand cyan
The logo in near-black on a mid-tone cyan field
Cyan dark pairing
Four logo colorways in quadrants: deep teal on pale cyan, near-black on mid cyan, white on brand cyan, and light cyan on near-black
Cyan logos
The logomark repeated across four side-by-side panels, each pairing a different tone from the cyan ramp with its background
Cyan logomarks
Cyan halftone photograph of a tropical fish in an aquarium
Cyan halftone photograph of an artwork resembling a circuit board
Cyan halftone photograph of a train passing in front of building facades
Cyan halftone photograph of autumnal tree branches
Cyan imagery
Notes

Insights on the craft of design engineering, UI systems and modern front-end development, straight to your inbox.

Hero
A grid of twelve-step ramps for the supporting hues, one hue per row, each running light to dark
Supporting color
A television test card titled Monospaced: a checkerboard surround framing a circular face with color bars, frequency gratings, and grayscale steps
Testcard color application
Halftone photograph of Portuguese tiles in four alternative hues — cyan, magenta, yellow, and neutral quadrants.
Imagery colors
A code sample on dark teal highlighted in the brand palette: gray comments, blue keywords, orange numbers, green strings, and pink and violet accents
Syntax highlighting
Photograph of a laptop sticker-bombed with Monospaced brand stickers
Stickers