# Especificaciones graficas oficiales

Sistema: `::::bastion::universalis::::`  
Paquete: `static/official/primera netrega oficial v2/dist/official`  
Documento vivo: `design-files.html`  
Documento portable: `ESPECIFICACIONES-GRAFICAS.md`  
Regla operativa: un repositorio compartido; diseno actualiza graficos, Codex integra codigo.

---

## 1. Regla de colaboracion

Desde esta entrega ya no se debe trabajar bajando archivos sueltos a `Downloads` ni creando carpetas paralelas de primera/segunda entrega.

Flujo canonico:

1. Todo cambio vive en el mismo repositorio oficial.
2. El equipo de diseno puede subir assets graficos al repo.
3. Codex integra cambios programaticos, rutas, manifest, README, endpoints y validaciones.
4. Claude/Grok/otros modelos pueden proponer diseno, pero el resultado operativo debe volver al repo.
5. No crear otra app, otro puerto ni otro paquete paralelo si el cambio cabe como modulo o asset.
6. Cada asset nuevo debe tener nombre canonico, ruta estable y referencia local valida.

Separacion de responsabilidades:

| Rol | Responsabilidad |
| --- | --- |
| Diseno | Logos, imagenes, textura, composicion visual, iconos, mockups, variantes graficas |
| Codex | Integracion, rutas, HTML/CSS/JS, manifest, README, validacion, puerto oficial |
| Frontier/Claude/Grok | Generacion o normalizacion previa, siempre subordinada al repo canonico |

Regla corta:

```text
diseno cambia graficos; Codex cambia sistema; ambos trabajan sobre el mismo repo.
```

---

## 2. Marca

La marca oficial usa lenguaje institucional en minusculas y tokens con cuatro puntos:

```text
::::bastion::::admin::::
::::mayan::mirror::::
::::mayan::traktor::::
::::facta::non::ficta::::
```

Reglas:

- Todo texto de interfaz va en minusculas salvo siglas tecnicas necesarias.
- Los tokens `::::` funcionan como marca visual y estructura semantica.
- Los `::::` deben verse en cian cuando sea posible.
- El lema es `facta non ficta`.
- `facta` y `ficta` van en blanco; `non` en gris.
- El jaguar de Bastion es centro visual de navegacion.
- El imagotipo Terrauniversalis aparece en diales, pie o pantallas de identidad.

Assets base:

- `assets/bastion-jaguar.png`
- `assets/tu-imagotipo-blanco.png`
- `assets/bastion-logo.jpg`

---

## 3. Color

Base visual:

| Uso | Color |
| --- | --- |
| Fondo obsidian | `#050608` |
| Panel negro | `#000000` / `rgba(0,0,0,.55)` |
| Cian Bastion | `#00daf8` |
| Texto principal | `#ffffff` |
| Texto secundario | `#7e8d93` |
| Texto tecnico | `#b9c4c9` |

Color por modulo:

| Dominio | Color | Uso |
| --- | --- | --- |
| RH | Azul `#2e6bff` | Personas, directorio, recursos humanos |
| RF | Verde `#1fe9c2` | Recursos financieros |
| RM | Amarillo `#ffe14d` | Recursos materiales, inventario |
| Audit | Rosa/Fuchsia `#ff2bd1` | Auditoria, eventos, cadena |
| Gober | Morado `#7c3cff` | Gobierno, norma, estructura |
| MIDI | Fuchsia `#ff4fd8` | MIDI, mappings, controladoras |
| Nucleo | Cian `#00daf8` | Arquitectura, puertos, centro tecnico |
| Intranet | Oro `#d8a941` | Intranet, operacion interna |
| GRP | Multicolor | Anillo de gestion general |

Reglas:

- El usuario debe reconocer el dominio por color.
- Azul siempre identifica RH.
- Valores producidos por el sistema van en blanco con glow del color del modulo.
- Fondos planos se evitan; usar profundidad, textura o micro-grid.

---

## 4. Tipografia

Fuentes oficiales:

- Titulos y marca: `Instrument Sans`
- Datos, rutas, endpoints, metricas: `IBM Plex Mono`

Uso:

| Fuente | Peso | Uso |
| --- | --- | --- |
| Instrument Sans | 800 | Logo, titulo de modulo, nombres grandes |
| Instrument Sans | 700 | Encabezados, nombres de diales |
| Instrument Sans | 300/400 | Subtitulos, descripcion |
| IBM Plex Mono | 500/600/700 | Puertos, rutas, codigos, metricas, canales MIDI |

Dependencia:

- Google Fonts esta permitida como dependencia cosmetica con fallback local.
- No se permite CDN de JavaScript para UI productiva.

---

## 5. Componentes canonicos

### Octagono

El octagono es la forma base de navegacion, modulos y botones de identidad.

Clip-path canonico:

```css
clip-path: polygon(
  30% 0,
  70% 0,
  100% 30%,
  100% 70%,
  70% 100%,
  30% 100%,
  0 70%,
  0 30%
);
```

Reglas:

- Octagono grande: dominio o anillo.
- Octagono mediano: modulo.
- Octagono pequeno: accion o indicador.
- Puede tener glow del color de modulo.
- No sustituir por botones redondeados genericos.

### Boton octagonal

Uso:

- Acciones primarias.
- Exportar, abrir, validar, emitir reporte.
- Debe tener corte angular u octagonal.

### Frame con luz que respira

Uso:

- Paneles principales.
- Tarjetas de estado.
- Contenedores tecnicos.

Regla de movimiento:

- Animacion suave.
- Duracion sugerida: `3.2s` a `4s`.
- Respetar `prefers-reduced-motion`.

### Cuadro negro con profundidad

Uso:

- Contenedores de datos.
- Diales.
- Pantallas tecnicas.

Efecto:

- Sombra interna fuerte.
- Sombra exterior baja.
- Glow fino, no saturado.

### Metrica

Regla:

- Valor en blanco.
- Label en gris.
- Valor con glow del color del modulo.

---

## 6. Navegacion Octobar

La `octobar` superior es la navegacion oficial de todas las pantallas.

Estructura:

- MIDI: octagono amarillo.
- Admin: octagono rosa.
- GRP: octagono azul.
- Sistema: octagono verde.
- Jaguar al centro.

Reglas:

- El titulo de color de cada menu desplegable debe ser clicable.
- Cada menu lleva al anillo o pantalla inicial de su dominio.
- No crear menus paralelos si la pantalla pertenece al paquete oficial.

Archivo:

- `assets/bastion-octobar.js`

---

## 7. Movimiento

Reglas:

- Movimiento con proposito, no decoracion excesiva.
- Usar respiracion de borde para panel vivo.
- Usar stagger/reveal solo cuando ayuda a entender jerarquia.
- Evitar animaciones que parezcan loading falso.
- Respetar `prefers-reduced-motion`.

Duraciones sugeridas:

| Uso | Duracion |
| --- | --- |
| Respiration/breathe | `3.2s` a `4s` |
| Hover | `120ms` a `180ms` |
| Entrada de panel | `240ms` a `420ms` |

---

## 8. Layout y espaciado

Reglas:

- Sistema base de 4px.
- Grid principal de 12 columnas.
- Pantallas grandes max-width aproximado `1240px`.
- Cards con padding entre `18px` y `24px`.
- Gap normal entre bloques: `12px` a `16px`.
- Evitar espacios arbitrarios.

Pantalla:

- Fondo obsidian.
- Micro-grid o textura sutil.
- Paneles negros con profundidad.
- Contenido tecnico en tablas limpias.

---

## 9. Fondo y textura

Fondo oficial:

- Obsidian `#050608`.
- Micro-grid discreto.
- Brillos cian/fuchsia/oro solo como acento.
- No usar fondo blanco como base de Bastion.
- No usar gradiente generico sin textura o intencion.

Textura permitida:

- Ruido muy sutil.
- Grid tecnico.
- Glow radial bajo.
- Profundidad tipo consola.

---

## 10. Aplicacion correcta

Si:

- Mantener nombres canonicos.
- Usar assets locales.
- Registrar cambios en `manifest.json`.
- Actualizar README si cambia flujo operativo.
- Usar `design-files.html` como referencia interactiva.
- Usar este Markdown como documento portable para diseno y terceros.
- Trabajar sobre el mismo repo.

No:

- No crear `Downloads` como fuente de verdad.
- No crear `primera entrega`, `segunda entrega`, `v3`, etc. como flujo normal.
- No crear puertos nuevos para una pantalla.
- No usar rutas `C:/Users/...` dentro de HTML productivo.
- No usar `file:///` en enlaces productivos.
- No duplicar logos con nombres ambiguos.
- No meter CDN de JS.
- No cambiar lenguaje visual sin registrar la decision.

---

## 11. Archivos de referencia

Referencia visual interactiva:

- `design-files.html`

Estilos:

- `assets/bastion.css`
- `assets/bastion-ops.css`
- `assets/ds-tokens/tokens.css`

Navegacion:

- `assets/bastion-octobar.js`
- `assets/bastion-shell.js`

Manifest:

- `manifest.json`

Entrada del paquete:

- `index.html`
- `bastion-portal.html`

---

## 12. Regla para cambios graficos

Cuando se suba un cambio grafico al repo:

1. Colocarlo en `assets/` o subcarpeta clara.
2. Mantener nombre descriptivo en minusculas, sin espacios si es nuevo.
3. No borrar asset anterior si aun esta referenciado.
4. Codex valida referencias locales.
5. Codex actualiza `manifest.json` si el asset queda como dependencia oficial.
6. Codex actualiza README o este documento si cambia la norma visual.

Formato recomendado para pedir cambio:

```text
Asset nuevo:
Ruta:
Pantalla donde aplica:
Reemplaza a:
Mantener anterior: si/no
Notas visuales:
```

### Mayan Mapper consolidado

Pantalla canonica:

- `midi/mayan-mapper.html`

Secciones nuevas pendientes de tratamiento grafico por Diseno:

- `#mayantraktor-live`
- `#mayan-midi-matrix`
- `#mayan-midi-host`

Regla: estas secciones se agregaron abajo como bloques nuevos de integracion. No redisenar ni romper la consola visual existente, el dial octagonal existente ni la navegacion superior impecable. Diseno puede mejorar imagen, iconografia y composicion de esos bloques nuevos manteniendo el flujo consolidado dentro de Mayan Mapper.

---

## 13. Frase canonica

```text
Un repo, un portal, un gateway, muchos modulos.
Diseno y programacion trabajan en paralelo sin paquetes paralelos.
```