name: design_system description: Official Dos Siete Design System rules for Simplified UI and Motion. Use this to ensure visual consistency.
DOS SIETE — Sistema de Diseño
Este documento define las reglas estrictas para la generación de assets gráficos animados (Motion Graphics) y prototipos de interfaz simplificada (Simplified UI) para la marca DOS SIETE.
1. Filosofía Visual
Concepto Central: La comunicación genera nuevas soluciones. La unión de dos puntos crea algo nuevo (la vesica).
Estilo: "Simplified UI"
- Definición: Abstracción geométrica, limpieza absoluta, eliminación de ruido visual.
- Formas: Predominancia del CÍRCULO (inspirado en el isotipo). Interfaces suaves y amigables.
🚫 Regla de Oro: Zero-Device Policy
- PROHIBIDO: Enmarcar la interfaz dentro de tablets, teléfonos, monitores o cualquier hardware realista.
- OBLIGATORIO (Floating UI): Los elementos son ventanas, tarjetas o burbujas que flotan libremente en el espacio vacío (Canvas).
- Cada elemento tiene su propia sombra (elevación).
- No existen los "bordes de pantalla".
2. Identidad Visual (Design Tokens)
Estas son las verdades inmutables del sistema. Usa estos valores EXCLUSIVAMENTE.
🎨 A. Paleta de Colores
Colores de Estructura (Canvas & UI)
| Muestra | Nombre | HEX | RGB | Uso Principal |
|---|---|---|---|---|
| ⬜ | Wild Sand | #F2F2F2 | 242, 242, 242 | Fondo (Canvas). Espacio infinito. |
| ⚪ | Blanco Puro | #FFFFFF | 255, 255, 255 | Superficie. Ventanas y tarjetas flotantes. |
| 🌑 | Bunting | #141F4C | 20, 31, 76 | Texto/Estructura. Bloques de texto simulado, iconos inactivos. |
Colores de Acción (Marca)
| Muestra | Nombre | HEX | RGB | Uso Principal |
|---|---|---|---|---|
| 🔵 | Picton Blue | #29ABE2 | 41, 171, 226 | Primary Action. Botones, alertas positivas, pulsos. |
| 🟦 | Dark Blue | #2000D6 | 32, 0, 214 | Active State. Selección, estado activo, profundidad. |
| 🔷 | Mariner | #2376C9 | 35, 118, 201 | Support. Elementos secundarios, hovers, avatares. |
📐 B. Geometría y Formas
Radio de Borde (Border Radius)
- Ventanas Flotantes:
16pxo24px(Muy redondeado y amigable). - Botones:
999px(Pill shape). - Avatares:
50%(Círculos perfectos).
Abstracción de Texto (Greeking for Simplified UI)
- Títulos: Rectángulos redondeados (
radius: 4px). Color: Bunting (#141F4C). - Detalles: Líneas finas. Color: Mariner (
#2376C9).
Sombras (Elevación)
Nota: La sombra debe tener un tinte azulado (usando color Bunting), nunca negro puro.
- Elevation-Low (Reposo):
0px 4px 12px rgba(20, 31, 76, 0.08) - Elevation-High (Activo/Modal):
0px 12px 24px rgba(20, 31, 76, 0.12)
3. Prompt Template para Generación
Copia y pega este prompt cuando pidas nuevas animaciones o diseños al agente.
Genera una guía visual y código SVG/CSS para una micro-interacción de:
[NOMBRE DE LA FUNCIÓN]
Contexto de Hero: Interfaz flotante en espacio abstracto.
[Descripción breve]
Acción:
[Click / Hover / Drag]
Restricción CRÍTICA: NO USAR DISPOSITIVOS (Tablets/Móviles). Diseña ventanas flotantes independientes con sombras suaves sobre fondo Wild Sand. Usa los Design Tokens de DOS SIETE.