Tokens de design

Amostra

Cores semânticas

• --color-brand-primary
• --color-brand-secondary
• --color-brand-accent
• --color-action-primary
• --color-action-primary-hover
• --color-action-primary-soft
• --color-background
• --color-surface
• --color-surface-elevated
• --color-text-primary
• --color-text-secondary
• --color-text-muted
• --color-border
• --color-divider
• --color-success
• --color-warning
• --color-danger
• --color-info

Tipografia (Inter)

• Cerveja geladaDisplay XL · 32/38 · 700
• Ofertas do diaDisplay · 28/34 · 700
• CategoriasHeading 1 · 24/30 · 700
• Mais pedidosHeading 2 · 20/26 · 700
• Combo churrascoHeading 3 · 17/22 · 700
• Descrição do produtoBody Large · 16/24 · 400
• Entrega em 40–60 minBody · 14/20 · 400
• Pedido mínimo R$ 30,00Body Small · 13/18 · 400
• OFERTACaption · 11/16 · 500
• R$ 129,90Price Large · 24/28 · 800
• R$ 8,49Price · 18/22 · 800

Espaçamento (base 4px)

• --space-1 · 4px
• --space-2 · 8px
• --space-3 · 12px
• --space-4 · 16px
• --space-5 · 20px
• --space-6 · 24px
• --space-8 · 32px
• --space-10 · 40px
• --space-12 · 48px
• --space-16 · 64px
• --space-20 · 80px

Raios

• xs
• sm
• md
• lg
• xl
• pill
• card (loja)

Sombras

• sm
• md
• floating