Identidade Visual PhytonSystem
Um único sistema de marca para o site, o ERP, os aplicativos e todos os produtos do ecossistema. Símbolo, logos, ícones exclusivos, tokens e componentes prontos para reutilização.
01 · Marca
Símbolo e versões da logomarca
O símbolo é um hexágono de circuito com a serpente estilizada — tecnologia e continuidade. Sempre aplicar com área de respiro equivalente à metade da altura do símbolo.
Marca d'água. Aplicação a 12% de opacidade em relatórios, propostas e fundos de apresentação. Nunca sobrepor a textos de leitura.
Usos proibidos
- Distorcer, inclinar ou girar o símbolo
- Trocar o gradiente por outras cores
- Aplicar sombras, contornos ou brilhos extras
- Usar a versão gradiente sobre fundos claros de baixo contraste
- Reescrever o wordmark com outra tipografia
02 · Arquivos
Ícones de aplicação e downloads
Todos os formatos oficiais já publicados no domínio: favicon, app icons Android e iOS, PWA, Windows, avatar social e vetores.
Favicon 32Aba do navegador
Favicon 48Alta densidade
Ícone oficial 512Ícone institucional
App Icon Android 192Android / PWA
App Icon Android 512Android / PWA
Maskable 512PWA adaptativo
App Icon iOS 180iPhone / iPad
Windows Tile 150Windows
Windows Tile 310Windows
Avatar Social 1024Redes sociais
Símbolo SVGVetor editável
Marca d'água SVGDocumentos e relatórios03 · Cores
Paleta oficial
Tokens semânticos em oklch definidos em src/styles.css. Nenhum componente deve usar cores fixas fora destes tokens.
Preto Profundo
#0B1016 · var(--background)
Fundo principal de todas as telas
Grafite
#182028 · var(--surface)
Cards, painéis e superfícies elevadas
Grafite Claro
#20293355 · var(--surface-2)
Chips, inputs e camadas internas
Ciano Phyton
#22D3EE · var(--primary)
Cor primária da marca, CTAs e destaques
Ciano Glow
#67E8F9 · var(--primary-glow)
Gradientes, brilhos e estados hover
Azul Profundo
#0EA5E9 · var(--chart-4)
Final do gradiente e gráficos
Branco
#F7FAFC · var(--foreground)
Textos principais
Cinza Texto
#A3B0BF · var(--muted-foreground)
Textos de apoio e legendas
Vermelho Alerta
#E5484D · var(--destructive)
Erros e ações destrutivas
04 · Tipografia
Space Grotesk + Inter
Space Grotesk para títulos e números; Inter para textos, interface e formulários.
PhytonSystem
Display / H1
Space Grotesk · 700 · 48–60px
tracking -0.02em
PhytonSystem
H2
Space Grotesk · 600 · 32–40px
tracking -0.01em
PhytonSystem
H3
Space Grotesk · 600 · 24px
tracking normal
PhytonSystem
Corpo
Inter · 400 · 16px
tracking normal
PhytonSystem
Apoio
Inter · 400 · 14px
tracking normal
PhytonSystem
Legenda / Label
Inter · 500 · 12px
tracking 0.08em
05 · Estrutura
Espaçamento, raios e grid
Escala base de 4px. Container máximo de 1280px com padding lateral de 16px (mobile) e 24px (desktop).
Escala de espaçamento
Raios de canto
Grid de 12 colunas
Gutter 16–24px · Breakpoints sm 640 · md 768 · lg 1024 · xl 1280
06 · Ícones
Biblioteca exclusiva PhytonSystem
Grid 24px, traço 1.7, pontas arredondadas e gradiente ciano opcional. Todos desenhados no mesmo padrão da logomarca.
import { PhytonIcon } from "@/brand/icons"; <PhytonIcon name="phyton-guard" gradient />
07 · Componentes
Botões, cards e inputs
Variantes oficiais aplicadas em todos os produtos do ecossistema.
Botões
Inputs
Card padrão
Superfície grafite com borda sutil, raio 20px e sombra de elevação.
Card glass
Vidro fosco com blur, usado sobre gradientes e áreas hero.
Card destaque
Card com glow ciano para planos, CTAs e conteúdo prioritário.
08 · Dados
Tabelas
Cabeçalho em caixa alta discreta, linhas com hover e tipografia tabular para números.
| Produto | Categoria | Status | Usuários |
|---|---|---|---|
| Phyton One | ERP | Ativo | 1.284 |
| Phyton Guard | Segurança | Ativo | 612 |
| Phyton Ponto | Jornada | Ativo | 938 |
| Phyton VoIP | Telefonia | Em breve | — |
09 · Feedback
Badges e alertas
Comunicação de status curta e consistente em todos os sistemas.
Badges
Informação
Sucesso
Atenção
Erro
10 · Elevação
Sombras e gradientes
Profundidade discreta: sombras escuras difusas e glow ciano apenas em elementos de conversão.
Sombras
Elevação de cards
Glow de CTAs e destaques
Gradientes
--gradient-primary
Botões, ícones e a marca
--gradient-hero
Fundo de seções hero
brand-deep
Símbolo, app icons e social
11 · Interação
Estados dos componentes
Transições de 200ms com easing suave. Foco sempre visível para acessibilidade.
| Estado | Regra visual | Exemplo |
|---|---|---|
| Default | Cor sólida do token, sem sombra extra | |
| Hover | Opacidade 90% + leve elevação (translateY -1px) | |
| Active | Escala 0.98, sem glow | |
| Focus | Anel de 2px na cor primária com offset | |
| Disabled | Opacidade 50%, cursor bloqueado | |
| Loading | Rótulo mantido com indicador e pointer-events off |
Pronto para modernizar sua operação?
Fale com nosso time e descubra qual combinação de soluções PhytonSystem gera mais resultado para o seu negócio.