Huisstijl
Hoe Berth eruitziet, en waarom.
Het merk groeit uit het paneel zelf: een bouwtekening op stippelpapier, een serverrack met statuslampjes, en één oranje signaal voor wat ertoe doet. Rustig, technisch, precies.
01 · Logo
Twee ligplaatsen aan één kade.
Het beeldmerk is een B, getekend als bovenaanzicht van een haven, en tegelijk als twee units in een serverrack. Beide lezingen zijn bedoeld.
- A
De kade
De zware staander links. Vaste grond waar elke site aan afgemeerd ligt: de server, het paneel, de mensen die het draaien.
- B
Twee ligplaatsen
Ook twee rackunits. De onderste is bezet, de bovenste is vrij en klaar voor de volgende site. De onderste ligplaats is breder: er is altijd ruimte om te groeien.
- C
Het lampje
De status-led van een rackunit, en het schip dat in zijn ligplaats ligt: jouw site, in bedrijf. Het is de enige kleur in het beeldmerk en altijd Signaaloranje.
Constructie
Getekend op een raster van 48 eenheden als één gesloten vorm met twee binnenruimtes, zodat hij op elk formaat naadloos blijft. Gebruik altijd de masterbestanden; bouw het beeldmerk nooit na uit rechthoeken.
- Raster
- 48 × 48
- Kade
- 6
- Buitenlijnen
- 4
- Middenbalk
- 8
- Hoekradius
- 7 buiten, 3 binnen
- Ligplaatsen
- boven 30, onder 36 breed
- Led
- 11 × 5, gecentreerd in de onderste ligplaats
- Woordmerk
- Bricolage Grotesque 700
Versies
Het woordmerk staat altijd in kleine letters, zoals het commando dat je typt. Gebruik de liggende versie overal waar die past.
berth voor het commando.Vrije ruimte en formaat
Houd rond het logo vrije ruimte gelijk aan de halve hoogte van het beeldmerk. Kleinste formaten: het beeldmerk op 16 px als favicon, 24 px in interfaces, en het liggende logo op 96 px breed.
02 · Kleur
Inkt, papier en één signaal.
Vooral inkt en papier, zoals een bouwtekening. Oranje is een signaal, geen decoratie: het markeert het ene ding om naar te kijken of op te drukken. Is alles oranje, dan is niets het.
#0E1F3AZijbalk, koppen, donkere vlakken.#1A2F52 · #2A3F63Hovertoestanden en lijnen op inkt.#F3F4F1 · #CFD5DCPaginaachtergrond, met het stippenraster.#FF6A13 · #1A0D02De led, de hoofdactie, focusringen.#1F4FD1Links, iconen, technische accenten.#17202C · #566171Lopende tekst en secundaire tekst.Statuslampjes
Felle led-kleuren horen alleen op inkt. In het product mag een status-led groen, amber of rood zijn; in het logo is hij altijd Signaal.
Status op papier
Gebruik op lichte vlakken de donkere tekstkleuren op een getinte chip. Elk paar haalt minstens 4,5:1 contrast, en status wordt nooit alleen met kleur getoond: er staat altijd ook een woord bij.
03 · Typografie
Drie lettertypen, drie taken.
Alle drie zijn open source (SIL Open Font License) en worden met het paneel meegeleverd, zodat het nooit een lettertype van andermans server laadt.
Bricolage Grotesque
Koppen, cijfers en het woordmerk. Gewichten 600 en 700, krappe spatiëring. Een beetje karakter, nooit luid.
Instrument Sans
Lopende tekst, labels, knoppen en formulieren. Gewichten 400 tot 700. Helder op 14 px in een volle tabel.
IBM Plex Mono
Alles wat een machine zegt of wat je zou kunnen typen: commando’s, paden, hostnamen, waarden, en de kleine labels in hoofdletters.
/var/www/vhosts/example.com/httpdocs04 · Elementen
Geleend uit de serverruimte.
Een kleine set terugkerende vormen. Elk komt van echte hardware of een tekentafel, dus gebruik ze voor wat ze betekenen.
Stippenraster
Tekenpapier: stippen van 1 px om de 22 px op Papier. Alleen achter inhoud, nooit op kaarten of inkt.
Bovenregel met led
Een klein Signaal-vierkant vóór een label in monospace-hoofdletters. Het zegt waar je bent, boven elke paginatitel.
Rackstrook
Services als rackunits met een vierkante led. Alleen voor live status: wat je ziet, is wat draait.
Serverplaatje
Het typeplaatje op een machine: hostnaam, systeem en formaat, met één led. Het noemt altijd de server waar je aan werkt.
Open tab
Het actieve menu-item is een tab die doorloopt in de pagina, als een map die uit een kast getrokken is. Eén per menu.
Terminal
Echte commando’s met echte uitvoer, op de donkerste inkt. Prompt in gedempt grijs, resultaten als leds.
Iconen
Lijniconen op een raster van 24, lijndikte 1,8, ronde uiteinden, geen vullingen. Blauwdrukblauw op papier, lichtgrijs op inkt.
Hoeken
4 voor rackunits en chips, 6 voor knoppen en velden, 10 voor kaarten, 12 voor grote panelen. Nooit pillen.
05 · Componenten
Eén oranje knop per scherm.
Dezelfde onderdelen bouwen het paneel en de website. Aanraakdoelen zijn minstens 44 px, en focus is een Signaal-ring van 3 px.
Knoppen op papier
Signaal voor de hoofdactie, Inkt om te bevestigen, omlijnd voor al het andere, rood omlijnd alleen voor destructieve acties.
Knoppen op inkt
Op inkt zijn secundaire knoppen een dunne omlijning. Knoppen met alleen een icoon hebben altijd een label voor schermlezers.
Statkaart
Label in monospace erboven, getal in de displayletter met tabelcijfers.
Veld
Labels erboven, altijd zichtbaar. Waarden die een machine leest staan in monospace.
06 · Toon
Praat als een goede systeembeheerder.
Rustig, precies, en aan jouw kant. Zeg wat er gebeurde, wat het betekent, en wat je nu moet doen.
Concreet, niet slim
Ja · example.com teruggezet naar 03:12 vanochtend. Mail is niet aangeraakt.
Nee · Hoppa! Je site is weer helemaal terug!
Foutmeldingen zeggen wat je moet doen
Ja · Het certificaat is niet uitgegeven: het A-record van www wijst ergens anders heen. Laat het naar deze server wijzen en probeer het opnieuw.
Nee · Fout 0x2F: bewerking mislukt.
Bewijs boven beloftes
Ja · Back-ups worden elke week teruggezet in een sandbox, en jij krijgt het rapport.
Nee · Back-uptechnologie van enterpriseniveau en militaire sterkte.