Heinz Venezuela — Design System

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

HEINZ

Inicio

Productos

Nuestra Historia

Recetas

Contacto

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