0
x2
Nv 1
Trifuerza · Legal Design · Fundamentos visuales

El sistema.

Tipografía, color, espacio y design systems para abogados.
🔊🎵 Sube el volumen · 6 laboratorios con retos, música y puntaje
MANIPULA CADA CONCEPTO EN VIVO  ·  COMPLETA LOS RETOS 🎯
La idea del día
Una fuente no es diseño.
Un color no es diseño.
El sistema es el diseño.

El diseño profesional no es una suma de decisiones bonitas sueltas: es un conjunto de reglas coherentes que se repiten. Y en derecho, la coherencia comunica algo muy concreto: confianza.

Bloque 1 · Tipografía

La letra tiene anatomía

Antes de elegir una fuente, conviene saber qué miras. Estas partes explican por qué una tipografía se lee mejor que otra.

Ag
Altura-x — cuerpo de la minúscula; más alta = más legible Ascendente — subeDescendente — baja de la línea base Línea base — donde se apoya el textoRemate/serifa — el piecito de las serif
Bloque 1 · Tipografía

Tres familias, tres voces

Aa

Serif

Tienen remates. Tradición, autoridad, formalidad. Excelentes para textos largos impresos.

Aa

Sans-serif

Sin remates. Limpias, neutras, modernas. La mejor legibilidad en pantalla.

Aa

Monoespaciada

Cada carácter ocupa lo mismo. Evocan código, datos, precisión técnica.

Regla del pairing: máximo 2 familias por documento. Y ojo con las licencias: no toda fuente es libre para uso comercial.

🧪 Laboratorio 1 · escoge y compara

Laboratorio tipográfico

🎯 Reto: jerarquía clara (título ≥ 40px), interlínea cómoda (1.4–1.7) y peso ≥ 600 pendiente
Cláusula primera — Objeto

El presente contrato tiene por objeto la prestación de servicios profesionales de asesoría jurídica. Cambia la familia, el tamaño y la interlínea y observa cómo la misma cláusula se vuelve más o menos legible sin cambiar una sola palabra.

🧪 Laboratorio 2 · jerarquía

La escala tipográfica

🎯 Reto: prueba las 4 razones para sentir la jerarquía 0/4

No elijas tamaños al azar. Una escala modular multiplica por una razón constante y crea jerarquía automáticamente.

Base 16px. Cada nivel = anterior × razón. Más razón = más contraste entre títulos y cuerpo.

🧪 Laboratorio 3 · Teoría del color

La rueda y las armonías

🎯 Reto: encuentra el naranja Trifuerza (~25°) pendiente

HEX para web · RGB en pantalla · CMYK en impresión · HSL para razonar el color.

Complementaria: máximo contraste. Análoga: cohesión. Triádica: vibrante y equilibrada.

🧪 Laboratorio 4 · Color accesible

El color también es legal: contraste

🎯 Reto: logra un par que pase AAA (contraste ≥ 7) pendiente

El color comunica, pero también excluye si no contrasta. Las pautas WCAG son criterio de accesibilidad — y de cumplimiento.

AA normal ≥ 4.5 · AA grande ≥ 3 · AAA ≥ 7

Notificación de incumplimiento
3.4ratio de contraste
Bloque 3 · Leyes del espaciado

El espacio vacío también comunica

Ley de proximidad (Gestalt): lo que está cerca se percibe como grupo. Agrupar con espacio ordena la lectura sin una palabra extra.

✗ Todo igual de separado
Nombre del arrendador
Documento del arrendador
Nombre del arrendatario
Documento del arrendatario
Dirección del inmueble
Estrato del inmueble
✓ Agrupado por proximidad
Nombre del arrendador
Documento del arrendador
Nombre del arrendatario
Documento del arrendatario
Dirección del inmueble
Estrato del inmueble

Mismos campos, cero texto nuevo. El espacio organizó tres bloques: arrendador, arrendatario, inmueble.

🧪 Laboratorio 5 · sistema de espaciado

El sistema de 8 puntos

🎯 Reto: compara “apretado” vs sistema para sentir la diferencia pendiente

Los profesionales no espacian “a ojo”: usan una unidad base (4 u 8px) y sus múltiplos. Todo respira igual y se ve intencional.

Padding, márgenes y gaps se derivan de la unidad: ×1, ×2, ×3…

Resumen del contrato
Servicios de asesoría · vigencia 12 meses · honorarios mensuales fijos.
FirmarDescargarCompartir
Bloque 4 · Design systems

De reglas sueltas a un sistema

Un design system guarda estas decisiones como tokens reutilizables y componentes listos. Se decide una vez; se aplica a todo.

TOKEN

Color

Primario, texto, riesgo, éxito… nombrados, no sueltos.

TOKEN

Tipografía

Familias, escala y pesos definidos de una vez.

TOKEN

Espacio

La unidad base y sus múltiplos.

COMPONENTE

Piezas

Botones, tarjetas, cláusulas: ensamblados con los tokens.

Referentes: Material Design (Google) · Human Interface (Apple) · Carbon (IBM) · el sistema de gov.uk, pensado para trámites públicos legibles.

🧪 Laboratorio 6 · el sistema en acción

Cambia un token, cambia todo

🎯 Reto: toca los 4 tokens y construye tu sistema 0/4
VIGENTE
Contrato de asesoría
Trifuerza SASContratista
ClienteContratante
Honorarios mensuales fijos. Pago dentro de 5 días hábiles tras la cuenta de cobro.

Eso es un design system: una fuente de verdad. Ajustas un token y todo se actualiza coherente.

Trifuerza · el producto

Contrappto: el sistema
hecho producto

El sistema que acabas de construir no vive en una diapositiva: vive en un producto donde el contrato es un flujo, no un archivo de Word.

Cierre

Consistencia = confianza.

Tipografía, color y espacio dejan de ser gusto personal cuando se vuelven un sistema. Eso hace que un documento legal se sienta creíble antes de leer una palabra.

Rango: —
CLASE 1 ✓

Legal Design

Pensar como diseñador.

CLASE 2 ✓

Descubrimiento

Conocer al usuario.

HOY

El sistema visual

Tipografía, color, espacio, tokens.

SIGUE →

Marca + composición

Aplicar el sistema a piezas reales.

TRIFUERZA  ·  DECIDE UNA VEZ · APLICA A TODO
01 / 14
TRI·FUERZA
← Volver