Materia cromática
Page
#F2F1E9Text
#20313BLink
#175CA8Budget
#B06A28LB-107
Low Bandwidth
Cada byte debe justificar su viaje.
INTENCIÓN DEL SISTEMA
Sistema austero que prioriza texto, estructura y acciones críticas antes de imágenes, fuentes o efectos costosos.
IDEAL PARAMercados emergentesCampoProductos globales
Voz tipográfica
- Display
- system-ui
- Body
- system-ui
- Utility
- ui-monospace
Comportamiento
- Forma
- Listas compactas, presupuestos y espacios reservados.
- Movimiento
- Sin movimiento ambiental; la mejora progresiva nunca desplaza contenido.
- Firma
- Un presupuesto visible explica qué cargó, qué se omitió y cómo solicitarlo.
04 / REGLAS DE VUELOEl sistema funciona
El sistema funciona
cuando decides así.
Haz esto
01Texto antes que medios
02El layout no salta
03La carga se puede posponer
Evita esto
×1Fuentes bloqueantes
×2Video automático
×3Skeleton infinito
05 / COMPONENT KIT
Piezas del universo.
Componentes de referencia para trasladar la dirección visual a un producto completo.
Bandwidth budget
↗Media substitute
↗Deferred asset
↗Data saver
↗Stable placeholder
↗Text first card
↗06 / HANDOFF
Listo para tu agente.
El prompt preserva la intención del tema sin obligar a copiar esta página. Así se adapta al producto que ya existe.
Implementa el sistema visual “Low Bandwidth” (LB-107) de Co.De Strategy Systems Atlas. Intención: Sistema austero que prioriza texto, estructura y acciones críticas antes de imágenes, fuentes o efectos costosos. Paleta: Page #F2F1E9, Text #20313B, Link #175CA8, Budget #B06A28 Tipografía: display system-ui; cuerpo system-ui; utilidad ui-monospace. Forma: Listas compactas, presupuestos y espacios reservados. Movimiento: Sin movimiento ambiental; la mejora progresiva nunca desplaza contenido. Firma visual: Un presupuesto visible explica qué cargó, qué se omitió y cómo solicitarlo. Principios: Texto antes que medios; El layout no salta; La carga se puede posponer. Evita: Fuentes bloqueantes; Video automático; Skeleton infinito. Adapta el sistema al producto existente; conserva accesibilidad, semántica, responsive y reduced-motion. No copies la maqueta literalmente: aplica sus reglas.