Identidade visual
Como a Forklin aparece: a logo, as cores, a tipografia e os elementos que já vivem no painel, reunidos em um guia único com arquivos prontos para baixar.
Quatro regras que guiam tudo
Vieram do brand spec do projeto e da direção visual aprovada. Se uma decisão visual não cabe aqui, provavelmente não é Forklin.
O símbolo e o nome
O símbolo é um hexágono cortado em três módulos que se encaixam: tinta, índigo e ciano em degradê. O nome “forklin” é um letreiramento próprio, em minúsculas, com uma estrela ciano no lugar do pingo do “i”.
Logo principal
Símbolo e nome lado a lado. É a versão padrão; use-a sempre que houver espaço. Todos os arquivos têm fundo transparente.
Símbolo
Para espaços pequenos e quadrados: avatar, favicon, ícone de app. Abaixo de 16 px o símbolo perde as frestas entre os módulos.
Nome
Só o letreiramento, para quando o símbolo já aparece em outro ponto da peça.
Construção
Área de proteção, tamanho mínimo e anatomia do símbolo.
Usos incorretos
Evite sempre. Se a logo não funciona num fundo, troque a versão, não a logo.
Paleta Forklin
As quatro cores da marca saem direto da logo. As de interface são as que o painel já usa hoje. Clique em qualquer cor para copiar o HEX.
Marca
Cores da logo. Navy é a cor institucional: o fundo da navegação do painel.
Interface
Cores do painel para ação, foco e a barra de assinatura.
Neutros
Superfícies, linhas e texto de apoio.
Degradês
Só dois, ambos já existentes. Não crie outros.
Estados
Verde, âmbar e vermelho aparecem somente para comunicar status, sempre em par fundo claro + texto escuro.
Verde #00846A sobre #ECF7F1 · Azul #004397 sobre #EAF2FF · Âmbar #A56811 sobre #FCF5E9 · Vermelho #CE313C sobre #FCEDEF · Cinza #5F6B78 sobre #EEF1F4
Proporção de uso
Uma referência para equilibrar as peças: muito claro, um bloco de navy e poucos acentos.
Contraste
Razão de contraste calculada pelo método WCAG. Para texto normal o mínimo é 4,5:1; para texto grande (a partir de 18 px em negrito ou 24 px), 3:1.
Tokens CSS
Copie para o projeto. Os nomes seguem o padrão --forklin-*.
Montserrat
A família que o painel já usa em todas as telas. Geométrica, legível em tamanhos pequenos e com peso suficiente para títulos. Para dados técnicos (IDs, logs, código) use a fonte monoespaçada do sistema.
Google Fonts, licença aberta (OFL)
Escala
Medidas extraídas das telas do painel.
O nome “Forklin” em texto corrido é sempre com F maiúsculo. A grafia em minúsculas (“forklin”) só existe dentro da logo.
Como a marca aparece na interface
Poucos elementos e sempre os mesmos: a barra de assinatura sob o título, azul de ação nos botões, cantos de 9 a 10 px e linhas finas em vez de sombras pesadas.
Botões e filtros
Tabela operacional
| Organização | Plano | Status |
|---|---|---|
OAOrganização AlfaContrato vigente | Profissional | Ativo |
OBOrganização BetaEm implantação | Essencial | Em andamento |
OGOrganização GamaPagamento pendente | Profissional | Atenção |
Nomes e planos acima são só ilustrativos.
Peças prontas
Avatares, ícones e imagens de capa já compostos com a logo oficial. Sem frases ou números, de propósito: só a marca.
Editor de logo
Monte a logo do jeito que a peça pede: versão, cores de cada módulo, fundo, margem e tamanho final. A pré-visualização é o arquivo que você vai baixar.
Versão
Cores
Fundo
Tamanho e posição
Efeitos
Exportar
Tirar fundo
Funciona melhor com fundos lisos: logos, prints, produtos em fundo branco. Use a remoção automática e acerte os detalhes com a varinha e o pincel.
Imagem
Remoção automática
Desmarque para apagar a cor em toda a imagem, inclusive dentro de letras como “o” e “a”.
Ajuste manual
Acabamento
Exportar
Redimensionar imagens
Mude o tamanho de uma ou várias imagens de uma vez, com redução em etapas para não serrilhar. Os tamanhos prontos cobrem redes sociais e ícones.
Imagens
Novo tamanho
A outra medida acompanha a proporção de cada imagem.
Exportar
Testar fontes
Compare fontes lado a lado com o seu texto e com o símbolo da Forklin. Montserrat é a fonte oficial; as outras vêm do Google Fonts ou de um arquivo seu.
Texto
Estilo
Fontes
Arquivos .ttf, .otf, .woff ou .woff2. Ficam só nesta sessão.
Glassmorphism
Monte um cartão de vidro fosco sobre as cores da marca ou sobre uma imagem sua. Baixe a peça em PNG ou copie o CSS para usar no site e no painel.
Formato
Fundo
Vidro
Tamanho e posição do cartão
Conteúdo
Exportar
Meus arquivos
Peças que você salvou a partir das ferramentas, com “Usar em…” e depois “Salvar em Meus arquivos”. Ficam guardadas neste navegador; cole uma imagem aqui (Ctrl+V) para guardá-la também.