GNOME (Adwaita)
Cadastro de pessoa física
Cadastro de Pessoa Física
Cadastro de Pessoa Física
Exemplos de componentes
Tipografia
Display — 36px Título 1 — 28px Título 2 — 22px Título 3 — 18px Subtítulo — 16px médio Corpo do texto — 14px regular. A raposa marrom rápida pula sobre o cão preguiçoso. Legenda — 12px
Primitivas de layout
Fundo
Superfície
Variante de superfície
ou
Feedback
Alterações salvas com sucesso.
Perfil atualizado.
Não foi possível salvar. Tente novamente.
Carregando…
Nenhum resultado encontrado
Tente ajustar seus filtros ou termos de busca.
Dados
| Nome | Função | Status |
|---|---|---|
| Maria Silva | Admin | OK |
| João Costa | Editor | Beta |
| Ana Souza | Visualizador | Revisar |
Progresso 72%
Receita 40%
1,284 Usuários ativos ↑ 12% esta semana
R$ 42k Receita ↓ 3% este mês
Navegação
Botões
Elementos de formulário
Diálogo
Aplicar este preset agora?
Contêineres
Título do card
Texto do card — informações secundárias ficam aqui.
Card interativo
Informação — algo para estar ciente.
Sucesso — ação concluída.
Atenção — revise antes de continuar.
Erro — algo deu errado.
O conteúdo da aba aparece aqui.
O que é o Koder Design?
Koder Design é o design system canônico da Koder Stack.
Como usar os presets?
Koder Design é o design system canônico da Koder Stack.
Novo Beta OK Revisar Erro
Tipografia
Display — 36px Título 1 — 28px Título 2 — 22px Título 3 — 18px Subtítulo — 16px médio Corpo do texto — 14px regular. A raposa marrom rápida pula sobre o cão preguiçoso. Legenda — 12px
Primitivas de layout
Fundo
Superfície
Variante de superfície
ou
Feedback
Alterações salvas com sucesso.
Perfil atualizado.
Não foi possível salvar. Tente novamente.
Carregando…
Nenhum resultado encontrado
Tente ajustar seus filtros ou termos de busca.
Dados
| Nome | Função | Status |
|---|---|---|
| Maria Silva | Admin | OK |
| João Costa | Editor | Beta |
| Ana Souza | Visualizador | Revisar |
Progresso 72%
Receita 40%
1,284 Usuários ativos ↑ 12% esta semana
R$ 42k Receita ↓ 3% este mês
Navegação
Botões
Elementos de formulário
Diálogo
Aplicar este preset agora?
Contêineres
Título do card
Texto do card — informações secundárias ficam aqui.
Card interativo
Informação — algo para estar ciente.
Sucesso — ação concluída.
Atenção — revise antes de continuar.
Erro — algo deu errado.
O conteúdo da aba aparece aqui.
O que é o Koder Design?
Koder Design é o design system canônico da Koder Stack.
Como usar os presets?
Koder Design é o design system canônico da Koder Stack.
Novo Beta OK Revisar Erro
Por plataforma
Criar conta
Regras principais desta plataforma
44 px de alvo de toque mínimo
Ações primárias ancoradas na parte inferior
Layout de formulário em coluna única
Criar conta ⌘ K
Regras principais desta plataforma
Densidade compacta 28–32 px
Estados de hover + foco por teclado
Layout de formulário em múltiplas colunas
Criar conta
Regras principais desta plataforma
Inputs de 36 px com semântica HTML
Grid responsivo (1 → 2 colunas)
Progressive enhancement — sem JS obrigatório
Criar conta
⬆⬇⬅➡ D-pad navigation · OK to confirm
Regras principais desta plataforma
Alvos de toque 56 px+ soberdimensionados
Anel de foco 4 px — navegação via D-pad
Sem estados hover — usar focus-visible apenas