Skip to content

🎨 Styling - Frontend FinBoost+

📋 Visão Geral

O sistema de estilização do FinBoost+ é baseado em TailwindCSS combinado com CSS Custom Properties (variáveis CSS) para criar um design system consistente, responsivo e com suporte a temas claro e escuro. A abordagem utilizada permite flexibilidade máxima mantendo consistência visual em toda a aplicação.

🎯 Filosofia de Design

Princípios Fundamentais

  • Utility-First: Classes utilitárias do TailwindCSS para estilização rápida
  • Design System: Tokens consistentes para cores, tipografia e espaçamentos
  • Mobile-First: Abordagem responsiva priorizando dispositivos móveis
  • Acessibilidade: Contraste adequado e suporte a leitores de tela
  • Tema Dinâmico: Alternância suave entre modo claro e escuro

Metodologia

  • Component-Based: Estilos organizados por componentes
  • CSS Variables: Tokens de design flexíveis e reutilizáveis
  • Semantic Naming: Nomenclatura semântica para cores e espaçamentos
  • Progressive Enhancement: Melhorias visuais para navegadores modernos

🌈 Sistema de Cores

Paleta Principal

Modo Claro (Light Theme)

:root {
  --color-primary: #0152ac;    /* Azul profundo - confiança, estabilidade */
  --color-secondary: #00a6ed;  /* Azul claro vibrante - destaque, botões */
  --color-success: #18af7d;    /* Verde médio - sucesso, entradas financeiras */
  --color-error: #e74c3c;      /* Vermelho forte - erros, saídas financeiras */
  --color-neutral: #f5f7fa;    /* Cinza muito claro - fundo geral */
  --color-surface: #ffffff;    /* Fundo de cartões/modais */
  --color-text: #1f2d3d;       /* Azul acinzentado escuro - texto principal */
  --color-muted: #95a5a6;      /* Cinza azulado - texto secundário */
}

Modo Escuro (Dark Theme)

.dark {
  --color-primary: #4a90e2;    /* Azul médio - ainda confiável e suave */
  --color-secondary: #5bc0f8;  /* Azul claro vibrante - destaque */
  --color-success: #2fd8a3;    /* Verde claro - entradas */
  --color-error: #ff7a6b;      /* Vermelho suave - saídas */
  --color-neutral: #2e3239;    /* Cinza grafite - fundo geral */
  --color-surface: #3a3f47;    /* Cinza médio - cartões/inputs */
  --color-text: #e3e8ee;       /* Branco suave - textos */
  --color-muted: #a0a9b8;      /* Cinza azulado claro - texto secundário */
}

Psicologia das Cores Aplicada

Cor Significado Uso no FinBoost+
Azul Primário Confiança, estabilidade, profissionalismo Botões principais, logos, links importantes
Azul Secundário Modernidade, tecnologia, dinamismo Botões secundários, destaques, hover states
Verde Sucesso, crescimento, dinheiro positivo Valores positivos, ganhos, confirmações
Vermelho Atenção, urgência, dinheiro negativo Gastos, erros, alertas importantes
Neutro Calma, equilíbrio, profissionalismo Backgrounds, divisores, elementos neutros
Surface Limpeza, organização, clareza Cards, modais, áreas de conteúdo

📋 Boas Práticas

Performance

  • PurgeCSS: TailwindCSS remove classes não utilizadas automaticamente
  • CSS Variables: Mudanças de tema sem re-render completo
  • Minimal Custom CSS: Máximo uso das classes utilitárias do Tailwind

Manutenibilidade

  • Design Tokens: Todas as cores e espaçamentos centralizados
  • Naming Conventions: Nomenclatura semântica e consistente
  • Component Classes: Agrupamento de classes em componentes reutilizáveis

Acessibilidade

  • Contraste Adequado: WCAG 2.1 AA compliance
  • Focus States: Estados de foco visíveis em todos os elementos interativos
  • Screen Reader: Classes sr-only para conteúdo de leitores de tela

Responsividade

  • Mobile-First: Desenvolvimento priorizando dispositivos móveis
  • Flexible Grid: Uso de CSS Grid e Flexbox para layouts adaptativos
  • Fluid Typography: Tamanhos de texto que escalam suavemente

🎯 O sistema de styling do FinBoost+ garante uma experiência visual consistente, acessível e profissional em todos os dispositivos, mantendo a flexibilidade necessária para futuras expansões e personalizações.