Cultiva Cafe — UI Polish Review

Tabla de cambios

Principio	❌ Antes	✅ Después
Radio concéntrico	Panel exterior `8px`, tarjeta interior `8px` — mismo radio, sin coherencia óptica	Panel exterior `16px`, tarjeta interior `12px`, icono interior `8px` — cada capa coherente con su padding
Números tabulares	Badge de pedidos usa `proportional-nums`: el layout brinca al pasar de 9 → 10	`font-variant-numeric: tabular-nums` en badge y precios — sin cambio de ancho
Scope de transición	`transition: all 0.3s` en botones — anima propiedades innecesarias	`transition-property: transform, background-color, box-shadow` — solo lo que cambia
Sombras en capas	Tarjetas solo con `border: 1px solid #ddd` — sin profundidad	Sombra de contacto + sombra de elevación: `0 1px 2px … , 0 4px 10px …`
Alineación óptica	Icono con `padding-top: 3px` extra — visualmente descentrado	Sin padding compensatorio; icono SVG centrado de forma neutral
Estado activo (press)	Hover cambia color pero no hay feedback táctil de pulsación	`:active { transform: scale(0.96) }` — feedback táctil en click
Área de pulsación	Botones con `padding: 8px 14px` — área táctil < 40×40px	`min-height: 44px` en todos los controles interactivos
Text wrap	Sin wrapping declarado — títulos se cortan de forma irregular	`text-wrap: balance` en heading, `text-wrap: pretty` en descripciones
Font smoothing	Sin declarar — el texto se ve con subpixel crudo en macOS	`-webkit-font-smoothing: antialiased` en `html`

Demo interactiva — pasa el cursor por los elementos

Antes

Plano, sin profundidad, transiciones abruptas, icono descentrado, número que brinca.

9 pedidos activos

🧃

Mesa 4 — Carlos R.

1× Flat White · 2× Tostada aguacate · 1× Zumo natural

☕

Barra — Sofía M.

2× Cortado · 1× Cookie artesana

Después

Radios concéntricos, sombras en capas, transiciones precisas, números estables, hit areas 44px.

9 pedidos activos

🧃

Mesa 4 — Carlos R.

1× Flat White · 2× Tostada aguacate · 1× Zumo natural

☕

Barra — Sofía M.

2× Cortado · 1× Cookie artesana

Fragmentos CSS aplicados

1. Radio concéntrico

.dash-container { border-radius: 16px; padding: 20px; }
.card           { border-radius: 12px; } /* 16 - 4 ≈ 12 */
.icon           { border-radius: 8px;  } /* 12 - 4 ≈  8 */

2. Transición con scope explícito

/* ❌ Antes */
.btn { transition: all 0.3s; }

/* ✅ Después */
.btn {
  transition-property:        transform, background-color, box-shadow;
  transition-duration:         150ms;
  transition-timing-function:  ease-out;
}
.btn:active { transform: scale(0.96); } /* feedback táctil */

3. Números tabulares y font smoothing

html {
  -webkit-font-smoothing:     antialiased;
  -moz-osx-font-smoothing:   grayscale;
}
.badge, .price, .timer {
  font-variant-numeric: tabular-nums; /* sin saltos de layout */
}

4. Sombras en capas

.card {
  box-shadow:
    0 1px 2px  rgba(44,26,14,.04),  /* contacto */
    0 4px 10px rgba(44,26,14,.06);   /* elevación */
}

5. Text wrap

h1, h2, h3 { text-wrap: balance; }
p, li, .desc{ text-wrap: pretty;  }
/* Evitar en: prose largo, code, pre */

Checklist de verificacion

✅Elementos anidados con radio concéntrico coherente

✅Iconos visualmente centrados (sin offsets arbitrarios)

✅Botones y tarjetas con sombras en capas

✅Títulos y textos cortos con text-wrap declarado

✅Contadores y precios con tabular-nums

✅font-smoothing antialiased en root

✅Animaciones enter/exit separadas y sutiles

✅Estado :active táctil sin movimiento exagerado

✅Ausencia de transition: all y will-change: all

✅Controles con hit area mínimo 44×44 px

Pulir Interfaces: Detalles de Diseño

Mesa 4 — Carlos R.

Barra — Sofía M.

Mesa 4 — Carlos R.

Barra — Sofía M.