Charte graphique
L'apparence de Berth, et pourquoi.
La marque naît du panneau lui-même : un plan sur papier pointillé, une baie de serveurs avec ses voyants d'état, et un seul signal orange pour ce qui compte. Calme, technique, précise.
01 · Logo
Deux postes d'amarrage sur un quai.
Le symbole est un B dessiné comme un port vu de dessus, et en même temps comme deux unités dans une baie de serveurs. Les deux lectures sont voulues.
- A
Le quai
Le montant épais à gauche. Le sol ferme auquel chaque site est amarré : le serveur, le panneau, les personnes qui l'exploitent.
- B
Deux postes d'amarrage
Ce sont aussi deux unités de baie. Celle du bas est occupée, celle du haut est libre et prête pour le prochain site. Le poste du bas est plus large : il reste toujours de la place pour grandir.
- C
Le voyant
La LED d'état d'une unité de baie, et le navire amarré à son poste : votre site, en service. C'est la seule couleur du symbole, toujours en orange Signal.
Construction
Dessiné sur une grille de 48 unités comme une seule forme fermée à deux contreformes, afin de rester sans raccord à toutes les tailles. Utilisez toujours les fichiers maîtres ; ne reconstruisez jamais le symbole à partir de rectangles.
- Grille
- 48 × 48
- Quai
- 6
- Traits extérieurs
- 4
- Barre centrale
- 8
- Rayon d'angle
- 7 à l'extérieur, 3 à l'intérieur
- Postes
- haut 30, bas 36 de large
- LED
- 11 × 5, centrée dans le poste du bas
- Logotype
- Bricolage Grotesque 700
Versions
Le logotype est toujours en minuscules, comme la commande que vous tapez. Utilisez la version horizontale partout où elle tient.
berth pour la commande.Zone de protection et taille
Laissez autour du logo un espace libre égal à la moitié de la hauteur du symbole. Tailles minimales : le symbole à 16 px en favicon, 24 px dans les interfaces, et le logo horizontal à 96 px de large.
02 · Couleur
L'encre, le papier, et un signal.
Surtout de l'encre et du papier, comme un plan. L'orange est un signal, pas une décoration : il désigne la seule chose à regarder ou sur laquelle appuyer. Si tout est orange, rien ne l'est.
#0E1F3ABarre latérale, titres, surfaces sombres.#1A2F52 · #2A3F63États de survol et traits sur l'encre.#F3F4F1 · #CFD5DCFond de page, avec la grille de points.#FF6A13 · #1A0D02La LED, l'action principale, les anneaux de focus.#1F4FD1Liens, icônes, éléments techniques mis en avant.#17202C · #566171Texte courant et texte secondaire.Voyants d'état
Les couleurs vives des LED n'apparaissent que sur l'encre. Dans le produit, une LED d'état peut être verte, ambre ou rouge ; dans le logo, elle est toujours Signal.
État sur papier
Sur les surfaces claires, utilisez les couleurs de texte plus foncées sur une pastille teintée. Chaque paire atteint un contraste d'au moins 4,5:1, et un état n'est jamais indiqué par la couleur seule : il y a toujours aussi un mot.
03 · Typographie
Trois polices, trois rôles.
Toutes trois sont open source (SIL Open Font License) et sont embarquées dans le panneau, qui ne charge donc jamais de police depuis le serveur de quelqu'un d'autre.
Bricolage Grotesque
Titres, chiffres et logotype. Graisses 600 et 700, approche serrée. Un peu de caractère, jamais tapageur.
Instrument Sans
Texte courant, libellés, boutons et formulaires. Graisses 400 à 700. Lisible à 14 px dans un tableau dense.
IBM Plex Mono
Tout ce qu'une machine dit ou que vous pourriez taper : commandes, chemins, noms d'hôte, valeurs, et les petits libellés en capitales.
/var/www/vhosts/example.com/httpdocs04 · Éléments
Empruntés à la salle serveur.
Un petit ensemble de formes récurrentes. Chacune vient d'un vrai matériel ou d'une table à dessin : utilisez-les pour ce qu'elles signifient.
Grille de points
Papier à dessin : points de 1 px tous les 22 px sur Papier. Uniquement derrière le contenu, jamais sur les cartes ni sur l'encre.
Surtitre avec LED
Un petit carré Signal devant un libellé en capitales à chasse fixe. Il indique où vous êtes, au-dessus de chaque titre de page.
Bande de baie
Les services comme des unités de baie avec une LED carrée. Uniquement pour l'état en direct : ce que vous voyez est ce qui tourne.
Plaque serveur
La plaque signalétique d'une machine : nom d'hôte, système et capacité, avec une LED. Elle nomme toujours le serveur sur lequel vous travaillez.
Onglet ouvert
L'élément de menu actif est un onglet qui se prolonge dans la page, comme un dossier tiré d'un classeur. Un seul par menu.
Terminal
De vraies commandes avec leur vraie sortie, sur l'encre la plus sombre. Invite en gris atténué, résultats sous forme de LED.
Icônes
Icônes au trait sur une grille de 24, trait de 1,8, extrémités arrondies, sans remplissage. Bleu plan sur papier, gris clair sur encre.
Angles
4 pour les unités de baie et les pastilles, 6 pour les boutons et les champs, 10 pour les cartes, 12 pour les grands panneaux. Jamais de pilules.
05 · Composants
Un seul bouton orange par écran.
Les mêmes éléments construisent le panneau et le site web. Les zones tactiles font au moins 44 px, et le focus est un anneau Signal de 3 px.
Boutons sur papier
Signal pour l'action principale, Encre pour confirmer, contour pour tout le reste, contour rouge uniquement pour les actions destructrices.
Boutons sur encre
Sur l'encre, les boutons secondaires ont un contour fin. Les boutons à icône seule portent toujours un libellé pour les lecteurs d'écran.
Carte de statistique
Libellé à chasse fixe au-dessus, chiffre dans la police de titrage avec chiffres tabulaires.
Champ
Libellés au-dessus, toujours visibles. Les valeurs lues par une machine sont en chasse fixe.
06 · Ton
Parlez comme un bon administrateur système.
Calme, précis et de votre côté. Dites ce qui s'est passé, ce que cela signifie et ce qu'il faut faire ensuite.
Concret, pas astucieux
Oui · example.com restauré à l'état de 03:12 ce matin. La messagerie n'a pas été touchée.
Non · Et hop ! Votre site est de retour !
Les erreurs disent quoi faire
Oui · Le certificat n'a pas été émis : l'enregistrement A de www pointe ailleurs. Faites-le pointer vers ce serveur et réessayez.
Non · Erreur 0x2F : échec de l'opération.
Des preuves plutôt que des promesses
Oui · Les sauvegardes sont restaurées chaque semaine dans un bac à sable, et vous recevez le rapport.
Non · Technologie de sauvegarde de niveau entreprise, robustesse militaire.