/tg. Layout Templates

Page Shell

Esqueleto completo de uma página /tg. com navegação fixa, hero, seções de conteúdo e rodapé.

/tg.

Título Principal

Subtítulo descritivo da página

Conteúdo A

Conteúdo B

Conteúdo C

/* Estrutura básica */ <nav> position: fixed; top: 0; z-index: 100; height: 64px; <header> padding-top: 7rem; /* compensa nav fixa */ <section> padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 4vw, 3rem); <footer> border-top: 1px solid rgba(61,61,54,0.3);

Dashboard Bento Grid

Layout estilo bento com cards de tamanhos variados para dashboards e painéis de controle.

Visão Geral

97.4%

Performance geral do sistema nas últimas 24h

Receita Mensal

R$ 42.8k

+12.5% vs. mês anterior

Leads Ativos

1.247

+89 esta semana

Tasks

pendentes

Reuniões

esta semana

Alertas

2 Críticos

5 Avisos

12 Info

grid-template-columns: repeat(4, 1fr); grid-template-areas: "overview overview receita leads" "overview overview tasks reunioes" "alertas alertas alertas alertas";

Content Auto-fit Grid

Grid responsivo que se ajusta automaticamente ao espaço disponível. Ideal para listagens de conteúdo.

Estratégia

Como construir uma marca pessoal autêntica

Descubra os pilares fundamentais para criar uma presença digital que reflita quem você realmente é e atraia as oportunidades certas.

08 Mar 2026

Design

Design systems: por que toda marca precisa de um

Um sistema de design não é luxo. É a base para consistência, velocidade e escalabilidade em todos os pontos de contato.

02 Mar 2026

Tecnologia

IA generativa na criação de conteúdo

Ferramentas de IA estão transformando a produção de conteúdo. Saiba como integrá-las sem perder a voz da sua marca.

25 Fev 2026

Produtividade

Método /tg. para gestão de projetos criativos

Framework prático para gerenciar múltiplos projetos criativos sem perder qualidade ou prazos.

18 Fev 2026

Carreira

Freelancer ou CLT: falsa dicotomia

O modelo híbrido está ganhando força. Entenda como equilibrar estabilidade e liberdade criativa na sua carreira.

10 Fev 2026

Marketing

LinkedIn como plataforma de conteúdo

Estratégias avançadas para transformar seu perfil profissional em um canal de aquisição de clientes.

03 Fev 2026

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; /* Responsivo por natureza — sem media queries */

Sidebar Layout

Layout clássico com barra lateral fixa e área de conteúdo principal. Ideal para dashboards e documentação.

Visão Geral do Projeto

Este layout combina uma barra lateral de navegação com largura fixa de 280px e uma área de conteúdo principal fluida. A sidebar comporta navegação hierárquica, filtros e ações rápidas.

O conteúdo principal expande para ocupar todo o espaço disponível, garantindo boa leitura em telas grandes sem desperdício de espaço em telas menores.

grid-template-columns: 280px 1fr;

Split Screen

Layout 50/50 para heroes de landing pages. Combina texto persuasivo com elemento visual de destaque.

/ marca pessoal

Transforme sua presença digital em autoridade.

Estratégia, design e tecnologia trabalhando juntos para construir uma marca pessoal que gera resultados reais e conexões autênticas.

Começar agora →

imagem / ilustração

grid-template-columns: 1fr 1fr; /* Esquerda: fundo escuro + conteúdo textual */ /* Direita: fundo cream + elemento visual */ /* Responsivo: empilha em 1 coluna em mobile */

Card Masonry

Layout estilo Pinterest usando CSS columns. Cards com alturas variadas criam um mosaico visual dinâmico.

Insight

Consistência vence talento

Publicar conteúdo regularmente importa mais do que criar peças perfeitas esporadicamente. A frequência constrói audiência; a qualidade a retém.

thumbnail

Projeto

Redesign do sistema de design /tg.

Documentação completa de tokens, componentes e padrões visuais para a marca pessoal.

"O melhor momento para começar era ontem. O segundo melhor é agora."

-- Provérbio chinês

3.2k

Métrica

Seguidores orgânicos no primeiro trimestre

Crescimento de 340% em relação ao trimestre anterior através de conteúdo estratégico.

Dica

Use design tokens em tudo

Tokens garantem consistência visual em todos os pontos de contato da marca. Defina cores, espaçamentos e tipografia uma vez e reutilize em todo lugar.

thumbnail

Artigo

Por que todo profissional precisa de um site pessoal

Stack

Ferramentas favoritas

Figma para design, VS Code para código, Notion para gestão, Claude para IA. Simplicidade e integração acima de tudo.

Produção

Artigos publicados em 2026

Conteúdo técnico e estratégico sobre marca pessoal, design e tecnologia.

column-count: 3; column-gap: 1rem; /* Cards usam break-inside: avoid; */ /* Responsivo: 2 colunas em tablet, 1 em mobile */