Sistema de diseño
Filo antes que curva, neutros cálidos y un solo acento. Todo lo que hay debajo sale de globals.css; si un componente necesita un color que no está aquí, primero se añade el token.
Marca
El contorno y su offset
SÍMBOLO
LOCKUP
Tamaños. Por debajo de 24 px el contorno interior se apaga: se empasta.
Monocromo para sellos, grabado en la propia pieza y fondos de un solo color.
Qué no hacer
- Rellenar el contorno de naranja.
- Rotar o inclinar el símbolo.
- Poner el lockup sobre foto sin caja.
- Dejar menos aire que la altura del símbolo.
El símbolo es el producto visto en planta: el contorno exterior de la galleta y, dentro, el offset de pared que la app calcula. Las chispas son lo único que va en acento, de forma que la marca sobrevive al monocromo y al grabado en plástico.
Color
Tokens semánticos
canvas
Fondo de página
surface
Tarjetas y paneles
surface-sunken
Visor 3D, canvas de dibujo
surface-inverse
Bloque Pro, CTA oscuro
ink
Texto principal
ink-muted
Párrafos secundarios
ink-subtle
Metadatos y ayudas
ink-faint
Numeración, placeholders
line
Separadores de sección
line-strong
Borde de botón secundario
accent
Acción principal, Pro
accent-hover
Hover del acento
accent-soft
Fondo de aviso
brand
Solo la marca: el naranja del logo
danger
Errores destructivos
En Tailwind se usan como cualquier color: bg-surface, text-ink-muted, border-line. El tema oscuro redefine solo estos tokens, así que no hace falta escribir variantes dark:.
Tipografía
Cinco tamaños, ni uno más
display — titular de portada
Tu dibujo, convertido en un cortador.
title — cabecera de sección
Tu dibujo, convertido en un cortador.
heading — tarjeta, pregunta
Tu dibujo, convertido en un cortador.
body — párrafo de lectura
Tu dibujo, convertido en un cortador.
small — UI, ayudas, listas
Tu dibujo, convertido en un cortador.
micro — versalita de sección (.eyebrow)
Cómo funciona
Cifras tabulares en todo el body: media app son milímetros que cambian mientras se arrastra un slider, y no deben bailar.
Componentes
Botones
Una sola acción en acento por pantalla. Si hay dos azules compitiendo, la segunda baja a .btn-outline.
Componentes
Formularios y controles
No pudimos enviar el enlace. Revisa la dirección.
Componentes
Superficies y avisos
card
Blanco sobre canvas, sin borde ni radio. La separación la hace el color.
card-inverse
Reservada al plan Pro y al cierre de página. Como mucho una por vista.
note-edge: el filo de acento a la izquierda. Para confirmaciones y avisos en línea.
Forma
Radio y elevación
radius-none — por defecto
radius-sm — controles pequeños
shadow-raised
shadow-panel