ATOM Design System
Typography

Sistema tipografico de Atom. Inter es la unica familia autorizada. La escala usa ratio major-third (1.25) y crece o decrece proporcional al viewport. Todas las clases viven bajo el scope .nw: el body o un wrapper debe tener la clase nw para que apliquen.

Headings

Usa el tag (h1-h6) o la clase equivalente (.nw-h1 a .nw-h6) cuando necesites el look sin el tag semantico. Cada paso es el anterior x1.25, asi la jerarquia se lee clara en cualquier viewport.

Inteligencia de conversion para WhatsApp
h1 / .nw-h1Inter 700 · ~61px (x3.815) · lh 1 · tracking -0.04em
Tu chatbot responde, nuestra IA vende
h2 / .nw-h2Inter 700 · ~49px (x3.052) · lh 1.05 · tracking -0.03em
Atiende, califica y convierte en automatico
h3 / .nw-h3Inter 700 · ~39px (x2.441) · lh 1.2 · tracking -0.02em
Remarketing inteligente por WhatsApp
h4 / .nw-h4Inter 600 · ~31px (x1.953) · lh 1.25
Servicio con expertos de tu industria
h5 / .nw-h5Inter 600 · ~25px (x1.563) · lh 1.3
Conectado a todo tu stack comercial
h6 / .nw-h6Inter 600 · ~20px (x1.25) · lh 1.3
Body

Parrafos con line-height 1.7 para lectura comoda. Tres tamanos segun jerarquia.

La IA de Atom genera automaticamente un resumen de cada conversacion. Tu equipo ingresa al chat con contexto y sin necesidad de leer todo el historial.

p / .nw-p1Inter 400 · ~16px (base) · lh 1.7

Con mensajes y llamadas de seguimiento, Atom recupera leads que no compran en el primer contacto y los mantiene interesados hasta que esten listos para avanzar.

.nw-p2Inter 400 · ~14px (x0.875) · lh 1.7

Cada mensaje, audio o llamada queda registrada automaticamente en tu CRM para que tengas trazabilidad completa. Desde el anuncio, hasta la venta.

.nw-p3Inter 400 · ~12px (x0.75) · lh 1.7
Labels & Captions

Etiquetas cortas para eyebrows y pies de contenido.

Producto
.nw-labelInter 500 · ~12px (x0.75) · UPPERCASE · tracking +0.04em
Captura de pantalla del panel de conversaciones de Atom.
.nw-captionInter 400 · ~14px (x0.875) · lh 1.7 · color muted
Helpers de enfasis

Utilities globales (no requieren .nw). Para resaltar palabras dentro de un heading o texto.

Un motor de IA enfocado en acelerar tus procesos
.u-text-gradientGradiente violeta -> naranja · aplicar en <span>
Opera WhatsApp como un canal de ventas
.u-brandColor naranja de marca #FF6600
Integracion nativa con WhatsApp
.u-whatsappColor verde WhatsApp #22D366
Referencia rapida

Escala major-third (ratio 1.25). Multiplicador sobre la base (~16px). Requiere wrapper .nw.

Clase
Tamano @1440
Peso
.nw-h1
~61px (x3.815)
700
.nw-h2
~49px (x3.052)
700
.nw-h3
~39px (x2.441)
700
.nw-h4
~31px (x1.953)
600
.nw-h5
~25px (x1.563)
600
.nw-h6
~20px (x1.25)
600
.nw-p1
~16px (base)
400
.nw-p2
~14px (x0.875)
400
.nw-p3
~12px (x0.75)
400
.nw-label
~12px upper
500
.nw-caption
~14px (x0.875)
400