Design system
internoTokens y primitivas de Qualify/ui, renderizados con el tema real. Reglas escritas: docs/design-system.md
Color
Escalas, tonos e identidad.
Todo color sale de una escala Radix. El acento y el gris se fijan una vez en rxconfig.py; los tonos semánticos se piden por rol (ok/warn/error), nunca por matiz. Un estado siempre lleva punto o icono + palabra.
accent (teal)
1-2 fondos · 3-5 superficies interactivas · 6-8 bordes · 9-10 sólidos · 11-12 texto
1
2
3
4
5
6
7
8
9
10
11
12
gray (slate)
1-2 fondos · 3-5 superficies interactivas · 6-8 bordes · 9-10 sólidos · 11-12 texto
1
2
3
4
5
6
7
8
9
10
11
12
Tonos semánticos
accent
accent
acción principal, marca
estadoverdictook
grass
sano, positivo, entregado
estadoverdictowarn
amber
atención, degradado, demo
estadoverdictoerror
tomato
fallo, revocado, negativo
estadoverdictoinfo
blue
informativo, en curso
estadoverdictoneutral
gray
desconocido, pendiente
estadoverdictoIdentidad de plataforma — siempre outline, nunca parece un estado
Tipografía
IBM Plex Sans para interfaz, IBM Plex Mono para identificadores. Escala Radix 1-9; una página usa h1=6, h2=4, cuerpo=2, meta=1.
heading 8
Qué dicen de tu negocio, y qué haces ahora
heading 6 · h1
Qué dicen de tu negocio, y qué haces ahora
heading 4 · h2
Qué dicen de tu negocio, y qué haces ahora
text 3
Qué dicen de tu negocio, y qué haces ahora
text 2 · cuerpo
Qué dicen de tu negocio, y qué haces ahora
text 2 · muted
Qué dicen de tu negocio, y qué haces ahora
text 1 · meta
Qué dicen de tu negocio, y qué haces ahora
mono
@lacasadelcafe · conn_7f3a · 2026-08-18 14:02
q-nums
1.204 · 38 · 12.988 · 0,7 %
Espacio y forma
Escala Radix (spacing 1-9). El gutter horizontal es un token CSS.
1 · 4px
2 · 8px
3 · 12px
4 · 16px
5 · 24px
6 · 32px
gutter de página
var(--q-page-x) = 2rem / 1rem < 900px
sidebar
220px
radio tarjeta
0.75rem
radio control
0.5rem
borde
1px gray-5 (fuerte: gray-7)
elevación
ninguna: superficies planas, gray-2 sobre gray-1
Movimiento y elevación
Las mismas curvas en todo el producto; la elevación no decora.
Dos curvas y tres duraciones, no más. El muelle es para lo que cambia de tamaño o de forma; el ease, para lo que cambia de color u opacidad. La elevación significa «esto responde»: una tarjeta se levanta al pasar el ratón sólo si al pulsarla ocurre algo.
--q-spring
cubic-bezier(.34,1.4,.5,1)
ancho, forma, colapso
--q-ease
cubic-bezier(.22,.8,.25,1)
color, opacidad, máscara
--q-dur-fast
140ms
hover, foco, cambio de color
--q-dur
240ms
elevación, entrada de un bloque
--q-dur-slow
380ms
colapso del rail, revelado de etiqueta
Isla en reposo
Toda superficie flota sobre el fondo con --q-elev-island. Es el estado por defecto: no se mueve.
Tarjeta interactiva
Pasa el ratón: sube 2 px y gana sombra. Sólo para tarjetas que hacen algo al pulsarlas — card(interactive=True).
Modo zen
El menú se contrae a 72 px con muelle y las etiquetas se revelan con máscara, no con fundido.
Atajo: ⌘ .
Componentes
Cada bloque es una primitiva de Qualify/ui o una composición documentada.
Botones — un solo solid por pantalla
Formularios
Un alias por negocio.
Cuenta conectada
Buscar
Monitorear
Activo
Feedback en línea
No se pudo cargar la lista. Recarga la página o vuelve más tarde.
La conexión dejó de responder. Reconéctala para restaurar el acceso.
Cada actualización gasta 1 de las 10 llamadas diarias.
Publicado. El reel ya está en tu cuenta.
Datos de demostración: los números son ilustrativos.
Pills (removable_pill / pill_editor — listas que el operador arma)
barato
#streetfood
fondo-local.jpg
surface gris = valor escrito por el operador · soft acento = sugerido por el producto (aún no confirmado). Nunca un tono: una pill no es un estado.
Palabras vetadas (pill_editor)
barato
el mejor de la ciudad
Cifras
Total menciones
1.204
últimos 14 días
Positivas
812
Neutras
354
Negativas
38
3 sin responder
Sentimiento (sentiment_badge — POS/NEG/NEU + sin analizar, QUA-92)
Tarjeta de entidad (card + platform_badge + tone_badge + tag + kv)
@lacasadelcafe
ActivaLa Casa del Café
·
Verificada: hace 2 h
Conexión
conn_7f3a9c
Marca
La Casa del Café
Tabla (surface, cifras tabulares, identificadores mono)
Estados de pantalla
Cargando
Espera de página completa — no la forma del contenido
sm
md
lg
Espera que bloquea, con progreso real o estimado
Analizando tu voz
Progreso real, por etapas
Transcribimos lo que dices
60%
Buscando hashtags
Sin progreso medible: avanza con el tiempo
Vacío
Aún no conectas ninguna cuenta
Conecta tu primera cuenta de Instagram o Facebook para empezar a escuchar y responder desde Qualify.