Tuiga AI — Design System
Referência viva dos tokens e componentes da marca. Use esta página para conferir classes e copiar blocos de HTML/Django ao montar a landing page real — nunca hardcode cor, espaçamento ou radius soltos, sempre pelos tokens mostrados aqui.
Modo escuro é o padrão da marca. Use o botão ☾ na navbar para alternar para o modo claro.
Cores
Paleta bruta da marca (usar quando o significado for "essa cor especifica") e tokens semânticos (usar em componentes — se adaptam ao tema automaticamente).
Paleta da marca
Electric
#00FFB2
Acento — CTAs, símbolo, ênfase
Void
#060608
Fundo escuro principal
Deep
#0B0D14
Fundo escuro secundário
Mid
#1A1D2E
Superfícies elevadas / cards
Ivory
#F2F0ED
Fundo claro / texto sobre escuro
Depth
#7B5EA7
Secundária — usar com moderação
Tokens semânticos (seguem o tema atual)
bg
Fundo principal da página (segue o tema)
bg-secondary
Fundo de seções alternadas
surface
Cards, inputs, superfícies elevadas
text
Cor de texto principal (aqui mostrada como swatch)
accent
Alias semântico de Electric
secondary
Alias semântico de Depth
Opacidade do acento (Electric)
Cada token de cor aceita o modificador de opacidade do Tailwind — não existe um token
separado para "hover"/"disabled": é o mesmo accent com alpha diferente.
accent/10
accent/25
accent/50
accent/75
accent/100
exemplo: botão disabled
Tipografia
Space Grotesk para headings/UI de destaque (ecoa o wordmark geométrico) + Inter para corpo de texto (mais legível em blocos longos). Ambas gratuitas via Google Fonts.
Aa — Tuiga AI
h1 · .h1 · Heading 1 — 48/72px
Aa — Tuiga AI
h2 · .h2 · Heading 2 — 36/48px
Aa — Tuiga AI
h3 · .h3 · Heading 3 — 30/36px
Aa — Tuiga AI
h4 · .h4 · Heading 4 — 24/30px
Aa — Tuiga AI
h5 · .h5 · Heading 5 — 20/24px
Aa — Tuiga AI
h6 · .h6 · Heading 6 — eyebrow / label de seção
Corpo de texto padrão (.text-body) — usado em parágrafos, descrições de card e subheadlines. Base de 16px com line-height confortável para leitura.
.text-body
Texto pequeno (.text-small) — labels, itens de navegação, metadados.
.text-small
Caption / eyebrow (.text-caption) — uppercase, tracking largo, uso discreto
Radius & Shadow
Cantos deliberadamente menos arredondados que o padrão "SaaS fofo" — a marca é angulosa. Sombra preta soma pouco sobre um fundo já quase-preto; o recurso real de destaque é o glow em Electric.
sm · 6px
md (default) · 10px
lg · 16px
xl · 24px
sm
md (default)
lg
glow
Inputs & Textarea
Cards & Badges
Card estático
Fundo surface, borda sutil, sem interação.
Card interativo
Mesma base + hover (interactive=True).
Conteúdo livre — use a classe .card direto quando o card não for eyebrow+título+descrição.
Landing page completa (para copiar)
Da hero ao CTA final — na ordem em que apareceriam na landing real.
Antes de transformar, precisamos compreender.
Não vendemos automação. Vendemos clareza estratégica executada com AI.
Compreensão precede transformação.
Diagnóstico antes da solução
Mapeamos processos, pessoas e cultura antes de propor qualquer tecnologia.
Execução, não só framework
Entregamos diagnóstico, execução e resultado mensurável — não um relatório para arquivar.
Compreensão como método
Tuiga vem do gaélico para “compreender” — não é estética de marca, é como trabalhamos.
Sem hype, com precisão
Falamos como quem já viu promessa exagerada — e aprendeu que a pergunta certa vale mais que a resposta rápida.
Resultado, não relatório.
“A Tuiga nos fez entender, pela primeira vez, o problema real antes de comprar mais uma tecnologia.”
Não automatizamos o que não compreendemos.
Manifesto Tuiga AI
Pronto para compreender antes de transformar?
Fale com a Tuiga e comece pelo diagnóstico — não pela solução pronta.