Uma identidade.
Em cada detalhe.

AZUL IDEALE#00ACEECopiar

TÍTULOSPlus Jakarta Sans800 / 700 / 600

LEITURA E INTERFACEInter400 / 500 / 600

Botões SaaS

48 px primário / 44 px contextual

Campos

42 px de altura

Ícone com texto

18 px + gap de 8 px

Ícone isolado

20 px em alvo de 44 × 44 px

Faixas responsivas

720 px / 1100 px

Marca

Azul institucional + azul IDEALE + branco

Logo principal sobre fundo escuro

Branco e azul IDEALE. Uso principal em navegação e áreas institucionais.

Logo principal sobre fundo claro

Azul institucional e azul IDEALE. Uso em superfícies claras.

Assinatura institucional sobre escuro

Logotipo com Sistemas de Gestão ERP, quando o complemento tiver leitura.

Assinatura institucional sobre claro

Identificação institucional sem alterar a proporção do conjunto.

Símbolo em fundo escuro

Aplicação compacta em navegação, avatar e ícone da aplicação.

Símbolo em fundo claro

A mesma geometria, com contraste adequado à superfície.

Área de proteção: altura da letra I

Logotipo completo

Mínimo digital: 90 px de largura

Aplicação impressa

Referência mínima: 25 mm de largura

Avatar / perfil

Símbolo ID sobre azul institucional

Proporção

Redimensionamento proporcional, sem distorção

• Preservar o desenho, os espaçamentos internos e o conjunto da assinatura.
• Usar o símbolo quando o espaço não permitir leitura do logotipo completo.
• Não recompor a marca com a fonte de títulos, aplicar sombras à logo ou inserir contornos.
• Sobre fotografia, reservar uma área visualmente limpa para a marca.

Tema claro

VISÃO GERAL

Informação em foco

Superfícies distintas e espaço para leitura.

Itens de exemplo24Dados demonstrativos

Nome do projeto

Projeto de exemplo

ContinuarVoltar

Tema escuro

VISÃO GERAL

Informação em foco

Superfícies distintas e espaço para leitura.

Itens de exemplo24Dados demonstrativos

Nome do projeto

Projeto de exemplo

ContinuarVoltar

• O tema escuro é a apresentação principal dos SaaS; o tema claro cobre os mesmos componentes e estados.
• A sidebar usa azul institucional nos dois temas. Não inverter automaticamente fotos ou logos.
• A opção Sistema acompanha o dispositivo; a escolha manual de tema fica persistida.
• Mudanças de tema alcançam tabelas, calendários, selects, tooltips, dropdowns, modais e gráficos.
• Cores semânticas sempre acompanham texto, ícone ou rótulo. Uma cor isolada não explica o estado.

As famílias tipográficas são carregadas quando há conexão.

• H1, H2 e H3 seguem a mesma família, peso e escala em sites, blog e SaaS.
• Frase de apoio principal não é label de campo, legenda ou metadado. Cada papel conserva sua escala.
• Quebrar títulos naturalmente. Não diminuir a fonte apenas para forçar o texto em uma linha.
• Inter recebe 500 ou 600 em ênfases funcionais; Sometype Mono não substitui texto de leitura longa.
• A tipografia desenhada dentro do logotipo é parte do arquivo da marca.

• Gutter é o recuo da estrutura; padding é o espaço interno do componente. Não somar os dois por hábito no mesmo nível.
• Título de seção sem apoio: 16 px até o primeiro bloco relacionado. Título e apoio curto: 8 px quando não houver composição própria.
• Cards crescem com o conteúdo; não recebem altura mínima apenas para preencher a tela.
• Bordas finas separam superfícies. Sombras indicam elevação, não decoração repetida.
• Na leitura do blog, o shell usa 32 px de recuo acima de 767 px e 20 px até esse limite. Os pontos de composição não criam outra escala de títulos.

Nenhum ícone encontrado.

• Uma função usa um desenho consistente. Variações de estado mudam rotação, rótulo ou cor sem inventar outro símbolo.
• Pontos de menu e alças de arraste usam círculos sólidos; os demais desenhos seguem o contorno simples.
• Ícones decorativos ficam fora da árvore de acessibilidade. Botões sem texto recebem nome acessível.
• Não substituir ações por emojis ou caracteres tipográficos. Logotipos não pertencem à biblioteca operacional.
• Novos conceitos mantêm viewBox, traço, proporção e dimensões deste conjunto.

• Label até campo: 8 px. Campo até ajuda: 4 px. Erros não alteram a altura da caixa.
• Campos opcionais dispensam indicação extra; obrigatórios usam asterisco com significado claro.
• Ação de mostrar senha conserva alvo de 44 × 44 px junto ao campo de 42 px, sem cobrir a digitação.
• Loading e disabled preservam medidas. Loading bloqueia envio repetido; read-only permite leitura e seleção.

• Estados vazios distinguem ausência de registros, ausência de resultado, falta de permissão e erro.
• Não anunciar sucesso antes de receber confirmação. Preservar dados digitados durante falhas.
• Toast simples é não bloqueante. Erro que pede ação permanece visível e pode ser fechado conscientemente.
• Desfazer só aparece quando houver reversão real da operação.
• Tooltip complementa o nome da ação; informação essencial não fica disponível apenas no hover.

Exemplo de página

GESTÃO E NEGÓCIOS

Informação clara.
Decisões melhores.

Uma chamada principal, apoio direto e um próximo passo bem definido.

Conheça a IDEALE

Fotografia, tela ou imagem
relacionada ao conteúdo.

SEÇÃO DE CONTEÚDO

Um assunto por bloco.

Texto, imagem e ação organizados pela mesma hierarquia.

• Usar o título global sem criar uma escala comercial paralela.
• Priorizar uma promessa por hero. Componentes não interativos não recebem hover que sugira clique.
• Imagens e texto das abas acompanham o fluxo da página, sem saltos de rolagem.
• Depoimentos, preços, telas e números pertencem ao conteúdo aprovado; não são elementos decorativos.
• Footer organiza marca, navegação, canais oficiais e informações institucionais. Links só aparecem com destinos válidos.
• No WordPress, componentes reutilizáveis recebem classes próprias. Widgets HTML usam fragmentos, sem duplicar documento, header ou footer.

Blog IDEALE

GESTÃO E NEGÓCIOS

Conteúdo que ajuda
a decidir melhor.

Uma introdução curta apresenta o assunto e prepara a leitura.

IDEALE Sistemas • Exemplo de composição editorial

CAPA 16:9

Leitura com hierarquia

O artigo mantém texto em Inter e uma coluna de leitura confortável. Títulos organizam os assuntos; imagens e tabelas entram quando ajudam a compreender o conteúdo.

Detalhes bem agrupados

A informação complementar permanece próxima daquilo que explica. Links são identificáveis e o corpo do texto não ocupa a largura inteira do monitor.

Use uma citação quando a origem e o trecho fizerem parte do conteúdo.

• H1, H2, H3 e apoio usam a escala global. Corpo editorial tem entrelinha própria para leitura longa.
• A central reúne destaque, categorias e listagem. O artigo reúne título, apoio, metadados, capa, conteúdo e próximo passo.
• Header, hero externo e footer compartilham o mesmo eixo. Não duplicar espaçadores sob um header no fluxo.
• Em telas estreitas, mover o sumário antes do conteúdo quando a coluna lateral deixar de caber.
• Listas são listas reais; tabelas mantêm cabeçalho e rolagem interna. Citações possuem origem e imagens informativas têm texto alternativo.
• Categorias podem usar detalhe monoespaçado curto. Texto longo permanece em Inter.
• FAQ editorial segue a coluna de leitura, sem inserir um segundo sistema visual.
• Footer de largura total usa o mesmo shell do header.

DOCUMENTO INSTITUCIONAL

PROPOSTA

Clareza em
cada página.

Título, contexto e conteúdo organizados pela identidade IDEALE.

Visão geral

Texto corrido em Inter. Grupos bem definidos e tabelas legíveis.

Próximos passos

Uma sequência clara para consultar, entender e agir.

IDEALE Sistemas 01

APRESENTAÇÃO INSTITUCIONAL

O essencial,
bem apresentado.

Uma mensagem principal por slide.

• PDFs, propostas, relatórios e apresentações usam Plus Jakarta Sans nos títulos e Inter na leitura, conforme a hierarquia global.
• Em páginas fixas, usar a composição desktop como base tipográfica. Na exportação, converter unidades mantendo a proporção, sem interpretar pixels como pontos.
• Documentos de leitura privilegiam fundo claro, texto escuro, títulos institucionais e azul nos destaques. Capas e slides podem usar base institucional escura.
• Manter margens consistentes, cabeçalho e rodapé discretos, identificação da marca e numeração quando houver várias páginas.
• Uma mensagem principal por slide. Tabelas extensas e explicações detalhadas ficam em páginas próprias, sem redução excessiva da fonte.
• PDF final conserva texto selecionável, links úteis, ordem de leitura, imagens sem distorção e fontes incorporadas pela ferramenta de exportação.
• Nas quebras de página, manter títulos com o parágrafo seguinte e evitar linhas órfãs ou rodapés sobrepostos.

Resposta breve

160 ms

Transição de componente

220 ms

Movimento de interface

Até 250 ms, sem bloquear ação

Curva

ease-out

• Tokens usam nomes de função: texto, superfície, borda, ação e estado. Evitar cores literais dispersas em cada componente.
• Títulos referenciam h1, h2 e h3; a frase de apoio referencia support. Redes sociais usam postType e reelType.
• Componentes reutilizam a mesma anatomia e oferecem variações explícitas. Regras de negócio não ficam embutidas no tema.
• CSS exportado contém a base visual, não rotas ou funcionalidades. A geometria dos ícones está na mesma especificação JSON.
• Persistir preferências de interface sem dados sensíveis. Tratar falha do armazenamento local sem quebrar a navegação.