Księga znaku
Jak wygląda Berth i dlaczego.
Marka wyrasta z samego panelu: plan techniczny na papierze w kropki, szafa serwerowa z lampkami statusu i jeden pomarańczowy sygnał dla tego, co ważne. Spokojnie, technicznie, precyzyjnie.
01 · Logo
Dwa stanowiska przy jednym nabrzeżu.
Znak to litera B narysowana jako widok portu z góry, a zarazem jako dwie jednostki w szafie serwerowej. Oba odczytania są zamierzone.
- A
Nabrzeże
Masywny pion po lewej. Stały grunt, do którego cumuje każda strona: serwer, panel i ludzie, którzy go obsługują.
- B
Dwa stanowiska
Zarazem dwie jednostki w szafie. Dolna jest zajęta, górna wolna i gotowa na kolejną stronę. Dolne stanowisko jest szersze: zawsze jest miejsce na rozwój.
- C
Lampka
Dioda statusu jednostki w szafie i statek zacumowany na swoim stanowisku: twoja działająca strona. To jedyny kolor w znaku i zawsze jest to pomarańcz Signal.
Konstrukcja
Narysowany na siatce 48 jednostek jako jeden zamknięty kształt z dwoma światłami wewnętrznymi, dzięki czemu pozostaje spójny w każdym rozmiarze. Zawsze używaj plików wzorcowych; nigdy nie odtwarzaj znaku z prostokątów.
- Siatka
- 48 × 48
- Nabrzeże
- 6
- Linie zewnętrzne
- 4
- Belka środkowa
- 8
- Promień narożnika
- 7 na zewnątrz, 3 wewnątrz
- Stanowiska
- górne 30, dolne 36 szerokości
- Dioda
- 11 × 5, wyśrodkowana w dolnym stanowisku
- Logotyp
- Bricolage Grotesque 700
Wersje
Logotyp zawsze pisany jest małymi literami, tak jak wpisywane polecenie. Wszędzie, gdzie się mieści, używaj wersji poziomej.
berth.Pole ochronne i rozmiar
Zachowaj wokół logo wolną przestrzeń równą połowie wysokości znaku. Najmniejsze rozmiary: znak 16 px jako favicon, 24 px w interfejsach, logo poziome 96 px szerokości.
02 · Kolor
Atrament, papier i jeden sygnał.
Głównie atrament i papier, jak na planie technicznym. Pomarańcz to sygnał, nie ozdoba: wskazuje jedyną rzecz, na którą trzeba spojrzeć lub którą trzeba kliknąć. Jeśli wszystko jest pomarańczowe, nic nie jest.
#0E1F3APasek boczny, nagłówki, ciemne powierzchnie.#1A2F52 · #2A3F63Stany najechania i linie na atramencie.#F3F4F1 · #CFD5DCTło strony z siatką kropek.#FF6A13 · #1A0D02Dioda, główna akcja, obramowanie fokusu.#1F4FD1Linki, ikony, wyróżnienia techniczne.#17202C · #566171Tekst główny i pomocniczy.Lampki statusu
Jasne kolory diod występują tylko na atramencie. W produkcie dioda statusu może być zielona, bursztynowa lub czerwona; w logo zawsze jest w kolorze Signal.
Status na papierze
Na jasnych powierzchniach używaj ciemniejszych kolorów tekstu na zabarwionym tle. Każda para osiąga kontrast co najmniej 4,5:1, a status nigdy nie jest pokazywany samym kolorem: zawsze towarzyszy mu słowo.
03 · Typografia
Trzy kroje, trzy zadania.
Wszystkie trzy są open source (SIL Open Font License) i są dołączone do panelu, więc nigdy nie pobiera on fontów z cudzego serwera.
Bricolage Grotesque
Nagłówki, liczby i logotyp. Grubości 600 i 700, ciasne odstępy. Trochę charakteru, nigdy krzykliwie.
Instrument Sans
Tekst główny, etykiety, przyciski i formularze. Grubości od 400 do 700. Czytelny przy 14 px w gęstej tabeli.
IBM Plex Mono
Wszystko, co mówi maszyna lub co można wpisać: polecenia, ścieżki, nazwy hostów, wartości oraz małe etykiety wersalikami.
/var/www/vhosts/example.com/httpdocs04 · Elementy
Zapożyczone z serwerowni.
Niewielki zestaw powtarzających się kształtów. Każdy pochodzi z prawdziwego sprzętu lub deski kreślarskiej, więc używaj ich zgodnie z ich znaczeniem.
Siatka kropek
Papier kreślarski: kropki 1 px co 22 px na kolorze Paper. Tylko pod treścią, nigdy na kartach ani na atramencie.
Nadtytuł z diodą
Mały kwadrat w kolorze Signal przed etykietą wersalikami w kroju o stałej szerokości. Pokazuje, gdzie jesteś, nad każdym tytułem strony.
Pasek szafy
Usługi jako jednostki w szafie z kwadratową diodą. Tylko dla statusu na żywo: to, co widać, to, co działa.
Tabliczka serwera
Tabliczka znamionowa maszyny: nazwa hosta, system i rozmiar, z jedną diodą. Zawsze wskazuje serwer, na którym pracujesz.
Otwarta zakładka
Aktywna pozycja menu to zakładka przechodząca w stronę, jak teczka wysunięta z szafy. Jedna na menu.
Terminal
Prawdziwe polecenia z prawdziwym wynikiem, na najciemniejszym atramencie. Znak zachęty w przygaszonej szarości, wyniki jako diody.
Ikony
Ikony liniowe na siatce 24, linia 1,8, zaokrąglone końce, bez wypełnień. Kolor Blueprint na papierze, jasnoszary na atramencie.
Narożniki
4 dla jednostek szafy i etykiet, 6 dla przycisków i pól, 10 dla kart, 12 dla dużych paneli. Nigdy w kształcie pigułki.
05 · Komponenty
Jeden pomarańczowy przycisk na ekran.
Panel i strona internetowa są zbudowane z tych samych elementów. Obszary dotyku mają co najmniej 44 px, a fokus to obramowanie 3 px w kolorze Signal.
Przyciski na papierze
Signal dla głównej akcji, Ink do potwierdzania, kontur dla wszystkiego innego, czerwony kontur tylko dla operacji nieodwracalnych.
Przyciski na atramencie
Na atramencie przyciski drugorzędne mają cienki kontur. Przyciski z samą ikoną zawsze mają etykietę dla czytników ekranu.
Karta statystyki
Etykieta o stałej szerokości u góry, liczba w kroju nagłówkowym z cyframi tabelarycznymi.
Pole
Etykiety nad polem, zawsze widoczne. Wartości odczytywane przez maszynę pisane krojem o stałej szerokości.
06 · Język
Mów jak dobry administrator systemu.
Spokojnie, precyzyjnie i po stronie użytkownika. Powiedz, co się stało, co to oznacza i co zrobić dalej.
Konkretnie, nie efekciarsko
Tak · Przywrócono example.com do stanu z dzisiejszej 03:12. Poczty nie ruszano.
Nie · Hop! Twoja strona znowu w akcji!
Błędy mówią, co zrobić
Tak · Certyfikat nie został wystawiony: rekord A dla www wskazuje gdzie indziej. Skieruj go na ten serwer i spróbuj ponownie.
Nie · Błąd 0x2F: operacja nie powiodła się.
Dowody zamiast obietnic
Tak · Kopie zapasowe są co tydzień odtwarzane w piaskownicy, a raport trafia do ciebie.
Nie · Technologia kopii zapasowych klasy enterprise o wojskowej niezawodności.