Identidade & Logo
Os elementos que carregam a marca: símbolo, wordmark e como aparecem juntos.
Tamanho mínimo recomendado: 24px em contextos digitais. Em peças impressas, manter a proporção entre símbolo e wordmark.
- Nunca recolorir o símbolo — manter a cor primária da marca.
- Manter espaço em branco mínimo igual à altura do símbolo em todos os lados.
- Não distorcer, rotacionar ou alterar as proporções.
- Em fundos coloridos, usar a versão sobre fundo claro com tarja branca.
Voz
Como a marca se comunica — o tom, as regras e os exemplos.
My Box DS communicates with restraint and clarity.
The body voice. Warm and unhurried.
Lotar agendas com método, não com sorte.
Explodir suas vendas hoje!!
Lotar agendas com método
Lotar Agendas com Método™
A 7Tima é a agência que lota agendas de clínicas médicas com método, não com sorte.
A MELHOR agência de marketing médico!!
Estratégia de marketing médico
MARKETING MÉDICO DE PONTA
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).