Visual References

Moodboard

Referências visuais e princípios de design que guiam a identidade /tg.

9 Referências • 4 Categorias • 2026
01
Princípios de Design
Os 6 pilares que definem a linguagem visual /tg.
01
Dark-First
Background #121210, superfícies #1A1A17. O escuro não é ausência — é profundidade.
02
Laranja Sinal
#F26B3A para CTAs, indicadores, dados positivos. Quente mas não agressivo.
03
Tipografia Mono
JetBrains Mono para labels, Space Grotesk para títulos, Inter para corpo.
04
Precisão Grid
Gaps de 1px, borders como separadores. Estrutura cirúrgica.
05
Linguagem Terminal
Readouts de cockpit, brackets, slashes. Tech sem ser frio.
06
Data-Dense
Otimizado para KPIs, métricas, dashboards. Informação > decoração.
02
Categoria 01 — Web UI & Produto
Interfaces web com estética dark-first, tipografia bold e interações precisas.
[sys::landing_v2]
Construa
sua marca.
Começar agora
grid::40px / stroke::1px
Landing Page Dark
Estética dark-first com grid sutil, tipografia mono, CTAs bold em laranja.
Email
nome@exemplo.com
Mensagem
Quero saber mais sobre...
Categoria
Selecionar...
Enviar
Form UI Signal
Forms minimalistas com feedback visual claro. Inputs com border primary no focus.
03
Categoria 02 — Dashboard & HUD
Painéis de controle inspirados em cockpits, com métricas bold e visualização densa.
[dash::cockpit]
live
75
PERF
92
SEO
60
CVR
2.4k
Visits
847
Leads
+18%
Growth
Dashboard Cockpit
Painéis estilo cockpit com métricas bold, indicadores em laranja, labels mono.
12k
Followers
4.8
Rating
98%
Uptime
340
Projects
Stat Cards
Cards de estatística com números oversized, tipografia mono para labels.
04
Categoria 03 — Gráfico & Padrões
Texturas, micro-patterns e elementos de frame para superfícies e backgrounds.
pattern::micro-grid
Micro-Pattern Grid
Padrões geométricos sutis para backgrounds e texturas.
/tg.
crosshair::48px
Crosshair Grid
Grid de crosshairs ultra-sutil para fundos hero e seções.
HUD
[frame::bracket]
HUD Frames
Frames estilo HUD com brackets nos cantos. Usado em cards de destaque.
05
Categoria 04 — Layout & Tipografia
Tipografia display de alto impacto e elementos de frame para hierarquia visual.
IA.
Space Grotesk / 800 / Display
Bold Typography
Tipografia display compressed e bold. Impacto visual máximo.
Marca Pessoal
Consultoria & Estratégia
Corner Brackets
Elementos de frame com brackets nos cantos. Hierarquia visual sem bordas completas.
06
Paleta de Humor
A tensão criativa que define o tom da marca. Cada par reflete um equilíbrio intencional.
Técnico mas acessível
Direto mas não frio
Provocativo mas respeitoso
Premium mas não elitista
Data-driven mas humano