Logo
A rounded tile with a keyhole cut through it: a server, locked down. It is one shape in one colour, so it holds up at 16 px and in any medium.
The mark
Use it in black on light backgrounds and in white on dark ones. The keyhole is a hole, so whatever is behind the tile shows through it.
Construction
Drawn on a 64-unit grid. Use the SVG files as they are: never redraw the mark or trace it from a screenshot.
- A
- Tile. 64 × 64 units, corner radius 18. Solid, one colour.
- B
- Keyhole head. A circle 18 across, centred at 32, 27.
- C
- Keyhole stem. 8.4 wide at the neck, 12.6 at the base, base corners rounded 2.6.
- ↕
- Balance. The keyhole is 28 tall with 18 clear above and below, centred on the vertical axis.
- ∅
- One path. Tile and keyhole are a single path with
fill-rule="evenodd". The keyhole never gets a colour of its own.
Clear space and size
Keep a quarter of the tile clear on every side: 16 units when the tile is 64. The mark works down to 16 px. Below 20 px tall, use the mark without the name.
Clear space
Sizes
Mark and name
The name sits to the right of the mark, a quarter of the tile away, in IBM Plex Mono SemiBold. Always lowercase, always with the hyphen.
In an interface
Top bars use a 28 px mark, the name at 16 px and a 10 px gap, as in the setup console.
Versions
Four files cover every case. Pick by the background, not by taste.
logo.svgLight backgrounds: README, docs, slides.logo-dark.svgDark backgrounds and the rack band.logo-mono.svgTakes the text colour. For a shape you already have, like a round avatar.site/favicon.svgSwitches between black and white with the system theme.Misuse
The mark has one shape and one colour. Anything that adds to it makes it someone else's logo.
Colour
A black-and-white brand on cool greys. Colour only carries meaning: a result in the audit or an LED on the rack, never decoration. Click a value to copy it.
Brand pair
These two are the whole brand palette. A mark, a primary button or a headline highlight uses one of them, picked by the background.
Neutrals
Greys with a slight blue cast, from page background to text. Each theme has its own ramp; the token names stay the same.
--ink-3 reaches 4.9:1 on a panel but only 4.3:1 on the light page background. Put small text on --bg in --ink-2 (6.6:1) instead.
Status
The audit's four results. Status colour always comes with the word and an icon, so colour is never the only signal.
Rack and LEDs
The rack palette draws hardware: the cover band, faceplates and terminals. It stays dark in both themes. LEDs appear only here, as small lit dots.
Surfaces and ink
LEDs: what a port accepts
#3BD17F#6FA4FF#F2B13B#4D5967 + ringIn the dark theme the rack goes one step darker: #070B0F, #0E151C, #1F2B37. The closed LED is only 2.4:1 against the plate (2.2:1 in the dark theme), which is why it always has a ring.
Severity in charts
Charts that count findings rank them by lightness, not hue. Badges that state one result use the status colours above.
Typography
Three faces, one job each: Barlow Condensed for headlines and labels, IBM Plex Sans for reading, IBM Plex Mono for anything you type. All three are free on Google Fonts.
Typefaces
Keep the roles apart. A condensed face in a paragraph is hard to read, and a command set in the text face is easy to mistype.
Headlines in Bold, uppercase labels and pills in SemiBold. Short lines only.
Body copy, leads, buttons and the big numbers in stat tiles.
Commands, file paths, settings, chips and the name in the logo.
Type scale
The sizes the setup console uses. Pick from this list before adding a new size.
Emphasis
To stress words in a headline, brighten them and underline them in the same colour: 0.07em thick, 0.14em below. No highlighter blocks, no second hue.
From a fresh server to a panel-ready one, with proof.
Interface
The parts the setup console is built from. Reuse them before you design new ones.
Buttons and links
One primary button per view. On the rack band the primary button turns white.
Pills, chips and labels
Pills state a result. Chips name a value you could type. Eyebrows introduce a block, with the short dash in the accent colour.
Terminal
Commands and their output sit in a dark terminal in both themes. The bar names the host with a green LED. Results use the rack status colours.
$ sudo ./server-audit.sh PASS SSH: password login disabled PASS Firewall: UFW on, incoming denied by default WARN Updates: 3 regular updates pending FAIL Docker vs firewall: ports 80 and 443 bypass UFW 43 PASS · 1 WARN · 1 FAIL
Faceplate
The signature surface: a 1U rack unit with screw ears. Use it to show what a server exposes, port by port, with the LED code from 2.4.
Shape and space
Three radii and an 8-step spacing scale. The logo's corner (18 on 64) is much rounder than any interface radius, so never copy it onto UI.
Radius
cards, terminal
buttons, tiles
tags
pills, chips
Spacing
Voice
Write for someone who has never hardened a server. Simple words, short sentences, and proof instead of promises.
Principles
The same rules apply to the README, the wiki, script output and issues.
Name the change and its effect, in the active voice. "Disables password login", not "password login will be disabled".
One idea per sentence. Plain words over jargon; explain a term the first time it appears.
Point to the audit, the test run or the exact command. Never claim "secure" without saying what was checked.
Write this, not that
Examples from the kind of text the project writes every day.
Names and examples
Public text is read by strangers. Examples must work for anyone and expose no one.
- The project
- server-prep: lowercase, with the hyphen, even at the start of a sentence. Scripts in mono:
server-prep.sh,server-audit.sh,server-preconfig.sh. - Results
- PASS, WARN, FAIL and INFO in capitals, as the audit prints them.
- Panels
- By their own names: Coolify, Dokploy, Openship.
- Examples
- Host
web-01, domainexample.com, addresses from203.0.113.0/24. Never a real client name, domain, address, token or key, in text or in screenshots.
Assets
The logo files, the icons and where the tokens live. Copy the SVG from here, or take the files from the repository.
Logo files
Five SVG files, one shape. Use them as they are. The README and the browser tab load these files; the setup console and this page draw the same path inline. When the mark changes, update those copies and the renders in 6.2 too.
SVG source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="server-prep"> <path fill="#0B1117" fill-rule="evenodd" d="M18 0H46A18 18 0 0 1 64 18V46A18 18 0 0 1 46 64H18A18 18 0 0 1 0 46V18A18 18 0 0 1 18 0Z M32 18A9 9 0 0 1 36.2 35L38.3 42.6A2.6 2.6 0 0 1 35.8 46H28.2A2.6 2.6 0 0 1 25.7 42.6L27.8 35A9 9 0 0 1 32 18Z"/> </svg>
SVG source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="server-prep"> <path fill="#F4F7FA" fill-rule="evenodd" d="M18 0H46A18 18 0 0 1 64 18V46A18 18 0 0 1 46 64H18A18 18 0 0 1 0 46V18A18 18 0 0 1 18 0Z M32 18A9 9 0 0 1 36.2 35L38.3 42.6A2.6 2.6 0 0 1 35.8 46H28.2A2.6 2.6 0 0 1 25.7 42.6L27.8 35A9 9 0 0 1 32 18Z"/> </svg>
SVG source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="server-prep"> <path fill="currentColor" d="M32 18A9 9 0 0 1 36.2 35L38.3 42.6A2.6 2.6 0 0 1 35.8 46H28.2A2.6 2.6 0 0 1 25.7 42.6L27.8 35A9 9 0 0 1 32 18Z"/> </svg>
SVG source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 64" role="img" aria-label="server-prep">
<style>path, text { fill: #0B1117; } text { font: 600 34px "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace; letter-spacing: -1.2px; } @media (prefers-color-scheme: dark) { path, text { fill: #F4F7FA; } }</style>
<path fill-rule="evenodd" d="M18 0H46A18 18 0 0 1 64 18V46A18 18 0 0 1 46 64H18A18 18 0 0 1 0 46V18A18 18 0 0 1 18 0Z M32 18A9 9 0 0 1 36.2 35L38.3 42.6A2.6 2.6 0 0 1 35.8 46H28.2A2.6 2.6 0 0 1 25.7 42.6L27.8 35A9 9 0 0 1 32 18Z"/>
<text x="80" y="44">server-prep</text>
</svg>
SVG source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="server-prep">
<style>path { fill: #0B1117; } @media (prefers-color-scheme: dark) { path { fill: #F4F7FA; } }</style>
<path fill-rule="evenodd" d="M18 0H46A18 18 0 0 1 64 18V46A18 18 0 0 1 46 64H18A18 18 0 0 1 0 46V18A18 18 0 0 1 18 0Z M32 18A9 9 0 0 1 36.2 35L38.3 42.6A2.6 2.6 0 0 1 35.8 46H28.2A2.6 2.6 0 0 1 25.7 42.6L27.8 35A9 9 0 0 1 32 18Z"/>
</svg>Icons and link previews
PNG renders for the places that can't use SVG. Render them again from the SVG when the mark or the tagline changes, at exactly these sizes.
og:image of the setup console and this page, and the repository's social preview. A maintainer uploads it by hand: Settings → General → Social preview.
favicon.svg with sizes="32x32", so other browsers keep the SVG.Retired mark
Replace it wherever you still see it.
Until October 2026 the keyhole stood on a terminal cursor. The cursor line is gone and the keyhole moved down 5 units to the centre of the tile. Same tile, same colours.
Source of truth
If this page and the repository disagree, the repository wins.
- Colour and type tokens
site/tokens.css, light and dark, loaded by the setup console and this page. A page that must work on its own, like the e2e report, keeps a copy, andscripts/check-tokens.shfails CI when the copy drifts.- Logo files
.github/assets/andsite/favicon.svg. The setup console and this page carry the same path inline.- Icons and previews
- The PNG files in
site/, rendered from the SVG. - Live example
- The setup console on GitHub Pages uses every part of this page.