Design SystemReference LabGuía de aplicaciones · Publicidad y social media
Construye una jerarquía tipográfica para una pieza real y comprueba por qué funciona.
Una ideaencuentra su forma.
con criterioAsesor de receta
Elige el soporte, la longitud y la intención. La recomendación conserva la función de cada familia.
La idea domina; Poppins ordena la lectura y el gesto sólo entra si agrega intención.
Ver una aplicación comparable ↓01 · Empieza por las funciones
La familia expresiva concentra la tesis; la familia estructural ubica y explica; la escritura manual sólo aparece cuando el gesto tiene una función narrativa.
Define la idea. Si todo pesa igual, nada conduce.
Ordena el contexto. La segunda voz debe explicar, no competir.
Justifica el gesto. Si puede retirarse sin pérdida, se retira.
La escala puede cambiar por soporte; la función no.
Hook, tesis, pregunta, remate o apertura. Una voz display expresiva y dominante por superficie.
Variable · peso · ancho · ópticoContexto, fecha, descriptor, navegación, subtítulo o continuidad de marca. Ordena sin competir.
Poppins · upright + italicAnotación, subrayado o firma puntual. Una aparición breve agrega humanidad sin competir con la idea.
Regular · ligaduras · alternates02 · Conoce el material
Explora sólo variantes dibujadas por cada familia. “Disponible” significa real, no una simulación.
01 · Variable · voz de idea
La variación cambia densidad, presencia y textura sin deformar los glifos. Funciona mejor como única voz dominante.
Una idea cambia cuando la miras distinto.
No simular: este archivo no contiene cursiva. Inclinarlo con skew() o font-style: italic fabrica una forma que la familia no diseñó.
02 · Estática · voz de estructura
Ordena fechas, contexto, subtítulos y continuidad. La cursiva es un archivo dibujado aparte: enfatiza una palabra o fragmento breve, nunca toda la frase.
Una decisión con contexto.
Etiquetas y subtítulosUna decisión con contexto.
Una palabra cambia el tonoUna decisión con contexto.
Cover o titular secundarioUna decisión clara.
Remate breve con aireCursiva con medida: úsala en una palabra o fragmento de hasta tres palabras. Si la frase completa se siente pesada, vuelve el cuerpo a upright y conserva sólo el énfasis.
03 · Regular · voz de gesto
Es una escritura de una sola voz. La variedad aparece mediante escala, frase, rotación mínima y funciones OpenType; no mediante pesos inexistentes.
gesto y detalle
míralo distinto
ojo aquí
piénsalo
gesto y detalle
gesto y detalle
No usar: párrafos, fechas, legal, botones o una segunda frase manuscrita en la misma pieza. Su inclinación ya es nativa; aplicar “italic” no agrega un estilo real.
Matriz de decisión
| Trabajo | Familia | Configuración inicial | Evita |
|---|---|---|---|
| Hook de 1–3 palabras | Bricolage | 740–800 · opsz 72–96 · wdth 90–100 | Frase larga en ExtraBold |
| Titular de 4–7 palabras | Bricolage | 620–740 · opsz 56–82 · wdth 88–100 | Tratar cada línea como impacto |
| Titular de 8–12 palabras | Bricolage | 450–650 · foco 680–720 | 760–800 sostenido en todo el bloque |
| Fecha, contexto o descriptor | Poppins | 600 upright · tamaño secundario | Competir con el hook |
| Énfasis editorial corto | Poppins | 600–700 italic real · 1–3 palabras | Frases completas o párrafos en cursiva |
| Firma, nota o subrayado | Guttery | Regular · liga on · una aparición | Bold, faux italic o texto legal |
| Lectura prolongada | Poppins | 300 upright · ritmo amplio | Bricolage o Guttery como cuerpo |
03 · Construye jerarquía
Contraste tipográfico · no cromático
Antes de sumar tamaño, color o una nueva familia, asigna un peso distinto a cada función de la frase.
Las ideasmueven.
La entrada acompaña; la palabra que contiene la acción concentra la tinta.
Prueba la distancia
Conserva tamaño y alineación para aislar el efecto del peso. La diferencia debe responder al significado.
Contraste alto: útil cuando una palabra concentra la acción o la promesa.
Misma frase · tres decisiones
ExtraBold no es “más contraste”: sostenido en varias líneas acumula tinta y aplana el ritmo.
Ideas que cambian cómo miramos el mundo.
Siete palabras · toda la frase grita · las contraformas pierden aire.Ideas que cambian cómo miramos el mundo.
Úsalo cuando la frase completa tenga una sola prioridad.Ideas quecambiancómo miramos el mundo.
El peso mayor queda sólo en la acción; la lectura conserva textura y dirección.Poppins · contraste interno
Poppins construye jerarquía con menos teatralidad. La distancia útil cambia según la densidad: dos pesos altos cercanos no contrastan aunque sus números sean distintos.
El contextotambién decide.
La entrada orienta; el foco sostiene la decisión sin convertirse en un segundo hook de campaña.
Pesos estáticos cargados
Compara primero a igual tamaño. Después valida longitud, fondo y función; 900 sólo se sostiene en una palabra grande.
DO · contraste editorial: 400 → 600 ordena sin convertir Poppins en una segunda voz display.
Una señalordena el camino.
Distancia editorial clara para subtítulo, módulo o carrusel informativo.Decide con más contexto.
El cambio de modo vive sólo en dos palabras y conserva una base estable.Una señalordena el camino.
A igual tamaño, la diferencia suele desaparecer en móvil y no debe cargar la jerarquía.Una señalordena el camino.
Dos masas densas compiten; Black no repara una composición sin prioridades.Bricolage Grotesque × Poppins
El número no es comparable entre familias como si midiera la misma tinta. Evalúa tamaño aparente, ancho, contraformas y orden semántico en la pieza final.
Poppins 300 sostiene el desarrollo con más aire.
500 × 300 · útil en brochure, carrusel educativo o contenido de lectura.
Poppins 400 explica el siguiente paso sin repetir el peso del hook.
620 × 400 · contraste medio para feed, portada o presentación.
Poppins queda en una escala secundaria y Bricolage concentra la acción.
740 × 500 · válido cuando el hook tiene 1–3 palabras y campo abierto.
Una estructura fuerte.
700 × 700 · a tamaño parecido aparecen dos titulares sin una entrada clara.
CONTEXTO
500 × 900 · Poppins roba el primer impacto aunque su tarea era explicar.
AHORA MISMO.
780 × 900 · más masa no significa más riqueza; ambas voces gritan.
Poppins puede dominar una pieza en modo de contención —por ejemplo, una cifra, cover o énfasis editorial— si Bricolage se retira. Cuando ambas familias conviven, la idea permanece en Bricolage y Poppins conserva la estructura.
Usa dos niveles de peso como base y un tercero sólo si introduce una función nueva. El peso no corrige bajo contraste de color, una mala edición ni un interlineado que hace chocar la tinta.
04 · Ajusta el ritmo
Ritmo horizontal + vertical
El tracking compacta o abre una palabra; el leading organiza líneas. Ninguno debe usarse para forzar un texto dentro de una caja.
Laboratorio Bricolage
Parte del kerning nativo y mueve una variable por vez. El resultado correcto conserva contraformas, acentos y una frase continua.
Diseñar cambiacómo miramos.
Equilibrado: la frase conserva tensión sin pegar letras ni separar sus líneas.
Do’s & don’ts · misma familia y peso
Estos extremos sirven para diagnosticar. Los rangos recomendados son puntos de partida; la prueba final siempre ocurre con el copy, tamaño y soporte reales.
rediseño
Las formas se pegan y la ñ pierde aire.rediseño
Compacto, con pares y contraformas todavía legibles.rediseño
La palabra deja de percibirse como una unidad.Diseñar cambiacómo miramos.
La tinta colisiona; acentos y ascendentes dejan de respirar.Diseñar cambiacómo miramos.
Las líneas se leen juntas y conservan un gap visible.Diseñar cambiacómo miramos.
El exceso de aire parte la frase en dos bloques.| Uso | Tracking | Interlineado | Comprobación |
|---|---|---|---|
| Bricolage · 28–47 px | 0 a −0.020 em | 1.00–1.12 | Lectura de titular medio y tildes despejadas |
| Bricolage · 48–79 px | −0.010 a −0.030 em | 0.92–1.02 | Palabra completa a tamaño final |
| Bricolage · 80 px o más | −0.020 a −0.040 em | 0.88–0.98 | Gap de tinta positivo entre líneas |
| Poppins · apoyo y cuerpo | 0 a −0.010 em | 1.45–1.65 | Zoom 200 % y ancho de lectura |
| Poppins · overline breve | +0.060 a +0.100 em | 1.20–1.40 | Mayúsculas cortas; nunca párrafos |
| Guttery · gesto | Espaciado nativo | No aplica a párrafos | Una frase breve, revisión óptica |
Conserva el shaping y el kerning de la fuente. Corrige pares puntuales antes de imponer tracking global.
Si la frase no cabe, cambia el corte, el tamaño o la medida. Comprimir letras no crea espacio legítimo.
Comprueba el blanco visible entre el borde inferior de una línea y el borde superior de la siguiente, no sólo la distancia entre baselines.
Valida miniatura, móvil, signos, tildes y fondos reales. Un número correcto puede producir una percepción incorrecta.
Lectura comprobable
Mide la tinta sobre el fondo final. Un color oficial no garantiza una combinación legible.
| Texto | Fondo | Relación | Resultado |
|---|---|---|---|
#ffffff | #023c70 | 11.15:1 | Pasa AA normal |
#cfe4fa | #023c70 | 8.57:1 | Pasa AA normal |
#6d6777 | #ffffff | 5.45:1 | Pasa AA normal |
#0375db | #ffffff | 4.59:1 | Pasa AA normal |
#b24600 | #ffffff | 5.57:1 | Pasa AA normal |
#ff6500 | #ffffff | 2.95:1 | No usar como texto |
Aplica bajo 24 px, o bajo 18.66 px cuando el peso es bold. No declares “grande” por el tamaño del archivo maestro.
Aplica desde 24 px regular o 18.66 px bold en el tamaño presentado. Revisa trazos finos y transparencias.
Mide cada zona y frame crítico después de velos, blends y gradientes. Si el fondo cambia, agrega un campo estable.
Expresa jerarquía y estado con texto, forma o posición. Verifica foco, teclado, zoom al 200 %, móvil y miniatura final.
Naranja Efeonce: #ff6500 funciona como acento o superficie, pero no como texto sobre blanco. Para tinta naranja sobre fondos claros usa #b24600.
Estudio aplicado · colaboración multiplayer
Una composición · una variable
La referencia combina una selección activa con cursores multiplayer inspirados en Figma. Las tres reconstrucciones mantienen esa escena y comparan sólo el marco de selección.
Una persona diseña y otra construye dentro del mismo archivo. Los cursores identifican presencia; la selección demuestra qué objeto está siendo editado.
Conserva la escena completa: selección activa, cursor local y dos colaboradores dentro del mismo archivo.
Conserva los cursores multiplayer, pero reduce el estado activo a cuatro marcas de esquina.
Encuadra la palabra con menor ruido y funciona en composiciones más serenas o explicativas.
Una captura también puede mostrar colaboradores desplazándose por el canvas sin tocar todavía el objeto seleccionado.
targetId ni esquina de selección hasta que el cursor realmente actúe sobre ella.Muestra selección, cursor local y colaboradores como un único sistema: cada forma explica quién está trabajando y sobre qué.
No conviertas los nombres en globos de conversación ni reemplaces la URL Bubble canónica con texto dentro de un rectángulo.
05 · Llévalo a una pieza
Caso real · Efeonce · Fiestas Patrias 2026
Portadas y Reel aprobados por el operador, revisados aquí con el criterio actual. Aprobación de campaña no equivale a patrón tipográfico.
La pieza resuelve bien el relevo entre Poppins y Bricolage y omite Guttery con criterio. Sin embargo, en las portadas la distancia entre Bricolage 750 y 800 es pequeña: ambas líneas se perciben casi con la misma masa. El contraste existe, pero depende más de familia, escala y corte que de peso.
Sobre el plate limpio, ambas versiones conservan Poppins 500, Bricolage 580 y Bricolage 760. La primera es un DON’T: aunque mejora la distancia de peso, abre demasiado los huecos y fragmenta la frase. La segunda es un DO: acerca ópticamente las cajas de tinta para que tesis y foco formen una sola unidad.
Hay cosas queno necesitanrediseño
Hay cosas queno necesitanrediseño
Reel con música instrumental y tipografía en pantalla; no contiene voz hablada. Usa los controles para reproducirlo.
Esta reconstrucción aísla las capas del Reel. Aquí 800 resulta defendible porque aparece en una sola palabra y durante un momento acotado; no forma una masa sostenida con 750.
En pausa. La vista muestra el keyframe limpio.
Poppins abre sin competir, el fondo mantiene lectura, los ratios tienen composición propia y Guttery se retira porque no cumple una función.
En portada, 750 y 800 producen masas demasiado cercanas. Para una jerarquía más rica, bajaría la tesis a 560–620 o reservaría 800 para un foco todavía más corto.
Que una pieza esté aprobada no convierte sus pesos, tamaños o cortes en receta. El criterio se vuelve a probar con cada frase, imagen, ratio y tamaño final.
Producido para esta guía · no corresponde a una campaña publicada
La fotografía se generó sin texto ni marca. Copy, fuentes, pesos, logo, safe zones y animación se componen en HTML para conservar exactitud.
DECISIONES DE DISEÑOLas ideas noaparecen solas.Observar · ordenar · decidir
ANTES DE PUBLICAR
Encuentra el
foco.
En pausa. La composición conserva una zona segura central.
El criteriotambién se diseña.
Una tesis · lectura inmediata · sin gesto adicionalUna señal claracambia el rumbo.
La idea abre en Bricolage. La bajada continúa en Poppins con una medida de lectura tranquila.El logo blanco cruza papel y piel claros. Su contraste cambia con cada detalle de la fotografía y la firma se pierde.
Una señal claracambia el rumbo.
La idea abre en Bricolage. La bajada continúa en Poppins con una medida de lectura tranquila.
11.15:1 · El wordmark azul oficial vive sobre blanco: una superficie estable, predecible y separada de la imagen.
No son cuatro recortes automáticos. Cada pieza cambia encuadre, medida, escala, densidad y orden. El logo usa la variante que mantiene contraste local sobre una superficie estable. Guttery sólo debería entrar si agrega una anotación humana concreta; no se incluye para completar una cuota de familias.
Estos especímenes permiten comparar decisiones aisladas. El caso anterior muestra su aplicación en una producción real.
Una línea de contexto ordena el significado sin competir.
Cuando la frase crece, baja el peso y aumenta el aire. El contexto continúa en Poppins; Guttery se retira.
Una palabra cambia el tono sin ensuciar la composición.
Compara cómo cambian la jerarquía, la densidad y el ritmo según el formato.
RRSS · 4:5
La imagen sostiene el campo; la tesis se lee primero y la anotación llega después.
STORY / REEL · 9:16
La lectura crítica queda al centro; el gesto no ocupa controles ni compite con el primer impacto.
Una última pregunta
Marketing con ManzanitasDesliza para conversar
COVER · 16:9
En una portada de video, webinar o presentación, la velocidad de lectura manda. Guttery se retira para no diluir el mensaje.
Efeonce · Creative Studio
Creatividad, datos y tecnología como un solo motor.
BROCHURE · PORTADA
Una portada puede tener más presencia, pero conserva una voz display y no reconstruye logotipos.
Efeonce · propuesta de valor
Un solo motor para hacer que las ideas avancen.
BROCHURE · PLIEGO ABIERTO
La izquierda abre el capítulo; la derecha demuestra cómo la estructura sostiene la lectura prolongada.
La estrategia convierte intuiciones dispersas en una secuencia legible: qué observar, qué priorizar y qué hacer después.
La idea principal abre en Bricolage; la lectura sostenida se mantiene tranquila y consistente.
VIDEO · 0–10 s
Bricolage instala la idea, Poppins explica el contexto y el gesto manuscrito aparece una sola vez como cierre.
Entrada inmediata · Bricolage 720 → 430
Contexto y subtítulo · Poppins 600
Cierre puntual · Bricolage + Guttery una vez
ESPACIO · CERRADO / ABIERTO
En un globo o tarjeta, la caja protege la lectura. En un full-bleed, el vacío hace la jerarquía.
Bricolage compacta · padding medido · Guttery como acento.
Bricolage aislada · Poppins pequeña · el vacío hace el trabajo principal.
06 · Implementa sin contaminar el producto
Contrato AXIS · adaptación Tailwind v4
AXIS decide roles, pesos, ritmo, zonas seguras y tintas. Cada runtime traduce el contrato a su motor y lo activa sólo en superficies publicitarias.
axisAdvertising → adapter del consumidor → pieza finalLos tamaños siguen perteneciendo al formato final; la receta fija la relación tipográfica y evita convertir un valor de campaña en estilo de interfaz.
cambia el rumbo.
axis-ad-idea-impactaxis-ad-idea-shortaxis-ad-idea-mediumaxis-ad-idea-longaxis-ad-idea-lead + axis-ad-idea-focusaxis-ad-structure-label / copy / lead / focus / impact / emphasisaxis-ad-gestureaxis-ad-safe-feed / story / coverUna voz display dominante, cortes por unidades de sentido, contraste medido sobre el fondo real y logos oficiales sin redibujarlos.
Tres titulares compitiendo, Guttery en párrafos o legal, Bricolage convertida en cuerpo ni variantes tipográficas simuladas.