Listari Design Primitives

Tokens, componentes e padrões do design system — referência para implementação

Cores
--teal
#4ECDC4
--navy
#1A1A2E
--bg
#F7F7FB
--white
#FFFFFF
--border
#EEEEF5
--muted
#9999AA
--amber
#FFB800
Tipografia
Sora 700 — títulos / nomes
Feijão Preto
Sora 600 — subtítulos / labels
Hortifrúti · 3 itens
DM Sans 400 — corpo / descrições
Adicione itens ao seu carrinho
DM Sans 300 — secundário / muted
Marca · R$ 4,99
Sora 700 10px uppercase — section labels
Recentes
Border Radius
14px
item card
16px
list card
13px
cat badge · list icon
11px
botões pequenos
17px
FAB
24px t
bottom sheet
46px
phone mock
Category Badges — 42×42px / border-radius 13px
🥬
Hortifrúti
🥩
Carnes
🥛
Laticínios
🍞
Padaria
🫘
Grãos
🥤
Bebidas
🧴
Higiene
🧽
Limpeza
🍫
Doces
☕
Café
Botões
primário teal
outline navy
ghost teal bg
small outline
FAB 52×52
Cards
Item Card — radius 14px / padding 14px
🥬
Alface Americana
Hortifrúti · R$ 3,99
2x
List Card — radius 16px
S
Semana Típica
12 itens
Chips / Filtros
Todos Frutas Orgânicos Carnes Laticínios
Tags de Estado
⏳ pendente ✓ adicionado sem preço removido
Inputs
Empty State

Nada por aqui

Adicione itens ao seu carrinho para começar.

Bottom Sheet — border-radius 24px 24px 0 0
Opções do item
Alterar quantidade
Marcar como adicionado
Remover item