Manual de marca
Cómo se presenta la marca
La referencia de uso de la marca Seventy Sete: símbolo, wordmarks, color, tipografía y tono de voz. Vale para el producto, para este sitio y para cualquier pieza que lleve el nombre.
Nombres
Un nombre para cada cosa
Conviven tres marcas y no son intercambiables. Cambiarlas cambia lo que se está diciendo.
Seventy Sete
La empresa, siempre en dos palabras separadas. Es quien firma el contrato, la factura y este sitio.
SeventySete
La marca de la plataforma, escrita junta. Aparece en el producto y en el material de la plataforma.
S7
La abreviatura y el prefijo de los módulos: S7 Tasks, S7 Market, S7 Draw. Nunca "s7" en minúsculas en un texto corrido.
Space
El workspace compartido del producto. Siempre con mayúscula y nunca traducido: es un término del producto, no una palabra común.
Símbolo
El monograma S7
Una "S" y un "7" dibujados sobre la misma retícula modular. Es el único activo de marca sin dependencia externa, y por eso el estándar dentro del producto.
- Área de respeto
- Un módulo de aire alrededor del dibujo, ya incluido en el archivo. Nada —texto, borde u otro logo— entra en ese margen.
- Tamaño mínimo
- No lo uses por debajo de 16 px de alto. Al ser SVG crece sin límite; lo que se rompe en pequeño es la lectura del "7".
- Fondo
- Ambos colores se eligieron para funcionar sobre el tema claro y el oscuro sin cambios. No existe una versión "para fondo oscuro".
Variantes
Dentro de una app, solo el símbolo. Las wordmarks son para piezas fuera del producto: dependen de una fuente externa que la política de seguridad de la app bloquea.
Estándar de la plataforma: favicon y marca en todas las apps. Sin dependencia externa.
Marcas de producto
Cada producto tiene la suya, derivada del mismo sistema modular del símbolo: dos elementos, azul que contiene y morado que escapa, sobre el módulo de 320 y las cuatro inclinaciones del triángulo 8-15-17. Ninguna es un icono de interfaz: la marca va primero, y el icono solo entra cuando el producto todavía no tiene marca dibujada.
Aplicación
Qué hacer y qué no hacer
Hazlo
- Aplícalo sobre fondo claro u oscuro, sin cambiar los colores.
- Respeta el margen de un módulo ya incluido en el archivo.
- Usa los archivos oficiales de este manual como origen.
- Márcalo como decorativo (alt vacío) cuando el texto contiguo ya nombra la pantalla.
- Prefiere el SVG: escala sin perder el trazo.
No lo hagas
- No lo recolorees, no le pongas degradado ni inviertas los colores.
- No lo distorsiones, no lo rotes ni cambies la proporción.
- No le apliques sombra, contorno, brillo ni textura.
- No redibujes el símbolo ni lo sustituyas por un carácter de fuente.
- No uses las wordmarks dentro de una app: cargan una fuente externa que la política de seguridad bloquea.
Color
Paleta
Colores de marca
Los dos colores del símbolo. Son fijos: no siguen al tema y no tienen variación por contexto.
La "S" del símbolo y el "Seventy" de las wordmarks.
El "7" del símbolo y el "Sete" de las wordmarks.
Paleta de la interfaz
El color dentro del producto no se elige: se consume como token. Cada token tiene un valor por tema y la interfaz cambia sola.
| Token | Claro | Oscuro | Uso |
|---|---|---|---|
| --tree-color-bg-primary | #f6f8fa | #1c2128 | Fondo de la página. |
| --tree-color-bg-surface | #ffffff | #22272e | Superficie elevada: tarjeta, panel, menú. |
| --tree-color-bg-subtle | #eff2f5 | #2d333b | Franja de apoyo y estado hover discreto. |
| --tree-color-text-primary | #1f2328 | #adbac7 | Texto de lectura y títulos. |
| --tree-color-text-muted | #59636e | #95a3b2 | Texto secundario, leyenda y metadato. |
| --tree-color-border-default | #d0d7de | #444c56 | Borde de tarjeta, campo y divisoria. |
| --tree-color-brand-primary | #0969da | #559cf5 | Acción principal, enlace y foco. |
| --tree-color-brand-soft | #ddf4ff | #1a3453 | Fondo suave de destaque y selección. |
| --tree-color-status-success | #197d36 | #5bae5e | Confirmación y estado saludable. |
| --tree-color-status-warning | #946300 | #c99227 | Atención y límite acercándose. |
| --tree-color-status-error | #d1242f | #f5766e | Fallo, error y acción destructiva. |
| --tree-color-status-info | #0969da | #6cb6ff | Aviso neutro e información de contexto. |
Nunca escribas un valor de color directo en el producto. Usa var(--tree-color-…): un token inexistente no da error, solo entrega el color equivocado en silencio.
Tipografía
Cómo se comporta el texto
Dos familias en el producto y una tercera solo en las piezas de marca. La escala es cerrada: ningún tamaño fuera de ella.
La marca habla con claridad
"Google Sans Flex", "Segoe UI", sans-serifTodo el texto del producto y de este sitio.
La marca habla con claridad
"Google Sans Code", "SFMono-Regular", monospaceTexto de máquina: identificador, token, dirección, código.
La marca habla con claridad
Gabarito, Poppins, "Century Gothic", Futura, sans-serifSolo dentro de las wordmarks. No la uses en interfaz: la fuente viene de un servidor externo.
Escala
Ocho peldaños. Se usa el nombre del peldaño, nunca el valor.
La marca habla con claridad
La marca habla con claridad
La marca habla con claridad
La marca habla con claridad
La marca habla con claridad
La marca habla con claridad
La marca habla con claridad
La marca habla con claridad
Tema
Claro y oscuro, los decide el usuario
La interfaz sigue el tema del sistema operativo de quien la usa. No hay botón de cambio y ninguna pantalla fuerza un tema: quien eligió oscuro en su sistema recibe oscuro en todas partes, incluida esta página.
Tono de voz
Cómo escribimos
La escritura es parte de la marca. Estas cuatro reglas resuelven casi toda duda de redacción.
Claro antes que ingenioso
Di lo que la cosa hace. Una frase que hay que releer ya perdió, por bonita que sea.
Concreto, sin superlativos
Nada de "revolucionario" ni "líder del mercado". Prefiere el hecho verificable al adjetivo.
Directo y sin jerga
Habla con la persona, en segunda persona. El término técnico entra cuando es el nombre correcto, no para impresionar.
Honesto sobre el estado
Lo que está en desarrollo se anuncia como tal. Prometer terminado lo que no lo está es la forma más rápida de perder la confianza para siempre.
Seventy Sete, SeventySete, S7, Space, Assistant y los nombres de los productos son marcas: se leen igual en portugués, inglés y español.
Archivos
Descarga los originales
Todos en SVG y sin dependencia externa. Si necesitas otro formato, genéralo a partir de estos.
Estándar de la plataforma: favicon y marca en todas las apps. Sin dependencia externa.
La retícula y las cotas que generan el símbolo. Es especificación de diseño, no pieza de aplicación.
La hoja que documenta todo el sistema modular. Referencia para rediseñar, nunca para aplicar.
