Esta página organiza o sistema da Três por Um seguindo o método de
Atomic Design (Brad Frost). Os componentes vivem em tpu-system.css
e são renderizados aqui na sua forma final, junto com o markup que os ativa.
Source · https://proposta.tresporumdigital.com.br/assets/tpu-system.css
Os tokens — cor, tipografia, espaço, movimento, gradientes. Não têm forma própria na tela: são as variáveis que todos os átomos consomem. No Brad Frost original viviam dentro dos átomos; a interpretação moderna os trata como camada subatômica, e é assim que o Três por Um trabalha.
Background dark em 3 níveis, linhas duplas, 4 níveis de texto, laranja como acento e cyan/verde/vermelho/cobre/rosa/roxo como variações.
/* :root em tpu-system.css */
--bg:#0E0F11; --bg-2:#141518; --bg-3:#1a1b1e;
--line:#26272b; --line-2:#34363a;
--text:#fff; --text-2:#c7c7c7; --text-3:#8d8d8d; --text-4:#6b6b6b;
--accent:#E85600; --cyan:#36cdff; --green:#a2f865;
--red:#df4a63; --copper:#C9B79C; --pink:#ff88be; --purple:#c599ff;Geist sans para tudo, Geist Mono para metadados/labels/métricas. H1–H4 em peso 500 com letter-spacing negativo; lead e body em 400.
Texto de lead, usado em sub-headlines e parágrafos de abertura. Linha 1.55 e largura máxima de 62ch.
--text-2, linha 1.5.<h1>Headline</h1>
<h2>Headline</h2>
<p class="lead">Lead</p>Raio de borda, largura máxima do container, altura do topbar e gradientes globais.
| Variável | Valor | Uso |
|---|---|---|
| --radius | 14px | Borda padrão de cards |
| --max | 1180px | Largura máxima do .container |
| --nav-h | 56px / 50px | Altura do topbar (desktop / mobile) |
| --font | 'Geist', system-ui, … | Font-family principal |
| --mono | 'Geist Mono', ui-monospace, … | Mono p/ metadados |
| .gradient-text | linear-gradient(90deg,#ffe9d6→#36cdff) | Texto destaque em headlines |
| eyebrow border | linear-gradient(90deg,#E85600→#36cdff→#E85600) | Borda animada do .eyebrow |
| glow verde | radial(rgba(162,248,101,.12) → transparent) | .cta · .price-main · .extra-card.bonus |
| glow laranja | radial(rgba(232,86,0,.12) → transparent) | Halos em cards laranja |
Quatro animações canônicas: borda gradiente do eyebrow (5s loop), tickers (36s topo / 42s rodapé reverso), reveal-on-scroll e preenchimento da timeline. Todas respeitam prefers-reduced-motion.
| Animação | Duração | Loop / trigger | Componentes |
|---|---|---|---|
| eyebrow-flow | 5s | linear infinite | .eyebrow |
| ticker | 36s topo · 42s rodapé | linear infinite (reverse no rodapé) | .ticker .ticker-track |
| reveal | 0.65s | IntersectionObserver · threshold 0.12 | .reveal → .reveal.in |
| timeline-fill | 1.2s · delay 0.2s | IntersectionObserver · threshold 0.4 | .timeline.in .timeline-track::after |
Quatro gradientes oficiais: texto destaque, borda animada do eyebrow, e dois glows radiais (verde para confirmação, laranja para halos).
linear-gradient(90deg, #ffe9d6 0%, #ff8a3d 35%, #9eebff 75%, #36cdff 100%)
linear-gradient(90deg, #E85600 0%, #36cdff 50%, #E85600 100%)
Halo radial usado em .price-main e .extra-card.bonus.
Halo em .extra-card.delivery e fundo do body.
Os menores elementos visuais que ainda têm forma própria na tela e podem ser usados isoladamente: botões, indicadores, ícones, dots. Consomem tokens de Foundations mas já são UI tangível. No Brad Frost: “atoms can't be broken down further without losing their meaning.”
.ctaVerde sólido com glow e arrow opcional. Usado para confirmar / avançar / comprar.
<a class="cta" href="#">
Texto
<svg width="13" height="13" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.2">
<path d="M5 12h14M13 5l7 7-7 7"/>
</svg>
</a>.cta-ghostOutline discreto em mono. Borda fica laranja no hover.
<a class="cta-ghost" href="#">Saiba mais</a>.playQuadradinho 6×6 rotacionado 45°. Vai dentro de eyebrows e badges. Aceita variação de cor (laranja, verde, cyan).
.dotBolinha verde com halo, sinaliza estado “ao vivo”. Usada no nav-meta e em status indicators.
.brand::beforePingo laranja com halo, vive como pseudo-elemento à esquerda do logo.
.tag · .extra-tag · .pb-kMono em uppercase com letter-spacing largo. Cor varia conforme contexto (laranja, verde, cyan).
.bonusMini-pílula verde inline. Marca itens extras em listas.
.plusÍcone de toggle do FAQ. Rotaciona 45° e fica laranja quando aberto.
.checkQuadradinho 24×24 laranja com borda, usado nos itens da lista “incluído”.
.num · .nodeMarcador numérico em mono. Variantes: lista de steps (chip 30×30) e timeline (círculo 40×40).
.dotsTrio de bolinhas estilo macOS. Marca cabeçalhos de painéis e mock janelas.
.ticker span bPingo laranja antes de cada mensagem do ticker.
Combinações curtas de átomos formando peças funcionais e nomeáveis: badges, items de lista, células, cards individuais. Cada molécula é a menor unidade que ainda carrega significado próprio na interface.
.eyebrowBorda gradiente animada deslizando 5s loop. A peça característica do sistema. Variantes: padrão (laranja), .green e .cyan.
<span class="eyebrow"><span class="play"></span>Texto</span>
<span class="eyebrow green"><span class="play"></span>Texto</span>.brand > smallNome principal + metadado em mono separado por barra vertical.
<a href="#" class="brand">Três por Um<small>Subtítulo</small></a>.nav-metaIndicador de status no canto direito do topbar (live dot + label mono).
.s-headEstrutura padrão de cabeçalho de section: eyebrow + h2 + lead.
Lead opcional explicando o conteúdo da seção em uma ou duas linhas.
.gradient-textRecorta o gradiente laranja-creme → cyan dentro de uma palavra ou frase de destaque.
<h2>Texto base <span class="gradient-text">destaque</span></h2>.cta-rowContainer flex com gap padrão para botões. No mobile vira column-stretch automaticamente.
.client-card > divCélula de metadado: label mono em uppercase + valor em sans.
.incCheck chip + título + descrição. Aceita pílula .bonus inline no h4.
Importação automatizada via planilha ou API.
.cmp-headCabeçalho dos cards de comparação: título sans + label mono. Cor varia por contexto (red para Hoje, accent para Depois).
.cmp-list liItem das listas de comparação: chip circular (− ou +) + texto. Cor herda do .cmp-card.bad/.good.
.tl-stepNó numerado (40×40) + título + descrição curta. Estado “in” herda do organismo timeline.
Mapa atual da operação em 3 dias.
Implantação de templates e integrações.
.why-cardCard vertical com ícone, tag mono em laranja, h4 e parágrafo. Vai dentro do grid .why.
Templates prontos para vendas, atendimento e financeiro. Você opera no dia 21.
.stat-cellCélula de KPI: label mono pequeno + valor grande, com variação .highlight em laranja.
.steps-list liLinha de passo numerado: chip mono laranja + texto. Componente da lista .steps-list.
.faq-itemPergunta + plus toggle. Resposta animada via max-height. Estado .open rotaciona o + e revela.
.pbBloco mono com label + valor. Variação .highlight aplica tinta verde.
.delivery-flow .stepEtapa do fluxo de entrega no card de prazo. Dot laranja quando ativo.
.partner-cardCard descritivo com ícone laranja, h4 e parágrafo. Pareado em grid .partner.
Não desaparecemos depois do go-live. Acompanhamento mensal e ajuste de fluxos sob demanda.
.feat-list liLinha vertical com ícone laranja + h4 + parágrafo curto. Vai dentro de .feat-list.
Cobrem 80% dos diálogos de atendimento e vendas.
.context-noteNota destacada em cyan para contexto / observação fora da hierarquia principal.
Composições maiores que combinam moléculas em blocos completos da interface: cabeçalhos, grids inteiros, áreas de valores, FAQs. Cada organismo é uma unidade pronta para ocupar uma seção da página.
.topbar > .ticker + .navSticky no topo. Ticker animado em cima, nav (brand + nav-meta) embaixo. Backdrop-blur ativo.
.ticker.bottomMarquee inverso (42s) no rodapé. Espelha o ticker do topo fechando a moldura da página.
.compareGrid 2-col com cards .bad (vermelho) e .good (laranja).
.timeline5 nós conectados por uma trilha que se preenche em laranja quando entra na viewport (threshold 0.4).
3 dias mapeando.
Templates + integrações.
Time operando.
Operação no ar.
Ajuste mensal.
.why4 cards verticais idênticos. Vira 2-col em ≤900px e 1-col em ≤520px.
Templates prontos.
Auditoria nativa.
Não some no go-live.
Operação enxuta.
.includedGrid 2-col de itens compactos. Cada item é uma molécula .inc.
Importação automatizada.
20 fluxos prontos.
API oficial.
2 sessões síncronas.
.investGrid 1.2fr / 0.9fr com card principal verde + card de termos. Halo radial verde no canto superior direito.
.extras-gridDois cards com halos radiais. .bonus em verde, .delivery em laranja.
Para quem fechar até o final do mês. Renovação automática só após o quarto mês.
Entrega completa do go-live operacional. Cronograma compartilhado em D+1.
.faqLista de itens com toggle individual. JS controla .open e max-height da resposta.
.steps-list + .cta-bannerLista de passos centralizada seguida por banner com glow laranja e CTA principal.
.panelMock de janela com window-dots, grid de stat-cells e meta “ao vivo”. Ilustra dashboards.
.two-colColuna de texto + coluna livre (painel, imagem, lista). 1.05fr / 1fr no desktop, 1-col no mobile.
Construímos a operação com você dentro, não para você. Cada template é ajustado ao tom da sua marca antes do go-live.
Os primeiros 10 dias são de imersão. Vamos ouvir suas chamadas, ler conversas reais e mapear cada gap antes de escrever uma linha de fluxo.
“Em 3 semanas a empresa parou de perder pedido no DM.” — cliente, varejo SP
Antes de qualquer template ou integração.
Lemos suas conversas reais — sem “achismo”.
Ajustes baseados em métricas, não em opinião.
.partnerGrid 2-col de cards descritivos. 1-col em ≤780px.
Não desaparecemos depois do go-live. Acompanhamento mensal.
N8N, Supabase, Claude API, WhatsApp Cloud — sem vendor lock-in.
.side-dotsNavegação fixa no canto direito. Dot ativo cresce 1.4× e ganha halo. Escondida em ≤880px.
.footerLinha mono em uppercase com nota confidencial e copyright.
Esqueletos de página — estruturas vazias prontas pra receber conteúdo. Definem o esqueleto de cada tipo de seção (hero, has-dots, deck) sem prescrever a cópia exata.
.section.heroEstrutura: eyebrow + h1 + lead + cta-row. Em ≥901px o conteúdo é centralizado e o h1 perde o limite de largura.
<section class="section hero" id="hero">
<div class="container">
<span class="eyebrow"><span class="play"></span>EYEBROW</span>
<h1>HEADLINE <span class="gradient-text">destaque</span></h1>
<p class="lead">Lead.</p>
<div class="cta-row">
<a class="cta" href="#">CTA</a>
<a class="cta-ghost" href="#">Ghost</a>
</div>
</div>
</section>.section.has-dotsSection com fundo pontilhado (radial-gradient + mask vertical). Variação .bottom inverte o fade.
O fade vertical tira a densidade ao chegar no rodapé.
<section class="section has-dots">
<div class="container">
<div class="s-head">
<span class="eyebrow">...</span>
<h2>Headline</h2>
<p class="lead">Lead.</p>
</div>
<!-- conteúdo da section -->
</div>
</section>main > section[id]Página completa com topbar, side-dots, sequência de sections (cada qual tipo deck slide), bottom-ticker e footer.
html
├─ <head> Geist + tpu-system.css
└─ <body>
├─ <header class="topbar"> O.01
│ ├─ .ticker.ticker-track
│ └─ .nav (.brand + .nav-meta)
├─ <aside class="side-dots"> O.14
├─ <main id="top">
│ ├─ section#hero.hero T.01
│ ├─ section#x.has-dots T.02
│ ├─ section#y.has-dots.bottom
│ └─ section#z
├─ .ticker.bottom O.02
├─ <footer class="footer"> O.15
└─ <script src="tpu-system.js">Templates preenchidos com conteúdo real. São o que o cliente final vê — e o último filtro pra validar se as decisões dos níveis anteriores funcionam sob conteúdo real.
O template T.01 com conteúdo real, ticker e topbar.
Atendimento, vendas e back-office unificados num funil único. 20 dias úteis até o go-live, sem dependência de fornecedor.
Sequência típica: Hero → Comparação Hoje × Depois. Demonstra como o sistema sustenta uma narrativa de venda.
Pacote completo de implantação assistida com fee mensal e SLA de 4h úteis.