Heinz Venezuela · Brand Guidelines
Design System
Paleta · Tipografía · Componentes · Espaciado
01
Paleta de Colores
Roles y uso recomendado
Primarios
Heritage Red
#D6001C
CTAs · Marca · Error
Deep Burgundy
#540B26
Botones primarios · Nav
Warm Cream
#FEF1DD
Fondo principal cálido
Acento
Burgundy Red
#A6192E
Hover · CTA secundario
Muted Rose
#AF3043
Acento terciario
Natural Green
#007A40
Ingredientes frescos
Burnt Orange
#D15800
Mostaza · Acento cálido
Mustard Yellow
#FFCF00
Badge Fan Favorite
Neutros & Superficies
Dark Charcoal
#1D1D1D
Texto principal
Ghost Gray
#616161
Texto secundario
Light Border Gray
#E5E7EB
Bordes · Dividers
Off-White
#F7F7F7
Fondo de cards
Cream Background
#FFF9F1
Secciones de contenido
Pure White
#FFFFFF
Botones · Superficies
Blanco sobre Rojo ✓ 4.5:1
Blanco sobre Burgundy ✓ 7.2:1
Charcoal sobre Cream ✓ 9.1:1
Cream sobre Charcoal ✓ 9.1:1
02
Tipografía
Playfair Display · Inter
Display H1
Playfair Display
700 · 96px · lh 1
Heinz
Heading H2
Playfair Display
700 · 56px · lh 1.1
El Sabor que Conquista
Heading H3
Inter
600 · 20px · lh 1.4
Ketchup Tomato Clásico — Producto Estrella
Body
Inter
400 · 16px · lh 1.6
Heinz Venezuela trae los productos de calidad más queridos del mundo, hechos para el paladar venezolano. Ketchup, salsas y condimentos que transforman cada comida en una experiencia memorable.
Link
Inter
400 · 16px · underline
Ver todos los productos →
Button
Inter
600 · 16px
Explorar Productos
Caption
Inter
400 · 12px · lh 1.5
⏱ 25 minutos · 👨‍👩‍👧 Para 4 personas · ★★★★★ Fan Favorito
03
Botones
4 variantes + estados
Primary · Default
Primary · Hover
Primary · Active
Primary · Disabled
Secondary · Default
Secondary · Hover
Secondary · Disabled
Ghost (Icon)
Circular (Icon Round)
On Dark Surface
04
Cards & Containers
border-radius: 24px · shadow-md
Más Vendido ★
🍅
Ketchup
Ketchup Tomato Clásico
El original desde 1876. Elaborado con tomates maduros seleccionados para el sabor perfecto.
🌭
Mostaza
Mostaza Amarilla Heinz
Suave y cremosa, ideal para hot dogs, hamburguesas y sándwiches venezolanos.
🥗
Mayonesa
Mayonesa Real Heinz
Cremosa y deliciosa, hecha con huevos de alta calidad. Perfecta para arepas.
Content Card — Fondo Cream
Usado para secciones de información, testimonios y contenido editorial. Fondo `#FFF9F1`, radio `24px`, borde sutil en `#E5E7EB`. Padding interno `32px 40px`.
05
Formularios e Inputs
border-radius: 0 · border: 1px #C1C1C1
Default Ingresa tu nombre como aparece en tu documento.
Focus (bordeado rojo)
Error Por favor ingresa un correo electrónico válido.
Disabled
Search Input
Border bottom 2px que vira a rojo en focus. Sin border-radius.
06
Navegación
height: 80px · background: #D6001C
Hover: `background: #A6192E · border-bottom: 2px solid #FEF1DD` | Active: `background: rgba(255,255,255,.15)` | Logo max-height: `40px`
07
Badges & Etiquetas
Semánticos · border-radius: 2px o 12px
★ Fan Favorito Nuevo Condimento ✓ Disponible ⚠ Stock Limitado Sin Stock Novedad
Featured (Fan Favorite): `#FFCF00 · border-radius: 2px` | Status chips: `border-radius: 12px`
08
Elevación & Sombras
Max opacity 0.15 · Warm toned
Level 0 · Flat
Sin sombra
Fondos estructurales
Level 1 · Raised
0 2px 4px .08
Cards sutiles
Level 2 · Elevated
0 4px 12px .08
Cards productos
Level 3 · Floating
0 8px 20px .12
Hover state
Level 4 · Modal
0 20px 40px .15
Overlays
09
Sistema de Espaciado
Base 4px · Escala x2
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
10
Border Radius
5 niveles de redondez
0px
Inputs
Nav
2px
Badges
8px
Btn Sec
Chips
16px
Cards
Mobile
24px
Cards
Containers
9999px
Pills
Btn Primary