Design SystemConfiança primeiro
Cada elemento deve transmitir transparência, segurança e credibilidade.
Opina Design System
Uma linguagem para criar
experiências que geram confiança.
Fundamentos, componentes e padrões que tornam cada ponto de contato do Opina mais simples, consistente e humano.
01 · Fundamentos
Princípios que orientam
Decisões visuais que reforçam a clareza do produto e deixam a tecnologia mais próxima das pessoas.
Simples por natureza
Reduzimos o ruído para que a próxima ação seja sempre evidente.
Consistente, não rígido
Um sistema flexível que mantém a identidade em qualquer contexto.
Escala base · 4px
Espaçamento
Uma escala compacta cria ritmo previsível e ajuda produto e engenharia a falarem a mesma língua.
4space-1
8space-2
12space-3
16space-4
24space-6
32space-8
48space-12
64space-16
02 · Cores
Cor com propósito
O azul expressa confiança e tecnologia. Coral traz calor aos momentos de destaque e celebração.
Paleta de marca
--opina-blue-*Cores semânticas
Não use apenas cor para comunicar estado.
Sucesso
semantic#16A269Atenção
semantic#D9850BErro
semantic#DC3B45Informação
semantic#2186D903 · Tipografia
Clara, amigável, direta
Poppins equilibra formas geométricas e uma voz acolhedora, funcionando bem de grandes títulos a labels.
Aa
Poppins
Regular · Medium · Semibold · Bold
font-family: PoppinsDisplayConfiança em cada escolha.
56 / 61 · 600Heading 1A voz dos seus clientes.
40 / 48 · 600Heading 2Decisões mais inteligentes.
30 / 38 · 600Body
Experiências consistentes começam com escolhas simples e intencionais.
16 / 26 · 400LabelNOVA AVALIAÇÃO RECEBIDA
12 / 18 · 60004 · Componentes
Peças para construir
Componentes combináveis, acessíveis e com estados previsíveis para acelerar novas experiências.
Em análise PublicadoAtençãoRascunho
05 · Formulários
Entrada sem atrito
Campos amplos, labels persistentes e mensagens que ajudam a pessoa a seguir em frente.
1
Labels sempre visíveis
O contexto do campo não desaparece durante o preenchimento.
2
Foco evidente
O contorno azul oferece orientação visual e acessível.
3
Ajuda contextual
Mensagens curtas aparecem próximas de onde são necessárias.
06 · Padrões
O sistema em contexto
Exemplos reais mostram como os elementos se combinam para resolver necessidades de produto.
VISÃO GERAL
Bom dia, Mariana 👋
Avaliações recentes12 novas
Ver todas AM
Produto incrível!★★★★★
há 12 minChegou antes do prazo e a qualidade me surpreendeu.
RC
Ótima experiência★★★★★
há 38 minCompra fácil e atendimento super atencioso.