Foundations
As regras que garantem que tudo da sua marca tenha a mesma cara. Cores, fontes, tamanhos e animações, tudo definido para você não precisar decidir cada vez.
A marca usa laranja quente sobre fundo escuro. O laranja (#E8722A) é o acento humano, o calor da Thai dentro da seriedade. O azul marinho (#1B2A4A) traz estrutura e confiança. Juntos passam a mensagem: precisão técnica + cuidado humano.
Especificação: Accent Laranja #E8722A + Azul Marinho #1B2A4A + Preto #0A0A0A + Branco #FAFAFA + Cinza #6B7280. WCAG AA validado em todos os temas.
Deep Blue · Backgrounds
Deep Blue · Scale
Complemento frio. Indigo undertone para profundidade e sofisticação. Contraste harmônico com o accent quente.
Accent · TLX Orange
Quente + energético. Alta visibilidade em backgrounds dark. WCAG AA em todos os contextos.
Text Scale
Neutral · Silver (Light Theme)
Semantic
Gradientes
Warm Sunset
Hero accents, CTAs
Navy → Orange
Section backgrounds, cards
Warm Aurora
Ambient background glow
Silver Warmth
Light theme hero
Deep Navy
Dark hero, footer
Borders
border-default
rgba(155,163,181,0.15)
border-hover
rgba(155,163,181,0.28)
border-accent
rgba(247,126,45,0.30)
Display · Space Grotesk
300, 400, 500, 600, 700
Seu negócio é melhor do que parece.
Seu negócio é melhor do que parece.
Seu negócio é melhor do que parece.
Body · Inter
300, 400, 500, 600, 700
Diagnosticamos antes de propor. Projetamos antes de executar.
Diagnosticamos antes de propor. Projetamos antes de executar.
Diagnosticamos antes de propor. Projetamos antes de executar.
Mono · IBM Plex Mono
400, 500, 600
4.1x ROI // R$250K retorno // 0.04% top global
4.1x ROI // R$250K retorno // 0.04% top global
Type Scale
| Token | Size | Family | Weight | Uso |
|---|---|---|---|---|
| display-xl | 56px | Space Grotesk | 700 | Hero |
| display-lg | 44px | Space Grotesk | 700 | Seções |
| display-md | 32px | Space Grotesk | 500 | Subtítulos |
| heading-lg | 24px | Inter | 600 | Cards |
| heading-md | 20px | Inter | 600 | Sub-headings |
| body-lg | 18px | Inter | 400 | Corpo destaque |
| body-md | 16px | Inter | 400 | Corpo padrão |
| body-sm | 14px | Inter | 400 | Secundario |
| caption | 12px | Inter | 500 | Labels |
| metric | 32px | IBM Plex Mono | 500 | Numeros destaque |
Base unit: 8px. Escala consistente derivada de múltiplos de 4.
Toda animação tem propósito funcional ou comunicativo. 8 curvas de easing (4 core + 4 Awwwards), 3 níveis de duração. Clique para testar.
Easing Curves
Durations