Três famílias tipográficas com papéis distintos na comunicação da marca.
| Nome | Tamanho | Peso | Line-height | Preview |
|---|---|---|---|---|
| Display | 4rem | 800 | 1.1 | Abc |
| H1 | 3rem | 700 | 1.15 | Abc |
| H2 | 2.25rem | 700 | 1.2 | Abc |
| H3 | 1.75rem | 700 | 1.25 | Abc |
| H4 | 1.5rem | 700 | 1.3 | Abc |
| H5 | 1.25rem | 700 | 1.35 | Abc |
| Body LG | 1.25rem | 400 | 1.6 | Abc |
| Body | 1rem | 400 | 1.6 | Abc |
| Body SM | 0.875rem | 400 | 1.5 | Abc |
| Caption | 0.75rem | 500 | 1.4 | Abc |
| Token | Valor | Preview |
|---|---|---|
| Regular | 400 | O rápido gato marrom |
| Medium | 500 | O rápido gato marrom |
| Semibold | 600 | O rápido gato marrom |
| Bold | 700 | O rápido gato marrom |
| Extrabold | 800 | O rápido gato marrom |
A marca /tg. nasceu da necessidade de criar uma identidade visual que traduzisse a essência de um profissional multidisciplinar. O ponto de partida foi o slash, símbolo universal de caminhos e direções no mundo digital, combinado com as iniciais em caixa baixa e o ponto laranja que encerra cada declaração como uma afirmação definitiva. A tipografia Space Grotesk foi escolhida por sua personalidade geométrica e contemporânea, capaz de provocar atenção imediata em títulos e chamadas. Para o corpo do texto, Inter oferece legibilidade impecável em qualquer tamanho e dispositivo, com suas proporções cuidadosamente otimizadas para telas. JetBrains Mono completa o trio como a voz técnica, trazendo credibilidade e precisão para blocos de código, tokens e dados. Juntas, essas três famílias criam uma hierarquia visual clara que comunica profissionalismo, criatividade e domínio técnico. A paleta de cores, centrada no laranja #F26B3A sobre superfícies escuras e claras alternadas, reforça a energia e a confiança que a marca deseja transmitir. Cada decisão de design foi tomada com intencionalidade, garantindo consistência em todos os pontos de contato.
Paleta completa com tokens semânticos, neutrals e escalas de tint.
| Combinação | Ratio | AA Normal | AA Large |
|---|---|---|---|
| Primary / Dark (#F26B3A / #121210) | 6.2:1 | PASS | PASS |
| Cream / Dark (#F5F0E8 / #121210) | 17:1 | PASS | PASS |
| Accent / Dark (#DC2626 / #121210) | 4.5:1 | PASS | PASS |
| Primary / Cream (#F26B3A / #F5F0E8) | 3.8:1 | FAIL | PASS large |
Escala de espaçamento baseada em múltiplos de 4px para consistência visual.
| Nome | Valor | Token |
|---|---|---|
| xs | 8px | --space-xs |
| sm | 16px | --space-sm |
| md | 32px | --space-md |
| lg | 48px | --space-lg |
| xl | 64px | --space-xl |
Tokens de superfície, borda, raio e glass para camadas de interface.
| Token | Valor | Preview |
|---|---|---|
| --border-default | rgba(61,61,54,0.3) | |
| --border-hover | rgba(61,61,54,0.5) | |
| --border-input | rgba(61,61,54,0.4) |
| Token | Valor |
|---|---|
| --blur-heavy | blur(10px) |
| --blur-light | blur(5px) |
Cinco níveis de elevação para hierarquia visual em superfícies claras e escuras.
Curvas de easing e tokens de duração para animações consistentes.
| Nome | Valor | Token |
|---|---|---|
| Spring | cubic-bezier(0.34, 1.56, 0.64, 1) | --ease-spring |
| Smooth | cubic-bezier(0.25, 0.1, 0.25, 1) | --ease-smooth |
| Decelerate | cubic-bezier(0, 0, 0.2, 1) | --ease-decel |
| Accelerate | cubic-bezier(0.4, 0, 1, 1) | --ease-accel |
Camadas de empilhamento para organizar a hierarquia de sobreposição.
| Camada | Token | Valor |
|---|---|---|
| Navigation | --z-nav | 100 |
| Dropdown | --z-dropdown | 200 |
| Overlay | --z-overlay | 300 |
| Modal | --z-modal | 400 |
| Toast | --z-toast | 500 |
Pontos de quebra responsivos e larguras máximas de container.
| Nome | Range | Token | Container max |
|---|---|---|---|
| xs | 0 - 639px | --bp-xs | 100% |
| sm | 640px+ | --bp-sm | 640px |
| md | 768px+ | --bp-md | 768px |
| lg | 1024px+ | --bp-lg | 1024px |
| xl | 1280px+ | --bp-xl | 1200px |
| 2xl | 1536px+ | --bp-2xl | 1400px |