🎨 Design System

O projeto possui uma arquitetura de Design System própria, responsável por centralizar a identidade visual e os componentes de forma escalável através de:

• ✨ Tokens Visuais: Definições estritas de estilo para evitar valores arbitrários (magic numbers).
• 🧩 Componentes Reutilizáveis: Componentes puros baseados nas fundações do Ant Design.
• 🎨 Temas: Extensões semânticas amarradas ao Tailwind CSS e arquivos de configuração.

🎨 Tokens

Localizados em: src/styles/theme/

Cores (colors/)

• theme.colors.primary — Cor de destaque da marca (ações principais e links).
• theme.colors.secondary — Tons de suporte para hierarquia visual secundária.
• theme.colors.success — Indicador positivo (receitas, saldos positivos).
• theme.colors.error — Indicador de atenção (despesas, validações de erro).
• theme.colors.background — Base de fundo da aplicação.
• theme.colors.surface — Fundo de elementos flutuantes (cards, modais).

Espaçamento (spacing/)

• theme.spacing.xs — Ajustes mínimos e paddings internos pequenos.
• theme.spacing.sm — Distância entre elementos de um mesmo bloco.
• theme.spacing.md — Margem padrão entre blocos de conteúdo.
• theme.spacing.lg — Espaçamento entre seções estruturais.
• theme.spacing.xl — Respiro para layouts de grandes áreas.

Tipografia & Bordas (typhography/ e borderRadius/)

• theme.typography.title — Títulos de páginas e sumários.
• theme.typography.body — Textos corridos e descrições de tabelas.
• theme.typography.button — Rótulos de ações e micro-interações.
• theme.borderRadius.md — Arredondamento padrão para botões e inputs.

🧩 Componentes Disponíveis

Localizados em: src/components/ui/

• Button — Elemento de clique customizável com estados de carregamento.
• Card — Wrapper com elevação e bordas suaves para agrupar dados.
• Table — Grade estruturada para exibição reativa de transações.
• ComposedChart — Gráfico misto para cruzamento analítico de dados.
• DonutChart — Gráfico de rosca para divisão percentual de categorias.
• SidebarMenu — Painel colapsável de navegação principal.
• Topbar — Barra superior de identificação e contexto do usuário.

Exemplo de Uso:

import { Button } from '@/components/ui/Button';

export default function Example() {
  return (
    <Button onClick="{()" type="primary"> console.log('Entrar')}>
      Entrar
    </Button>
  );
}