161 paletas e 57 pares de fontes: navegando o banco de dados
por Fabricio Telles··design.app.br
Chega de escolher cores no escuro
Escolher cores e fontes é onde a maioria dos devs trava. Não por falta de opções — por excesso. Google Fonts tem 1.600+ famílias. Coolors gera paletas infinitas. Mas quantidade não é qualidade, e sem critério, a escolha vira loteria. O UI/UX Pro Max transforma essa loteria em decisão informada.
Como o UI/UX Pro Max organiza
As 161 paletas são categorizadas por mood/emoção (calmo, energético, profissional, lúdico, luxuoso, técnico, orgânico, ousado), por tipo de produto (SaaS, e-commerce, educação, saúde, fintech, social, entretenimento, produtividade), e por acessibilidade (cada paleta indica conformidade com WCAG AA ou AAA, com relações de contraste pré-calculadas).
Uma paleta para “fintech premium” não é só 5 cores bonitas. Inclui cor primária com justificativa (por que esse tom de azul transmite confiança), cor de sucesso/erro/warning calibrada, neutros com tint consistente, notas sobre dark mode compatibility, e anti-patterns (cores a evitar nesse contexto).
Os 57 pares de fontes incluem classificação por mood (elegante, moderno, técnico, amigável, editorial, corporativo, criativo), uso recomendado (heading + body, UI + code, display + reading), e métricas técnicas (disponibilidade no Google Fonts, performance de carregamento, suporte a caracteres especiais, legibilidade em tamanhos pequenos).
Exemplo: o par “Cormorant Garamond / Montserrat” é classificado como elegante, calmo, sofisticado. Melhor para marcas de luxo, wellness, beleza, editorial. Link direto do Google Fonts incluído.
Navegação inteligente
Você não precisa navegar manualmente pelas 161 paletas. A skill usa o contexto do seu projeto para filtrar: você descreve o projeto, a skill identifica o tipo de produto, filtra paletas compatíveis com o mood, ranqueia por adequação, e apresenta as top 3-5 opções com justificativa. O mesmo processo acontece para fontes.
Guidelines de UX (99)
Além de cores e fontes, o banco inclui 99 guidelines de UX organizadas por categoria: navegação, formulários, feedback e estados, onboarding, acessibilidade, mobile-specific, performance percebida, microinterações.
Cada guideline é acionável. Não é “use bom contraste” mas sim “para texto body sobre fundo claro, use no mínimo ratio 4.5:1 e prefira neutros com tint da cor primária”.
Tipos de gráficos (25)
Para dashboards e data visualization: quando usar bar vs line vs area, paletas de cores para dados (não decorativas), acessibilidade em gráficos (não depender só de cor), responsividade de visualizações.
O projeto mantém um site pesquisável em ui-ux-pro-max-skill.nextlevelbuilder.io onde você pode explorar o banco de dados visualmente. Útil para quando você quer navegar manualmente antes de pedir à IA.