Espresso Lab — Sistema de Diseño
1. Principios de Interfaz Metrológica
Espresso Lab no implementa patrones cosméticos de cafetería ni decoraciones lifestyle. La interfaz opera como una ficha técnica industrial (datasheet) diseñada para la lectura de variables físicas: presión hidráulica (bar), caudal laminar (ml/s), tamaño micrométrico de partícula (µm) y rendimiento de extracción (%EY).
2. Tokens de Color y Contraste (WCAG AAA)
Todos los componentes deben responder nativamente a modo claro, oscuro y forzado de alto contraste (forced-colors: active).
| Token CSS | Valor RGB / Hex | Uso Semántico | Ratio Contraste |
|---|---|---|---|
--bg-base |
#06090e |
Lienzo estructural general | Fondo |
--bg-surface |
#0c131f |
Superficie de tarjetas y tablas | 1.1:1 vs base |
--text-main |
#e2e8f0 |
Cuerpo de lectura y parámetros | 14.8:1 (AAA) |
--accent-cyan |
#38bdf8 |
Acento primario, enlaces y vectores P-Q | 9.2:1 (AAA) |
--accent-amber |
#fbbf24 |
Alarmas de canalización y límite 9 bar | 8.5:1 (AAA) |
3. Componente Canónico: Tabla de Datos Responsiva
Toda tabla de datos del sitio debe envolverse obligatoriamente dentro de un contenedor .table-responsive con overflow-x: auto y cabecera sticky para garantizar un CLS de 0.00 en pantallas móviles.
| Geometría de Muelas | Fracción Finos (<100 µm) | Uniformidad Modal | Resistencia Puck (Darcy) |
|---|---|---|---|
| Plana 64 mm (Unimodal) | 8.2% ± 0.5% | Alta (Pico único 420 µm) | Baja ($k = 1.4 \times 10^{-13}\text{ m}^2$) |
| Cónica 48 mm (Bimodal) | 19.8% ± 1.2% | Bimodal (Picos 80 µm y 510 µm) | Alta ($k = 0.6 \times 10^{-13}\text{ m}^2$) |
4. Motor Gráfico SVG: Curvas de Presión y Flujo
Los perfiles de extracción se representan mediante nodos SVG accesibles y escalables, sin incrustaciones rasterizadas: