01 · Color
Los nueve literales del bloque A, las superficies, la regla de --muted-ink
y por qué el botón sólido no puede usar el acento brillante.
colors-primary.html
Cada tarjeta aísla una decisión y carga los archivos reales del sistema
(colors_and_type.css, tokens.css,
assets/siga.css, assets/siga.js). Empieza por
01 Color y 10 Superficies aplicadas: la primera explica de dónde sale cada valor y la
segunda demuestra el sistema montado sobre las nueve pantallas conservadas del proyecto de origen.
Los nueve literales del bloque A, las superficies, la regla de --muted-ink
y por qué el botón sólido no puede usar el acento brillante.
Tinta, relleno y línea como trío indivisible, aplicado a píldoras, puntos, avisos y al bloque de sustitución.
Escala de interfaz completa, la voz numérica tabular y las tres reglas fijas de versalitas, peso 550 y medida.
La escala, la densidad aplicada control por control y por qué el sistema
no usa auto-fill cuando una tarjeta abarca dos columnas.
8 / 12 / 18px, las tres elevaciones reales del sistema, el aro de foco y las dos únicas duraciones de movimiento.
Jerarquía de un solo relleno por vista, estados emparejados fondo/tinta, segmentado, pestañas, carril e iconografía.
KPI, gráfica de columnas rellena, tabla agrupada con totales y el ledger de inventario de solo añadir.
Campos, autocompletado, interruptor, contador táctil de raciones, tira de semana, composición de receta desplegable, modal y gaveta funcionales.
El producto todavía no tiene logo: lo que hay es un marcador tipográfico en ambas polaridades. Además, los 43 glifos cargados desde el sprite compilado y las capturas de revisión que originaron dos reglas del sistema.
Los archivos conservados del proyecto de origen cargados en marcos reales, incluida la pantalla de recetas, más la documentación viva que recalcula la tabla de contraste en el navegador.
Para construir una pantalla nueva, empieza por el kit aplicado: cascarón, formularios, datos y bloques de dominio listos para copiar.