Componentes
Cada exemplo abaixo é o componente de verdade, renderizado com os tokens do tema ativo — não uma imagem.
Átomos
As unidades indivisíveis. Nenhuma delas depende de outra.
Button
Três variantes semânticas: a hierarquia vem do peso visual, não da cor. No máximo um primary por view.
<Button label="Salvar" variant="primary" />
<Button label="Cancelar" variant="secondary" />
<Button label="Exportar" variant="accent" />IconButton
Ação sem label visível. O prop label é obrigatório e vira aria-label.
<IconButton icon={<Pencil />} label="Editar visita" />Badge
Categorização e status. O ponto carrega a cor; o label fica em texto primário.
<Badge label="Confirmada" variant="success" dot />Input, Textarea e Select
Campos de formulário. Nunca usar soltos — sempre dentro de um FormField.
<Input type="search" placeholder="Buscar..." iconLeft={<Search />} />Checkbox, Radio e Toggle
Todos com foco visível no elemento desenhado — o input real é sr-only.
<Checkbox label="Confirmar presença" checked />
<RadioGroup name="formato" options={opcoes} value={valor} />
<Toggle label="Notificar por e-mail" checked />Avatar, Spinner, Tooltip e Divider
O Spinner herda a cor do contexto — dentro de um botão ele fica visível sobre qualquer fundo.
<Avatar name="Maria Silva" />
<Spinner size="md" />
<Tooltip content="Exportar como CSV">{trigger}</Tooltip>Moléculas
Combinações de átomos com responsabilidade própria.
FormField
Garante a §5: label associado ao campo e erro ligado por aria-describedby.
<FormField label="E-mail" required error="Informe um e-mail válido.">
<Input type="email" />
</FormField>Alert
A variante é identificada pela forma do ícone, não pela cor. O título fica em texto primário.
A sala foi trocada.
A visita agora acontece no Lab 2.
Visita registrada.
Não foi possível salvar.
Verifique sua conexão e tente novamente.
<Alert variant="error" title="Não foi possível salvar" description="..." />Card, Breadcrumb e Tabs
Elevação vem de borda de 1px e espaço, nunca de sombra.
Próximas visitas
Três visitas agendadas para esta semana.
Workshop de IA, 14h, Lab 2.
<Card title="Próximas visitas" titleAs="h3">…</Card>EmptyState
Sempre com título, e com ação quando o usuário pode resolver.
Nenhuma visita agendada
Crie a primeira visita para começar a acompanhar a agenda.
<EmptyState icon={<Trash2 />} title="Nenhuma visita" action={<Button …/>} />StatBlock, TickList e AnnotatedHeading
Vocabulário de landing, tirado das peças da marca. Aqui o roxo pode ser tipografia display.
320million purchased
EUfastest growing market
- Transportation.
- Aerospace.
- Decarbonization.
São Paulo
<StatBlock value="320" label="million purchased" tone="brand" size="mega" />SearchBar
Busca com botão de limpar que só aparece quando há valor. Sem label visível, então `label` vira o aria-label.
<SearchBar value={busca} onChange={setBusca} onClear={() => setBusca('')} />DropdownMenu
Abre com foco no primeiro item, setas percorrem, Esc fecha e devolve o foco ao trigger. O item destrutivo usa o token semântico de alerta.
<DropdownMenu trigger={<IconButton … />} items={[…]} />Modal
Esc fecha, o foco circula dentro do painel e volta ao trigger, o scroll da página trava. Renderizado em portal.
<Modal open={aberto} title="Criar visita" onClose={fechar}>…</Modal>Pagination
Primeira e última página sempre visíveis, vizinhos ao redor da atual, reticências onde há salto.
<Pagination totalPages={20} currentPage={pagina} onPageChange={setPagina} />DataTable
Cabeçalho expõe aria-sort, e os checkboxes de seleção têm nome acessível gerado por rowLabel. Coluna marcada como numeric usa Chivo.
| Ações | ||||
|---|---|---|---|---|
| Maria Silva | Workshop | 24/08/2026 | ||
| João Pedro Alves | Demonstração | 25/08/2026 | ||
| Ana Beatriz Costa | Tour guiado | 26/08/2026 |
<DataTable columns={colunas} data={linhas} selectable rowLabel={r => r.visitante} />SidebarNav
A navegação deste site é este componente. O item ativo é o único lugar da UI onde o roxo aparece como bloco.
CIC
Connected Innovation Center
Gestão de visitas
<SidebarNav appTitle="Gestão de visitas" items={itens} activeId="visitas" />