| cor.fundo | #ffffff | confirmado | site: --color-background do color-scheme-1 do tema (fundo de todas as páginas e do cabeçalho), dembrandt 0.37.0 e leitura do tema em 30/09/2026; o logo também é aplicado sobre branco | |
| cor.texto | #1a191a | confirmado | logo: letras 'Farm Coffee' e 'Minas Gerais' (#1a191a, 69% dos pixels do PNG do site); o tema usa #121212 no --color-foreground, praticamente o mesmo tom | |
| cor.marca | #5d332b | confirmado | logo: grãos de café do símbolo (#5d332b, 27% dos pixels do PNG do site, medido com medir-imagens.mjs em 30/09/2026) | |
| cor.destaque | #948650 | confirmado | site: --color-button do color-scheme-1 (fundo dos botões 'Conheça nossos cafés' e 'Saiba Mais' e da janela de frete), dembrandt 0.37.0 e leitura do tema em 30/09/2026 | |
| cor.faixa | #d5c792 | confirmado | site: --color-background do color-scheme-5 (barra 'KITS em PROMOÇÃO' e faixa de cupom do topo), leitura do tema em 30/09/2026 | |
| cor.creme | #f8f5ec | proposto | proposta LUQZ: cerca de 15% da faixa #d5c792 misturada ao branco | superfície quente para alternar seções e fundo de cartão (origens, o que vem no kit, FAQ) sem sair da família dourada que a loja já usa; o site hoje é branco e cinza #f3f3f3 do tema, o que a auditoria de 29/09 leu como 'catálogo', não café especial; fica tão claro que o texto mantém 16:1 |
| cor.marca-50 | #fff2ef | derivado | derivado: família de tons OKLCH de cor.marca, passo 50 | |
| cor.marca-100 | #fce1db | derivado | derivado: família de tons OKLCH de cor.marca, passo 100 | |
| cor.marca-200 | #ecc7bf | derivado | derivado: família de tons OKLCH de cor.marca, passo 200 | |
| cor.marca-300 | #d4a89f | derivado | derivado: família de tons OKLCH de cor.marca, passo 300 | |
| cor.marca-400 | #b9877d | derivado | derivado: família de tons OKLCH de cor.marca, passo 400 | |
| cor.marca-500 | #996a60 | derivado | derivado: família de tons OKLCH de cor.marca, passo 500 | |
| cor.marca-600 | #7d5047 | derivado | derivado: família de tons OKLCH de cor.marca, passo 600 | |
| cor.marca-700 | #5d332b | derivado | derivado: cor.marca (âncora no passo 700) | |
| cor.marca-800 | #46221b | derivado | derivado: família de tons OKLCH de cor.marca, passo 800 | |
| cor.marca-900 | #2e100b | derivado | derivado: família de tons OKLCH de cor.marca, passo 900 | |
| cor.destaque-50 | #faf5e2 | derivado | derivado: família de tons OKLCH de cor.destaque, passo 50 | |
| cor.destaque-100 | #efe8cc | derivado | derivado: família de tons OKLCH de cor.destaque, passo 100 | |
| cor.destaque-200 | #dbd1ab | derivado | derivado: família de tons OKLCH de cor.destaque, passo 200 | |
| cor.destaque-300 | #c1b486 | derivado | derivado: família de tons OKLCH de cor.destaque, passo 300 | |
| cor.destaque-400 | #a3955f | derivado | derivado: família de tons OKLCH de cor.destaque, passo 400 | |
| cor.destaque-500 | #948650 | derivado | derivado: cor.destaque (âncora no passo 500) | |
| cor.destaque-600 | #6b5d27 | derivado | derivado: família de tons OKLCH de cor.destaque, passo 600 | |
| cor.destaque-700 | #514409 | derivado | derivado: família de tons OKLCH de cor.destaque, passo 700 | |
| cor.destaque-800 | #372d00 | derivado | derivado: família de tons OKLCH de cor.destaque, passo 800 | |
| cor.destaque-900 | #211a00 | derivado | derivado: família de tons OKLCH de cor.destaque, passo 900 | |
| cor.fundo-alt | #f9f7f7 | derivado | derivado: cor.fundo misturada 4% com cor.marca | |
| cor.cartao | #f9f7f7 | derivado | derivado: igual a cor.fundo-alt | |
| cor.borda | #e4e3e4 | derivado | derivado: cor.fundo misturada 12% com cor.texto | |
| fonte.titulo | Outfit, sans-serif | confirmado | site: --font-heading-family: Outfit nos títulos h1 a h3 (dembrandt 0.37.0 e leitura do tema em 30/09/2026); o site usa peso 400, a página usa 600 (ver DESIGN.md, Tipografia) | |
| fonte.texto | Red Hat Text, sans-serif | proposto | o site usa Helvetica e Arial no corpo (--font-body-family, padrão do tema Dawn, fonte do sistema), que não é fonte de marca | desenhada para texto em tamanho pequeno, com letras abertas que se leem bem no celular (84% do tráfego) pelo comprador de kit de 40 a 60 anos; tem o mesmo esqueleto geométrico da Outfit, então o par não briga, mas é mais aberta e calma para as notas de sabor, a composição do kit e o FAQ |
| tamanho.h1 | 56px | proposto | proposta LUQZ; o h1 do site tem 40px | escala de cerca de 1,3 a partir de 18px; título do topo maior que o do site porque a LP tem uma promessa só (origens diferentes numa compra) e ela precisa aparecer antes do preço na primeira tela; no celular o título encolhe com a tela (cerca de 39px a 390px de largura, nunca abaixo do h3) |
| tamanho.h2 | 40px | proposto | proposta LUQZ; o site usa 24px nos títulos de seção | escala de cerca de 1,3; títulos de seção curtos ('As origens do seu kit', 'O que você recebe') precisam separar blocos que hoje estão fundidos numa parede de texto |
| tamanho.h3 | 28px | proposto | proposta LUQZ | escala de cerca de 1,3; nome da fazenda no cartão de origem e preço no cartão de oferta |
| tamanho.h4 | 22px | proposto | proposta LUQZ | escala de cerca de 1,3; títulos de cartão e perguntas do FAQ |
| tamanho.texto | 18px | confirmado | site: corpo do texto em 18px (dembrandt 0.37.0, computador e celular) | |
| espaco.1 | 4px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.2 | 8px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.3 | 12px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.4 | 16px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.5 | 24px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.6 | 32px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.7 | 40px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.8 | 48px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.9 | 64px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.10 | 80px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.11 | 96px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.12 | 128px | derivado | derivado: regra de construção: escala base 4 | |
| espaco.secao | 96px | proposto | proposta LUQZ; o site deixa de 36 a 50px entre blocos | densidade 5 de 10: a página de kit tem de dizer preço, frete, origens e composição, então não pode ser só respiro, mas cada bloco precisa de espaço para não virar a parede de texto que a auditoria achou na página do kit |
| raio.botao | 12px | proposto | proposta LUQZ; o site usa 0px em botões, cartões e campos (--buttons-radius, padrão do tema Dawn) e 40px nas pílulas de variante e nos selos | canto reto em tudo foi lido na auditoria de 29/09 como utilitário, de catálogo, longe do café artesanal; 12px suaviza botão e cartão (6px) sem virar pílula de aplicativo; o arredondado não é estranho à loja, que já usa pílula nas variantes moído/grãos |
| raio.sm | 6px | derivado | derivado: raio.botao ÷ 2 (mín. 2px) (a partir de valor proposto) | |
| raio.md | 12px | derivado | derivado: igual a raio.botao (a partir de valor proposto) | |
| raio.lg | 18px | derivado | derivado: 1,5 × raio.botao (a partir de valor proposto) | |
| raio.pilula | 999px | derivado | derivado: pílula (a partir de valor proposto) | |
| duracao.base | 400ms | proposto | proposta LUQZ; o site usa de 100 a 500ms nas transições (dembrandt 0.37.0) | animação 3 de 10: entrada curta dos cartões, no mesmo ritmo das transições da loja; a página vive dentro do site e não deve se mover diferente dele |
| duracao.rapida | 200ms | derivado | derivado: 0,5 × duracao.base (a partir de valor proposto) | |
| duracao.lenta | 700ms | derivado | derivado: 1,75 × duracao.base (a partir de valor proposto) | |
| curva.saida | 0.25, 0.46, 0.45, 0.94 | proposto | proposta LUQZ; é uma das curvas medidas no site (dembrandt 0.37.0) | saída suave, sem quique, a mesma que a loja já usa; nada que pareça efeito numa compra de kit (ticket médio de R$ 304 no Yampi, estudo de 23/09) |
| tipo.destaque | 70px / 1.05 / 600 | derivado | derivado: nível destaque a partir de tamanho.h1 e fonte.titulo (a partir de valor proposto) | |
| tipo.h1 | 56px / 1.1 / 600 | derivado | derivado: nível h1 a partir de tamanho.h1 e fonte.titulo (a partir de valor proposto) | |
| tipo.h2 | 40px / 1.15 / 600 | derivado | derivado: nível h2 a partir de tamanho.h2 e fonte.titulo (a partir de valor proposto) | |
| tipo.h3 | 28px / 1.2 / 600 | derivado | derivado: nível h3 a partir de tamanho.h3 e fonte.titulo (a partir de valor proposto) | |
| tipo.h4 | 22px / 1.2 / 600 | derivado | derivado: nível h4 a partir de tamanho.h4 e fonte.titulo (a partir de valor proposto) | |
| tipo.texto-grande | 22px / 1.5 / 400 | derivado | derivado: nível texto-grande a partir de tamanho.texto e fonte.texto (a partir de valor proposto) | |
| tipo.texto | 18px / 1.6 / 400 | derivado | derivado: nível texto a partir de tamanho.texto e fonte.texto (a partir de valor proposto) | |
| tipo.pequeno | 16px / 1.6 / 400 | derivado | derivado: nível pequeno a partir de tamanho.texto e fonte.texto (a partir de valor proposto) | |
| tipo.rotulo | 14px / 1.4 / 400 | derivado | derivado: nível rotulo a partir de tamanho.texto e fonte.texto (a partir de valor proposto) | |
| sombra.1 | 0 1px 2px #1a191a0f | derivado | derivado: cor.texto com opacidade (nível 1) | |
| sombra.2 | 0 4px 12px #1a191a14 | derivado | derivado: cor.texto com opacidade (nível 2) | |
| sombra.3 | 0 12px 32px #1a191a1f | derivado | derivado: cor.texto com opacidade (nível 3) | |
