Pular para conteúdo
6amDesign
v0.7.0 · PilotoUsar com IA
6am/Design system/Componentes
Revisão da seçãoPrecisa de ajustes1 atendidos · 1 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.

Inventário de implementação · 2026-09-08 · v0.7.0 · Aprovação da marca não registrada

  • Atende ao critério
    Controles básicos compartilham implementação reutilizável.

    Botões, links, cards de ação, campos e ícones estão disponíveis no catálogo.

    Ver material relacionado ↗
  • Precisa de ajustes
    Navegação e estados de interação são cobertos por componentes compartilhados.

    Inventariar padrões legados e adicionar navegação, diálogos e estados de carregamento ausentes.

  • Aguardando revisão
    Componentes funcionam com teclado, zoom e tecnologia assistiva.

    Completar revisão de acessibilidade de cada variante prevista e registrar resultados.

Ver todas as revisões · JSON ↗

Registro de consulta. Atualizações são versionadas com o design system; copiar um briefing não altera estados.

05 / Componentes

Peças que já sabem trabalhar juntas.

Estes exemplos usam os componentes reais do catálogo. O primeiro conjunto inclui ações, links, campos e ícones de interface.

Botões e ações

Interativo

Demonstração interativa. Os botões não enviam solicitações.

import { DsButton, DsLink } from "@/components/design-system/Primitives";

<DsButton onClick={handleRequest}>Solicitar proposta</DsButton>
<DsLink href="/destino" variant="secondary">Ver detalhes</DsLink>

Um destino claro em cada link

Use botão para executar uma ação e link para navegar. Se o card inteiro for clicável, ele deve ter um único destino e uma indicação visível. Links para destinos diferentes precisam ser separados.

Identidade

Usar a marca

Ver logos Interação

Conversar com clareza

Testar formulário 
<DsActionCard
  href="/destino"
  eyebrow="Categoria"
  title="Um próximo passo claro"
  description="Explique o que a pessoa vai encontrar."
  label="Explorar exemplos"
/>

Padrão usado na página do serviço Design System: um link por card, título, descrição opcional e ação visível. O hover e o foco preenchem o card com lime; não coloque botões ou outros links dentro dele.

Uma biblioteca comum de ícones

Explore 52 desenhos, regras de uso e arquivos SVG reutilizáveis em Build → Ícones.

Explorar ícones