Farm Coffee · design system

Cafés especiais de fazendas diferentes, numa única compra

Cada pacote do kit vem de uma fazenda diferente. Grãos 100% arábica, torra média equilibrada, moído ou em grãos.

Quero meu kit

Café especial de fazendas diferentes, numa única compra.

Cinco pacotes de café especial de fazendas diferentes, lado a lado

01 · Tipografia

Tipografia

Títulos

Outfit

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)

Licença: Google Fonts

Texto

Red Hat Text

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

Por quê: 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

Licença: Google Fonts

Título 1
Outfit · 56px

Mais café. Mais variedade. Mais experiência.

Título 2
Outfit · 40px

As origens do seu kit

Título 3
Outfit · 28px

Fazenda do Lobo

Título 4
Outfit · 22px

Notas de chocolate e caramelo

Texto
Red Hat Text · 18px

Todos os cafés do kit são produzidos em uma das regiões mais respeitadas do Brasil quando o assunto é café especial. Grãos 100% Arábica, cultivados em altitude, com torra cuidadosa para preservar aroma, sabor e equilíbrio na xícara.

02 · Cores e superfícies

Cores

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

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

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)

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

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

creme #f8f5ec
Proposto

proposta LUQZ: cerca de 15% da faixa #d5c792 misturada ao branco

Por quê: 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

03 · Componentes

Componentes

Quero meu kit Saiba mais

Pitangui

Notas de chocolate e caramelo, corpo cremoso, acidez suave e equilibrada.

Lócio

Café elegante e equilibrado, aroma marcante, finalização agradável.

Fazenda Carneiro

Doçura equilibrada, corpo marcante, finalização suave.

“Espaço reservado para o depoimento de um cliente real, coletado pela Farm Coffee. Nenhum depoimento é inventado.”
Nome do cliente · Cidade

5 origensnum único kit de 2,25 kg: 4 pacotes de 500 g e 1 de 250 g

04 · Grade e espaçamento

Grade

Largura máxima 1200px · 12 colunas no computador, 4 no celular · 24px entre colunas · 96px entre seções

05 · Movimento

Movimento

Entradas curtas de baixo para cima nos cartões de origem, no mesmo ritmo das transições da loja. Preço, botão de compra e frete nunca dependem de animação para aparecer.

Entrada de baixo

Surgir

Deslizar

transition: transform var(--duracao-base) var(--curva-saida);
/* 400ms · cubic-bezier(0.25, 0.46, 0.45, 0.94) */

06 · Ícones

Ícones

coffee

bean

map-pin

mountain

flame

package

truck

shield-check

refresh-ccw

Conjunto Lucide, traço fino, na cor da marca.