El sistema de diseño de Qualium.
Una base visual coherente, moderna y profesional para todo lo que produce Qualium — sitio web, plataforma, materiales comerciales y redes sociales. Pensada para escalar sin perder personalidad.
Cómo pensamos el diseño en Qualium
Cuatro principios que guían cada decisión visual. Cuando tengas duda, vuelve aquí.
Claridad antes que estilo
El mensaje siempre gana. Si una decoración estorba la lectura, sobra.
Aire para respirar
Espacio en blanco generoso. La densidad cansa; el aire da autoridad.
Una sola voz
Inter como base. Detalles serif solo para acentos editoriales clave.
Acento con intención
El indigo manda jerarquía, el coral pide acción. Nunca al mismo nivel.
Logo
El logo es monocromático y debe usarse limpio. Dos versiones: negro sobre fondos claros, blanco sobre fondos oscuros o imágenes.
- Respetar un margen mínimo igual a la altura de la "q"
- Versión negro sobre fondos claros, blanco sobre oscuros
- Mantener el ratio original al escalar
- Tamaño mínimo: 80px de ancho en digital
- Aplicar colores que no sean del sistema
- Deformarlo, rotarlo o agregar sombras
- Colocarlo sobre imágenes sin máscara de contraste
- Mezclar versión negro y blanco en la misma pieza
Color
Una paleta de tres capas: brand, functional y neutrals. Toda escala tiene 50–950 para flexibilidad completa.
Colores principales
Click en cualquier swatch para copiar el HEX.
Escala Primary — Electric Indigo
El color de identidad. Usa 500 para acciones primarias, 600 para hover, 100 para fondos sutiles.
Escala Accent — Warm Coral
Energía y urgencia. Reservado para CTAs de alta prioridad y momentos de calor humano. Para texto blanco usa 700+.
Neutrales
El esqueleto del sistema. Tono ligeramente frío (slate) que se siente premium y técnico.
Semánticos
Para feedback de estado.
Tipografía
Sistema de dos fuentes. Inter hace el 95% del trabajo. Instrument Serif aparece en cursiva para momentos editoriales — frases gancho, números destacados, citas.
Escala tipográfica
Espaciado
Escala de 4px. Todo padding, gap y margen se construye con estos tokens.
Radios
Curvas suaves pero contenidas. Solidez corporativa con un toque moderno.
Sombras & Elevación
Sombras suaves y direccionales. En dark mode son más densas para conservar jerarquía.
Hairline
Card
Default
Hover
Modal / Popover
Hero / Dialog
Iconografía
Estilo line / stroke 2px, tamaño base 24×24, esquinas redondeadas. Librería oficial: Lucide.
Tokens listos para usar
Importa tokens.css en tu proyecto o copia el bloque.