Guía de marca
Cómo se ve Berth, y por qué.
La marca nace del propio panel: un plano sobre papel punteado, un rack de servidores con luces de estado y una única señal naranja para lo que importa. Tranquila, técnica, exacta.
01 · Logotipo
Dos amarres en un muelle.
El símbolo es una B dibujada como la vista cenital de un puerto y, a la vez, como dos unidades de un rack de servidores. Ambas lecturas son intencionadas.
- A
El muelle
El trazo vertical grueso de la izquierda. Tierra firme a la que se amarra cada sitio: el servidor, el panel, las personas que lo gestionan.
- B
Dos amarres
También dos unidades de rack. La inferior está ocupada, la superior está libre y lista para el siguiente sitio. El amarre inferior es más ancho: siempre hay espacio para crecer.
- C
La luz
El LED de estado de una unidad de rack, y el barco amarrado en su atraque: tu sitio, funcionando. Es el único color del símbolo y siempre es naranja Señal.
Construcción
Dibujado sobre una retícula de 48 unidades como una sola forma cerrada con dos contraformas, para que se mantenga sin juntas a cualquier tamaño. Usa siempre los archivos maestros; nunca reconstruyas el símbolo con rectángulos.
- Retícula
- 48 × 48
- Muelle
- 6
- Líneas exteriores
- 4
- Barra central
- 8
- Radio de esquina
- 7 por fuera, 3 por dentro
- Amarres
- superior 30, inferior 36 de ancho
- LED
- 11 × 5, centrado en el amarre inferior
- Logotipo textual
- Bricolage Grotesque 700
Versiones
El logotipo textual va siempre en minúsculas, como el comando que escribes. Usa la versión horizontal siempre que quepa.
berth para el comando.Espacio libre y tamaño
Deja alrededor del logotipo un espacio libre igual a la mitad de la altura del símbolo. Tamaños mínimos: el símbolo a 16 px como favicon, 24 px en interfaces y el logotipo horizontal a 96 px de ancho.
02 · Color
Tinta, papel y una señal.
Sobre todo tinta y papel, como un plano. El naranja es una señal, no decoración: marca lo único que hay que mirar o pulsar. Si todo es naranja, nada lo es.
#0E1F3ABarra lateral, títulos, superficies oscuras.#1A2F52 · #2A3F63Estados hover y líneas sobre tinta.#F3F4F1 · #CFD5DCFondo de página, con la retícula de puntos.#FF6A13 · #1A0D02El LED, la acción principal, los anillos de foco.#1F4FD1Enlaces, iconos, resaltados técnicos.#17202C · #566171Texto principal y secundario.Luces de estado
Los colores LED brillantes solo van sobre tinta. En el producto, un LED de estado puede ser verde, ámbar o rojo; en el logotipo siempre es Señal.
Estado sobre papel
Sobre superficies claras, usa los colores de texto más oscuros sobre una etiqueta tintada. Cada par alcanza al menos un contraste de 4,5:1, y el estado nunca se indica solo con color: siempre hay también una palabra.
03 · Tipografía
Tres tipografías, tres funciones.
Las tres son de código abierto (SIL Open Font License) y van incluidas en el panel, así que nunca carga una fuente desde el servidor de otro.
Bricolage Grotesque
Títulos, cifras y el logotipo textual. Pesos 600 y 700, espaciado ajustado. Algo de carácter, nunca estridente.
Instrument Sans
Texto principal, etiquetas, botones y formularios. Pesos de 400 a 700. Legible a 14 px en una tabla densa.
IBM Plex Mono
Todo lo que dice una máquina o lo que podrías escribir: comandos, rutas, nombres de host, valores y las pequeñas etiquetas en mayúsculas.
/var/www/vhosts/example.com/httpdocs04 · Elementos
Tomado de la sala de servidores.
Un pequeño conjunto de formas recurrentes. Cada una viene de hardware real o de una mesa de dibujo, así que úsalas por lo que significan.
Retícula de puntos
Papel de dibujo técnico: puntos de 1 px cada 22 px sobre Papel. Solo detrás del contenido, nunca sobre tarjetas ni sobre tinta.
Antetítulo con LED
Un pequeño cuadrado Señal delante de una etiqueta monoespaciada en mayúsculas. Indica dónde estás, encima de cada título de página.
Franja de rack
Servicios como unidades de rack con un LED cuadrado. Solo para estado en directo: lo que ves es lo que funciona.
Placa de servidor
La placa de características de una máquina: nombre de host, sistema y tamaño, con un LED. Siempre nombra el servidor en el que estás trabajando.
Pestaña abierta
El elemento de menú activo es una pestaña que continúa en la página, como una carpeta sacada de un archivador. Una por menú.
Terminal
Comandos reales con salida real, sobre la tinta más oscura. El prompt en gris apagado, los resultados como LED.
Iconos
Iconos de línea sobre una retícula de 24, trazo de 1,8, extremos redondeados, sin rellenos. Azul Plano sobre papel, gris claro sobre tinta.
Esquinas
4 para unidades de rack y etiquetas, 6 para botones y campos, 10 para tarjetas, 12 para paneles grandes. Nunca forma de píldora.
05 · Componentes
Un botón naranja por pantalla.
Las mismas piezas construyen el panel y el sitio web. Las zonas táctiles miden al menos 44 px, y el foco es un anillo Señal de 3 px.
Botones sobre papel
Señal para la acción principal, Tinta para confirmar, contorno para todo lo demás, contorno rojo solo para acciones destructivas.
Botones sobre tinta
Sobre tinta, los botones secundarios son un contorno fino. Los botones con solo icono llevan siempre una etiqueta para lectores de pantalla.
Tarjeta de cifra
Etiqueta monoespaciada arriba, cifra en la tipografía display con números tabulares.
Campo
Etiquetas encima, siempre visibles. Los valores que lee una máquina van en monoespaciada.
06 · Tono
Habla como un buen administrador de sistemas.
Tranquilo, exacto y de tu lado. Di qué ha pasado, qué significa y qué hacer a continuación.
Concreto, no ingenioso
Sí · example.com restaurado a las 03:12 de esta mañana. El correo no se ha tocado.
No · ¡Zas! ¡Tu sitio vuelve a estar a tope!
Los errores dicen qué hacer
Sí · No se ha emitido el certificado: el registro A de www apunta a otro sitio. Apúntalo a este servidor y vuelve a intentarlo.
No · Error 0x2F: la operación ha fallado.
Pruebas antes que promesas
Sí · Las copias se restauran cada semana en un entorno aislado, y recibes el informe.
No · Tecnología de copias de seguridad de nivel empresarial y potencia militar.