Components
Peças prontas que montam qualquer página. Botões, cards, formulários — só encaixar. Você ou seu designer usa essas peças sem criar do zero.
As peças menores do sistema. Botões, etiquetas, campos de texto, switches — cada um já vem com as cores e fontes certas da marca.
Button
4 variantes semanticas, 3 tamanhos. Border-radius: 8px (radius-button). Transicao: 150ms ease-smooth.
Variantes
Tamanhos
Com Icone
Disabled
| Token | Valor | Uso |
|---|---|---|
| radius-button | 8px (0.5rem) | Border radius de todos os buttons |
| bg-accent | #F77E2D | Background do primary button |
| accent-hover | #FFA266 | Hover state |
| accent-subtle | rgba(247,126,45,0.10) | Background hover do secondary |
| error | #EF4444 | Background do destructive |
| duration-fast | 150ms | Transicao de cor no hover |
| text-base | #0C0E14 | Texto sobre accent (dark on light) |
Badge
5 variantes semanticas. Pill shape (radius-badge: 9999px). Usados em status, tags e categorias.
Input
Campo de texto com focus ring accent. Background elevated, border sutil com transicao no hover e focus.
Email invalido
Email valido
Toggle / Checkbox / Radio
Controles de selecao. Accent color no estado ativo. Transicao suave em 150ms.
Toggle
Checkbox
Radio
Combinacoes de atoms que formam unidades funcionais. Cards, form groups, alerts, toasts e modais.
Card
3 variantes base + 5 composicoes. Border-radius: 16px (radius-card). Border sutil com hover transition.
Variantes
Default
Card Default
Border sutil, background surface, hover transition.
Elevated
Card Elevated
Background elevated sem border. Subtil diferenciacao de nivel.
Accent
Card Accent
Border accent com glow sutil. Para destaque e CTAs.
Composicoes
Receita Mensal
R$ 45.2K
TLX Core
Diagnostico + Estrategia. O ponto de partida de todo projeto.
Saiba mais
“Finalmente alguem que entendeu meu negocio antes de propor solucao.”
Natalia Pedroso
Na Pedroso Estetica
Build
Implementacao completa
R$ 3.500/mes
- Setup completo
- Automacoes
- Suporte semanal
Pronto para transformar seu negocio?
Agende um diagnostico gratuito e descubra o que voce nao esta vendo.
Form Group
Label + Input + Helper text. Padrao consistente para formularios. Helper em muted, erro em vermelho.
Como voce gostaria de ser chamado
Informe um email valido
Minimo 20 caracteres
Alert
Feedback contextual com icone + mensagem. 4 variantes semanticas alinhadas ao sistema de cores.
Toast
Notificacao temporaria. Aparece no canto, desaparece em 3-5s. Shadow card + border sutil.
Salvo com sucesso
Suas alteracoes foram salvas
Erro ao enviar
Verifique sua conexao
Atualizado
Nova versao disponivel
Modal
Dialog overlay com backdrop escurecido. Max-width 480px. Radius-card, shadow-card, padding 24px.
Composicoes complexas de molecules e atoms que formam secoes inteiras de pagina. Navbar, Hero, Grids, FAQ e Footer.
Navbar
Barra de navegacao fixa no topo. Logo + links + CTA. Background surface com backdrop-blur. Border-bottom sutil.
Footer
Rodape com logo, links, contato e copyright. Background surface, border-top sutil.
Consultoria boutique de estrategia e tecnologia.
Servicos
- Core
- Build
- Scale
- Analytics
Empresa
- Sobre
- Blog
- Carreiras
- Contato
Legal
- Privacidade
- Termos
- Cookies
© 2025 TLX. Todos os direitos reservados.
Hero Section
Secao hero com headline, subtitulo, CTAs e metricas. Glow accent sutil no background.
Seu negocio e melhor do que parece.
Diagnosticamos antes de propor. Projetamos antes de executar. Poucos clientes, alto impacto.
4.1x
ROI medio
97%
Retencao de clientes
0.04%
Top global AI
Testimonial Grid
Grid de depoimentos com avatar, nome, cargo e estrelas. Layout 3 colunas em desktop.
“Finalmente alguem que entendeu meu negocio antes de propor solucao.”
Natalia Pedroso
Na Pedroso Estetica
“O diagnostico revelou coisas que eu nao estava vendo. Mudou minha operacao.”
Rafael Tonetto
Tonetto Engenharia
“Processo claro, entregas no prazo e resultado real. Recomendo.”
Camila Braga
Studio Braga
Services Grid
Grid de servicos com icone, titulo, descricao e link. Layout responsivo com hover accent.
TLX Core
Diagnostico + Estrategia. O ponto de partida de todo projeto.
Saiba mais
TLX Build
Implementacao. Construcao da solucao projetada.
Saiba mais
TLX Scale
Escala + Evolucao. Crescimento continuo pos-implementacao.
Saiba mais
Analytics
Dashboards e metricas. Medir o que importa.
Saiba mais
Consultoria
Acompanhamento proximo. Reunioes semanais.
Saiba mais
Integracao
Conectamos suas ferramentas em um fluxo unico.
Saiba mais
Pricing Table
Tabela de precos com 3 tiers. Card destacado com border-accent e badge “Popular”.
Core
Diagnostico + Estrategia
R$ 1.500/mes
- Diagnostico completo
- Relatorio de oportunidades
- Plano de acao
- 1 reuniao de alinhamento
Build
Implementacao completa
R$ 3.500/mes
- Tudo do Core
- Setup completo
- Automacoes
- Suporte semanal
- Metricas e relatorios
Scale
Crescimento continuo
R$ 5.000/mes
- Tudo do Build
- Otimizacao continua
- Novas automacoes
- Reuniao quinzenal
- Prioridade no suporte
FAQ Accordion
Accordion com ChevronDown animado. Um item aberto por vez. Border sutil entre items.
Analisamos seu negocio em profundidade antes de qualquer proposta. Olhamos metricas, processos, presenca digital e oportunidades. Voce recebe um relatorio completo com recomendacoes priorizadas.
Contact Section
Secao de contato com formulario + canais. Layout 2 colunas em desktop.
Fale com a gente
Preencha o formulario ou use um dos canais ao lado.
+55 54 99999-0000
contato@tlx.com.br
Telefone
+55 54 3333-0000
Founders Section
Secao de fundadores com layout espelhado. Avatar, nome, cargo e descricao.
Lucas Sales
CEO & Estrategia
Estrategia, tecnologia e IA. Constroi sistemas que escalam negocios locais com metodo.
Thaina Sales
COO & Operacoes
Operacoes, experiencia do cliente e processos. Garante que cada projeto entregue resultado real.