---
version: "2.0"
name: "GastroSib"
description: "Identidad B2B premium para abastecimiento HoReCa: un sistema oscuro, industrial y editorial que trata la logística gastronómica como un sistema operativo de precisión. El rojo es señal, no decoración."
colors:
  primary: "#AF1917"
  secondary: "#B88D57"
  accent: "#AF1917"
  neutral: "#F5F1EA"
  background: "#111111"
  surface: "#1A1A1A"
  text-primary: "#F5F1EA"
  text-secondary: "#A8A29A"
  border: "#2A2A2A"
typography:
  display-lg:
    fontFamily: "Urbanist"
    fontSize: "56px"
    fontWeight: 700
    lineHeight: "58px"
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "24px"
  label-md:
    fontFamily: "Urbanist"
    fontSize: "13px"
    fontWeight: 700
    lineHeight: "18px"
    letterSpacing: "0.16em"
  mono-data:
    fontFamily: "Space Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "20px"
rounded:
  sm: "6px"
  md: "12px"
  full: "9999px"
spacing:
  base: "8px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "48px"
  gap: "24px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "14px 24px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    border: "1px solid {colors.border}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "14px 24px"
  button-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "0px"
  card:
    background: "{colors.surface}"
    border: "1px solid {colors.border}"
    borderRadius: "{rounded.md}"
    padding: "24px"
    boxShadow: "0 18px 40px -16px rgba(0,0,0,0.55)"
---

# DESIGN.md — GastroSib

> Sistema de diseño extraído del board de identidad de marca **GastroSib — Brand Identity for Premium HoReCa Supply**.
> Formato DESIGN.md v2: frontmatter YAML de tokens (legible por máquina) + secciones narrativas (legibles por humano y agente).
> Fuente: imagen de brand board estático. Las secciones Motion/WebGL/ThreeJS se completan o se omiten según lo que la fuente realmente documenta.

---

## 1. Tema Visual y Atmósfera

GastroSib viste la logística gastronómica B2B con la severidad de un sistema operativo. La paleta es casi monocroma —negro profundo y blanco cálido— interrumpida por un único rojo de señal que aparece solo donde importa: el símbolo, un número de paso, un código de lote. Es la marca de un socio de servicio premium, no de un almacén: deliberadamente despojada de cualquier cliché decorativo de restaurante (sin manteles, sin caligrafías, sin texturas rústicas). En su lugar, rejillas estrictas, mayúsculas geométricas condensadas y fotografía de producto con sombra dramática que sugiere precisión nivel Michelin.

El gesto distintivo es la marca: un círculo tipo botón de encendido con una chispa en diamante, fusión de la letra **G**, la función del chef y el "encendido" del servicio: una sola pieza que dice *continuidad de suministro + estructura geométrica*. La frase que resume el sistema, citada por el propio CEO en el board: *"no parece un logo, parece un sistema operativo."*

**Palabras clave de personalidad**: preciso, industrial, premium, confiable, editorial, minimalista.

**Densidad del layout**: spacious (editorial, con aire negativo generoso entre bloques).

**Modo preferido**: oscuro (Dark Mode garantiza operación cómoda bajo la iluminación baja de las zonas de almacén; es la base del sistema, no una variante).

**Nivel de ornamentación**: flat con acentos precisos. Sin gradientes blandos ni texturas; la única "ornamentación" es el rojo de señal y los códigos monoespaciados de datos.

**Audiencia visual objetivo**: compradores y operaciones B2B del segmento HoReCa (hoteles, restaurantes, cafés) y equipos de cocina profesionales.

---

## 2. Paleta de Colores y Roles Semánticos

Paleta de 4 colores tal como la documenta el board, más derivados de superficie/estado necesarios para construir interfaces. Los 4 hex base son textuales del brand board.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Brand Red (Primario) | `--color-primary` | `#AF1917` | Símbolo, CTAs, señal, números de paso, acento "Sib" | `#F5F1EA` |
| Brand Red hover | `--color-primary-hover` | `#C61E1B` | Estado hover del primario | `#F5F1EA` |
| Brand Red activo | `--color-primary-active` | `#8E120F` | Estado pressed del primario | `#F5F1EA` |
| Gold Accent (Secundario) | `--color-secondary` | `#B88D57` | Highlights editoriales, premium, usado con moderación | `#111111` |
| Acento | `--color-accent` | `#AF1917` | Highlights, indicadores, estados activos | `#F5F1EA` |

> **Regla de uso del rojo**: es *señal*, no relleno. Energía, urgencia, indicación. Nunca grandes superficies rojas.
> **Regla del oro**: editorial, "used sparingly" — encabezados de catálogo, filetes, detalles premium.

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Deep Black (Fondo) | `--color-bg` | `#111111` | Background de página. Autoridad y profundidad. |
| Superficie | `--color-surface` | `#1A1A1A` | Cards, paneles, tiles |
| Superficie elevada | `--color-surface-raised` | `#222222` | Dropdowns, popovers |
| Superficie overlay | `--color-surface-overlay` | `#0C0C0C` | Modals, sheets |
| Borde | `--color-border` | `#2A2A2A` | Divisores, bordes de card/input |
| Borde sutil | `--color-border-subtle` | `#1F1F1F` | Separadores ligeros |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Warm White (principal) | `--color-text` | `#F5F1EA` | Body text, headings, negative space |
| Texto secundario | `--color-text-secondary` | `#A8A29A` | Descriptions, subtítulos |
| Texto muted | `--color-text-muted` | `#6E6A63` | Placeholders, metadata |
| Texto sobre primario | `--color-text-on-primary` | `#F5F1EA` | Texto en botones rojos |

### Colores de estado

> El board no documenta una escala de estados; se derivan de la lógica de la marca (rojo = señal/error encaja con el acento, oro/verde para éxito editorial). Marcados como derivados.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#5E8C61` | `#F5F1EA` |
| Advertencia | `--color-warning` | `#B88D57` | `#111111` |
| Error | `--color-error` | `#AF1917` | `#F5F1EA` |
| Info | `--color-info` | `#A8A29A` | `#111111` |

---

## 3. Reglas de Tipografía

Dos familias, ambas **Google Fonts nativas** (sin sustitución): Urbanist para impacto y voz de marca, DM Sans para comunicación técnica detallada. Una tercera, monoespaciada, aparece en los códigos de datos del empaque (ITEM / BATCH / LOGISTICS).

### Familias tipográficas

```css
/* Heading: Urbanist — sans geométrica, moderna, confiada. Para impacto y momentos clave de marca. */
--font-heading: 'Urbanist', sans-serif;

/* Body: DM Sans — limpia, muy legible, neutral. Para comunicación técnica detallada. */
--font-body: 'DM Sans', sans-serif;

/* Mono/data: Space Mono — códigos de lote, SKU, etiquetas logísticas. */
--font-mono: 'Space Mono', monospace;
```

**Google Fonts:**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;700&family=DM+Sans:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: ninguna. Tanto **Urbanist** como **DM Sans** están documentadas literalmente en el brand board y existen en Google Fonts, así que se renderizan tal cual (fidelidad total). `Space Mono` es la elección para los códigos monoespaciados observados en el empaque.

### Escala tipográfica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | ~12px | 1.5 | Códigos de datos, captions, badges |
| `--text-sm` | 0.875rem | ~14px | 1.5 | Labels, helper text |
| `--text-base` | 1rem | 16px | 1.6 | Body text principal (DM Sans) |
| `--text-lg` | 1.125rem | ~18px | 1.55 | Intro paragraphs |
| `--text-xl` | 1.25rem | ~20px | 1.3 | Subheadings de sección |
| `--text-2xl` | 1.5rem | ~24px | 1.2 | Títulos de card (Urbanist Bold) |
| `--text-3xl` | 1.875rem | ~30px | 1.15 | Encabezados de sección |
| `--text-4xl` | 2.25rem | ~36px | 1.1 | H1 de contenido |
| `--text-5xl` | 3.5rem | ~56px | 1.02 | Display / hero ("THE BOOK") |

### Pesos tipográficos

```css
--font-light: 300;     /* Urbanist/DM Sans Light — para statements amplios */
--font-normal: 400;    /* Body text regular */
--font-medium: 500;    /* DM Sans labels */
--font-bold: 700;      /* Urbanist Bold — headings de impacto, mayúsculas */
```

### Letter spacing

```css
--tracking-tight: -0.02em;    /* Display Urbanist Bold */
--tracking-normal: 0em;       /* Body DM Sans */
--tracking-wide: 0.16em;      /* Eyebrow / section labels en mayúsculas */
```

> Los títulos de marca van en **Urbanist Bold en mayúsculas** con tracking amplio cuando son etiquetas de sección (`BRAND STORY`, `LOGO SYSTEM`, `COLOR PALETTE`) y tracking ajustado cuando son display grande (`THE BOOK`, `CONSISTENCY IS KING`).

---

## 4. Estilos de Componentes

### Botones

**Primario**
```
Background: var(--color-primary)        /* #AF1917 */
Color de texto: var(--color-text-on-primary)  /* #F5F1EA */
Padding: 14px 24px
Border-radius: var(--radius-sm)         /* 6px — sharp, industrial */
Font: Urbanist 700, uppercase, var(--text-sm), tracking 0.06em
Transición: all 150ms ease

Hover:    Background var(--color-primary-hover)  /* #C61E1B */
Active:   Background var(--color-primary-active); transform translateY(1px)
Disabled: opacity 0.5; cursor not-allowed
Focus:    outline 2px solid var(--color-primary); outline-offset 2px
```

**Secundario (outline sobre oscuro)**
```
Background: transparent
Color de texto: var(--color-text)       /* #F5F1EA */
Border: 1px solid var(--color-border)   /* #2A2A2A */
Padding y radius iguales al primario
Hover: border-color var(--color-text-secondary)
```

**Ghost / Link**
```
Background: transparent
Color de texto: var(--color-primary)    /* rojo de señal */
Border: none
Hover: subrayado fino del color primario
```

### Inputs de texto

```
Background: var(--color-surface)        /* #1A1A1A */
Border: 1px solid var(--color-border)
Border-radius: var(--radius-sm)         /* 6px */
Padding: 12px 14px
Color: var(--color-text)
Placeholder: var(--color-text-muted)
Focus: border-color var(--color-primary); box-shadow 0 0 0 3px rgba(175,25,23,0.25)
Error: border-color var(--color-error)
```

### Cards

```
Background: var(--color-surface)        /* #1A1A1A */
Border: 1px solid var(--color-border)   /* #2A2A2A */
Border-radius: var(--radius-md)         /* 12px */
Padding: var(--space-6)                 /* 24px */
Box-shadow: 0 18px 40px -16px rgba(0,0,0,0.55)

Las cards de estrategia ("01. PRECISION") llevan el número/título en rojo o gris,
y body en DM Sans. Las cards de catálogo usan el oro para encabezados editoriales.
```

### Badges / Chips

```
Padding: 4px 10px
Border-radius: var(--radius-sm)
Font: Space Mono o Urbanist, var(--text-xs), uppercase
Default:  background var(--color-surface-raised); color var(--color-text-secondary)
Primary:  background rgba(175,25,23,0.15); color var(--color-primary)
Data code: background transparent; border 1px solid var(--color-primary); color var(--color-primary); font Space Mono
```

### Navegación / Header

```
Background: var(--color-bg)
Border-bottom: 1px solid var(--color-border)
Logo: marca roja + wordmark "Gastro Sib" (Sib en rojo)
Links: Urbanist 700, uppercase, var(--text-sm), tracking 0.12em
  Color: var(--color-text-secondary)
  Hover: var(--color-text)
  Active: var(--color-primary)
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;     /* base */
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;    /* gap entre componentes / card padding */
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;   /* separación entre bloques */
--space-16: 64px;
--space-24: 96px;   /* separación entre secciones */
```

### Contenedores

```css
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
```

### Grid

```
Sistema: 12 columnas con gutter de 24px.
Las secciones se introducen con un título en mayúsculas precedido por un
filete rojo vertical (barra de acento a la izquierda del label).
Las cards de estrategia/valores van en grid de 3 columnas.
```

### Filosofía de espaciado

Editorial y generosa. El aire negativo (sobre negro profundo) es un material de diseño en sí: aísla la fotografía de producto, deja respirar los grandes display y refuerza la lectura "premium". El contenido se alinea a rejillas estrictas; nada flota sin estructura.

---

## 6. Profundidad y Elevación

### Sistema de sombras

```css
--shadow-none: none;
--shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
--shadow-md: 0 10px 24px -10px rgba(0,0,0,0.5);
--shadow-lg: 0 18px 40px -16px rgba(0,0,0,0.55);
--shadow-xl: 0 30px 60px -20px rgba(0,0,0,0.65);
```

La profundidad es sobria: superficies casi-negras (`#1A1A1A`) sobre el fondo (`#111111`), separadas por un borde hairline (`#2A2A2A`) y una sombra profunda y suave. La fotografía de producto aporta la dramaturgia (alto contraste, sombras largas, reflejos especulares en vajilla negra mate). En piezas físicas, la elevación se traduce como **rojo foil emboss sobre stock graphite mate de 400gsm**.

### Niveles de elevación

| Nivel | Token | Uso |
|-------|-------|-----|
| 0 — Base | `--shadow-none` | Página (#111111) |
| 1 — Raised | `--shadow-sm` | Cards, tiles |
| 2 — Floating | `--shadow-md` | Dropdowns, tooltips |
| 3 — Overlay | `--shadow-lg` | Cards destacadas, popovers |
| 4 — Modal | `--shadow-xl` | Modals, sheets |

### Radios de borde

```css
--radius-sm: 6px;     /* botones, inputs, chips — sharp/industrial */
--radius-md: 12px;    /* cards, paneles */
--radius-lg: 16px;    /* contenedores grandes, mock de app */
--radius-full: 9999px; /* la marca circular, badges pill */
```

El radio predominante es **6–12px**: lo bastante suave para sentirse moderno y de producto, lo bastante contenido para leer como preciso e industrial. La única forma plenamente circular es la marca (botón de encendido), que ancla la geometría del sistema.

---

## 7. Lo que Sí y lo que No

### ✅ Hacer

1. **Usar el rojo como señal, no como relleno** — símbolo, números de paso, códigos de lote, un CTA. Su escasez es lo que lo hace potente.
2. **Mantener el fondo negro profundo como base** — autoridad y profundidad; el Dark Mode es funcional para zonas de almacén con poca luz.
3. **Componer sobre rejillas estrictas** — precisión nivel Michelin; cada bloque alineado, nada flotando.
4. **Reservar el oro para detalles editoriales** — encabezados de catálogo, filetes, momentos premium; con moderación.
5. **Usar Urbanist Bold en mayúsculas para impacto** y DM Sans para la comunicación técnica detallada.
6. **Tratar los datos como tipografía** — SKU, lotes y etiquetas logísticas en monoespaciado rojo, como un sistema operativo.

### ❌ No hacer

1. **No usar clichés decorativos de restaurante** — nada de caligrafías, manteles, tomates ilustrados o texturas rústicas; eso abarata la marca.
2. **No inundar de rojo** — grandes superficies rojas matan la señal y gritan en vez de indicar.
3. **No introducir gradientes blandos ni halos ambientales** — la marca es flat y precisa; la profundidad viene de superficie + sombra + foto, no de blobs.
4. **No proyectar imagen de almacén barato** — el posicionamiento es socio de servicio premium, no bodega.
5. **No mezclar fuentes ajenas al sistema** — solo Urbanist, DM Sans y el mono de datos.
6. **No dejar elementos sin rejilla** — el desorden contradice el mensaje de precisión y cero margen de error.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
@media (min-width: 640px)  { } /* sm */
@media (min-width: 768px)  { } /* md */
@media (min-width: 1024px) { } /* lg */
@media (min-width: 1280px) { } /* xl */
```

### Cambios por breakpoint

**Mobile (< 640px)** — Nav: logo + menú; grid 1 columna; cards full-width; display H1 baja a `--text-4xl`; padding `--space-4`. La app cliente está pensada mobile-first en Dark Mode (portal y app de producto data-focused).

**Tablet (640–1024px)** — grid de 2 columnas; H1 `--text-4xl`; padding `--space-6`.

**Desktop (> 1024px)** — nav completa; grid de 3 columnas para valores/estrategia; display hasta `--text-5xl`; contenedor con max-width centrado.

### Touch targets (mobile)

- Botones mínimo 44×44px · Links de nav mínimo 48px · Inputs mínimo 44px.

### Filosofía responsive

El sistema escala de micro-portadores (tarjetas de visita) a macro-objetos (rotulación de furgonetas) conservando poder visual y carácter premium en cada touchpoint. En digital, mobile-first y Dark Mode por defecto, porque la operación real ocurre en cocinas y almacenes de baja luz.

---

## 9. Guía de Prompts para Agentes

### Prompt de inicialización de sesión

```
Estás trabajando con el sistema de diseño de GastroSib.

PALETA: Brand Red #AF1917 como señal, sobre fondo Deep Black #111111, con texto Warm White #F5F1EA y Gold #B88D57 para detalles editoriales (con moderación).
TIPOGRAFÍA: Headings con Urbanist (Bold, mayúsculas para impacto); body con DM Sans; códigos/datos en Space Mono.
ESTILO: oscuro, industrial, editorial y preciso — "no parece un logo, parece un sistema operativo". Sin clichés de restaurante.
TOKENS: usa siempre las variables CSS. Nunca hardcodees colores. El rojo es señal, nunca relleno.
MODO: oscuro por defecto.
```

### Prompt: Crear nueva pantalla

```
Crea una pantalla de [FUNCIONALIDAD] para GastroSib.
- Sigue el DESIGN.md adjunto y sus tokens.
- Dark Mode, rejilla estricta, rojo solo como señal.
- Urbanist Bold para títulos, DM Sans para cuerpo, Space Mono para códigos.
- Incluye estados de loading y empty state. Responsive mobile-first.
```

### Prompt: Revisión de consistencia

```
Revisa esta interfaz y señala qué NO sigue el sistema GastroSib:
[CÓDIGO O DESCRIPCIÓN]
Para cada problema: el elemento, por qué viola el sistema (¿rojo como relleno?, ¿cliché decorativo?, ¿fuera de rejilla?), y la corrección con los tokens correctos.
```

---

## 10. Movimiento (Motion)

> La fuente es un brand board estático: no documenta motion. Lo que sigue es una escala mínima **propuesta**, coherente con la atmósfera precisa e industrial. Marcada como derivada, no observada.

El movimiento debe sentirse controlado e interface-led, nunca expresivo ni físico: transiciones cortas y mecánicas que refuercen la idea de "sistema operativo". Micro-interacciones de acento (hover de botón/card, indicadores de estado), nada de parallax ni escenas scroll-driven.

**Nivel de motion**: subtle.

**Duraciones**: 120ms (micro), 200ms (estándar), 320ms (entradas de superficie).

**Easings**: `cubic-bezier(0.4, 0, 0.2, 1)` (estándar), `ease-out` para entradas.

**Propiedades animadas en hover**: color, border-color, background, transform (translateY 1px en press).

**Patrones**: hover-lift sutil en cards, cambio de color en CTAs, fade-in escalonado de bloques al entrar en viewport.

```css
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
```

> **Accesibilidad**: respeta siempre `@media (prefers-reduced-motion: reduce)`.

---

## Anexo: Stack técnico detectado

> El board no expone tecnología de implementación (es una pieza de identidad gráfica). Inferencias de aplicación:

- **Plataforma / builder**: no especificado en la fuente.
- **Productos digitales documentados**: portal cliente web + app móvil de producto, data-focused, Dark Mode nativo.
- **Animación**: no documentada (ver Sección 10, propuesta).
- **3D / WebGL / ThreeJS**: no aplica (la fuente no usa gráficos 3D). Secciones 11 y 12 omitidas.