Sistema de diseño · v1

Todo lo que hagamos debe parecer de Gambooza

Documentos, artifacts y appsuna guía, una hoja de estilo

Dos ficheros públicos. DESIGN.md le dice a cualquier agente (Claude, ChatGPT, v0) cómo pensar y componer una página nuestra. gambooza.css le da los colores, fuentes y componentes. Si cambiamos algo aquí, cambia en todo lo que los use.

Guía para agentes

DESIGN.md

gambooza-design.web.app/DESIGN.md

Estilos completos

gambooza.css

…/gambooza.css · tokens + componentes

Solo variables

tokens.css

…/tokens.css · para apps con CSS propia

Cómo usarlo

Vas a hacer…	Lee	Carga
Página o visor nuevo	DESIGN.md	`gambooza.css` y las clases `.gz-*`
Página o visor que ya existe	DESIGN.md	`tokens.css` y mapea sus variables a `--gz-*`
Artifact de Claude	DESIGN.md	el `<style>` del Apéndice A (no admite CSS externa)

Si pides un documento a Claude (claude.ai)

Pega esto al principio de tu petición, o en las instrucciones de tu Proyecto para no repetirlo:

Antes de crear la página, descarga y lee entera
https://gambooza-design.web.app/DESIGN.md y síguela al pie de la letra:
usa su CSS (pegada íntegra, Apéndice A), su cabecera con logo y su criterio.

Funciona con Opus, Sonnet y Haiku. Si Claude no puede descargar la URL, sube DESIGN.md como fichero de conocimiento del Proyecto y vuelve a subirlo cuando cambie.

Si usas Claude Code o Cursor

Instala la skill una vez (siempre lee la versión publicada, no una copia):

mkdir -p ~/.claude/skills/gambooza-design && \
curl -fsSL https://gambooza-design.web.app/SKILL.md \
  -o ~/.claude/skills/gambooza-design/SKILL.md

Después, escribe /gambooza-design o simplemente pide "un informe para el cliente X": la skill se activa sola.

Si escribes HTML a mano o una app

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Fira+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://gambooza-design.web.app/gambooza.css">

Una app con su propia CSS enlaza solo tokens.css y mapea sus variables a las --gz-*. Si quiere modo oscuro, añade tokens-dark.css; los documentos van siempre en claro.

Para cambiar el sistema

Carpeta design/ del repo BeerCounter. Edita public/tokens.css o public/gambooza.css, ejecuta python build.py (regenera el Apéndice A de DESIGN.md) y firebase deploy --only hosting:design. En cinco minutos lo ven todos los documentos enlazados.

Marca

gamb00za

Gambooza en el texto; gamb00za (dos ceros) solo en el wordmark de cabecera y pie. Logo: la "g" en su círculo menta, tal cual, mínimo 24 px, uno por página.

Sector: hostelería. Fotos reales de barra y cocina o ninguna.

Color

Verde bosque sobre menta claro. El color fuerte se reserva a lo que significa algo: el rojo es descuadre, el verde es que cuadra, el ámbar es atención.

Marca y superficies

Semántico

Texto siempre en --gz-ink o --gz-ink-muted. Los *-strong solo en la cifra de un KPI, la columna de diferencia y las etiquetas.

Tipografía

Fira Sans 700 · 40 px · título de página

Fira Sans 700 · 24 px · h2

Fira Sans 600 · 19 px · h3 y entradilla (500)

1.234 € · 38 px · cifra de KPI

Archivo 400 · 16 px · cuerpo. Una cámara con inteligencia artificial cuenta cada plato y cada bebida que sale, los cruza con tu TPV y te muestra en euros lo que se sirve y no se cobra.

Archivo 400 · 14 px · tablas, botones, etiquetas.

Archivo 400 · 12,5 px · pies de dato, ejes, eyebrow.

Máximo tres tamaños por página además del cuerpo. Cifras en tabular. Sin cursiva para énfasis, sin texto justificado.

Espacio y forma

Escala base 4 (--gz-space-1…8). Radios 8 / 12 / 20 / píldora. Bordes de 1 px --gz-border. Documento 880 px, app 1200 px.

Componentes

Son los únicos que hay. Cada bloque muestra el resultado y, debajo, el marcado exacto.

Cabecera de documento

Informe semanal · barra

El grifo 3 pierde 87 € a la semana

Bar Ejemplo1–7 sep 2026generado el 8 sep

gamb00za

<header class="gz-header">
  <div>
    <p class="gz-eyebrow">Informe semanal · barra</p>
    <h1>El grifo 3 pierde 87 € a la semana</h1>
    <p class="gz-meta"><span>Bar Ejemplo</span><span>1–7 sep 2026</span><span>generado el 8 sep</span></p>
  </div>
  <a class="gz-brand" href="https://gambooza.com">
    <img src="https://gambooza-design.web.app/logo.svg" alt="Gambooza">
    <span class="gz-wordmark">gamb00za</span>
  </a>
</header>

Cifras clave

Servido y no cobrado

87€

25 cervezas · 1–7 sep

Cervezas servidas

356

cámara

Cervezas cobradas

331

TPV

Frente a la semana pasada

−12€

99 € la semana del 25 ago

<div class="gz-stats">
  <div class="gz-stat gz-stat--bad">
    <p class="gz-stat-label">Servido y no cobrado</p>
    <p class="gz-stat-value">87<small>€</small></p>
    <p class="gz-stat-delta">25 cervezas · 1–7 sep</p>
  </div>
  <div class="gz-stat">…</div>
</div>

De 2 a 4. Solo una lleva color (--bad, --good, --warn). Cada una con unidad y periodo.

Tabla

Grifo	Servidas	Cobradas	Diferencia	Estado
Grifo 3 · Lager	120	102	−18	revisar
Grifo 1 · Lager	140	136	−4	vigilar
Grifo 2 · Tostada	96	93	−3	cuadra
Total	356	331	−25

Cámara de barra frente a tickets del TPV, 1–7 sep 2026.

<div class="gz-table-wrap"><table class="gz-table">
  <thead><tr><th>Grifo</th><th class="num">Servidas</th><th class="num">Cobradas</th><th class="num">Diferencia</th></tr></thead>
  <tbody>
    <tr><td>Grifo 3 · Lager</td><td class="num">120</td><td class="num">102</td><td class="num down">−18</td></tr>
    <tr class="total"><td>Total</td><td class="num">356</td><td class="num">331</td><td class="num down">−25</td></tr>
  </tbody>
</table></div>
<p class="gz-caption">Cámara de barra frente a tickets del TPV, 1–7 sep 2026.</p>

Barras

Grifo 3 · Lager18

Grifo 1 · Lager4

Grifo 2 · Tostada3

Grifo 4 · Sin alcohol0

<div class="gz-bars">
  <div class="gz-bar gz-bar--bad" style="--v:72%"><span>Grifo 3 · Lager</span><i></i><b>18</b></div>
  <div class="gz-bar" style="--v:16%"><span>Grifo 1 · Lager</span><i></i><b>4</b></div>
</div>

Una sola escala (100 % = el máximo). Rojo solo en las que son problema. Nunca un color por categoría, nunca tarta.

Avisos y etiquetas

Qué hacer esta semanaRevisa el cierre del turno de noche del grifo 3: 14 de las 18 cervezas sin cobrar salieron entre las 23:00 y la 01:00.

CuadraEl grifo 2 lleva tres semanas con menos de 3 cervezas de diferencia.

Sin datos del juevesLa cámara estuvo apagada de 19:00 a 23:30; ese tramo no cuenta.

Cómo se calculaCámara de barra frente a tickets del TPV por grifo y turno.

cuadravigilarrevisarnuevosin dato

<div class="gz-callout gz-callout--warn"><span class="gz-callout-title">Qué hacer esta semana</span>Revisa el cierre…</div>
<span class="gz-badge gz-badge--bad">revisar</span>

Máximo dos avisos por página. Las etiquetas son para estados en tablas, no para metadatos.

Botones

Contáctanos Reserva tu demo gratuita ver vídeo

<a class="gz-btn gz-btn--arrow" href="…">Contáctanos</a>
<a class="gz-btn gz-btn--primary" href="…">Reserva tu demo gratuita</a>

El outline píldora es el botón de la web. Un solo --primary por página.

Tarjetas y hero

Tarjeta

Blanca, para datos. No para envolver cada sección.

Tarjeta suave

Superficie menta, sin sombra. Para agrupar sin destacar.

Tarjeta sólida

Verde con texto blanco. Una por página, para lo destacado.

Propuesta

Cobra todo lo que sirves

Hero de portada: radio 20, sombra media. Solo en propuestas, nunca en informes.

Ejemplo completo

Un informe semanal de descuadre generado siguiendo la guía, tal como lo recibiría un cliente: ejemplos/informe-descuadre.html. Y uno para el equipo: ejemplos/estado-semanal.html.

Lo que hace que una página no parezca nuestra

Fondo blanco plano o hero negro. Gradientes, cristal, brillos, bordes de 2 px.
Azul o violeta como acento. Inter, Roboto, Poppins como titular.
Iconos o emojis delante de cada título. KPIs centrados con icono grande.
Más de 4 cifras clave, o cifras sin unidad ni periodo. Tarta, donut, arcoíris.
Formato inglés (1,234.56), $, € pegado. Porcentaje antes que euros.
"gamb00za" dentro de una frase. Vocabulario interno en un documento para cliente.

La lista completa, con el criterio de composición y la revisión final, está en DESIGN.md.