Design system · E-commerceProjeto acadêmico
Feirô
Design system editorial para e-commerce de alimentos frescos: tipografia serifada, cores da terra e componentes de compra.
Estudo conceitual desenvolvido em contexto acadêmico. Marca, pessoas e dados são fictícios.
- Papel
- UI Design · Branding de interface
- Contexto
- Projeto acadêmico
- Ferramentas
- Figma
Visão geral
O desafio
Marketplaces de alimentos costumam parecer supermercados genéricos. A Feirô (marca fictícia) precisava transmitir procedência e cuidado artesanal sem sacrificar a eficiência de compra recorrente.
Como foi resolvido
A solução combinou uma serifa editorial (Fraunces) para contar histórias com uma sans neutra (DM Sans) para tudo que é transacional. Os componentes de compra (card de produto, seletor de quantidade, selo de origem) foram desenhados primeiro, e os fundamentos saíram deles.
O que mudou
Uma biblioteca de componentes com variantes, documentada no próprio Figma, e um protótipo de compra completo.
Processo
Conceito
Moodboard de feiras, rótulos artesanais e editoriais de gastronomia.
Componentes primeiro
Card de produto e carrinho como ponto de partida do sistema.
Biblioteca
Cores, espaços e raios organizados como estilos reutilizáveis no Figma.
Documentação
Guia de uso de cada componente, com exemplos de uso correto e incorreto.
Telas
Design system
Feirô DS
Um sistema com cheiro de feira: verde-floresta como base, terracota para ação e um creme quente no lugar do branco puro.
Origem visível
Todo produto mostra quem produziu e de onde vem.
Editorial no conteúdo, utilitário na compra
Serifa conta histórias; sans fecha pedidos.
Quente e natural
Nada de branco puro ou preto puro: só tons da terra.
Aprendizados
Começar pelos componentes de maior valor de negócio (card de produto) deu propósito a cada decisão de fundamento.
Duas famílias tipográficas só funcionam com papéis bem definidos; documentar o “quando usar” foi essencial.