UX Design / Design Gráfico · 2026
Tá Combinado
COMBI—NADOCamisetas
Contexto do projeto
Concepção e arquitetura de um Design System: fundações, tokens, biblioteca de componentes e aplicação consistente em produto digital.
Projeto em grupo · Gabriela Lisbôa, Felipe Braga, Paula Cicuto e Vanessa Cardoso · Especialização em Design Gráfico, UNICAMP
Estudo de caso
Desenvolvido em grupo na disciplina Projeto de Design Editorial Digital I, na especialização em Design Gráfico da UNICAMP. O entregável principal foi o Design System para Tá Combinado, marca conceitual de camisetas personalizáveis.
Como transformar uma identidade expressiva em uma arquitetura de decisões reutilizáveis, capaz de orientar diferentes interfaces sem perder consistência visual e funcional?
Partimos da identidade para definir fundações, tokens primitivos e semânticos, escala tipográfica, espaçamento e raios. Organizamos padrões de interface e a anatomia dos componentes, depois estudamos fluxos e wireframes para validar o sistema em contexto.
Um Design System acadêmico documentado por fundações, variáveis, componentes e uma aplicação demonstrativa em e-commerce. A loja exemplifica a modularidade do sistema; não é o entregável principal nem um produto lançado.
Design System
Uma linguagem visual traduzida em regras reutilizáveis: fundações → tokens semânticos → componentes → aplicação.
01 / Cores & variáveis
Selecione uma cor para ver seu papelPrimitivo → semântico
Índigo
cor/indigo → Destaque · marca 1
Primitivos registram valores absolutos; tokens semânticos descrevem o uso — destaque, texto, fundo e superfície — para que os componentes não dependam de uma cor fixa.
02 / Tipografia
Ta Combinado
Gobold Extra2
Uma ideia, muitas combinações.
Brandon Grotesque
Escala primitiva: 14–64 px. Os papéis semânticos distinguem títulos, corpo, legendas e controles. Amostras digitais exibidas com fontes substitutas quando as famílias originais não estão disponíveis.
03 / Espaçamento & raio
Escala de espaçamento · 5 a 60 px
04 / Biblioteca de componentes
Anatomia dos padrões de interface: cada peça combina tokens de cor, texto, espaçamento e raio. Abaixo, representações de uso no contexto da marca.
Cor de destaque · texto · raio · estado
Hierarquia · borda · espaçamento
COMBI
—NADO
Imagem · informação · ação
Identidade de origem
A marca Tá Combinado fornece a linguagem de partida do sistema: expressiva e mutável, pensada para camisetas quase básicas que podem ser combinadas de muitos jeitos.
COMBI
—NADOCamisetas
COMBINA.Um sistema para criar do seu jeito.
Fundações visuais
As decisões de cor e tipografia documentadas pela equipe formam a base do sistema. Os valores primitivos são traduzidos em papéis semânticos para preservar consistência em diferentes contextos.
Primitivos → semânticos → interface
Cc DdGobold Extra2 / Brandon Grotesque
Arquitetura e aplicação
Os estudos de página inicial e carrinho serviram para verificar como tokens e padrões se combinam. A interface de camisetas é uma prova de aplicação do Design System, não o produto central do trabalho.
Explore o protótipo
Protótipo acadêmico demonstrativo. Nenhum pedido ou pagamento é realizado.
Ficha técnica
- Projeto
- Design System · Tá Combinado
- Instituição
- UNICAMP · Especialização em Design Gráfico
- Disciplina
- Projeto de Design Editorial Digital I
- Equipe
- Gabriela Lisbôa · Felipe Braga · Paula Cicuto · Vanessa Cardoso