Brand guidelines
How Berth looks, and why.
The brand grows out of the panel itself: a blueprint on dotted paper, a server rack with status lights, and a single orange signal for what matters. Calm, technical, exact.
01 · Logo
Two berths on one quay.
The mark is a B drawn as the top view of a harbour, and at the same time as two units in a server rack. Both readings are meant.
- A
The quay
The heavy upright on the left. Solid ground that every site is moored to: the server, the panel, the people who run it.
- B
Two berths
Also two rack units. The lower one is occupied, the upper one is free and ready for the next site. The lower berth is wider: there is always room to grow.
- C
The light
The status LED of a rack unit, and the ship moored in its berth: your site, running. It is the only colour in the mark and always Signal orange.
Construction
Drawn on a 48-unit grid as one closed shape with two counters, so it stays seamless at any size. Always use the master files; never rebuild the mark from rectangles.
- Grid
- 48 × 48
- Quay
- 6
- Outer lines
- 4
- Middle bar
- 8
- Corner radius
- 7 outside, 3 inside
- Berths
- upper 30, lower 36 wide
- LED
- 11 × 5, centred in the lower berth
- Wordmark
- Bricolage Grotesque 700
Versions
The wordmark is always lower case, like the command you type. Use the horizontal version wherever it fits.
berth for the command.Clear space and size
Keep free space around the logo equal to half the height of the mark. Smallest sizes: the mark at 16 px as a favicon, 24 px in interfaces, and the horizontal logo at 96 px wide.
02 · Colour
Ink, paper, and one signal.
Mostly ink and paper, like a blueprint. Orange is a signal, not decoration: it marks the one thing to look at or press. If everything is orange, nothing is.
#0E1F3ASidebar, headings, dark surfaces.#1A2F52 · #2A3F63Hover states and lines on ink.#F3F4F1 · #CFD5DCPage background, with the dot grid.#FF6A13 · #1A0D02The LED, the main action, focus rings.#1F4FD1Links, icons, technical highlights.#17202C · #566171Body copy and secondary text.Status lights
Bright LED colours live on ink only. In the product a status LED may be green, amber or red; in the logo it is always Signal.
Status on paper
On light surfaces, use the darker text colours on a tinted chip. Every pair reaches at least 4.5:1 contrast, and status is never shown by colour alone: there is always a word too.
03 · Typography
Three typefaces, three jobs.
All three are open source (SIL Open Font License) and ship inside the panel, so it never loads a font from someone else's server.
Bricolage Grotesque
Headings, numbers and the wordmark. Weights 600 and 700, tight spacing. A little character, never loud.
Instrument Sans
Body text, labels, buttons and forms. Weights 400 to 700. Clear at 14 px in a dense table.
IBM Plex Mono
Anything a machine says or you could type: commands, paths, host names, values, and the small capital labels.
/var/www/vhosts/example.com/httpdocs04 · Elements
Borrowed from the server room.
A small set of recurring shapes. Each comes from real hardware or a drawing table, so use them for what they mean.
Dot grid
Drafting paper: 1 px dots every 22 px on Paper. Only behind content, never on cards or ink.
Eyebrow with LED
A small Signal square before a monospaced capital label. It says where you are, above every page title.
Rack strip
Services as rack units with a square LED. For live status only: what you see is what runs.
Server plate
The type plate on a machine: host name, system and size, with one LED. It always names the server you are working on.
Open tab
The active menu item is a tab that runs on into the page, like a folder pulled from a cabinet. One per menu.
Terminal
Real commands with real output, on the darkest ink. Prompt in muted grey, results as LEDs.
Icons
Line icons on a 24 grid, 1.8 stroke, round ends, no fills. Blueprint blue on paper, light grey on ink.
Corners
4 for rack units and chips, 6 for buttons and fields, 10 for cards, 12 for large panels. Never pills.
05 · Components
One orange button per screen.
The same parts build the panel and the website. Touch targets are at least 44 px, and focus is a 3 px Signal ring.
Buttons on paper
Signal for the main action, Ink to confirm, outline for everything else, red outline only for destructive actions.
Buttons on ink
On ink, secondary buttons are a thin outline. Icon-only buttons always carry a label for screen readers.
Stat card
Monospaced label above, figure in the display face with tabular numbers.
Field
Labels above, always visible. Values a machine reads go in monospace.
06 · Voice
Talk like a good system administrator.
Calm, exact, and on your side. Say what happened, what it means, and what to do next.
Concrete, not clever
Yes · Restored example.com to 03:12 this morning. Mail was not touched.
No · Whoosh! Your site is back in business!
Errors say what to do
Yes · The certificate was not issued: the A record of www points elsewhere. Point it to this server and try again.
No · Error 0x2F: operation failed.
Proof over promises
Yes · Backups are restored to a sandbox every week, and you get the report.
No · Enterprise-grade, military-strength backup technology.