ArenitoDesign System do GALES

Componentes CSS e JS para interfaces consistentes e acessiveis

Componentes

Fundamentos

🎨

68 Componentes

De inputs basicos a modais, drawers, steppers e tabelas — tudo pronto para usar.

🌑

Dark Mode

100% dos componentes com suporte a tema escuro via classe .dark no body.

♿

Acessibilidade

WCAG 2.1 AA — contraste, keyboard navigation, ARIA, focus visible.

📱

Responsivo

Grid de 12 colunas com 6 breakpoints, todos os componentes adaptam-se a mobile.

Inicio Rapido

html

<!-- 1. Fontes -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">

<!-- 2. Design System -->
<link rel="stylesheet" href="design-system.css">
<script src="design-system.js"></script>

Estrutura

Camada	Descricao	Arquivos
Tokens	Cores, variaveis, espacamentos	`colors.css`, `variables.css`
Foundation	Tipografia, grid, utilitarios	`typography.css`, `grid.css`, `utilities.css`
Componentes	68 componentes visuais e interativos	`components/.css`, `components/.js`
Extensoes	Componentes especificos SIDASP	`extensions/*.css`