GastroSib Brand Style Guide
← Color Fonts

GastroSib System

Identidad B2B premium para abastecimiento HoReCa: oscura, industrial y editorial. La logística gastronómica tratada como un sistema operativo de precisión, donde el rojo es señal, no decoración.

FUENTE: GastroSib-Brand-Identity-DESIGN.md

Typography

2 familias + mono
Heading system
Urbanist
Bold 800 · 34px · uppercase · ls -0.02em · impacto y voz de marca
Body system
DM Sans
Regular 400 / Medium 500 · specimen 40px · 16px/1.6 body · comunicación técnica
Clean, highly readable, neutral. Designed for detailed technical communication across the HoReCa supply chain.
Fonts: Urbanist (headings) + DM Sans (body), ambas nativas de Google Fonts, sin sustitución. Space Mono para códigos de datos (SKU, lotes, etiquetas logísticas).
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 0%

Colors

4 base · dark
Brand Red#AF1917
Gold Accent#B88D57
Deep Black#111111
Warm White#F5F1EA

Background Deep Black #111111 · Surface #1A1A1A · Text Warm White #F5F1EA · Border #2A2A2A · Accent/Signal Brand Red #AF1917 · Editorial Gold #B88D57

Overview

Editorial / dark
LayoutEditorial, spacious, rejilla estricta
Content width1280px máx, centrado
FramingFilete rojo + label en mayúsculas
Grid12 col · gutter 24px · 3 cols valores

Buttons

3 styles
Primary → Secondary Link ↗
Primary#AF1917 · #F5F1EA · 6px
Secondaryoutline #2A2A2A · 6px

Components

Live recipe
01 · Precision
Premium service
Mathematical accuracy in logistics and product selection. Every delivery is treated as a personalized order, demanding the highest level of attention. Zero room for error.
Signal Editorial GS-90221

Spacing

base 8px
Brand story
Title block
La copy de descripción refleja la medida de línea, el offset del filete rojo y el espaciado del CTA en una rejilla estricta.
CTA →
Scale
481216244896
Gap · Card padding
gap 24pxcard 24pxsection 96px

Elevation & Depth

Dark / matte

Profundidad sobria: superficies casi-negras (#1A1A1A) sobre el fondo (#111111), separadas por un hairline (#2A2A2A) y una sombra profunda y suave. En físico, rojo foil emboss sobre stock graphite mate 400gsm.

TécnicaSurface + hairline border + deep soft shadow; drama vía fotografía de producto, no gradientes.
Surface#1A1A1A
Border1px #2A2A2A
Shadow0 18px 40px -16px rgba(0,0,0,.55)
PrintRed foil · matte graphite 400gsm

Shapes

Radius family

Radios contenidos (6–12px): modernos pero precisos. La única forma plenamente circular es la marca, un botón de encendido con chispa en diamante que ancla la geometría del sistema.

6px · sm12px · md16px · lg9999px · mark
Primary radius6px botones · 12px cards
Icon · treatmentGeométrico, line/solid, rojo señal

Do's and Don'ts

Guardrails

Do

Usar el rojo como señal: símbolo, números de paso, códigos de lote, un CTA.
Mantener el negro profundo como base; Dark Mode funcional para baja luz.
Componer sobre rejillas estrictas, precisión nivel Michelin.
Reservar el oro para detalles editoriales, con moderación.
Tratar los datos como tipografía: SKU y lotes en mono rojo.

Don't

Clichés decorativos de restaurante: caligrafías, manteles, texturas rústicas.
Inundar de rojo; grandes superficies rojas matan la señal.
Gradientes blandos, halos o blobs ambientales.
Proyectar imagen de almacén barato; el tono es socio premium.
Mezclar fuentes ajenas o dejar elementos sin rejilla.

Motion

Subtle · derivado

La fuente es un board estático: motion no observado. Escala mínima propuesta, controlada e interface-led, como un sistema operativo. Micro-interacciones de acento, sin parallax ni escenas scroll-driven.

Motion levelSubtle
Durations120 · 200 · 320ms
Easingcubic-bezier(.4,0,.2,1)
Hovercolor, border, lift 1px
Generado desde DESIGN.md · design-md-styleguide · GastroSib
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #AF1917;
  --color-secondary: #B88D57;
  --color-accent: #AF1917;
  --color-neutral: #F5F1EA;
  --color-background: #111111;
  --color-surface: #1A1A1A;
  --color-text-primary: #F5F1EA;
  --color-text-secondary: #A8A29A;
  --color-border: #2A2A2A;
  --font-display: "Urbanist";
  --font-body: "Urbanist";
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 9999px;
  --space-base: 8px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;
  --space-gap: 24px;
  --space-section-padding: 96px;
}
@theme {
  --color-primary: #AF1917;
  --color-secondary: #B88D57;
  --color-accent: #AF1917;
  --color-neutral: #F5F1EA;
  --color-background: #111111;
  --color-surface: #1A1A1A;
  --color-text-primary: #F5F1EA;
  --color-text-secondary: #A8A29A;
  --color-border: #2A2A2A;
  --font-display: "Urbanist";
  --font-body: "Urbanist";
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 9999px;
  --spacing-base: 8px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 48px;
  --spacing-gap: 24px;
  --spacing-section-padding: 96px;
}
{
  "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"
  }
}
---
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.