Manual de marca · uso interno
Lo que hace falta para que cualquier cosa que publiquemos —web, demo, vídeo, PDF— se reconozca como nuestra. Los valores salen de la propia web: si cambian en el código, cambian aquí.
Botones
En toda la web y en la demo hay dos botones de conversión con el mismo texto y el mismo color siempre, y un tercero para moverse. Quien ha visto la portada los reconoce en cualquier página.
Pide un servicio. Abre el panel con las cuatro opciones (Guardias y gestión TIC, demo de tu horario, Pack Docencia 360, hablar) y captura el contacto. Ningún otro botón lleva su color.
Abre la demo pública: un centro de ejemplo con datos inventados, sin dejar el correo. Siempre en índigo, siempre al lado del duro.
Para moverse dentro de la web. Borde fino, sin color. Nunca vende nada.
Debajo de cada botón de conversión va una frase de una línea que dice qué pasa al pulsar: la del duro cambia por producto (en Horarios, «48 horas. Si no sale, no pagas.»; en Guardias, la oferta gratis); la de la demo es siempre «Sin registro. Datos ficticios.».
Cada propuesta muestra los tres botones sobre papel y sobre la banda oscura, con la frase debajo. Chris eligió la A: el botón no cambia, lo que entra en toda la web es la frase de debajo (componente CtaPar). Las otras cinco quedan aquí como registro de lo que se descartó.
Degradado de marca, esquinas de 0,9 rem, se eleva 1 px al pasar. Chris la eligió el 02-11-2026: el botón se queda como está y lo que entra es la frase de debajo.
Sobre la banda oscura (CTA final de cada página)
Índigo liso, sin degradado ni elevación; al pasar se oscurece. El degradado queda solo para «360» y una palabra por titular. Más sobria, menos «hecha con IA».
Sobre la banda oscura (CTA final de cada página)
Botón de tinta (negro sobre papel, blanco sobre la banda oscura). Es el botón de una editorial o de un banco: serio, institucional. La demo en índigo suave es la única nota de color.
Sobre la banda oscura (CTA final de cada página)
Interior blanco con el degradado como anillo de 2 px; al pasar se rellena. Conserva la marca pero la baja de volumen. Lee como «botón», no como «banner».
Sobre la banda oscura (CTA final de cada página)
Redonda del todo, índigo con un resplandor índigo y la flecha. Es la forma del botón flotante de la demo (paso.js), así que web y demo quedan iguales sin tocar la demo.
Sobre la banda oscura (CTA final de cada página)
La frase va DENTRO del botón, como segunda línea pequeña. Así la frase viaja con el botón a todas partes y nunca se queda descuadrada debajo. No cabe en la cabecera: ahí va en una línea.
Sobre la banda oscura (CTA final de cada página)
Color
Un solo tema: claro. Las bandas oscuras (los «dolores» y la llamada final) son un elemento de diseño, no un modo. Cada pata tiene su color y se usa solo para identificarla: Oposiciones violeta, Docentes índigo, Centros coral.
--bgFondo de página (papel)--surfaceTarjetas, formularios, marcos de captura--surface-2Bandas alternas, chips, barra del navegador--lineBordes y separadores--txtTexto principal (tinta)--mutTexto secundario--indigoDocentes · enlaces · botón de la demo--violetOposiciones · antetítulos--coralCentros · dolores · avisos--okEstado «Disponible»--indigo-soft--violet-soft--coral-soft--ok-soft--gradÍndigo → violeta → coral, de izquierda a derecha. Solo para «360», el botón duro (si la propuesta elegida lo lleva), una palabra por titular y la banda fina de 4 px. Nunca como fondo de una sección entera.
Tu horario, hecho. En 48 horas.
Tipografía
Las dos se sirven desde la propia web (sin Google Fonts). Titulares en Outfit 700–900 con interletraje negativo; todo el texto corrido y los formularios en Inter.
Voz
De tú al docente, de vosotros al centro. Frases cortas. Se empieza por el problema real, no por la herramienta.
Logo
Un arco por pata, en el orden de la carrera (Oposiciones → Docentes → Centros, en el sentido del reloj desde arriba). El anillo completo es el «360»; la chispa del centro, la IA. «Docencia» en tinta, «360» con el degradado.
logo-horizontal-claro.svg
logo-horizontal-oscuro.svg
logo-apilado-claro.svg
simbolo-claro.svgmarca/logo/ del repositorio (18 SVG) y marca/png/ (favicons, avatar, imagen para compartir, banner).Estados y chips
Los marcos de captura llevan .captura (radio 1,4 rem, sombra larga). Las tarjetas, .card. Las bandas alternan: clara (solución), oscura (dolores y CTA final).
Dónde vive cada cosa
| Texto de los dos botones | web/src/config.ts → CTA_DURO, DEMO.etiqueta |
| Frase debajo de cada botón | web/src/config.ts → FRASE, FRASE_DEMO · se pinta con ui/CtaPar.astro |
| La oferta de Guardias de este curso | web/src/config.ts → OFERTA_GUARDIAS (false = agotada, el texto cambia solo) · el mismo texto en paso.js |
| Forma y color de los botones | web/src/styles/global.css → .btn, .btn-primary, .btn-demo, .btn-ghost |
| Qué botón significa qué | web/src/components/ui/Boton.astro |
| Colores y degradado | web/src/styles/global.css → :root (y marca/sistema/tokens.json) |
| Menú | web/src/config.ts → NAV · el desplegable de Centros sale de data/catalogo.ts |
| Huecos «[pendiente]» | web/herramientas/comprobar-huecos.mjs: la compilación falla si hay uno sin fecha |
| Logo en SVG y PNG | marca/logo/, marca/png/ (se regeneran con marca/herramientas/) |
| El panel «Lo quiero en mi centro» | demo.docencia360.com/paso.js (repositorio de la demo) |
Docencia 360 · manual interno · esta página no se indexa.