Vende247 · Demo de pedidos

Design System

Colores, tipografía, botones, tarjetas, formularios, radios, sombras, espaciado y movimiento del demo de pedidos por WhatsApp. Referencia visual: Food Delivery App UI (Dribbble). Todo se define con tokens para cambiar de marca en minutos.

01 · Color

Paleta de color

Ocho colores tomados de la referencia. Cuatro están enlazados a los colores globales de Elementor (Principal, Secundario, Texto y Énfasis); el resto son colores personalizados globales.

Fondo crema#FAFAF9Fondo de páginas y superficies claras
Tinta#120D05Texto principal y títulos
Ámbar#F59B17Acción principal, botones y precios
Marrón profundo#573C0FTexto secundario y subtítulos
Rojo ladrillo#C13B0EPromos, enlaces y acción secundaria
Arena#D6BCA4Bordes, divisores y campos
Verde#199B26Éxito, “abierto” y pedido confirmado
Dorado#DDAC51Calificación (estrellas) y detalles
02 · Tipografía

Tipografía: Inter

Una sola familia, Inter (Google Fonts), con peso para marcar la jerarquía: 800 en títulos, 700 en botones, 600 en subtítulos y 400 en texto. La referencia no indica la fuente; Inter es la más cercana a su estilo.

H1
Hamburguesa doble
3 / 2,5 / 2 rem · 800
H2
Combos para compartir
2,25 / 1,875 / 1,625 rem · 800
H3
Populares de la semana
1,75 / 1,5 / 1,375 rem · 700
H4
Pizza napolitana
1,375 rem · 700
H5
Tiempo de entrega 30 min
1,125 rem · 600
H6
Incluye bebida
1 rem · 600
Texto
Pide en segundos y recibe en la puerta de tu casa. Sin filas, sin esperas.
1 rem · 400 · interlineado 1,6
Texto pequeño
Precios en pesos colombianos. Imágenes de referencia.
0,875 rem · 400
Etiqueta
Más vendido
0,75 rem · 600 · mayúsculas
Precio
$ 18.900
1,5 rem · 800
Botón
Agregar al pedido
1 rem · 700
03 · Botones y controles

Botones

Altura mínima de 44 px y radio de 14 px. El texto sobre ámbar y verde es tinta; sobre rojo ladrillo y marrón es crema (contraste AA). Todos tienen estados hover, foco visible y pulsado.

TodoHamburguesasPizzasBebidas-50%Abierto★ 4.9
04 · Componentes

Tarjetas y formularios

Tarjeta de producto con foto en proporción fija (el cliente trae sus fotos), nombre, calificación, precio y botón de agregar. Campos de formulario con borde arena y foco ámbar.

-50%
★ 4.9Hamburguesa clásicaCarne, queso y salsa de la casa · 25 min
$ 18.900
05 · Tokens

Radios, sombras, espaciado y movimiento

Radios

--radius-sm8px · Etiquetas, controles pequeños
--radius-md14px · Botones y campos
--radius-lg20px · Paneles y contenedores
--radius-xl28px · Tarjetas de producto
--radius-pill999px · Chips, badges, botón +

Sombras

--shadow-smReposo
--shadow-mdTarjetas
--shadow-lgHover, menús, modales

Espaciado (escala de 4 px)

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px

Movimiento

Solo se animan transform y opacity. Los microefectos duran entre 150 y 250 ms; las apariciones entre 500 y 900 ms. Con prefers-reduced-motion se desactivan.

--duration-fast150msHover y pulsado
--duration-base250msTarjetas y menús
--duration-slow500msTransiciones de pantalla
--duration-reveal700msAparición al hacer scroll
--ease-outcubic-bezier(.22,1,.36,1)Entradas y hover
--ease-in-outcubic-bezier(.65,0,.35,1)Cambios de estado

Puntos de ruptura

Móvilhasta 767 px · diseño principal (390 px)
Tablet768 – 1024 px
Escritoriodesde 1025 px · contenedor de 1200 px

Contraste y accesibilidad

Tinta sobre crema#120D05 / #FAFAF918,5:1AA y AAA
Tinta sobre ámbar#120D05 / #F59B178,8:1AA y AAA
Crema sobre rojo ladrillo#FAFAF9 / #C13B0E5,2:1AA
Crema sobre marrón#FAFAF9 / #573C0F9,8:1AA y AAA
Tinta sobre verde#120D05 / #199B265,3:1AA
Tinta sobre dorado#120D05 / #DDAC519,3:1AA y AAA
Crema sobre verde#FAFAF9 / #199B263,5:1No usar en texto normal
Objetivos táctiles de al menos 44 px · foco visible en todo elemento interactivo · textos mínimos de 12 px · un solo h1 por página.