O Arquiteto de Sistemas de Design

Você é um Designer Principal na Apple, responsável pelas Diretrizes de Interface Humana. Crie um sistema de design abrangente para [NOME DA MARCA/PRODUTO]. Atributos da marca: Personalidade: [MINIMALISTA/ARROJADO/DIVERTIDO/PROFISSIONAL/LUXO] Emoção primária: [CONFIANÇA/EXCITAÇÃO/CALMA/URGÊNCIA] Público-alvo: [DADOS DEMOGRÁFICOS] Entregáveis seguindo os princípios HIG da Apple: 1. FUNDAÇÕES Sistema de Cores: Paleta primária (6 cores com HEX, RGB, HSL, classificações de acessibilidade) Cores semânticas (sucesso, aviso, erro, informação) Equivalentes de modo escuro com taxas de contraste Regras de uso de cores (o que cada cor significa e quando usá-la) Tipografia: Tipo de letra principal com 9 pesos (Display, Headline, Title, Body, Callout, Subheadline, Footnote, Caption) Escala tipográfica com tamanhos exatos, alturas de linha e espaçamento de letras para desktop/tablet/mobile Estratégia de combinação de fontes Acessibilidade: tamanhos mínimos para legibilidade Grade de Layout: Grade responsiva de 12 colunas (desktop: 1440px, tablet: 768px, mobile: 375px) Especificações de medianiz e margem Definições de breakpoints Áreas seguras para dispositivos com notch Sistema de Espaçamento: Escala baseada em 8px (4, 8, 12, 16, 24, 32, 48, 64, 96, 128) Diretrizes de uso para cada valor de espaçamento 2. COMPONENTES (Projete 30+ componentes com variantes) Navegação: Cabeçalho, Barra de Abas, Barra Lateral, Trilha de Navegação Entrada: Botões (6 variantes), Campos de Texto, Menus Suspensos, Interruptores, Caixas de Seleção, Botões de Opção, Controles Deslizantes Feedback: Alertas, Notificações, Modais, Indicadores de Progresso, Telas de Esqueleto Exibição de Dados: Cartões, Tabelas, Listas, Estatísticas, Gráficos Mídia: Contêineres de Imagem, Players de Vídeo, Avatares Para cada componente: Anatomia (partes e nomes) Todos os estados (padrão, hover, ativo, desabilitado, carregando, erro) Diretrizes de uso (quando usar, quando NÃO usar) Requisitos de acessibilidade (rótulos ARIA, navegação por teclado, estados de foco) Especificações prontas para desenvolvedores (padding, margens, raio de borda, sombras) 3. PADRÕES Modelos de página: Página de Destino, Painel, Configurações, Perfil, Checkout Fluxos de usuário: Onboarding, Autenticação, Pesquisa, Filtragem, Estados Vazios Padrões de feedback: Sucesso, Erro, Carregando, Vazio 4. TOKENS Estrutura completa de tokens de design em formato JSON para entrega ao desenvolvedor 5. DOCUMENTAÇÃO Princípios de design (3 princípios-chave com exemplos) Faça e Não Faça (10 exemplos com descrições visuais) Guia de implementação para desenvolvedores Formate tudo como documentação de sistema de design pronta para publicação imediata.