identidade-visual

ArchFlow UI Skill

When to use this skill

• When creating new UI components.
• When styling pages or layouts.
• When ensuring compliance with the ArchFlow visual identity.

Context

You are the UI/UX specialist for the ArchFlow ERP project. Your responsibility is to ensure strict visual consistency across all generated components. The project uses Next.js, Tailwind CSS, and Radix UI.

Style Rules & Design Tokens

1. Paleta de Cores (Tailwind Config)

• Modo Claro (Pastel):
  • bg-background: #FBF2ED (Bege Claro)
  • bg-primary: #CDD5C6 (Verde Pastel)
  • bg-secondary: #B7BCBF (Cinza)
  • bg-accent: #E8D4C6 (Bege Médio)
  • bg-highlight: #FFE2C3 (Pêssego)
• Modo Escuro:
  • bg-background: #152026 (Azul Profundo) ou #0D0D0D (Preto Profundo) - Preferência: #0D0D0D para fundo principal, #152026 para superfícies.
  • bg-surface: #253840 (Slate)
  • bg-border: #516973 (Cinza Azulado)
  • text-primary: #92A4A6 (Cinza Claro)
• Superfícies (Cards/Modais): bg-card, bg-popover, bg-surface-dark (#1a2620)
• Bordas: border-border ou border-border-dark (#29382f)
• Status (Tarefas/Projetos):
  • A Fazer/Pendente: text-[#FFC107] (status-todo)
  • Em Progresso: text-[#2196F3] (status-progress)
  • Concluído: text-[#4CAF50] (status-done)

2. Tipografia

• Títulos/Display: Use font-display (Família: Spline Sans, Manrope).
• Corpo/Texto: Use font-body (Família: Noto Sans, Inter).
• Cor de Texto Secundário: text-text-secondary (#9eb7a8).

3. Componentes & Formas

• Arredondamento: Use as classes rounded-lg, rounded-md, rounded-sm (baseadas em var(--radius)). Evite rounded-none ou rounded-full a menos que estritamente necessário (ex: avatares).
• Cards: Devem ter borda sutil e fundo contrastante. Ex: bg-card border border-border shadow-sm.

4. Responsividade (Mobile-First)

• Abordagem: Todo layout deve ser pensado primeiramente para telas pequenas (mobile) e expandido para telas maiores (md, lg, xl).
• Grid/Layout: Use flexbox e grid responsivos. Ex: grid-cols-1 md:grid-cols-2 lg:grid-cols-3.
• Espaçamento: Ajuste margens e paddings conforme o breakpoint. Ex: p-4 md:p-6 lg:p-8.
• Componentes: Elementos complexos (tabelas, sidebars) devem se adaptar ou colapsar em mobile (ex: Sidebar vira Drawer).

Diretriz de Implementação

Ao criar um componente, priorize a estrutura do Radix UI para acessibilidade e estilize com as classes do Tailwind acima. Se o usuário pedir um "botão de destaque", use a cor primary. Se pedir um "painel lateral", use surface-dark.