Tamaños y tipología, familias tipográficas, colores, componentes y gobierno. Toca para copiar, mueve el Laboratorio, prueba los componentes y copia todas tus elecciones al final.
Base 16 px (1 rem), crecimiento aproximado 1.25. Cuerpo nunca bajo 16 px en móvil.
| Elemento | Line-height | Letter-spacing |
|---|---|---|
| Display / H1 | 1.05 – 1.15 | -0.02em |
| H2 – H3 | 1.2 – 1.3 | -0.01em |
| Cuerpo | 1.5 – 1.6 | 0 |
| Texto pequeño | 1.4 – 1.5 | +0.01em |
| Etiquetas MAYÚSCULAS | 1.2 | +0.06em |
| Pregunta | Criterio |
|---|---|
| ¿Para qué? | Estructurar la jerarquía, guiar el escaneo rápido y sostener el tono. |
| ¿Cómo? | Solo con tamaños de la escala; interlineados proporcionales y fijos. |
| ¿Cuándo? | H1 único por vista. H2–H3 en módulos y tarjetas. Cuerpo en párrafos. Caption en leyendas. |
| ¿Cuántas familias? | Máximo 2 por proyecto (títulos y texto) y una mono solo para datos. |
| ¿Cuántos pesos? | 3 o 4; más pesos añaden ruido, no jerarquía. |
Todas son de Google Fonts, de licencia abierta. Cada tarjeta muestra el wordmark bruX (bru en peso normal y X en negrilla magenta) en esa familia.
Propuestas listas para probar: una familia para títulos y otra para texto, sin pasar de dos.
Cada familia tiene 10 colores o más.
Tres tonos por estado: fondo suave (50), base (500) y oscuro (700). Acompaña siempre el color con icono o texto.
Todo margen, padding y gap sale de esta escala.
| Elemento | Valor |
|---|---|
| Zona táctil mínima | 44 × 44 px (iOS) · 48 × 48 dp (Android) |
| Separación entre objetivos táctiles | 8 px o más |
| Barra superior | 56 px |
| Barra de pestañas inferior | 56 – 64 px |
| Fila de lista | 56 – 72 px |
| Avatar | 32 / 40 / 56 / 96 px |
| Borde de campos y tarjetas | 1 px |
| Foco visible (outline) | 2 px |
El magenta de marca no se usa en acciones destructivas: para eso, rojo semántico.
Escribe un correo válido (ejemplo: nombre@dominio.com).
Altura 44 – 48 px. Texto de 16 px o más: por debajo, iOS hace zoom al enfocar.
Descripción breve con 14 – 15 px y color suave.
Acción16 · 20 · 24 (estándar) · 32 · 48 px. Trazo de 1.5 a 2 px y un solo estilo en todo el producto.
0 · 4 · 8 · 12 · 16 · pill (999). Elige uno o dos y úsalos de forma consistente.
En fondo negro la sombra casi no se ve: marca la elevación con una superficie más clara (#0F0F0F → #171717 → #1B1B1B) y un borde de 1 px.
Menos distancia entre elementos relacionados (icono y etiqueta) que entre secciones distintas. El espacio agrupa antes que cualquier línea o color.
| Dispositivo | Ancho | Col. | Gutter / margen |
|---|---|---|---|
| Móvil | 360 – 430 | 4 | 16 / 16 |
| Tablet vertical | 768 | 8 | 24 / 24 |
| Tablet horizontal / laptop | 1024 | 12 | 24 / 32 |
| Escritorio | 1280 | 12 | 24 / 40 |
| Pantalla grande | 1536+ | 12 | 32 / auto |
| Caso | Ratio mínimo (WCAG AA) |
|---|---|
| Texto normal | 4.5 : 1 |
| Texto grande (24 px, o 19 px en negrita) | 3 : 1 |
| Iconos y bordes de componentes | 3 : 1 |
1 pt = 1.333 px (a 96 ppi). 1 pulgada = 25.4 mm. Imágenes a 300 ppi mínimo en tamaño final.
| Formato | mm | px a 300 ppi |
|---|---|---|
| A3 | 297 × 420 | 3508 × 4961 |
| A4 | 210 × 297 | 2480 × 3508 |
| A5 | 148 × 210 | 1748 × 2480 |
| Carta (Letter) | 215.9 × 279.4 | 2550 × 3300 |
| Tarjeta de presentación | 90 × 50 | 1063 × 591 |
| Elemento | Tamaño |
|---|---|
| Texto corrido | 10 – 12 pt |
| Notas y pie | 8 – 9 pt (mínimo 7 pt) |
| Subtítulo | 14 – 18 pt |
| Título | 24 – 40 pt |
| Afiche (lectura a distancia) | 60 pt o más |
| Uso | Tamaño (px) | Relación |
|---|---|---|
| Post cuadrado | 1080 × 1080 | 1:1 |
| Post vertical | 1080 × 1350 | 4:5 |
| Story / Reel / TikTok | 1080 × 1920 | 9:16 |
| Imagen al compartir enlace (Open Graph) | 1200 × 630 | 1.91:1 |
| Video horizontal (Full HD) | 1920 × 1080 | 16:9 |
| Miniatura de YouTube | 1280 × 720 | 16:9 |
| Banner de LinkedIn | 1584 × 396 | 4:1 |
| Favicon | 32 · 180 · 512 | 1:1 |
| Icono de app (iOS) | 1024 × 1024 | 1:1 |
Cada control cambia en vivo la vista rápida y los componentes de la sección 14. Parte de un preset o ajusta pieza por pieza. Tus elecciones se guardan en este navegador, si el navegador lo permite.
Texto de ejemplo con tu tipografía, interlineado y color suave. 0123 · datos
Todos usan los tokens de tu Laboratorio. Pruébalos y marca con ☆ los que quieras en tu sistema. «Copiar HTML» copia solo el marcado; el CSS base se copia aquí o dentro de «Mis elecciones».
Aquí se reúne lo que elegiste: tipografías, escala, espaciado, forma, colores con roles, movimiento, contraste y componentes marcados. El botón grande copia todo el texto de abajo.