Charla en beats
Ocho beats que se recorren con la URL, sin una línea de JS: la explicación de MasterMind como pieza de escenario.
Categoría 18
Ver recetaRecetas
Páginas canónicas
Cada tipo de página tiene una forma correcta, y está escrita. Cópialas como punto de partida en vez de improvisar la composición.
Admin y gestión
Barra lateral, KPIs, tabla ancha con estados y acciones por fila. El panel que más se ensucia cuando se improvisa.
Ancho completo
Ver recetaDashboard
App shell, rejilla de indicadores, gráficos en CSS puro y tabla apilable. Con los tres estados: vacío, carga y error.
Ancho completo
Ver recetaAjustes
Navegación lateral, secciones numeradas y formularios con etiquetas visibles, ayudas y errores de campo.
Ancho medio
Ver recetaAcceso
Tarjeta centrada, un solo CTA, y el error del formulario donde se mira: encima de los campos.
Columna estrecha
Ver recetaInforme
Prosa a una columna, tablas anchas con scroll propio y estilos de impresión. Aquí lo estrecho sí es lo correcto.
Columna estrecha
Ver recetaAsí sí, así no
| Detalle | Así no | Así sí |
|---|---|---|
| Iconos | Un emoji haciendo de icono en cada título | SVG en línea con currentColor |
| Color | Azul, naranja, verde y rojo a la vez | Marca como protagonista y, como mucho, cinco acentos |
| Ancho | Un panel de gestión en columna de 700 px | Ancho completo; estrecho solo para prosa |
| Tamaño | Todo a 12 px para «que quepa» | 16 base, 14 interfaz, 12 solo micro |
| Etiquetas | El placeholder haciendo de etiqueta | Etiqueta visible y el placeholder como ejemplo |