Guía de marca · Versión 1.0 · 2026
La identidad
Super 8
cómo somos, y por qué.
Una guía corta y práctica sobre el símbolo de Super 8, los colores y tipografías que lo acompañan, y las pocas reglas que lo mantienen bien allá donde aparezca.
01 / Misión
Por qué
existimos.
Misión
Ayudar a empresas fintech y de tecnología B2B a parecerse a lo que quieren llegar a ser.
Convertimos las ambiciones de una empresa y su lugar en el mercado en una identidad de marca y un sistema de diseño que su equipo sigue usando mucho después del lanzamiento. Un mismo equipo, desde la primera idea hasta la última línea de código.
Visión
Marcas diseñadas para generar confianza.
Nos encanta crear marcas y webs con intención y optimismo, junto a especialistas con mucho talento, para hacer un trabajo pensado para durar y que inspire confianza.
En qué creemos
- 01Claridad
Si la gente no entiende lo que hace una empresa, no confía en ella. Recortamos hasta que la idea sea evidente.
- 02Oficio
Los detalles son lo que hace que algo parezca creíble. Cuidamos el espaciado, el código y el texto, porque la gente nota cuando nadie lo hizo.
- 03Diseño + código
La idea y la construcción viven bajo el mismo techo, así que lo que diseñamos es lo que se publica.
- 04Gente senior, de principio a fin
Cada proyecto lo lideran y diseñan personas con experiencia. Nada de juniors aprendiendo con tu marca.
- 05A largo plazo
Trabajamos como parte de tu equipo, y preferimos construir algo que dure antes que algo que esté de moda.
02 / El logo
Dos círculos.
Un ocho.
El símbolo es un diagrama de Venn puesto de pie. Habla de las dos cosas sobre las que siempre se ha construido el estudio: diseño y código. El naranja es el diseño, el turquesa es el código, y la lente verde donde se solapan es donde hacemos nuestro mejor trabajo. Apilados, los dos círculos también forman un 8.
La idea
Diseño + código
dos mitades, un estudio.
Muchos estudios tratan el diseño y el desarrollo como trabajos separados que se pasan de un lado a otro. Nosotros no. Una marca solo funciona cuando la idea y la construcción tiran en la misma dirección, así que mantenemos las dos bajo el mismo techo. El símbolo es esa dualidad dibujada de la forma más sencilla posible: dos círculos iguales, ninguno más importante que el otro, y una tercera cosa que solo existe cuando se encuentran.
03 / Construcción
Hecho con
un círculo.
Todo sale de una sola medida: el radio del círculo, r. Dos círculos de radio r se solapan 0,68r. El símbolo completo mide 2r de ancho y 3,32r de alto, una retícula de 100 × 166.
- Círculo
- Radio r, los dos iguales
- Solape
- 0,68r (34 en la retícula de 100)
- Proporción
- 100 de ancho × 166 de alto
- Separación
- 0,4 × la altura del símbolo
- Tamaño del logotipo
- El cuerpo es igual a la altura del símbolo
- Espaciado
- +0,02em, en mayúsculas
04 / Espacio de respeto y tamaño mínimo
Dale aire.
Deja libre un margen de al menos r (la mitad del ancho del símbolo) por todos los lados del logo. Sin textos, imágenes ni bordes dentro.
Por debajo de estos tamaños la lente verde empieza a desaparecer. Para favicons, usa el archivo cuadrado, que centra el símbolo en un lienzo de 166 × 166.
05 / Versiones de color y fondos
Primero, a color.
A todo color sobre fondos claros. Sobre Ink y Navy la lente pasa a Stone. Sobre los temas de color, como Studio Green y Rust, el símbolo va en blanco. La versión a color nunca va sobre naranja ni turquesa.
06 / Lo que no
Por favor, no.
La mayoría de los problemas vienen de intentar que el logo encaje. Si no encaja, cambia la maqueta, no el logo.
07 / Color
Papel cálido,
señal brillante.
Paper e Ink hacen casi todo el trabajo. Orange y Teal vienen del símbolo y se usan con moderación, como señales, no como fondo para texto. Los colores de apoyo marcan el ambiente de cada página.
Principales
Diseño. El círculo de arriba, acentos y un solo destacado por vista.
- HEX
- #F1501B
- RGB
- 241 80 27
- CMYK estucado
- 0 80 100 0
- CMYK no estucado
- 0 70 90 0
- Pantone
- 172 C
Código. El círculo de abajo, puntos de estado y acentos en serif sobre oscuro.
- HEX
- #07BCB4
- RGB
- 7 188 180
- CMYK estucado
- 75 0 35 0
- CMYK no estucado
- 65 0 30 0
- Pantone
- 3262 C
Donde se encuentran. Reservado para el símbolo.
- HEX
- #073B13
- RGB
- 7 59 19
- CMYK estucado
- 85 30 100 60
- CMYK no estucado
- 80 25 95 55
- Pantone
- 3435 C
Texto, el logotipo y paneles oscuros.
- HEX
- #131313
- RGB
- 19 19 19
- CMYK estucado
- 60 40 40 100
- CMYK no estucado
- 50 40 40 100
- Pantone
- Black 6 C
El fondo por defecto.
- HEX
- #E7E5DF
- RGB
- 231 229 223
- CMYK estucado
- 0 1 5 10
- CMYK no estucado
- 0 1 5 8
- Pantone
- Warm Gray 1 C
Tarjetas sobre Paper, y texto sobre oscuro.
- HEX
- #F6F5F1
- RGB
- 246 245 241
- CMYK estucado
- 0 0 2 3
- CMYK no estucado
- 0 0 0 0
- Pantone
- Papel blanco, sin tinta
De apoyo
- HEX
- #21306B
- CMYK
- 100 85 20 15
- Pantone
- 2757 C
- HEX
- #0D3B38
- CMYK
- 90 40 65 55
- Pantone
- 3308 C
- HEX
- #9FECE4
- CMYK
- 35 0 15 0
- Pantone
- 331 C
- HEX
- #B8401C
- CMYK
- 15 85 100 5
- Pantone
- 1675 C
- HEX
- #C9C6FF
- CMYK
- 20 20 0 0
- Pantone
- 270 C
- HEX
- #6F6C66
- CMYK
- 45 40 45 25
- Pantone
- Warm Gray 10 C
Los valores de impresión son las equivalencias más cercanas, elegidas a ojo y no por conversión automática. El CMYK estucado es para FOGRA39 en Europa. Compruébalos siempre con una guía Pantone actual y una prueba impresa antes de una tirada grande.
Combinaciones accesibles
Contraste WCAG. El nivel AA pide 4,5:1 para texto corrido y 3:1 para texto grande (24px o más).
| Combinación | Ratio | Uso |
|---|---|---|
| Ink sobre Paper | 14.8:1 | Todo |
| Stone sobre Ink | 17.0:1 | Todo |
| Stone sobre Navy | 11.3:1 | Todo |
| Teal sobre Ink | 7.8:1 | Acentos y texto sobre oscuro |
| Orange sobre Ink | 5.2:1 | Acentos sobre oscuro |
| Orange sobre Paper | 2.8:1 | Solo titulares grandes, nunca texto corrido |
| Teal sobre Paper | 1.9:1 | Solo decoración, nunca texto |
08 / Tipografía
Fuerte, y luego
suave.
Tres familias, todas libres y de código abierto. Una display alta y condensada para los titulares, una serif cursiva con carácter para el giro de la frase, y una sans limpia para todo lo que de verdad se lee.
Marcas
diseñadas
Black (900), en mayúsculas, espaciado de +0,01em a +0,02em, interlineado 0,9. Titulares y el logotipo.
para generar confianza.
Cursiva regular, en minúsculas. Una frase corta que sigue al titular. Una por vista.
Diseño de marca y web para fintech y tecnología B2B, desde 2009.
Hacemos que las empresas complejas sean fáciles de entender y de creer. Eso significa un posicionamiento claro, una identidad con seguridad y una web que vende por ti.
Regular 400 para el texto, Medium 500 para entradillas y navegación, SemiBold 600 para etiquetas y botones.
Escala tipográfica web
| Estilo | Fuente | Tamaño (escritorio) | Interlineado |
|---|---|---|---|
| Display | Big Shoulders 900 | 128–222px | 0.86 |
| H1 | Big Shoulders 900 | 88px | 0.92 |
| Acento | Instrument Serif Italic | 1–1,1× el titular | 1.0 |
| Intro | Instrument Sans 500 | 22–30px | 1.35 |
| Texto | Instrument Sans 400 | 17px | 1.55 |
| Etiqueta | Instrument Sans 600, mayúsculas | 13px, +0.08em | 1.2 |
09 / Tono de voz
Dilo
claro.
Sonamos como se ve nuestro trabajo: claros, seguros y humanos. Escribimos para gente ocupada en empresas serias, así que vamos al grano y nos saltamos el bombo.
Decimos lo que queremos decir con palabras sencillas. Si una frase hay que leerla dos veces, se reescribe.
Sabemos lo que hacemos, así que no necesitamos superlativos. Enseñamos el trabajo y dejamos que hable por sí solo.
Escribimos como una persona que habla con otra. Usamos “nosotros” y “tú”, y algún toque de calidez.
No prometemos de más ni nos escondemos tras el lenguaje de marketing. Lo concreto gana siempre a los adjetivos.
En la práctica
Aprovechamos soluciones creativas de vanguardia para ofrecer experiencias de marca de primer nivel.
Diseñamos marcas y webs para fintech y tecnología B2B.
Nuestro apasionado equipo de creativos de talla mundial se dedica a superar expectativas.
Cada proyecto lo lideran diseñadores con experiencia, de principio a fin.
¡Contáctanos hoy y desbloquea todo el potencial de tu marca!
¿Tienes un proyecto? Cuéntanoslo y te respondemos en un día.
Reglas de escritura
- Inglés británico en la versión en inglés: colour, organise, centre.
- Frases cortas. Una idea por frase.
- “Nosotros” para el estudio, nunca nombres individuales en trabajos para clientes.
- Números en cifras: 3 semanas, más de 150 proyectos.
- Mayúscula solo inicial en los títulos. Todo en mayúsculas solo con Big Shoulders.
- Sin rayas largas. Usa un punto, una coma o dos puntos.
Palabras que evitamos
Si te ves tirando de una de estas, di la cosa concreta en su lugar.
- leverage
- synergy
- solutions
- world-class
- cutting-edge
- best-in-class
- passionate
- unlock
- seamless
- innovative
10 / Movimiento
El giro.
En pantalla, el símbolo representa la idea. Diseño y código se atraviesan y cambian de sitio, y luego el símbolo entero da media vuelta y termina justo donde empezó. Una de cada dos veces, en su lugar, hace un breve glitch RGB, como una tele antigua.
- Duración
- 2,2 s por giro
- Curva
- cubic-bezier(0.65, 0, 0.35, 1)
- Frecuencia
- Al cargar, y luego cada 20 s
- Accesibilidad
- Desactivado con movimiento reducido
11 / Descargas
Archivos del logo.
Todas las versiones en todos los colores. SVG para web e imprenta (el texto está trazado, no hacen falta fuentes) y PNG transparente para todo lo demás. Los PNG de las versiones completas miden 2000px de ancho.
Redes y medios
Los avatares mantienen el símbolo dentro de un recorte circular. Las tarjetas sirven para las previsualizaciones de enlaces en LinkedIn, Bluesky y Slack.
¿Necesitas algo que no está aquí o tienes una duda sobre cómo usar la marca?
hello@supereightstudio.com