Cor
A paleta cósmica Uranus — Azul Profundo, Azul Marinho, Azul Turquesa, Lilás Claro — e os gradientes que as unem.
Cor é a decisão mais carregada da marca Uranus. O manual 2026 a enquadra assim:
"A identidade visual utiliza uma escala cromática baseada em tons cósmicos para reforçar sua autoridade tecnológica. A combinação entre o preto, o azul marinho e o turquesa permite a criação de gradientes com profundidade tridimensional."
Cada rampa é expressa em hex nos stops da marca e interpolada suavemente entre eles, de modo que os gradientes cosmic, aurora, nebula e galaxy permaneçam fiéis à marca em qualquer ângulo.
Paleta da marca
| Nome | HEX | Token | Variável CSS | Papel |
|---|---|---|---|---|
| Azul Profundo | #000328 | brand.950 | --color-brand-950 | Espaço profundo / superfícies escuras |
| Azul Marinho | #082d71 | brand.800 | --color-brand-800 | Wordmark, CTA primário, trilhas de foco |
| Azul Turquesa | #5dddfa | brand.400 | --color-brand-400 | Acento, anel de foco, destaques, brilhos |
| Lilás Claro | #f8ddfc | accent.200 | --color-accent-200 | Highlight decorativo, halos |
| Preto Clássico | #000000 | neutral.950 | --color-neutral-950 | Preto base |
| Branco Puro | #ffffff | neutral.50 | --color-neutral-50 | Branco base |
Além dos seis stops fixos da marca, as rampas brand e accent expõem onze passos (50–950) ajustados à mão para gradientes e estados de hover.
Tokens semânticos
Consuma cores por tokens semânticos, nunca por passos brutos da rampa. Isso mantém modo escuro, alto contraste e futuros rebrands livres.
| Semântico | Mapeia para | Claro | Escuro |
|---|---|---|---|
background | superfície | neutral.50 | brand.950 |
foreground | texto | brand.950 | neutral.50 |
primary | CTAs | brand.800 (Azul Marinho) | brand.400 (Azul Turquesa) |
accent | destaques | brand.400 (Azul Turquesa) | brand.400 |
highlight | decorativo | accent.200 (Lilás Claro) | accent.200 |
ring | foco | brand.400 | brand.400 |
destructive | erros | danger.600 | danger.500 |
success / warning | status | success.600 / warning.500 | success.400 / warning.400 |
<button className="bg-primary text-primary-foreground focus-visible:ring-2 focus-visible:ring-ring">
Entrar na Uranus
</button>Gradientes
Os gradientes da marca vivem como variáveis CSS e são expostos como utilitários do Tailwind (bg-cosmic, bg-aurora, bg-nebula, bg-galaxy, bg-horizon, bg-halo). São o fundo preferido para hero moments, telas de login e superfícies de brand storytelling.
<section className="bg-cosmic text-white">
<h1 className="font-display text-5xl">Bem-vindo ao universo Uranus</h1>
</section>
<section className="bg-aurora text-white">...</section>
<section className="bg-nebula text-white">...</section>| Utilitário | Stops | Use para |
|---|---|---|
bg-cosmic | #000 → #000328 → #082d71 | Hero principal, superfícies de login |
bg-aurora | Radial turquesa + radial marinho sobre espaço profundo | Painéis de destaque, empty states |
bg-nebula | #000328 → #082d71 → #5dddfa → #f8ddfc | Brand storytelling, marketing |
bg-galaxy | #000 → #000328 → #5dddfa | Banners de chamada |
bg-horizon | #082d71 → #000328 | Cards sutis em superfícies escuras |
bg-halo | Radial lilás de highlight | Brilho focal suave aplicado sobre outros gradientes |
Uso incorreto
Do manual de marca: evite pares amarelo+azul ou âmbar+azul fora de contextos muito específicos, nunca recoloque o logo em laranja ou verde, e não substitua o turquesa por aqua/teal. Na dúvida, use marinho sobre branco ou branco sobre cósmico.