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 traz energia, o escuro traz seriedade. Juntos passam a mensagem: acessíveis mas profissionais. Inspirado na paleta do iPhone 17 Pro.
Especificação: Accent Cosmic Orange #F77E2D + Complement Deep Blue #32374A. WCAG AA validado em ambos 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 — Cosmic Orange
Quente + energético. Alta visibilidade em backgrounds dark. WCAG AA em todos os contextos.
Text Scale
Neutral — Silver (Light Theme)
Semantic
Gradientes
Cosmic Sunset
Hero accents, CTAs
Blue → Orange
Section backgrounds, cards
Warm Aurora
Ambient background glow
Silver Warmth
Light theme hero
Deep Indigo
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 — Plus Jakarta Sans
400, 500, 600, 700, 800
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 | Plus Jakarta Sans | 700 | Hero |
| display-lg | 44px | Plus Jakarta Sans | 700 | Seções |
| display-md | 32px | Plus Jakarta Sans | 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. 4 curvas de easing, 3 níveis de duração. Clique para testar.
Easing Curves
Durations