La idea
Todo lo demás —el isotipo, el color, la voz— sale de esta frase. Si una pieza nueva no la sostiene, la pieza está mal, no la frase.
No ves el final. Ves el siguiente metro.
Un topo no ve el final del túnel: excava el siguiente metro, y llega. Es la experiencia literal de preparar una oposición —dos años, decenas de temas, sin meta a la vista— y es literalmente lo que hace el producto: convertir el temario entero en el único paso de hoy.
Un paso, no un temario
La marca enseña lo que toca hoy. El bloque entero de 82 temas es justo lo que agobia.
Constancia, no urgencia
Se celebra volver; no se amenaza con lo que queda. La cuenta atrás es de otro producto.
Oficio, no motivación
Datos, formato oficial y avance medible antes que frases de póster.
Compañero, no tribunal
Se habla de tú y desde al lado, nunca desde encima.
La marca se dibuja con geometría, no con ilustración.
El isotipo son cuatro barras y un hueco; el wordmark, el mismo trazo convertido en letras. Todo sale de un archivo de medidas, así que el logo de una imprenta y el de la pantalla son el mismo dibujo y no dos versiones que se separan con los años.
Isotipo
Cuatro barras alrededor de un hueco central, dentro de una teja. La «o» la dibuja el espacio negativo, no un trazo: por eso las esquinas se quedan vacías y por eso el hueco no se toca nunca.
El hueco es parte del dibujo.
Rellenarlo, meterle una letra o poner el isotipo sobre una foto con detalle en el centro destruye lo único que hace que se lea una «o».
Simetría de giro, no de espejo.
Las cuatro barras son la misma pieza girada 90°. Es lo que mantiene el conjunto estable en cualquier orientación de la retícula de una página.
Teja
Las cuatro barras en rosa dentro de la teja de ciruela.
Es la versión por defecto y la que va en el lockup, el icono de aplicación, el favicon a partir de 32px y el avatar. Lleva sus colores puestos: el logo no se recolorea con el tema, igual que no cambia de color un logo impreso porque el lector encienda la luz.
Suelto
Solo las cuatro barras, a sangre y a una tinta.
Grabado, troquel, serigrafía, bordado y sello: donde solo hay una tinta, la teja se cae y quedan las barras, que heredan el color de donde estén. Escalan hasta el borde del lienzo porque el margen de la teja, sin teja, se lee como un logo pequeño y descentrado.
La teja lleva su degradado, y ese degradado no es decoración.
Ciruela arriba a la izquierda, tinta abajo a la derecha: los dos colores de la marca, en el orden en que la luz cae sobre un objeto. Donde no hay degradado posible —una tinta, bordado, tamaños diminutos— se usa la teja plana en tinta.
El relieve del original se retiró.
Las barras del logo de partida llevaban un biselado de plástico. A 16px se convierte en suciedad, en una tinta no existe y en impresión se ensucia con la trama. El dibujo es el mismo; lo que se fue es el efecto.
Tamaños mínimos
16px
24px
32px
48px
Por debajo de 24px la teja va plana, sin degradado: a ese tamaño el degradado no se percibe y solo emborrona el borde. El isotipo no baja de 16px — por debajo, el hueco central se cierra con el antialiasing y deja de leerse una «o».
Lo que no se hace
No se deforma
Escalar solo en un eje rompe el grosor común de las cuatro barras.
No se gira
La teja es ortogonal. Girada deja de encajar con cualquier retícula de página.
No se recolorea
Ciruela y rosa, o una tinta. Cualquier otro color lo convierte en el icono de otra cosa.
No lleva efectos
Sombras y relieves le dan una profundidad que la marca no tiene en ningún otro sitio.
No se engordan las barras
El hueco se cierra y con él se va la «o». El grosor sale de la construcción, no del gusto.
No se saca una barra de su sitio
La simetría de giro es lo que hace que cuatro piezas se lean como una sola forma.
Wordmark y lockup
«opotopo» está dibujado a trazo, no tipografiado. Siete glifos monolineales de remate redondo sobre la misma geometría que el isotipo: no hay fuente que licenciar, ni fallback que pueda romperlo, ni un servidor de tipografías del que dependa la marca.
Un aire fijo entre letras, sin ajustar a ojo.
El interletrado forma parte del dibujo. Retocarlo en una pieza concreta es lo que hace que dos versiones del mismo nombre dejen de parecer la misma marca.
Monolineal: un solo grosor en toda la palabra.
Ni modulación, ni remates finos, ni contraste entre trazo grueso y fino. Es la misma decisión que en el isotipo — cuatro barras del mismo grosor — dicha con letras.
Los cuencos son cuadrados redondeados, no círculos.
La o del wordmark y el hueco del isotipo comparten forma. Si los cuencos fueran circulares, el logotipo y la marca dejarían de parecer dibujados por la misma mano.
El lockup
La teja no se invierte: sobre oscuro se cae.
Ciruela y tinta son la familia oscura de la marca, así que sobre una losa en tinta la teja se funde con el fondo. Ahí el lockup va monocromo —las cuatro barras sueltas y el logotipo, los dos en papel— que es la misma pieza que se manda a una imprenta de una tinta. Lo que nunca se hace es repintar la teja de otro color para que destaque.
El lockup no se recompone.
Ni la teja encima del nombre, ni el nombre en otra tipografía, ni un tagline metido dentro de la caja. Si hace falta una disposición vertical, se pide y se añade al kit.
Color
Cinco colores con un oficio cada uno. El nombre dice el rol, no la poesía: si un color hace dos trabajos, deja de hacer bien el primero.
Papel
Suelo
- HEX
- #F8F3EF
- RGB
- 248 243 239
- CMYK
- 0 2 4 3
- Oscuro
- #241320
El fondo por defecto. Ocupa el 80% de cualquier superficie.
--ot-papel
Tinta
Color propietario
- HEX
- #351C2D
- RGB
- 53 28 45
- CMYK
- 0 47 15 79
- Oscuro
- #F6EDE9
Texto, isotipo, wordmark y módulos de temario. Es el color de la marca.
--ot-tinta
Ciruela
Elevado
- HEX
- #603049
- RGB
- 96 48 73
- CMYK
- 0 50 24 62
- Oscuro
- #C9AEBC
Segundo nivel de tinta: texto secundario, superficies elevadas, hover.
--ot-ciruela
Rosa
Textura
- HEX
- #EFB4CD
- RGB
- 239 180 205
- CMYK
- 0 25 14 6
- Oscuro
- #A0687F
Tramas, mapas y rellenos. Nunca señala nada y nunca lleva texto encima.
--ot-rosa
Señal
Acento
- HEX
- #E76FA1
- RGB
- 231 111 161
- CMYK
- 0 52 30 9
- Oscuro
- #F286B0
Lo que toca ahora. Un solo uso por vista, o deja de significar algo.
--ot-senal
Reparto de superficie
78% Papel
13% Tinta
5% Ciruela
3% Rosa
1% Señal
Los porcentajes no son una aspiración decorativa: son la comprobación. Si en una pieza nueva el rosa o la señal se comen más superficie que esto, la pieza está gritando.
Contraste
Ratios de WCAG 2.1 calculados sobre los hex de arriba, en los dos temas. Los pares que bajan de 3:1 están aquí a propósito: son combinaciones que existen en la marca y que no pueden llevar texto.
| Texto | Fondo | Claro | Oscuro |
|---|---|---|---|
| Tinta | Papel | 14.06 · AAA | 15.31 · AAA |
| Ciruela | Papel | 9.45 · AAA | 8.63 · AAA |
| Papel | Tinta | 14.06 · AAA | 15.31 · AAA |
| Rosa | Tinta | 8.91 · AAA | 3.81 · AA grande |
| Señal | Tinta | 5.30 · AA | 2.07 · No usar en texto |
| Señal | Papel | 2.65 · No usar en texto | 7.41 · AAA |
| Tinta | Rosa | 8.91 · AAA | 3.81 · AA grande |
| Papel | Señal | 2.65 · No usar en texto | 7.41 · AAA |
La señal es el único color con permiso para interrumpir.
Un uso por vista. Si aparece dos veces en la misma pantalla, ya no significa nada: el lector deja de saber cuál de las dos cosas tenía que mirar.
El rosa textura nunca señala y nunca lleva texto encima.
Está a un paso del papel en luminosidad: a ese contraste no destaca, decora. Es el color de las tramas y los mapas, y ahí es exactamente donde tiene que quedarse.
Verde y rojo solo existen para corregir una respuesta.
Ni gráficas, ni etiquetas, ni «éxito» genérico. En un producto donde acertar y fallar son el suceso principal, gastarlos en otra cosa es quitarles el significado que de verdad importa.
El oro es logro consumado, jamás una acción pendiente.
Trofeos, rachas, simulacros aprobados. Un botón en oro promete una recompensa que todavía no ha pasado.
Tipografía
Una sola familia para todo lo que se lee, y una monoespaciada para todo lo que se cuenta. Los roles se distinguen por peso y tracking, nunca por cambiar de tipografía.
Hanken Grotesk · variable
Aa
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 ¿? ¡! áéíóú ü
Un grotesco cálido: geométrico de esqueleto, pero con las terminaciones lo bastante abiertas para leerse horas seguidas. Se sirve en local desde el propio dominio, así que la marca no depende de que un tercero siga sirviendo la fuente.
IBM Plex Mono
48/82
0123456789
17 días · 82% · 90:00
Existe para una sola cosa: datos. Porcentajes, contadores, días de racha, código de tema, cronómetro y marcador. Nunca para texto corrido, ni para dar «aire técnico» a un título.
Escala
t-display
Solo el hero de la landing
Aprueba
t-h1
Título de pantalla
Tu siguiente paso
t-h2
Sección
Funcionalidades
t-h3
Tarjeta
Test por tema
t-body
Cuerpo
Practica cada bloque del temario a tu ritmo.
t-small
Secundario
Acceso completo gratis durante 7 días.
t-label
Mayúsculas
Simulacro en curso
17días
racha
82%
acierto
Toda cifra va en cifras tabulares.
Un contador que actualiza con cifras proporcionales mueve el layout en cada tick. La clase .nums fija el ancho de dígito; es obligatoria en cualquier número que cambie solo.
Las mayúsculas son una etiqueta, no un énfasis.
t-label se reserva para rótulos cortos con tracking abierto. Una frase entera en mayúsculas en un producto que se usa cansado y de noche se lee como una regañina.
Trama
El módulo del logo repetido hasta cubrir una superficie: la misma esquina redondeada y el mismo aire que separan las cuatro barras. Es lo que sustituye a la dirección de fotografía — cuesta cero, es infinita y es cien por cien propietaria.
Fondo
Densidad baja y constante. Cabeceras y bloques de sección. La baldosa tiene dos celdas encendidas por fila y por columna: con los recuentos iguales en los dos ejes no puede aparecer una banda vacía, que es lo que se lee como rayado al teselar.
Densidad
La rejilla se espesa hacia la derecha. Sirve de transición entre dos bloques sin recurrir a un degradado de color, que la paleta no tiene.
Memoria
Existe un tercer patrón, reservado al hero de la landing: el mapa de repaso. Misma disposición que el fondo, pero un subconjunto disperso de celdas se enciende en señal y vuelve a apagarse — cada celda es un tema, y se enciende cuando toca repasarlo.
No se reproduce en esta página a propósito. Es el único sitio donde la señal se multiplica, y solo se sostiene porque ahí significa algo concreto: repetirlo en una guía lo convertiría en decoración parpadeante.
La trama va en rosa textura, nunca en señal.
Una trama no interrumpe. En cuanto se pinta en el color del acento, la pantalla entera pasa a reclamar atención y el botón que sí la necesitaba deja de tenerla.
Nunca por encima del 12% de opacidad.
Por encima compite con el texto que tiene delante. Si hace falta que se note más, se agranda la celda; no se sube la opacidad.
Iconografía
Iconos de línea de Lucide, sin excepciones. No se dibujan iconos propios: el isotipo ya es la forma propietaria de la marca, y un repertorio dibujado a mano en paralelo solo añade una segunda voz gráfica que mantener.
Tema del temario
Simulacro
Plan de repaso
Racha
Logro conseguido
Tiempo restante
Respuesta correcta
Oposición
Comunidad
Aviso de convocatoria
Primera vez
Puntería
Volumen
Racha
Tema dominado
Pleno
Madrugar
Trasnochar
Sesión larga
Podio
Un icono, un significado, en todo el producto.
El día que la diana significa «simulacro» en una pantalla y «objetivo semanal» en otra, el opositor deja de leer iconos y pasa a leer solo etiquetas — y entonces sobran los iconos.
Heredan el color del texto que acompañan.
Un icono en señal es un acento. Como solo hay un acento por vista, gastarlo en un adorno de una fila de lista deja sin él a la acción principal.
Nunca sustituyen a una palabra que cabe.
Un icono suelto sin etiqueta obliga a adivinar. En un producto que se usa con prisa y cansancio, adivinar es tiempo perdido y una respuesta fallada.
El isotipo no es un icono.
No se mete en una lista de funcionalidades ni sustituye a un pictograma. Es la firma de la marca, y una firma que aparece diez veces por pantalla deja de firmar nada.
Aplicaciones
La marca puesta a trabajar en los sitios donde de verdad aparece. Cada una de estas piezas usa una versión concreta del logo, y la elección no es de gusto: la manda el tamaño y el número de tintas.
Icono de aplicación
La teja ES el icono: no se mete dentro de otro cuadrado redondeado. El hueco central sigue haciendo de contraforma a 60px en una pantalla de inicio.
Favicon
A 16px la teja va plana, sin degradado: a ese tamaño no se percibe y solo emborrona el borde.
OpoTopo
@opotopo
Avatar
El isotipo va solo donde el nombre ya está escrito al lado por la propia plataforma.
No ves el final. Ves el siguiente metro.
opotopo.es
Tarjeta de compartición
Losa de tinta, trama de fondo y lockup arriba. El claim ocupa el sitio del titular porque en un timeline la imagen se lee antes que el texto del enlace.
Papelería
Lockup arriba a la izquierda, a un módulo del margen, y el resto de la hoja en blanco. Un membrete no es una portada.
Una tinta
Grabado, troquel, serigrafía y sello. La teja se cae y quedan las cuatro barras: sin degradado y sin medios tonos, porque la máquina solo tiene una tinta.
Fondo oscuro
Sobre tinta el lockup va monocromo: la teja, que es ciruela y tinta, se fundiría con el fondo. Es la misma pieza que se manda a una imprenta de una tinta.
Al rotulista y a la imprenta siempre el vector.
El SVG o el PDF de la carpeta de impresión, nunca un PNG ni una captura. Un PNG ampliado a un metro de valla es un logo con los bordes rotos, y el error se ve desde la acera de enfrente.
Si la pieza no está aquí, se pide.
Es preferible añadir una versión al kit que ver a alguien improvisándola en una plantilla. Improvisar es como nacen las siete variantes del mismo logo.
Voz
OpoTopo habla como un compañero de estudio que va un poco por delante: cercano, concreto y sin dramatismo. Ni profesor con vara, ni coach de autoayuda.
Así sí
«Llevas 7 días seguidos. Sigue así.»
«60 preguntas, 90 minutos, formato oficial.»
«Enhorabuena: has aprobado el simulacro.»
«Hoy toca repasar Derecho Administrativo I.»
Así no
«Solo te quedan 3 días.»
«El discente deberá completar la unidad.»
«Aprueba seguro en 30 días.»
«Estás cerquita de aprobar, ánimo campeón.»
Cómo se llaman las cosas
Tema
Cada unidad del temario oficial. Nunca «lección» ni «módulo».
Test
Tanda corta de preguntas sobre uno o varios temas. Nunca «quiz».
Simulacro
Examen completo con el formato y el tiempo oficiales.
Racha
Días seguidos estudiando. Nunca «streak».
Repaso
Lo que el plan devuelve cuando toca volver a un tema.
Liga
La clasificación entre opositores de la misma convocatoria.
Siempre de tú.
El usted pone una mesa de tribunal entre el producto y quien lo usa, que es justo la relación que la marca no quiere tener.
Nunca se mete prisa con lo que falta.
La ansiedad ya la pone la oposición. El producto cuenta lo hecho, no lo que queda; es la diferencia entre volver mañana y cerrar la aplicación.
Mascota
No hay mascota. El topo se retiró del producto el 4 de agosto de 2026 — no solo de la marca, también de las pantallas donde había sobrevivido.
Una marca no tiene dos símbolos.
Mientras el topo vivía dentro, la aplicación enseñaba dos cosas distintas según la pantalla: el isotipo en la cabecera y un personaje ilustrado en los estados vacíos y en el tutor. Quien entra no sabe cuál de los dos es la marca.
Donde estaba el topo, ahora está el isotipo.
Los estados vacíos y las marcas de agua llevan el isotipo suelto a baja opacidad. Ocupa el mismo hueco, dice lo mismo —«esto es OpoTopo»— y no envejece como envejece un personaje dibujado.
Recursos
Todo el kit sale del mismo archivo de geometría que renderiza la web, generado por script. Ni una de estas piezas está dibujada a mano, así que el logo impreso y el de la pantalla no pueden separarse con los años.
Kit de marca completo
Vector, mapa de bits e impresión en un solo archivo.
Vector
El original. Es lo único que se manda a un rotulista, a una imprenta o a un medio: escala sin perder un borde y se puede recolorear sin volver a pedirlo.
Lockup
La versión por defecto: teja a color y logotipo en tinta. Cualquier fondo claro.
SVG
Lockup · fondo oscuro
La misma pieza con el logotipo en papel. La teja no cambia: nunca se invierte.
SVG
Lockup · una tinta
Barras caladas y letras en negro puro. Grabado, serigrafía, sello y fax de notaría.
SVG
Isotipo
La teja suelta. Icono de aplicación, favicon a partir de 32px y avatar.
SVG
Isotipo · plano
Sin degradado, teja en tinta. Para impresión plana y tamaños diminutos.
SVG
Isotipo · una tinta
Solo las cuatro barras, a sangre del lienzo. Troquel, grabado y bordado.
SVG
Wordmark · tinta
Solo el logotipo, para cuando la teja ya está presente en la pieza.
SVG
Wordmark · papel
El logotipo suelto sobre fondo oscuro.
SVG
Trama
La baldosa del patrón, lista para teselar. Siempre en rosa textura.
SVG
Mapa de bits
Para donde no entra un vector: redes sociales, plantillas de terceros y adjuntos. Fondo transparente y tamaño de sobra, para reducir nunca ampliar.
Lockup · 2048px
Presentaciones, plantillas de terceros y adjuntos sobre fondo claro.
PNG
Lockup · fondo oscuro · 2048px
Lo mismo sobre fondo oscuro.
PNG
Isotipo · 1024px
Avatar de perfil e icono de aplicación.
PNG
Isotipo · 512px
El mismo avatar donde 1024 es excesivo.
PNG
Wordmark · tinta · 2048px
El logotipo suelto para plantillas que no admiten vector.
PNG
Impresión
Vector empaquetado en PDF, que es lo que pide una imprenta cuando dice «mándame el logo». Sin trazar a curvas: no hay tipografía dentro, son trazos y rectángulos.
Para desarrollo
Los cinco tokens de la identidad, en los dos temas. En la aplicación ya viven en src/app/globals.css; esto es para cualquier otra superficie —un correo, una landing de campaña, un panel externo— que tenga que pintar con la marca.
:root {
--ot-papel : #F8F3EF;
--ot-tinta : #351C2D;
--ot-ciruela: #603049;
--ot-rosa : #EFB4CD;
--ot-senal : #E76FA1;
}
.dark {
--ot-papel : #241320;
--ot-tinta : #F6EDE9;
--ot-ciruela: #C9AEBC;
--ot-rosa : #A0687F;
--ot-senal : #F286B0;
}El kit se regenera, no se edita.
npm run marca:kit vuelve a construir las diecisiete piezas desde la rejilla. Retocar un SVG descargado a mano crea la primera versión divergente del logo, y a partir de ahí ya son dos marcas.
Esta página es la referencia, no un PDF.
Un manual exportado se queda quieto mientras el producto avanza. Aquí el color, el logo y las tramas son los componentes de verdad: si cambian en el código, cambian aquí el mismo día.