Claridad primero
La jerarquia nace del contenido, la tipografia y la composicion. No de decoracion.
Brand Portal
Un sistema de marca para diseñar, escribir y construir con consistencia.
Este portal documenta los fundamentos visuales y verbales de Viceversable. La fuente de verdad vive en los tokens, los assets y las reglas enlazadas en este repo.
Principios
La marca se siente editorial, precisa y funcional.
Un color, un trabajo
Cada token tiene una funcion. Se evita inventar hexes sueltos fuera del sistema.
Identidad sin ruido
No se usan emojis en superficies de marca. El apoyo visual viene de iconografia y assets propios.
Colour
Rampa principal
Seis valores base definen canvas, superficies, acentos y texto. Las familias semanticas como lima, teal, yellow, naranja y rosa se conservan para estados.
Familias semanticas
Se usan para estados funcionales: positivo, informacion, atencion, riesgo y error. Cada familia tiene tint, base y mid.
Typography
Instrument Serif para voz editorial, Geist para sistema.
Display
Diseñamos claridad para decisiones complejas.
System
Geist sostiene navegacion, cuerpo, labels, dashboards y controles. La escala es fluida y evita saltos bruscos entre mobile y desktop.
Logo
Wordmark e isotipo siempre al 100% de opacidad.
El logo se usa en foreground sobre superficies claras y en tonos claros sobre fondos oscuros. No se aplica opacidad, filtros ni deformaciones.
Layout
Espacio generoso, superficies claras y estructura legible.
Canvas
60%
Foreground
30%
Accent
10%
Cards con radio contenido, sin bordes de acento decorativos.
La profundidad se comunica con cambio de superficie, no con sombras pesadas.
El texto nunca debe depender de colores vibrantes para ser legible.
Motion
Movimiento discreto, util y reversible.
Usar motion para orientar foco, revelar estado o conectar cambios. No para decorar.
Voice
Directa, estrategica y humana.
Si
Lenguaje claro, decisiones visibles, criterio accionable, tono cercano sin exagerar.
No
Jergas innecesarias, promesas infladas, frases genericas, emojis en superficies de marca.
Tokens
La fuente de verdad esta en JSON.
Los productos y documentos deben consumir estos valores. Si un color cambia,
se cambia primero en design-tokens.json.
Assets
Recursos disponibles en el repo.
Downloads