Composición, Contenido y Jerarquía

Cards con border: 1px + box-shadow producen "depth plana": el borde anula la ilusión de profundidad. Regla: cards primarias (KPIs, hero) = shadow sin borde; cards secundarias (filas, items) = borde sin shadow. Hover promueve un nivel.

Si H1 es 34px y un KPI value es 30px, el ojo procesa ambos como "grande oscuro" sin gradación. Forzar min 1.4x entre heading y siguiente nivel. H1 a 40px / KPI a 28px, o H1 a 28px / KPI a 36px. Declarar quien manda.

Cuando cada sección lleva el mismo eyebrow uppercase tracking-widest, ninguna llama la atención. Reservar eyebrow para UN nivel por página (el más importante). Los demas pasan a sentence-case ink-soft 14-16px. El silencio entre secciones viene del espacio, no del label.

El mismo gradient violet en 9 archivos (orb, FAB, progress bars, CTAs, empty states, error pages) se vuelve wallpaper invisible. Designar UN punto canonico (orb del agente) y reemplazar el resto por violeta sólido o mesh propio. "Gradient = celebración", no fondo genérico.

Sidebar y TopBar 100% del tiempo en pantalla. Si son genéricos (logo + links + íconos), el producto es indistinguible. Inyectar UNA ancla declarativa: mini-orb del agente en sidebar, divider de acento, avatar del workspace. El chrome debe ser humilde pero no invisible.

Si una fila de propiedad condensa 9 elementos visuales (cover + chips + tipo + 3 metricas + kebab), nada se lee. Squint test a 2m: reducir a cover + título + precio + UN KPI (TIR). CAP/Cashflow en hover o tooltip. Densidad alta =/= todo visible.

No mezclar custom multi-select + HTML select + checkbox inline en la misma barra. TODOS los filtros como pills identicas con dot indicator (vacia/llena) + popover al click. Mismo alto, mismo gesto al activarse. Cero <select> HTML en filter bars.

Contenedores grandes (>=320px): xl. Cards medianos, filas: lg. Controles (chips, opt-boxes, skeletons-text): sm=6. Pills y avatares: full=999px. Eliminar valores fuera de escala. grep "border-radius:" src/ solo devuelve var(--radius-*).

Si el sistema declara 4 tokens de sombra pero los componentes inventan sombras locales, la promesa de "un theme toggle toca :root" se rompe. Politica: si una sombra local se justifica, ascenderla a token nombrado. Lint contra box-shadow: literal.

No duplicar el header de página con estilos divergentes. Un PageHeader con slots: right (acciones), meta (línea informativa), tabs, coachmark. Eliminar headers locales. Mismo H1, misma baseline, misma posición de acciones en TODA la app.

Status pill: rounded-full, 2/8 padding, 11.5px regular, soft-bg + on-soft. Counter: numérico tabular, mist-bg, muted color, 1/6 padding. Flag/tag: uppercase 0.06em, 10px weight 600, violet-tint o status-tint. Borrar y migrar todos los chips locales.

Empty inicial primera-vez (sin datos jamás): hero ilustrado con SVG + ripples + bullets + doble CTA. Empty contextual (filtros vacios, busqueda sin resultados): ícono 48px tint, título 16px, sub 13px, CTA primaria + "Limpiar filtros" secundaria. El .prop-empty necesita el cariño del EmptyKpiHero.

Cuando todo tiene el mismo gap, fondo y eyebrow, el dashboard se lee como 4 bloques democraticos sin dirección de lectura. Crear cadencia: primera sección (KPIs) full-bleed o violet-soft. Zona principal con chart a mayor altura. EBITDA al final como footer analitico. Variar mb entre secciones.

Las páginas de error son "el peor momento posible de la marca". Deben usar la misma tipografía (PageHeader), color vía token (no hardcoded), CTA "Volver al inicio" como .btn-primary. Microcopy con tono de la marca, no genérico.

En Windows/Linux el scrollbar nativo gris pesado rompe la calma visual de un producto cuidado. Tematizar en global: ancho 6-8px, thumb var(--color-line-2) con :hover soft, track transparente. Aplicado a body y superficies internas (sidebar, popovers).

El BottomNav (mobile 100% del tiempo en pantalla) debe recibir el mismo nivel de detalle que el sidebar desktop. Item activo: dot + pill background (no solo color). FAB: fill gradient o orb (no sólido plano). Press feedback: scale 0.96 + ring accent 3px transitorio en :active.

Fondo complejo (gradiente, textura) + foreground simple (texto limpio). O foreground complejo (ilustración densa) + fondo sólido. Nunca complejo sobre complejo: el ojo no puede procesarlo.

El estado "sin datos" es la primera cosa que ven usuarios nuevos. Diseñar con ilustración/ícono, mensaje amigable, y CTA para crear el primer item. Tratar empty states como onboarding.

object-fit: cover para mantener aspect ratios. Inner borders/shadows en avatares para que los blancos no se mezclen con fondos blancos. Background color detras de imagenes por si tienen transparencia.

Preferir

Inner shadow semitransparente: definido en light y dark

Evitar

Avatar sin borde: se funde con el fondo en cualquier tema

Íconos de 16px escalados a 64px se ven crudos. Si se necesita un ícono grande, buscar uno diseñado para ese tamaño. Si hay que usar uno chico en espacio grande, envolverlo en un shape (circulo, rectangulo redondeado).

Nunca confiar en que la imagen será "suficientemente oscura". Agregar overlay semi-transparente oscuro, colorizar la imagen, o poner texto en caja opaca. El contraste debe ser consistente sin importar el contenido de la foto.

Preferir

Título con overlay gradient

Evitar

Título sobre foto sin overlay

No depender solo del tamaño para jerarquía. Usar color oscuro para primario, gris para secundario, gris claro para terciario. Font-weight 600-700 para énfasis, 400-500 para body. Nunca bajar de 400.

En vez de hacer algo más grande/ruidoso, bajar el volumen de todo lo que lo rodea. Aclarar texto circundante, reducir peso, achicar meta-info. El énfasis es relativo.

"alex@example.com" no necesita un label "Email:". Fechas, precios, nombres son obvios. Cuando los labels son necesarios, hacerlos secundarios (más chicos, más claros) y dejar que el dato sea primario.

Elementos en serie van del más pesado al más ligero, como un triangulo. En un grupo de botones alineado a la derecha: primary (filled) más a la derecha, secondary (outline) después, text links al final.

Primary: fondo sólido, alto contraste, bold. Secondary: outline o fondo muted. Tertiary: text link sin fondo ni borde. Styling destructivo según importancia en contexto, no por "delete = rojo".

Diseñar la funcionalidad central antes de pensar en navigation, sidebars o headers. El chrome se ajusta al feature, no al reves. Diseñar la pantalla completa con toda la UI alrededor desde el inicio produce layouts donde el feature principal queda subordinado a la estructura. Cuando empiezas por el sidebar, el header y los breadcrumbs, el área de contenido queda como un afterthought rectangular que obliga al feature a encajar en lo que sobra. Invierte el orden: resuelve primero la tabla, el dashboard o el kanban, y después agrega solo la navegación que ese feature necesita.

Resolver jerarquía, espaciado y peso tipografico sin color elimina la muleta del tinte. Si la jerarquía no funciona en grises, el color no la rescatara. El color se agrega al final como capa de personalidad sobre una estructura sólida.

Las sombras comunican elevación: sm para cards sutiles, md para dropdowns, lg para modales, xl para drawers, 2xl para elementos flotantes criticos. No mezclar niveles arbitrariamente. La consistencia en la escala construye un modelo mental del espacio Z del producto.

Un icono de 16px escalado a 48px pierde definición porque el trazo se hace proporcional al área pero el peso visual no. La solución es encerrar el icono en una forma con color de fondo tintado. El shape escala correctamente y el icono mantiene su tamaño óptimo dentro.