Identidade & Logo
Os elementos que carregam a marca: símbolo, wordmark e como aparecem juntos.
guiaderodas
guiaderodas
guiaderodas
Tamanho mínimo recomendado: 24px em contextos digitais. Em peças impressas, manter a proporção entre símbolo e wordmark.
- Nunca usar o texto 'guiaderodas' sem o PIN — o pin é parte indissociável da marca.
- Nunca usar o logo sobre fundos coloridos sem aplicar uma tarja branca atrás (cálculo: somar 15,5% de largura e 37,2% de altura no logo horizontal).
- Não distorcer, esticar ou alterar o logo de qualquer maneira — sempre respeitar as proporções (21,6% ícone + 5,2% espaçamento + 73,2% fonte na versão horizontal).
- Não aplicar drop shadow, bevel ou qualquer efeito visual sobre o logo.
- Tamanho mínimo digital: 40,33px de altura · impresso: 2,15cm de altura.
Voz
Como a marca se comunica — o tom, as regras e os exemplos.
O Guiaderodas é um guia colaborativo destinado à busca e avaliação da acessibilidade de estabelecimentos para pessoas com dificuldade de locomoção.
Temos como motivação proporcionar informações de qualidade sobre acessibilidade para uma vida mais autônoma e inclusiva.
Avaliamos, certificamos e indicamos estabelecimentos com acessibilidade real para pessoas com mobilidade reduzida — porque uma ideia boa é boa para todos.
Pessoa com deficiência (PCD)
Deficiente / portador de necessidades especiais
Usuário de cadeira de rodas / cadeirante
Preso à cadeira de rodas / aleijado / inválido
Edificação certificada pelo selo Guiaderodas
Lugar adaptado para deficientes
Acessibilidade é direito (LBI 13.146/2015)
Ajudar quem tem necessidades especiais
Cores primárias
As cores principais da marca e a hierarquia de superfícies que a sustenta.
- Cor primária — CTAs, links, estados interativos e selo de marca.
- Cor de suporte — variante para hover, ícones e destaques sutis.
- Cores são expostas como tokens CSS (
var(--brand-200)) — nunca hardcode hex.
Aplicação prática
Como o sistema visual da marca aparece nos entregáveis estáticos do Método CLQ — conteúdo, identidade de perfil e tráfego pago.
- Cada slot é um placeholder usando os tokens da marca (cores, fontes, wordmark, tagline) — quando a peça real é produzida, substituir a imagem via produção.
- Wordmark e tagline aparecem como slots dinâmicos (
DS:WORDMARK,DS:TAGLINE) — herdam do config do cliente. - Cores alternam entre
--brand-200e--bg-000para mostrar o sistema em superfícies escuras e claras.
Cores de apoio
Acentos que complementam a marca — usados com parcimônia, nunca como cor principal.
--accent-pro— superfícies premium, badges editoriais, peças impressas.--accent-100— contextos complementares, variações tonais, destaques pontuais.- Acentos nunca substituem a cor primária da marca em CTAs ou estados interativos principais.
Cores semânticas
Cores que carregam significado de estado — usadas em feedback de UI, nunca como decoração.
--success— confirmações, KPIs positivos, status concluído.--warning— alertas, pendências, status em andamento.--danger— erros, falhas, ações destrutivas.- Estados nunca decoram — só comunicam significado.
Cores de texto
Quatro níveis de hierarquia tipográfica — do título de alto contraste ao texto muted de divisores.
--text-100— títulos e texto de alto contraste sobre fundos claros.--text-200— corpo de texto e parágrafos.--text-400— captions, metadados, placeholders.--text-500— divisores, ícones secundários e elementos desativados.
Tipografia
As famílias tipográficas da marca e a escala que sustenta hero, body e legendas.
| Estilo | Fonte | Tamanho | Peso | Line height |
|---|---|---|---|---|
| display-xl | --font-heading | clamp(2.5–5.5rem) | 500 | 1.0 |
| display-l | --font-heading | clamp(2–3.5rem) | 500 | 1.05 |
| body-large | --font-ui | 1.125rem (18px) | 400 | 1.55 |
| body | --font-ui | 1rem (16px) | 400 | 1.55 |
| legenda | --font-ui | 0.8125rem (13px) | 400 | 1.4 |
Espaçamento, bordas e sombras
Os três pilares de ritmo visual da marca: o espaço entre os elementos, o arredondamento das formas e a elevação das superfícies.
Base 4px. sp-4 (16px) é o padding padrão de componente. sp-6 (24px) é o gap padrão entre seções.
Inputs em sm. Botões em base. Cards em md. Modais em lg. Badges e CTAs pílula em pill.
Tom quente escuro (near-black), nunca preto puro ou cinza frio. Opacidade baixa preserva legibilidade em superfícies claras e escuras.
Config
Editor completo do DS — todos os slots editáveis. Exporte o config.json quando terminar e suba no GitHub.
Faça upload de PNG/JPG/SVG ou cole código SVG diretamente — o logo muda na sidebar em tempo real.
Uma regra por linha. Aparecem na Página 1 (Identidade & Logo → Regras de uso).
Valores dark — usados quando dark mode está ativo.
Paleta estendida. Um por linha no formato Nome|#HEX. Aparecem em Cores de apoio.
Digite o nome exato da Google Fonts e pressione Enter ou clique Carregar.
Um par por linha no formato FAÇA|NÃO FAÇA.
Um por linha no formato Título|Descrição.
Aparece nos placeholders de Aplicação prática (peças que mostram autor/contato).
Baixa o config.json com todos os valores atuais (schema v1).