Marca, tokens, componentes e padrões da Loymaker, tudo que uma página, um post ou uma apresentação precisa para parecer Loymaker sem a gente refazer nada a cada peça.
Quatro regras para decidir quando o caso não estiver aqui.
Amarelo uma vez por tela
O amarelo aponta o que importa na tela, que normalmente é o botão primário, o símbolo ou uma palavra, então quando ele toma conta de tudo ele deixa de apontar.
--brand só em fundo, nunca texto no claro
Sênior falando com dono de negócio
A gente escreve curto, em segunda pessoa, com prazo e com o nome da entrega (Playbook, Key Visual, 12 posts), e deixa o jargão de agência de fora.
"Quero meu Starter Kit", nunca "Enviar"
Preço só no bloco de preço
O valor não entra no menu, no hero nem no anúncio, e a urgência só entra quando a data final existe de verdade.
price · único lugar com R$
Feito para o polegar
Tudo nasce a 390 px e só depois cresce para o desktop, com alvos de 44 px, CTA visível sem rolar e barra fixa no rodapé do celular.
mobile primeiro, min-width depois
Fundamentos
Marca
O wordmark "Loy / maker" e o balão amarelo. Nas versões oficiais o balão é sempre #F7D101, e o logo é sempre o arquivo, nunca um desenho novo.
Fundo claroloymaker-logo.png
Fundo escuroloymaker-logo-branco.png
Fundo azulloymaker-logo-branco.png
Área de proteção: a altura do balão em volta do logo (o tracejado). Tamanho mínimo de 96 px de largura para o logo e 20 px para o símbolo.
Símbolo
e a versão para fundo amarelo, que ainda não existe no manual
Sobre amarelo (sugestão, não oficial)logo todo preto
Avatar, favicon, cantoloymaker-simbolo.png
Fundo vermelholoymaker-logo-branco.png
Não faça
o que quebra a marca
×Não mude a cor do balão nem aplique filtro ou gradiente.
×Não distorça, redimensione só na proporção original.
Loymaker
×Não escreva o nome com fonte no lugar do logo.
Fundamentos
Cor
A primária amarela e as três secundárias do manual 2.0. O contraste ao lado de cada amostra é calculado na hora contra o preto e contra o papel, com isso dá para ver na mesma tela onde cada cor pode ser texto e onde não pode. Toque em uma amostra para copiar.
Marca e estado
Copiar como
Neutros
os mesmos nomes nos dois temas
Token
Preto
Papel
Uso
Apoio: cor como texto
versões -ink mudam por tema
Token
Preto
Papel
Uso
Fundamentos
Tipografia
Três famílias, cada uma com o seu papel. A Swis721 BlkEx BT do manual vive só no logo, e na web quem faz o display é a Unbounded, que tem o mesmo peso e não custa licença. Nenhum texto fica abaixo de 11 px, e campo de formulário usa 16 px por causa do zoom do iPhone.
Aa
Unbounded
Display: títulos, números de impacto e nome de produto, em 500, 700 e 900.
--display
Aa
Manrope
Texto: tudo que se lê, com os botões em 700. Pesos de 400 a 700.
--body
Aa
JetBrains Mono
Rótulos: eyebrows, tags e o preço na navegação, só no peso 500.
--mono
Hero46 / 900 / -0,03em
Sua marca pronta em 15 dias.
Display48 / 700 / -0,02em
Você reconhece?
Title32 / 700
O Starter Kit é três coisas
Heading22 / 700
Playbook do seu negócio
Lead18 / 400 / 1,6
Playbook, Key Visual, 12 posts prontos e uma IA que escreve como a sua marca.
Body16 / 400 / 1,6
Nada avança sem o seu ok. Cada etapa passa pela sua aprovação.
Small14 / 400
Pagamento único. Sem mensalidade.
Eyebrow12 / mono / caixa alta / 0,14em
O método
Label11 / mono / 0,1em
Etapa 01
Valor40 / 900 / tabular
12x R$ 420 ou R$ 4.490
Fundamentos
Espaço e forma
Escala de 4 px, pílula nos botões, 14 px nos cartões e sombra só no que flutua mesmo. Grupos usam gap, nada de margem solta entre irmãos.
Espaçamento
--sp-*
Raios
--r-*
sm · 6 tags
md · 12 campos
base · 14 cartões
lg · 18 pilares, preço
pill botões, chips
Elevação
--sh-*
Planosó borda · cartão comum
Card--sh-card · destaque, vídeo
Pop--sh-pop · preço, menus
Container
1120 px de largura máxima, gutter de 16 a 40 px (clamp).
--container · --gutter
Seções
64 px de padding vertical no celular, 80 no desktop, 96 no hero e no fechamento.
--sp-16 · --sp-20 · --sp-24
Texto corrido
Largura máxima de 760 px (cerca de 65 caracteres). Um H1 por página.
--measure
Fundamentos
Movimento
Movimento curto, só com transform e opacity. O botão sobe 2 px no hover e encolhe no toque, e nada bloqueia o próximo clique. Toque em "Testar" para ver cada curva.
Rápido--dur-fast · 140 ms
Padrão--dur · 250 ms · (.2,.8,.2,1)
Lento--dur-slow · 350 ms
Durações
140 ms para hover e cor, 250 ms para transform de botão e acordeão, e 350 ms para folhas, modais e troca de tema.
Regras
O feedback começa no toque, não no soltar. Uma cascata por tela, só no hero, com 30 a 50 ms entre itens. O contador não anima dígito, e quem pede menos movimento leva corte seco.
Componentes
Ações
O botão diz o resultado na voz do cliente, afinal de contas é "Quero meu Starter Kit" e não "Enviar". Um primário por tela, em pílula, Manrope 700 e 44 px de altura.
Três embaixo do CTA do hero: prazo, pagamento, aprovação.
Não são botões: sem hover, sem link.
Chip amarelo: um por tela, para o nome do produto.
Eyebrow
Mono, caixa alta, traço amarelo de 18 px.
Duas ou três palavras acima de todo título de seção.
--mono--fg-3--brand-ink
Componentes
Conteúdo
Cartão para dores e pilares, acordeão para as etapas do método e FAQ para perguntas. Divisória fina em tudo, sem borda colorida na lateral e sem emoji fazendo papel de ícone.
Card
pilar de entrega
card / pilar
01
Playbook do seu negócio
Personas, posicionamento, canais e linhas editoriais.
02
Primeiro mês pronto
Key Visual, 12 posts, 4 Reels e calendário.
03
IA que aprende a marca
Cérebro da marca, com fluxos e prompts.
Anatomia
Fundo bg-2, borda line, raio 18 px, padding 16 a 24 px.
Número em Unbounded 900 amarelo, título em heading, texto em small.
Só o pilar em destaque leva sombra, e no máximo um por grade.
Não faça
Borda colorida à esquerda, emoji no lugar do número, sombra em todos.
--bg-2--line--r-lg--sh-card
Accordion e FAQ
etapas e perguntas
accordion / faqtente
01Diagnóstico da presença digital
Onde a marca está hoje: perfis, site, anúncios.
02Benchmark de concorrentes
Quatro concorrentes auditados.
03Jornada do cliente
Onde o lead trava e onde converte.
Em quanto tempo fica pronto?
15 dias úteis a partir do briefing de 45 minutos.
Vocês publicam os posts?
Não. Entregamos tudo editável no Canva, com calendário.
E se eu quiser mudar algo?
Cada etapa tem uma rodada de ajustes incluída.
Accordion
Para sequências reais, como as etapas e o cronograma, e fechado por padrão.
Número mono amarelo, título Unbounded 700, chevron gira 180°.
FAQ
Até nove perguntas, na ordem em que o cliente faz. Resposta em três frases com um fato.
Sinal de mais vira x. Largura máxima 760 px.
--line--brand-ink--touch
Componentes
Oferta
O bloco de preço é o único lugar da página (e do anúncio) onde o valor aparece, sempre em formato brasileiro, com número tabular e o valor de tabela riscado por cima.
Eyebrow amarelo, tabela riscada em red-ink, parcela em Unbounded 900 40 px, à vista com número amarelo, contador mono, lista com check, botão de largura total, nota de aprovação.
Regras
Contador só com data final real, atualizando a cada segundo sem animar.
R$ 4.490, 12x R$ 420. Nunca "a partir de".
Largura máxima 460 px, raio 18, sh-pop.
--red-ink--brand-ink--sh-poptabular-nums
Componentes
Navegação
Barra fixa translúcida com blur, logo à esquerda, preço em mono e WhatsApp à direita. No celular o CTA se repete em uma barra fixa no rodapé.
Fundo nav-glass (preto a 82% ou papel a 86%) com blur de 14 px e borda inferior line.
Logo com 28 px de altura, branco no tema Preto, preto no Papel.
Preço some abaixo de 520 px.
Regras
Sem menu de seções na landing: a página é uma rolagem só.
Toda chamada leva ao WhatsApp com mensagem pré-preenchida.
--nav-glass--line--mono-note
Padrões
Landing de venda
Oito blocos, nesta ordem, e a referência é a landing do Starter Kit que está no ar. Preto como base, uma ou duas faixas em papel para dar respiro e o preço em um bloco só.
01 Nav
02 Hero + vídeo
03 Marcas
04 Dores
05 O que é + método
06 Prova
07 Preço
08 Loymaker, FAQ, fim
Hero
Badge em mono, H1 em hero, lead, botão primário, nota de WhatsApp e três chips, com o vídeo da Camila ao lado em raio 14 e sombra. O CTA aparece sem rolar, inclusive no celular.
Prova
O antes e depois de um cliente em texto, páginas de um Starter Kit entregue e a lista de clientes. Resultado aqui é orçamento e venda, seguidor não conta.
Fechamento
Quem somos (desde 2006, São Paulo e Mogi), FAQ com até nove perguntas e o CTA final. No celular entra a barra fixa com o botão primário.
Padrões
Estados
Cor nunca vem sozinha, todo estado tem texto junto, e o erro diz o que aconteceu e como resolver.
·
Vazio
Uma frase em fg-2 dizendo o que vai aparecer ali, mais um botão fantasma com o próximo passo.
…
Carregando
Skeleton em bg-3 com raio 6, sem spinner, e só aparece depois de 300 ms pra não piscar.
!
Erro
Texto em red-ink com o que aconteceu e como resolver, nunca só a palavra "erro".
✓
Sucesso
Mensagem em fg com o check amarelo, porque no sistema não existe verde de sucesso.
Padrões
Materiais
Fora da web a marca segue o manual 2.0, com fundo preto, títulos em display, o balão no canto e as cores secundárias em blocos inteiros.
Paleta e padrões gráficos: asterisco e xadrez em blocos de corCapa e abertura: gradiente vermelho, laranja e amarelo com grãoAplicações: sobre foto escura, sobre claro, símbolo e wordmark empilhadoTipografia do manual: Swis721 BlkEx BT, hoje só no wordmark
Apresentações e Playbook
Fundo preto, Unbounded nos títulos, Manrope no corpo, o símbolo no canto superior direito e uma linha fina separando o cabeçalho, como nas páginas do manual.
Posts
Uma cor de fundo por post (amarelo, azul, vermelho ou preto), texto na cor "on" correspondente e no máximo duas famílias por peça.
Capa
O gradiente do manual com grão e o logo branco no canto inferior direito. Esse gradiente não entra em botão, cartão nem texto.
Padrões
Voz
Equipe sênior falando com dono de negócio, direta e próxima, sem jargão, em segunda pessoa, com frases curtas e promessa com prazo.
Assim
"Estratégia, identidade e o primeiro mês de conteúdo da sua marca. Prontos em 15 dias."
"Nada avança sem o seu ok."
"Uma IA que aprende a sua marca."
Assim não
"Soluções inovadoras de marketing 360°."
"Feito por IA." (a IA aqui é ferramenta nas mãos de gente experiente, e é assim que a gente fala dela)
"Clique aqui", "Enviar", "Saiba mais".
Palavras da casa
Starter Kit, Playbook, Key Visual, Cérebro da marca, Jeito Startup e desde 2006, sempre com inicial maiúscula e sem aspas.
Números
R$ 4.490, 12x R$ 420, 15 dias úteis. E sem travessão em texto nenhum, o lugar dele é da vírgula, dos dois-pontos ou do ponto.
Referência
Acessibilidade
Faça
Texto 4,5:1 nos dois temas; 3:1 a partir de 24 px.
Foco visível: 2 px sólido em focus, offset 2 px.
Alvo de toque 44 px; campos 46 px em 16 px.
Todo controle por teclado; nada essencial atrás de hover.
lang="pt-BR", um H1, vídeo com título e legenda.
Não faça
Amarelo como texto sobre papel (2,3:1).
Azul #222FE6 como texto sobre preto (2,5:1): use blue-ink.
Laranja como texto sobre papel (3:1).
Placeholder na cor do texto digitado.
Referência
Tokens
As variáveis CSS do sistema, prontas para colar, com o tema Preto no :root e o tema Papel em [data-theme="light"].
Referência
Versões
1.0Sistema inicial a partir do manual 2.0 e da landing do Starter Kit: marca, cor, tipografia, espaço, movimento, oito componentes, padrões de landing, estados, materiais e voz.
0.1Manual Loymaker 2.0: paleta, Swis721 BlkEx BT, aplicações do logo.
