GastroSib Brand Style Guide

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#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.
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