Moodboard
Referencias visuais e principios de design. As influencias que moldam a identidade visual da TLX.
Interfaces dark de alta performance que comunicam precisao tecnica e sofisticacao. O padrao de qualidade visual que a TLX busca.
Linear
Ferramenta de project management com interface dark minimalista. Transicoes suaves, tipografia limpa, uso magistral de bordas sutis e hierarquia de superficies. Referencia maxima em craft de UI.
Hierarquia de superficies (base/surface/elevated), bordas sutis com opacity, transicoes suaves de 200-300ms, e o principio de que cada pixel tem proposito.
Supabase
Plataforma de backend com dashboard dark e accent verde vibrante. Prova que dark UI + accent colorido pode comunicar tanto tecnologia quanto acessibilidade. Documentacao impecavel.
Accent vibrante em fundo escuro como assinatura visual, cards com dados densos mas legíveis, e a combinacao de autoridade tecnica com linguagem acessivel.
Raycast
Launcher com design system coeso que funciona em dark e light. Gradientes sutis, icones consistentes, micro-interacoes que comunicam responsividade. Referencia em polish e atencao ao detalhe.
Micro-interacoes como feedback visual (hover states, press states), gradientes sutis que adicionam profundidade sem quebrar a sobriedade, e consistencia absoluta no icon system.
Autoridade e credibilidade de consultorias globais, traduzidas para o contexto boutique da TLX.
McKinsey & Company
O padrao-ouro de consultoria estrategica. Site com tipografia serif elegante, muito whitespace, e conteudo data-driven. Comunica autoridade sem precisar gritar. Cada grafico conta uma historia.
O uso de whitespace como sinal de confianca e autoridade, data visualization como prova de competencia, e o tom de thought leadership que educa em vez de vender.
Bain & Company
Consultoria com visual mais moderno que McKinsey. Uso forte de cor como sistema de navegacao, infograficos proprietarios, e uma hierarquia tipografica que guia o olhar com precisao.
Cor como sistema funcional (nao decorativo), infograficos que simplificam complexidade, e o equilibrio entre autoridade corporativa e modernidade visual.
Accenture Song
Braco criativo da Accenture que une consultoria com design. Visual ousado, dark sections, tipografia expressiva. Prova que consultoria pode ser visualmente impactante sem perder credibilidade.
A coragem de usar dark backgrounds em contexto corporativo, tipografia expressiva em grande escala, e a fusao de rigor analitico com ousadia criativa.
Tratamento tipografico como elemento de autoridade. Hierarquia clara, espacamento generoso, legibilidade impecavel.
Stripe
Referencia absoluta em tratamento tipografico para tech. Gradientes em texto, hierarquia com ate 5 niveis de contraste, e uma type scale que funciona de mobile a desktop sem quebrar.
Type scale disciplinada com poucos tamanhos bem definidos, hierarquia de contraste em texto (primary/secondary/muted), e o principio de que tipografia sozinha pode carregar a identidade.
Vercel
Minimalismo tipografico levado ao extremo. Poucas palavras, muito impacto. Uso de monospace para dados e metricas, sans-serif geometrica para headings. Cada palavra foi escolhida.
Monospace como voz de dados e metricas (token metric da TLX), copy ultra-conciso que respeita o tempo do leitor, e a confianca de deixar whitespace falar.
Visualizacao de dados como prova de valor. Dashboards e metricas que comunicam resultado com clareza.
Datadog
Dashboard de monitoramento com densidade de dados impressionante que ainda assim e legivel. Cores semanticas claras, graficos responsivos, e um sistema de layout em grid que organiza caos.
Cores semanticas (success/warning/error) como linguagem universal, grid system que organiza dados complexos sem overwhelm, e a prova de que dados densos podem ser bonitos.
Notion
Ferramenta de produtividade com UI limpa que acomoda qualquer tipo de conteudo. Tipografia neutra, icones como linguagem, e um sistema de blocos que e ao mesmo tempo flexivel e consistente.
O principio content-first onde a interface desaparece para o conteudo brilhar, icones como linguagem complementar ao texto, e a flexibilidade dentro de constraints claras.
6 principios inegociaveis que guiam toda decisao visual da TLX. Da paleta de cores ao layout de cada pagina.
“O escuro nao e ausencia de luz — e intencao de foco.”
Background escuro como default. Nao e estetica, e estrategia: reduz fadiga visual, aumenta contraste de conteudo, e posiciona a TLX no territorio premium/tech.
Implicacoes
- •Background base sempre #0C0E14 (Void)
- •Superficies elevadas com incrementos sutis de luminosidade
- •Light mode so se necessario para acessibilidade, nunca como default
- •Imagens e assets otimizados para contexto dark
“Uma cor. Uma identidade. Sem diluicao.”
Cosmic Orange (#F77E2D) como accent principal, complementado por Deep Blue (#32374A). Quente + energetico = tensao dinamica inspirada no iPhone 17 Pro. WCAG AA garantido.
Implicacoes
- •Accent usado apenas para CTAs, links, e destaques importantes
- •Nunca mais de 15% da area visual total
- •Deep Blue como complement para profundidade e contraste
- •Escala de 7 tons de orange + 4 tons de deep blue
“Se o texto nao respira, a mensagem sufoca.”
3 familias com papeis claros: Plus Jakarta Sans (display), Inter (body), IBM Plex Mono (dados). Hierarquia rigida, sem improvisos tipograficos.
Implicacoes
- •Maximo 3 tamanhos de fonte por viewport
- •Line-height generoso (1.5-1.7 para body)
- •Letter-spacing ajustado por contexto (wider em labels, tighter em headings)
- •Nunca usar uma familia fora do seu papel designado
“Liberdade criativa dentro de constraints claras.”
Layout baseado em grid de 8px. Espacamento consistente e previsivel. Alinhamento e a fundacao — se nao esta alinhado, nao esta pronto.
Implicacoes
- •Todos os espacamentos sao multiplos de 4px (preferencia por 8px)
- •Max-width de conteudo: 1280px (max-w-7xl)
- •Margens laterais minimas: 24px (px-6)
- •Gap entre secoes: 96px (space-y-24)
“Numeros nao mentem. Mostre-os primeiro.”
Metricas e resultados sempre em destaque. IBM Plex Mono em tamanho grande, accent color, posicao privilegiada. O cliente ve o resultado antes da explicacao.
Implicacoes
- •Metricas usam font-mono e tamanho display-md ou maior
- •ROI e KPIs sempre acima do fold quando relevantes
- •Graficos e visualizacoes com cores semanticas claras
- •Cada numero precisa de contexto (comparacao, periodo, benchmark)
“Se precisa explicar, nao esta claro.”
Escolher a solucao mais clara, nao a mais criativa. Sem animacoes gratuitas, sem layouts experimentais, sem metaforas visuais obscuras. Clareza e a forma mais alta de sofisticacao.
Implicacoes
- •Animacoes apenas com proposito funcional ou de feedback
- •Icones reconheciveis (Lucide) em vez de ilustracoes abstratas
- •Copy direto e conciso — cada palavra justificada
- •Layout convencional que o usuario ja sabe navegar