Pessoas primeiro.
Facilite encontrar a equipe e suas responsabilidades.
Revisão da seçãoAguardando revisão2 atendidos · 0 a ajustar · 1 a revisar
O que já existe, o que precisa melhorar e o que ainda merece uma avaliação. Cada estado se refere apenas ao critério abaixo; não é aprovação da seção inteira.
- Atende ao critérioÍcones têm uma fonte consistente e arquivos reutilizáveis.
52 desenhos SVG originais compartilham os caminhos com DsIcon, prévias com busca e exportações JSON.
Ver biblioteca de ícones ↗ - Atende ao critérioTamanho, cor e nomes acessíveis estão documentados.
A página demonstra escala, três fundos, controles rotulados e semântica de SVG decorativo.
Ver exemplos ↗ - Aguardando revisãoNovos símbolos são compreendidos em contextos reais de produto.
Desenhos piloto precisam de validação contextual antes de virar convenções aprovadas de produto.
BUILD / ÍCONES
Pequenos sinais. Significado claro.
Uma linguagem comum para ações, serviços, pessoas e sistemas. Explore 52 ícones de traço originais, teste a escala e leve o mesmo SVG para uma composição ou interface funcional.
Trabalho conectado.
Explique como etapas e serviços se relacionam.
Progresso à vista.
Aponte resultados com palavras e dados de apoio.
Use um símbolo significativo para apoiar a mensagem. Os exemplos combinam a mesma biblioteca com fundos e tipografia da 6am.
Encontre o sinal certo.
Grade 24 × 24 · traço 1.7 · pontas quadradas
52 ícones encontrados
Um desenho. Diferentes distâncias.
Use 16–24 px junto a textos e controles e 32–48 px em conteúdo explicativo. O traço escala com o SVG. Mantenha o viewBox e as proporções originais.
16 px
20 px
24 px
32 px
48 px
Consistência na forma. Utilidade no contexto.
01Desenhe na grade de 24 px com traço de 1.7 unidades, pontas quadradas e junções em ângulo. Deixe espaço dentro do quadro e preserve a geometria original.
02Use uma única cor sólida herdada do texto. Ink sobre branco ou lime; branco sobre ink. Evite gradientes, sombras e partes de várias cores.
03Use símbolos conhecidos para ações conhecidas. Combine com rótulos visíveis quando houver dúvida; não use o robô para representar todo recurso de IA.
04Ícones decorativos ficam ocultos para leitores de tela. Um botão só com ícone precisa de nome acessível no botão e área acionável, de pelo menos 44 × 44 px nos exemplos desta biblioteca.
05Use palavras junto a ícones de estado. Só a cor e um sinal de confirmação não explicam uma ação concluída ou um erro.
06Ícones utilitários pertencem às interfaces e ao conteúdo de apoio. O ícone de marca e o logo da 6am mantêm suas regras de identidade e arquivos originais.
Use a mesma fonte na interface.
DsIcon é decorativo por padrão. Coloque o nome da ação no botão que o contém; um SVG com significado isolado precisa de alternativa textual acessível. SVG inline herda currentColor; um SVG externo carregado com img não herda a cor do texto da página. Use o código inline quando o ícone precisar acompanhar a cor do contexto.
<button type="button" aria-label="Buscar catálogo" onClick={openSearch}>
<DsIcon name="search" />
</button>
import { DsIcon } from "@/components/design-system/Primitives";
<DsIcon name="workflow" width={24} height={24} />Pronto para pessoas e IA.
Cada desenho tem uma URL SVG estável. O JSON inclui nomes, categorias, geometria, código e caminhos dos arquivos. Copie o guia para manter a implementação consistente.
Biblioteca piloto. Revise novos símbolos no contexto antes de ampliar o conjunto.