Markenrichtlinien
Wie Berth aussieht, und warum.
Die Marke wächst aus dem Panel selbst: ein Bauplan auf gepunktetem Papier, ein Server-Rack mit Statusleuchten und ein einziges orangefarbenes Signal für das, was zählt. Ruhig, technisch, präzise.
01 · Logo
Zwei Liegeplätze an einem Kai.
Das Zeichen ist ein B, gezeichnet als Draufsicht auf einen Hafen und zugleich als zwei Einheiten in einem Server-Rack. Beide Lesarten sind gewollt.
- A
Der Kai
Der kräftige Balken links. Fester Grund, an dem jede Website festmacht: der Server, das Panel, die Menschen, die es betreiben.
- B
Zwei Liegeplätze
Zugleich zwei Rack-Einheiten. Die untere ist belegt, die obere frei und bereit für die nächste Website. Der untere Liegeplatz ist breiter: Es gibt immer Raum zum Wachsen.
- C
Das Licht
Die Status-LED einer Rack-Einheit und das Schiff an seinem Liegeplatz: Ihre Website, in Betrieb. Sie ist die einzige Farbe im Zeichen und immer Signal-Orange.
Konstruktion
Auf einem Raster von 48 Einheiten als eine geschlossene Form mit zwei Punzen gezeichnet, damit sie in jeder Größe nahtlos bleibt. Verwenden Sie immer die Masterdateien; bauen Sie das Zeichen nie aus Rechtecken nach.
- Raster
- 48 × 48
- Kai
- 6
- Außenlinien
- 4
- Mittelbalken
- 8
- Eckenradius
- 7 außen, 3 innen
- Liegeplätze
- oben 30, unten 36 breit
- LED
- 11 × 5, zentriert im unteren Liegeplatz
- Wortmarke
- Bricolage Grotesque 700
Versionen
Die Wortmarke steht immer in Kleinbuchstaben, wie der Befehl, den Sie tippen. Verwenden Sie die horizontale Version, wo immer sie passt.
berth für den Befehl.Schutzzone und Größe
Halten Sie rund um das Logo einen Freiraum von der halben Höhe des Zeichens ein. Mindestgrößen: das Zeichen mit 16 px als Favicon, 24 px in Oberflächen und das horizontale Logo mit 96 px Breite.
02 · Farbe
Tinte, Papier und ein Signal.
Überwiegend Tinte und Papier, wie ein Bauplan. Orange ist ein Signal, keine Dekoration: Es markiert das eine, worauf man schauen oder klicken soll. Ist alles orange, ist nichts orange.
#0E1F3ASeitenleiste, Überschriften, dunkle Flächen.#1A2F52 · #2A3F63Hover-Zustände und Linien auf Tinte.#F3F4F1 · #CFD5DCSeitenhintergrund, mit dem Punktraster.#FF6A13 · #1A0D02Die LED, die Hauptaktion, Fokusringe.#1F4FD1Links, Icons, technische Hervorhebungen.#17202C · #566171Fließtext und Sekundärtext.Statusleuchten
Leuchtende LED-Farben gibt es nur auf Tinte. Im Produkt darf eine Status-LED grün, gelb oder rot sein; im Logo ist sie immer Signal.
Status auf Papier
Auf hellen Flächen die dunkleren Textfarben auf einem getönten Chip verwenden. Jedes Paar erreicht mindestens 4,5:1 Kontrast, und Status wird nie allein durch Farbe gezeigt: Es steht immer auch ein Wort dabei.
03 · Typografie
Drei Schriften, drei Aufgaben.
Alle drei sind Open Source (SIL Open Font License) und werden mit dem Panel ausgeliefert, sodass es nie eine Schrift vom Server eines anderen lädt.
Bricolage Grotesque
Überschriften, Zahlen und die Wortmarke. Stärken 600 und 700, enge Laufweite. Etwas Charakter, nie laut.
Instrument Sans
Fließtext, Labels, Buttons und Formulare. Stärken 400 bis 700. Gut lesbar mit 14 px in einer dichten Tabelle.
IBM Plex Mono
Alles, was eine Maschine sagt oder Sie tippen könnten: Befehle, Pfade, Hostnamen, Werte und die kleinen Versal-Labels.
/var/www/vhosts/example.com/httpdocs04 · Elemente
Aus dem Serverraum entliehen.
Ein kleiner Satz wiederkehrender Formen. Jede stammt von echter Hardware oder vom Zeichentisch, also setzen Sie sie für das ein, was sie bedeuten.
Punktraster
Zeichenpapier: Punkte von 1 px alle 22 px auf Papier. Nur hinter Inhalten, nie auf Karten oder Tinte.
Eyebrow mit LED
Ein kleines Signal-Quadrat vor einem Label in Monospace-Versalien. Es zeigt über jedem Seitentitel, wo Sie sind.
Rack-Leiste
Dienste als Rack-Einheiten mit quadratischer LED. Nur für Live-Status: Was Sie sehen, läuft auch.
Typenschild
Das Typenschild einer Maschine: Hostname, System und Größe, mit einer LED. Es nennt immer den Server, an dem Sie arbeiten.
Offener Tab
Der aktive Menüpunkt ist ein Tab, der in die Seite übergeht, wie ein aus dem Schrank gezogener Ordner. Einer pro Menü.
Terminal
Echte Befehle mit echter Ausgabe, auf dem dunkelsten Tintenton. Prompt in gedämpftem Grau, Ergebnisse als LEDs.
Icons
Linien-Icons auf einem 24er-Raster, Strichstärke 1,8, runde Enden, keine Füllungen. Blaupausen-Blau auf Papier, Hellgrau auf Tinte.
Ecken
4 für Rack-Einheiten und Chips, 6 für Buttons und Felder, 10 für Karten, 12 für große Panels. Nie Pillenform.
05 · Komponenten
Ein orangefarbener Button pro Bildschirm.
Dieselben Bausteine bilden das Panel und die Website. Touch-Ziele sind mindestens 44 px groß, und der Fokus ist ein Signal-Ring von 3 px.
Buttons auf Papier
Signal für die Hauptaktion, Tinte zum Bestätigen, Kontur für alles andere, rote Kontur nur für destruktive Aktionen.
Buttons auf Tinte
Auf Tinte sind sekundäre Buttons eine dünne Kontur. Reine Icon-Buttons haben immer ein Label für Screenreader.
Kennzahlkarte
Monospace-Label oben, Zahl in der Display-Schrift mit Tabellenziffern.
Feld
Labels oben, immer sichtbar. Werte, die eine Maschine liest, in Monospace.
06 · Tonalität
Sprechen Sie wie ein guter Systemadministrator.
Ruhig, präzise und auf Ihrer Seite. Sagen, was passiert ist, was es bedeutet und was als Nächstes zu tun ist.
Konkret statt clever
Ja · example.com auf den Stand von heute 03:12 wiederhergestellt. Mail wurde nicht angetastet.
Nein · Zack! Ihre Website ist wieder voll da!
Fehler sagen, was zu tun ist
Ja · Das Zertifikat wurde nicht ausgestellt: Der A-Eintrag von www zeigt woandershin. Richten Sie ihn auf diesen Server und versuchen Sie es erneut.
Nein · Fehler 0x2F: Vorgang fehlgeschlagen.
Beweise statt Versprechen
Ja · Backups werden jede Woche in einer Sandbox wiederhergestellt, und Sie erhalten den Bericht.
Nein · Backup-Technologie in Enterprise-Qualität und militärischer Stärke.