AKME Design System

Componentes

Botões

Componentes de botão com variantes de cor e tamanho

Variantes

Tamanhos

Com Ícones

Botões de Ícone

Estado Desabilitado

Cards

Contêineres de conteúdo com header e footer opcionais

Card Simples

Este é um card básico com conteúdo simples. Perfeito para informações gerais.

Card com Header

Descrição do card

Conteúdo principal do card com header separado.

Card com Footer

Card com ações no rodapé.

Card Completo

Com header, conteúdo e footer

Este card demonstra todas as partes: header, conteúdo e footer.

Badges

Indicadores pequenos para status, categorias ou contadores

Variantes

Default Primary Success Warning Danger

Exemplos de Uso

Status: Online Offline
Categorias: Frontend Backend DevOps
Notificações:

Alerts

Mensagens de feedback para o usuário

Informação
Base de dados de navegação atualizada. Versão 2026-02 válida até 13-MAR-2026.
Sistema OK
Todos os sistemas operando normalmente. Última verificação: 13:45 UTC.
Atenção
Configuração do transponder precisa ser revisada antes do próximo voo.
Crítico
Falha na conexão com servidor de dados meteorológicos. Verificar conectividade.

Utilitários

Classes auxiliares para efeitos especiais

Gradientes de Texto

Primary Gradient

Accent Gradient

akme-text-gradient-primary
akme-text-gradient-accent

Grid Background

Background com efeito de grid e gradientes sutis.

akme-grid-bg

Container

Layout container centralizado com max-width

Todo o conteúdo desta página está dentro de um akme-container

Max-width: 1280px | Padding horizontal: 24px (1.5rem)