SISTEMA DE DISEÑO
Foundations
Color, tipografía y espaciado de LegaleGo, tal como están configurados en este kit. Cada muestra consume las variables y clases reales: si se edita una, este panel se actualiza solo.
Color
MARCA
#003F5A
#005C99
#00B4C8
#35C9FF
TEXTO
#14191C
#5B6469
#8FB6C9
SUPERFICIE
#FFFFFF
#F4F5F2
#E7F3F8
#E1E4DD
#14191C
Sobre fondo oscuro
SISTEMA · TRANSPARENCIAS
sistema-blanco-07
sistema-blanco-16
sistema-negro-14
El acento solo vive aquí
marca-acento da 2,51 de contraste sobre blanco y no pasa AA. Sobre petróleo da 4,50 y sí. En fondo claro, el color de enlace es marca-azul.
Tipografía
Archivo. Escala de escritorio con razón 1,2 desde base 16; en móvil, razón 1,15. Suelo de lectura 16 px e interlineado mínimo 1,12 — la caja natural de Archivo es 1,09 y por debajo se cortan los glifos.
DISPLAY
70 / 78 · −3% · 800 móvil 48 / 54
El veloz murciélago
58 / 66 · −2,5% · 800 móvil 42 / 48
El veloz murciélago
TÍTULOS
48 / 54 · −2% · 800 móvil 32 / 38
El veloz murciélago hindú
40 / 46 · −1,6% · 800 móvil 28 / 34
El veloz murciélago hindú
28 / 34 · −0,8% · 800 móvil 24 / 30
El veloz murciélago hindú comía feliz
23 / 30 · −0,5% · 800 móvil 20 / 26
El veloz murciélago hindú comía feliz cardillo
19 / 26 · 0 · 800 móvil 18 / 26
El veloz murciélago hindú comía feliz cardillo y kiwi.
16 / 24 · 0 · 700 sin cambio en móvil
El veloz murciélago hindú comía feliz cardillo y kiwi.
CUERPO
19 / 30 · 0 · 400 móvil 18 / 28
Entradilla. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.
16 / 26 · 0 · 400 suelo de lectura, no baja
Texto corrido. El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.
INTERFAZ
16 / 21 · 0 · 700
Cuéntanos tu proyecto
16 / 21 · 0 · 600
Ver todas las decisiones →
16 / 21 · 0 · 500
18 / 26 · 0 · 500 solo móvil — sin gemelo
16 / 22 · 0 · 400
21 de mayo de 2026 · Expansión internacional
RÓTULO
14 / 18 · +12% · 700 mayúsculas
Nuestra especialización
13 / 17 · +12% · 700 único por debajo de 16
El problema
CIFRA
70 / 78 · −3% · 800 móvil 48 / 54
+23
48 / 54 · −2,5% · 800 móvil 37 / 42
+150
34 / 38 · −1,5% · 800 móvil 28 / 34
+3.000
23 / 26 · −1% · 800 móvil 21 / 26
+10
14 / 18 · +6% · 800 ordinales de pasos
01
CITA
28 / 36 · −0,5% · 600 itálica móvil 24 / 30
El veloz murciélago hindú comía feliz cardillo y kiwi.
Espaciado
Escala base 4. Todo el espaciado del sistema sale de estos trece peldaños.
espacio-4
espacio-8
espacio-12
espacio-16
espacio-24
espacio-32
espacio-40
espacio-48
espacio-56
espacio-64
espacio-72
espacio-96
espacio-120
Además: contenido-max 1.344 px · margen-lateral 48 px en escritorio · margen-lateral-movil 16 px.
Botones y enlaces
Cuatro niveles y nada más: principal, secundario, terciario y enlace de texto. Dos tamaños —grande y compacto— y ninguno más. Los botones llevan › y los enlaces →, nunca al revés.
SOBRE FONDO CLARO · PASA EL RATÓN PARA VER EL HOVER
Principal
La acción que queremos que se haga. Una sola por sección.
Secundario
Alternativa que acompaña a la principal. Nunca va sola.
Terciario
Apoyo dentro de tarjetas y bloques. No convive con una principal.
Enlace de texto
Dentro de un párrafo, una fila o una tarjeta. Sin caja.
SOBRE FONDO OSCURO · PASA EL RATÓN PARA VER EL HOVER
Principal
Acento con texto tinta. El único sitio donde el acento es legal.
Secundario
Solo borde, en pálido. Nunca aparece sola.
Terciario
Blanco al 10 %. El hover le suma otro 10 %.
Enlace de texto
Sin caja. El hover es el subrayado y la flecha.
REGLAS FIJAS
Dos tamaños y ninguno más
Grande: padding 15/28, alto 51. Compacto: padding 12/22, alto 45. El secundario suma 2 px por el borde. El texto siempre 16 px.
Chevron para botón, flecha para enlace
Los botones llevan ›. Los enlaces de texto llevan →. Nunca al revés.
El subrayado es el hover
En reposo el enlace va sin subrayar, solo con su color. Al pasar por encima se subraya y la flecha se separa de 8 a 12 px.
Un solo hover para los tres botones
Al pasar por encima, el botón recibe un velo sobre su color base: negro sobre fondo claro, blanco sobre fondo oscuro. Al 20 % en el principal, al 10 % en secundario y terciario. El color base no cambia nunca.
Por qué un velo y no un color
El velo no conoce el color que tiene debajo: si mañana cambia un color de marca, el hover se adapta solo. Con colores calibrados a mano habría ocho valores que recalcular. En CSS es una capa sobre el background-color, así que el color base lo sigue poniendo la variable.
Radio 0 y estilos del sistema
interfaz-boton (16/21, peso 700) en botones; interfaz-enlace (16/21, peso 600) en enlaces. Los seis botones saltan entre 5,4 y 8,7 puntos de L* al hacer hover, y todos los pares pasan WCAG AA.
SECCIONES REUTILIZABLES
Bloque de cierre · CTA
Componente «Cierre · CTA». Una sola definición para las nueve páginas que lo usan. Al insertarlo se pueden editar cuatro campos sin tocar el diseño: la pregunta superior, el titular, el texto del botón y su destino.
Fondo hueso · rótulo en petróleo · titular H2 en tinta · botón principal. Padding 72 px en escritorio y 64 px en móvil, donde el botón pasa a ancho completo.
¿NO SABES POR DÓNDE EMPEZAR?
Cuéntanos el caso y te decimos qué decisión estás afrontando.
Cuéntanos tu proyecto
›