Saltar al contenido
Salva TejeroSoftware Company

Guía de marca

Identidad de Salva Tejero Software Company.

La identidad visual de la empresa y de sus apps. La usan esta web, cagodromo.es, agujetapp.es y cualquier web de app nueva.

Ir a las descargas

Línea base

Lo que no cambia entre webs.

Cada web puede variar en composición y ritmo, y cada app aporta su color propio como destello. Lo que no se toca: fondo, tinta, verde, tipografías y formas.

  1. Fondo blanco (surface-100). Secciones alternas en surface-200, un neutro cálido claro. El crema, el papel envejecido y las texturas son solo de las ilustraciones.
  2. Un solo acento: verde. Botones, enlaces, etiquetas y detalles. El texto sobre verde usa on-verde.
  3. Sin naranja en ninguna web ni en la interfaz de ninguna app. Tampoco mostaza en la interfaz: es solo del traje de Salva en las ilustraciones.
  4. Texto en ink, nunca negro puro. Secundario en ink-muted.
  5. Tipografía: Plus Jakarta Sans para titulares e Inter para texto, alojadas en cada web. Ninguna web define su propia font-family en titulares ni botones.
  6. Cards: 4 por fila en escritorio, 2 en tablet y 1 en móvil. Se diseña primero para móvil.
  7. Colores y medidas solo con variables, ni hex ni medidas sueltas. Modo oscuro con prefers-color-scheme, ya resuelto en los tokens.
  8. Color propio de cada app solo como destello dentro de su web, nunca como acento general.
  9. El icono de AgujetApp no se toca.
  10. Nombres: Cagódromo, AgujetApp, EructApp, ATM Lebrija y Pausify, siempre así. «Bañódromo» es solo el nombre de la ficha de App Store.

Color

Blanco, tinta y un verde.

Las muestras cambian con el modo del sistema: lo que ves es el valor que toca ahora. Debajo, los dos valores de cada token.

Interfaz

Apps

Estos colores solo aparecen en su propia web y en su comunicación; nunca como acento de la empresa. Los iconos de AgujetApp y de Cagódromo conservan su naranja: es la única excepción y solo vive dentro del icono.

Ilustración

Son de las viñetas y las piezas de redes. No se usan en la interfaz de ninguna web.

Tipografía

Una sola pareja en todas las webs.

Plus Jakarta Sans 800 · -0,02em · 56 / 48 / 40

Seis aplicaciones

Plus Jakarta Sans 800 · 40 / 40 / 32

Lo que hay hecho.

Plus Jakarta Sans 800 · 24

Panel de métricas

Inter 400, 600 en negritas y botones · 17 / 27

Dónde hay un baño cerca y si merece la pena entrar. Con las valoraciones de quien ya ha estado.

Inter 400 · 13 / 18

© 2026 Salva Tejero Software Company · Lebrija

JetBrains Mono · solo en la web de la empresa

* Las notas al pie con asterisco, la línea pequeña que matiza cada afirmación grande.

Rejilla

Mismos puntos de ruptura en todas.

Responsive
TamañoAnchoCards por filaHuecosMárgenes
Móvilmenos de 640px116px16px
Tablet640–1023px224px32px
Escritoriodesde 1024px424px48px, contenido de 1200px como máximo

Las cards de una fila miden lo mismo de alto. Mejor en múltiplos de 4; si sobran, quedan alineadas a la izquierda, nunca estiradas. Formas limpias con esquinas contenidas (radius-sm 4px, radius-md 8px) y mucho aire; el estilo cómic se reserva a las ilustraciones.

Componentes

Siete piezas, todas con tokens.

Botón

Descargar Secundario De texto

Una sola acción principal por pantalla. Inter 600, altura mínima de 44px, esquinas de 8px. En móvil el principal ocupa todo el ancho. Foco: anillo verde de 3px separado 3px.

Enlace

Dentro de un párrafo, así se enlaza.

Verde, Inter 600, subrayado de 2px separado 3px. Al pasar el cursor pasa a tinta con el subrayado verde. En menús y pies, el subrayado solo aparece al pasar el cursor.

Etiqueta

En producción En desarrollo

Estado de cards y fichas. Borde de 1px, Inter 600 a 13px, sin fondo. Máximo dos palabras. No sirve como botón.

Card

Título, etiqueta opcional y texto corto. Fondo surface-200 sobre surface-100, sin sombra; el contraste lo da el fondo. Como esta.

Cabecera

Pegada arriba, con una línea inferior. A la izquierda, el «ST» y el nombre en dos líneas; a la derecha, la navegación y un botón principal, que en las webs de las apps es siempre la descarga. La de esta web lleva el menú Apps en su lugar.

Pie

Fondo surface-200. Logo, aplicaciones, legal y contacto, en la misma rejilla que las cards. En las webs de las apps, «Hecha por Salva Tejero Software Company» enlazado a esta web.

Logo

Cuadrado en tinta con el nombre y la barra verde. Detalle justo debajo.

Descargas

Lo que se copia a cada web.

Se enlazan tokens.css y tipografia.css antes del resto de estilos, con las fuentes en una carpeta fuentes/ junto a tipografia.css.