Design System
Sistema de design da Ana Autentic. Tokens de cor, tipografia, sombras, espaçamentos e componentes reutilizáveis construídos com React, Tailwind CSS v4 e shadcn/ui.
Foundation
Tokens base que formam a identidade visual de todos os apps.
Colors
Paleta de cores da marca, cores semânticas, superfícies e bordas.
Typography
Escala tipográfica, pesos, line-heights e padrões de texto.
Shadows & Elevation
Tokens de sombra para diferentes níveis de elevação na interface.
Spacing & Radius
Sistema de espaçamento (4px base) e escala de border-radius.
Icons
Padrão de ícones com Hugeicons, tamanhos e exemplos de uso.
Components
35 componentes do @workspace/ui com exemplos interativos. Use o toggle de tema na sidebar para alternar entre light e dark.
Patterns
Padrões de interface compostos usados nos portais SYSGO.
Page Layout
Layout padrão com Sidebar + Header + Content
Sidebar
Navegação lateral colapsável dos portais
Header
Barra superior com breadcrumb e ações
Data Table
Tabela com busca, filtros e paginação
Product Details
Página de detalhes do produto com galeria e variantes
Checkout
Fluxo multi-step com stepper, pagamento e sidebar
Identidade da Marca
Personalidade
- Feminina e elegante
- Profissional e acolhedora
- Moderna e atemporal
- Empoderadora
Público-alvo
- Mulheres empreendedoras 25-55 anos
- Consultoras de beleza
- Equipe admin/financeiro
- Clientes finais (e-commerce)