/tg. Components

01

Buttons

Variantes de botões para todas as interações da marca.

Primary

.btn .btn--primary .btn--sm / .btn--md / .btn--lg

Outline

.btn .btn--outline

Accent

.btn .btn--accent

Ghost

.btn .btn--ghost

Dark

.btn .btn--dark

Pill

.btn .btn--pill

Ícone + Texto

.btn com SVG inline

Loading

.btn .btn--loading

Desabilitado

.btn .btn--disabled (opacity: 0.5)

Grupo de Botões

.btn-group > .btn

02

Inputs

Campos de formulário e controles de entrada.

Padrão (dark)

.input

Focus (dark)

.input:focus

Erro

Este campo é obrigatório.

.input .input--error

Sucesso

.input .input--success

Desabilitado

.input .input--disabled

Variante Cream

.input .input--cream

Textarea

.input .textarea

Select

.input .select

Label + Helper

Nome completo

Use seu nome como aparece em documentos.

.form-group > .form-label + .input + .form-helper

Label + Erro

Email

Informe um email válido.

.form-group > .form-label + .input--error + .form-error-msg

Checkbox

Desmarcado

Marcado

.checkbox-wrap / .checkbox-wrap--on

Radio

Desmarcado

Selecionado

.radio-wrap / .radio-wrap--on

Toggle Switch

Desligado

Ligado

.toggle-wrap / .toggle-wrap--on

Busca com Ícone

.search-wrap > .search-icon + .input

03

Badges

Etiquetas e indicadores de status.

Tamanho Padrão

Neutro Primário Accent Sucesso Aviso Erro Info

.badge .badge--{variant}

Tamanho Pequeno

Neutro Primário Accent Sucesso Aviso Erro Info

.badge .badge--sm

Com Indicador

Online Offline Pendente Em progresso Ativo

.badge > .dot

Removível

React x TypeScript x Node.js x PostgreSQL x

.badge > .badge-remove

Grupo Inline

v2.0 Estável MIT TypeScript

.badge grupo inline

04

Cards

Containers de conteúdo com variantes para diferentes contextos.

Card Padrão

Um card com fundo escuro para destacar conteúdo sobre fundos claros.

.card .card--dark

360 x 160

Card com Imagem

Área de imagem com placeholder e conteúdo abaixo.

.card > .card-img

360 x 160

Card Cream

Variante clara para uso sobre fundos escuros ou como destaque.

.card .card--cream

01

Planejamento

Definir escopo, objetivos e métricas de sucesso.

.card > .card-numbered-header > .card-step-number

02

Execução

Implementar com iterações curtas e feedback contínuo.

03

Entrega

Validar resultados e documentar aprendizados.

2.4K

Seguidores

.card > .card-number + .card-stat-label

98%

Satisfação

47

Projetos

TG

Túlio Gonçalves

Desenvolvedor Full Stack

Criando experiências digitais com código limpo e design intencional.

.card > .card-avatar + .card-title + .card-role

120 x 100

Card Horizontal

Layout lado a lado para listagens e feeds de conteúdo.

.card .card--horizontal

05

Alerts

Mensagens de feedback e notificações para o usuário.

i

Informação

Sua sessão será renovada automaticamente em 5 minutos.

.alert .alert--info

✓

Sucesso

Seu perfil foi atualizado com sucesso.

.alert .alert--success

!

Atenção

Seu plano expira em 3 dias. Renove para continuar usando todos os recursos.

.alert .alert--warning

x

Erro

Não foi possível processar sua solicitação. Tente novamente mais tarde.

.alert .alert--error

i

Nova versão disponível

A versão 2.0 está pronta para instalação com melhorias de performance.

.alert > .alert-content > .alert-action

✓

Backup concluído

Todos os dados foram salvos com sucesso.

.alert > .alert-dismiss

Toast Notification

Alterações salvas com sucesso.

.toast-container > .toast

06

Tables

Tabelas de dados com variantes de estilo.

Padrão com Listras e Hover

Projeto	Status	Stack	Prazo
Marca Pessoal	Ativo	Next.js, Tailwind	Mar 2026
Dashboard SaaS	Em revisão	React, Node.js	Abr 2026
API Gateway	Planejado	Fastify, PostgreSQL	Mai 2026
Mobile App	Arquivado	React Native	--

.tg-table .tg-table--striped .tg-table--hover

Compacta

Arquivo	Tipo	Tamanho	Modificado
index.tsx	TypeScript	4.2 KB	Hoje
styles.css	CSS	12.8 KB	Ontem
config.json	JSON	1.1 KB	2 dias
README.md	Markdown	3.5 KB	1 semana

.tg-table .tg-table--compact

07

Lists

Listas estilizadas para diferentes contextos de conteúdo.

Lista Slash

/ Desenvolvimento web
/ Design de interfaces
/ Arquitetura de sistemas
/ Consultoria técnica

.list .list--slash > .list-bullet

Lista Numerada

01 Entender o problema
02 Pesquisar soluções
03 Prototipar rápido
04 Iterar e refinar

.list .list--numbered > .list-num

Lista com Indicadores

React e Next.js
TypeScript
Node.js e PostgreSQL
Tailwind CSS

.list .list--dot > .list-dot

Checklist

Setup do projeto
Design system criado
Componentes prontos
Testes passando

.list .list--check > .list-check

Lista Descritiva

Frontend React, Next.js, TypeScript, Tailwind CSS
Backend Node.js, Fastify, PostgreSQL, Redis
DevOps Docker, GitHub Actions, Vercel, AWS
Design Figma, Design Systems, Acessibilidade

.list .list--desc > .list-term + .list-def

08

Navigation

Elementos de navegação e orientação do usuário.

Navbar Horizontal

.navbar-mock

Breadcrumbs

Início / Projetos / Marca Pessoal

.breadcrumbs > a + .separator + .current

Tabs

Visão Geral

Detalhes

Histórico

.tabs > .tab / .tab.active

Paginação

.págination > .page-btn / .page-btn.active

09

Feedback

Indicadores de carregamento, progresso e estados vazios.

Loading Spinners

.spinner .spinner--sm / .spinner--md / .spinner--lg

Barra de Progresso

Início 0%

Em andamento 33%

Quase lá 66%

Completo 100%

.progress-bar > .progress-fill

Skeleton Loader

.skeleton .skeleton-line

Estado Vazio

Nenhum projeto encontrado

Comece criando seu primeiro projeto para visualizá-lo aqui.

.empty-state > .empty-state-icon + .empty-state-title + .empty-state-desc

10

Advanced

Componentes complexos para interfaces ricas.

Modal

.modal-preview > .modal-card > .modal-title + .modal-desc + .modal-actions

Tooltip

.tooltip-box (posicionado acima)

Avatar

TG

AB

CD

.avatar > .avatar-img + .avatar-status--{state}

Accordion

Qual a stack utilizada?

Utilizamos React com Next.js para o frontend, Node.js com Fastify no backend, e PostgreSQL para persistência. Todo o projeto é tipado com TypeScript e estilizado com Tailwind CSS.

Como funciona o processo de desenvolvimento?

Quanto tempo leva uma entrega?

.accordion > .accordion-item / .accordion-item--open

Code Block

// /tg. brand config
const brand = {
  name: '/tg.',
  primary: '#F26B3A',
  background: '#121210',
  fonts: ['Space Grotesk', 'Inter'],
  version: 2.0,
};
        

.code-block > .code-keyword / .code-string / .code-comment / .code-fn / .code-num

Timeline

Início do projeto

Setup inicial, definição de escopo e ferramentas.

Jan 2026

Design system

Criação de tokens, componentes e documentação.

Fev 2026

Lançamento

Deploy em produção e divulgação.

Mar 2026

.timeline > .timeline-item > .timeline-marker + .timeline-content

Dividers

Signal

Slash

/

Dot

.divider--signal / .divider--slash / .divider--dot

11

Charts

Gráficos e métricas visuais em CSS puro, sem dependências JavaScript.

Gráfico de Barras — Uso de IA por Departamento

Marketing

85%

Vendas

62%

Produto

78%

Suporte

45%

RH

32%

.bar-chart / .bar-row / .bar-fill--primary

Gráfico Donut — Distribuição de Uso de IA

100% Total

Automação 40%

Conteúdo 25%

Análise 20%

Outros 15%

.donut / .donut-hole / .donut-legend

Métricas com Barras Coloridas

NPS

72

CSAT

4.5/5

Churn

2.3%

MRR

+18%

.metric-card / .metric-bar-fill--primary / --green / --red

12

Steppers

Indicadores de progresso horizontal e vertical com três estados.

Stepper Horizontal

✓

Step 1

Descoberta

•

Step 2

Estratégia

○

Step 3

Implementação

○

Step 4

Resultado

.stepper-h / .stepper-h-step--completed / --active / --pending

Stepper Vertical

✓

Descoberta

Análise de contexto, mapeamento de objetivos e definição de escopo do projeto.

•

Estratégia

Planejamento de ações, definição de KPIs e cronograma de entregas.

3

Implementação

Execução das ações planejadas com acompanhamento contínuo de resultados.

4

Resultado

Mensuração de impacto, relatório final e recomendações de próximos passos.

.stepper-v / .stepper-v-step--completed / --active / --pending

Stepper Horizontal — Fundo Escuro

✓

Step 1

Descoberta

•

Step 2

Estratégia

○

Step 3

Implementação

○

Step 4

Resultado

Stepper Vertical — Fundo Escuro

✓

Descoberta

Análise de contexto, mapeamento de objetivos e definição de escopo do projeto.

•

Estratégia

Planejamento de ações, definição de KPIs e cronograma de entregas.

3

Implementação

Execução das ações planejadas com acompanhamento contínuo de resultados.

4

Resultado

Mensuração de impacto, relatório final e recomendações de próximos passos.

13

Formulário Composto

Exemplo completo de formulário com todos os tipos de campo.

Solicitar Consultoria

Preencha o formulário abaixo e entraremos em contato em até 24 horas.

Nome completo

E-mail

Empresa

Serviço

Faixa de investimento

< R$5K

R$5–15K

R$15–50K

> R$50K

Mensagem

Aceito os termos de uso e política de privacidade

.form-card / .form-row / .form-radio-group / .form-radio-option