Linee guida del marchio
Com'è fatto Berth, e perché.
Il marchio nasce dal pannello stesso: un progetto tecnico su carta puntinata, un rack di server con le spie di stato e un unico segnale arancione per ciò che conta. Calmo, tecnico, preciso.
01 · Logo
Due ormeggi su una banchina.
Il simbolo è una B disegnata come la vista dall'alto di un porto, e allo stesso tempo come due unità in un rack di server. Entrambe le letture sono volute.
- A
La banchina
Il montante pesante a sinistra. La terraferma a cui ogni sito è ormeggiato: il server, il pannello, le persone che lo gestiscono.
- B
Due ormeggi
Anche due unità rack. Quella inferiore è occupata, quella superiore è libera e pronta per il prossimo sito. L'ormeggio inferiore è più largo: c'è sempre spazio per crescere.
- C
La luce
Il LED di stato di un'unità rack, e la nave ormeggiata al suo posto: il tuo sito, in funzione. È l'unico colore del simbolo ed è sempre arancione Signal.
Costruzione
Disegnato su una griglia di 48 unità come un'unica forma chiusa con due contrografismi, così resta senza giunture a qualsiasi dimensione. Usa sempre i file master; non ricostruire mai il simbolo con dei rettangoli.
- Griglia
- 48 × 48
- Banchina
- 6
- Linee esterne
- 4
- Barra centrale
- 8
- Raggio degli angoli
- 7 esterno, 3 interno
- Ormeggi
- superiore 30, inferiore 36 di larghezza
- LED
- 11 × 5, centrato nell'ormeggio inferiore
- Logotipo
- Bricolage Grotesque 700
Versioni
Il logotipo è sempre in minuscolo, come il comando che digiti. Usa la versione orizzontale ovunque ci stia.
berth per il comando.Area di rispetto e dimensioni
Lascia intorno al logo uno spazio libero pari a metà dell'altezza del simbolo. Dimensioni minime: il simbolo a 16 px come favicon, 24 px nelle interfacce, e il logo orizzontale a 96 px di larghezza.
02 · Colore
Inchiostro, carta e un solo segnale.
Soprattutto inchiostro e carta, come un progetto tecnico. L'arancione è un segnale, non una decorazione: indica l'unica cosa da guardare o premere. Se tutto è arancione, niente lo è.
#0E1F3ABarra laterale, titoli, superfici scure.#1A2F52 · #2A3F63Stati hover e linee su inchiostro.#F3F4F1 · #CFD5DCSfondo della pagina, con la griglia di punti.#FF6A13 · #1A0D02Il LED, l'azione principale, gli anelli di focus.#1F4FD1Link, icone, evidenziazioni tecniche.#17202C · #566171Testo corrente e testo secondario.Spie di stato
I colori LED brillanti si usano solo su inchiostro. Nel prodotto un LED di stato può essere verde, ambra o rosso; nel logo è sempre Signal.
Stato su carta
Sulle superfici chiare usa i colori di testo più scuri su un chip colorato. Ogni coppia raggiunge un contrasto di almeno 4,5:1, e lo stato non è mai indicato solo dal colore: c'è sempre anche una parola.
03 · Tipografia
Tre caratteri, tre compiti.
Tutti e tre sono open source (SIL Open Font License) e sono inclusi nel pannello, che quindi non carica mai un font dal server di qualcun altro.
Bricolage Grotesque
Titoli, numeri e il logotipo. Pesi 600 e 700, spaziatura stretta. Un po' di carattere, mai urlato.
Instrument Sans
Testo corrente, etichette, pulsanti e moduli. Pesi da 400 a 700. Leggibile a 14 px in una tabella densa.
IBM Plex Mono
Tutto ciò che dice una macchina o che potresti digitare: comandi, percorsi, nomi host, valori, e le piccole etichette in maiuscolo.
/var/www/vhosts/example.com/httpdocs04 · Elementi
Presi in prestito dalla sala server.
Un piccolo insieme di forme ricorrenti. Ognuna viene da hardware reale o da un tavolo da disegno, quindi usale per ciò che significano.
Griglia di punti
Carta da disegno tecnico: punti da 1 px ogni 22 px su Paper. Solo dietro i contenuti, mai su card o inchiostro.
Occhiello con LED
Un piccolo quadrato Signal prima di un'etichetta in maiuscolo a spaziatura fissa. Dice dove ti trovi, sopra ogni titolo di pagina.
Striscia rack
I servizi come unità rack con un LED quadrato. Solo per lo stato in tempo reale: ciò che vedi è ciò che gira.
Targhetta del server
La targhetta di una macchina: nome host, sistema e dimensioni, con un LED. Indica sempre il server su cui stai lavorando.
Scheda aperta
La voce di menu attiva è una scheda che prosegue nella pagina, come una cartella estratta da un archivio. Una per menu.
Terminale
Comandi veri con output vero, sull'inchiostro più scuro. Prompt in grigio tenue, risultati come LED.
Icone
Icone lineari su griglia 24, tratto 1,8, estremità arrotondate, nessun riempimento. Blu Blueprint su carta, grigio chiaro su inchiostro.
Angoli
4 per unità rack e chip, 6 per pulsanti e campi, 10 per card, 12 per pannelli grandi. Mai forme a pillola.
05 · Componenti
Un solo pulsante arancione per schermata.
Le stesse parti compongono il pannello e il sito web. Le aree di tocco sono di almeno 44 px, e il focus è un anello Signal da 3 px.
Pulsanti su carta
Signal per l'azione principale, Ink per confermare, contorno per tutto il resto, contorno rosso solo per le azioni distruttive.
Pulsanti su inchiostro
Su inchiostro, i pulsanti secondari hanno un contorno sottile. I pulsanti con sola icona hanno sempre un'etichetta per gli screen reader.
Card statistica
Etichetta a spaziatura fissa sopra, cifra nel carattere display con numeri tabulari.
Campo
Etichette sopra, sempre visibili. I valori letti da una macchina vanno a spaziatura fissa.
06 · Tono di voce
Parla come un buon sistemista.
Calmo, preciso e dalla tua parte. Di' cosa è successo, cosa significa e cosa fare dopo.
Concreto, non brillante
Sì · Ripristinato example.com alle 03:12 di stamattina. La posta non è stata toccata.
No · Zac! Il tuo sito è di nuovo in pista!
Gli errori dicono cosa fare
Sì · Il certificato non è stato emesso: il record A di www punta altrove. Puntalo a questo server e riprova.
No · Errore 0x2F: operazione non riuscita.
Prove più che promesse
Sì · I backup vengono ripristinati in una sandbox ogni settimana, e ricevi il rapporto.
No · Tecnologia di backup enterprise-grade, di livello militare.