Un solo diseño para Celestia
Colores, tamaños y componentes compartidos por Portal, Remates, Radar, Correo y Música. Se cargan desde el marco común (/comun/componentes.css), así que funcionan igual en Svelte, Astro, React y páginas sin framework.
Componentes
Botones, campos, chips, cifras, tarjetas, pestañas, avisos, tablas y diálogos, con sus estados.
AplicadoRemates
Tablero, filtros, lista y ficha de un remate rediseñados con las mismas piezas.
AplicadoRadar
Hallazgos, revisión cruzada de Claude y Codex, y la burbuja para pedir investigaciones.
AplicadoCorreo y Música
Bandeja, lectura y biblioteca con la misma barra lateral y la misma tabla.
Principios
- Neutros y un solo acentoGrises cálidos y el azul de Celestia. Sin degradados ni violetas de plantilla.
- Una medida por tipo de piezaControles de 36 px con esquinas de 8; tarjetas con esquinas de 12. Lo mismo en todas las apps.
- Primero el celularUna sola zona que se desliza, nada que atrape el dedo, márgenes de 16 px y texto de al menos 12 px.
- Se ve dónde estásFoco visible con el teclado, estados con color y texto, nunca solo con color.
Colores
Son los --celestia-* que ya define el marco, más tres colores de estado. Cambian solos en modo oscuro (botón de arriba a la derecha).
--celestia-fondo--celestia-sup--celestia-sup2--celestia-linea2--celestia-texto--celestia-suave--celestia-acento--c-bien--c-aviso--c-malTipografía
Elige una pareja y mira cómo cambian las cinco páginas (también desde el botón Aa de arriba). Los títulos pueden llevar otra familia; el texto, las cifras y los controles usan la de lectura. Siete tamaños, del 12 al 34.
Un departamento en Miraflores sale a remate con 33 % de descuento
El precio base es de S/ 312,000, dos tercios de la tasación. Si nadie ofrece en el primer intento, el segundo baja un 15 % y el tercero otro tanto. Antes de ofertar conviene revisar la partida registral, el expediente y las cargas inscritas.
expediente 01234-2024--c-t7 · 34Remates de esta semana--c-t6 · 26S/ 182,400--c-t5 · 20Lo que merece tu atención--c-t4 · 16Título de una tarjeta--c-t3 · 14Texto de lectura: párrafos, descripciones y celdas.--c-t2 · 13Botones, etiquetas de formulario y metadatos.--c-t1 · 12Rótulos, ayudas y el mínimo permitido.Espacio
Esquinas
etiquetas
controles
tarjetas
Profundidad
Tres sombras suaves: reposo, al pasar el cursor y lo que flota (diálogos, avisos).
Muestrario estático con datos inventados. Ninguna cifra corresponde a remates, correos ni canciones reales.