Guia de identidade visual · versão 1.0

Casa de vó, em Minas

Este guia diz como o Quintal do Glória aparece: cores, letras, grafismos, fotografia e tom de texto. Serve para o site, para o rótulo, para a placa e para a rede social. Os valores exatos estão no fim, em tokens.

Essência

Quem chega tem de se sentir recebido por uma família, não atendido por uma empresa. O site é para todo mundo, inclusive para quem usa pouco a internet. Toda decisão responde a duas perguntas: isto parece a casa da Nilseia e do Renato? Minha avó conseguiria usar?

Clareza

Letra grande, texto escuro sobre fundo claro, botão com nome escrito. Nada fica escondido atrás de ícone ou de efeito.

Sossego

Página calma, com espaço entre as coisas. A rolagem é a do próprio aparelho e nada se mexe sem a pessoa pedir.

Aconchego

Fundo claro e morno, cantos macios, papel e costura. Nada de branco puro, preto puro ou linha dura.

Fartura

Fotografia larga, de borda a borda, como mesa posta. A foto manda; o texto acompanha.

Verdade

Gente da casa, no meio do serviço. Dado verificável no lugar de adjetivo: dias de cura, hora da ordenha, peso da peça.

Vida

Letra de mão nas legendas, retrato levemente torto, gente sorrindo nas fotos. A casa está habitada.

Marca

A marca tem duas formas. O brasão é a assinatura completa. O letreiro, só em tipografia, é o que aparece no dia a dia, sobre foto e sobre cor.

Quintal do GlóriaQueijaria · Canastra

Use

Brasão no alto do menu, no rodapé, no rótulo e na placa.
Letreiro em Fraunces, com a etiqueta em caixa alta embaixo, nos demais lugares.
Respiro em volta do brasão igual à altura da fita vermelha.
Largura mínima do brasão: 32 px na tela, 18 mm no impresso.

Evite

Brasão sobre fotografia: as cores dele disputam com a foto. Use o letreiro.
Recolorir, contornar ou pôr sombra no brasão.
Brasão sobre âncora ou apoio: o vermelho e o verde da fita perdem leitura.
Esticar, girar ou cortar a coroa de flores.

Paleta

Cinco cores, cada uma com um trabalho. As variações claras e escuras existem para garantir leitura, não para criar cores novas.

Base

base#F1E9DB

Fundo de página. A parede clara da casa.

base-clara#F8F3EA

Papel: fichas, retratos, cartões e barras fixas.

Neutro

neutro#EAE0CC

Segundo fundo claro, para alternar seções.

linha#D8CAB0

Filetes, bordas e o xadrez da toalha.

Tinta

tinta#2A231E

Texto e títulos. Fundo dos blocos escuros.

tinta-suave#4A3F37

Texto corrido.

tinta-tenue#5F544A

Etiquetas e legendas sobre fundo claro.

noite#1C1713

Véu sobre fotografia.

Âncora

ancora#A9512F

A cor da marca: botão principal, destaque de título, pesponto.

ancora-escura#8A3D21

Texto pequeno em cor e estado de hover.

ancora-clara#E0AE92

Destaque sobre fundo escuro.

Apoio

apoio#6B6A4B

O verde do quintal: faixas, hospedagem, estados secundários.

apoio-escuro#4A4A33

Fundo verde fechado e texto verde pequeno.

mata#2B3527

O verde fechado da mata: fundo das seções de hospedagem e de descanso.

apoio-claro#CFCDB3

Fundo verde claro e destaque sobre o verde.

Proporção

Numa página inteira, a base e o neutro ocupam três quartos da área. Âncora e apoio entram em pouca quantidade: um botão, um título, uma faixa, um bloco de cor por página.

Base 55%
Neutro 20%
Tinta 12%
Âncora 8%
Apoio 5%

Pares com leitura garantida

A regra da casa é mais exigente que o mínimo: texto corrido usa contraste de 7 para 1 ou mais. Abaixo de 4,5 para 1, a cor só serve para título grande e número. É o caso da âncora sobre a base: texto pequeno em cor usa a âncora escura.

Amostra	Texto	Fundo	Contraste	Uso
Quintal	tinta	base	12,8 : 1 · texto corrido	Título e texto
Quintal	tinta-suave	base	8,5 : 1 · texto corrido	Texto corrido
Quintal	tinta-tenue	base	6,1 : 1 · texto curto	Etiqueta e legenda
Quintal	ancora-escura	base	6,3 : 1 · texto curto	Texto pequeno em cor
Quintal	ancora	base	4,5 : 1 · só título	Só título e número grande
Quintal	tinta-suave	neutro	7,8 : 1 · texto corrido	Texto corrido
Quintal	base-clara	ancora	4,9 : 1 · texto curto	Botão principal
Quintal	base-clara	ancora-escura	6,9 : 1 · texto curto	Bloco de cor e menu
Quintal	base-clara	apoio	5,0 : 1 · texto curto	Faixa correndo
Quintal	base-clara	apoio-escuro	8,2 : 1 · texto corrido	Bloco verde
Quintal	base-clara	tinta	14,0 : 1 · texto corrido	Rodapé e bloco escuro
Quintal	ancora-clara	tinta	7,8 : 1 · texto corrido	Destaque no escuro

Tipografia

Três famílias. A Fraunces dá os títulos, com terminação macia. A Figtree carrega a leitura. A Caveat é a letra de mão, usada em dose pequena.

titulo

Fraunces

Títulos e números. Peso 300 a 400, eixo SOFT em 100.

texto

Figtree

Texto corrido, etiquetas e botões.

bilhete

Caveat

Legenda de retrato e recado curto. No máximo uma linha.

titulo-xl

Capa de página.

Bem-vindo ao Quintal

titulo-lg

Abertura de seção.

Sete queijos, duas cascas

titulo-md

Título de bloco e nome de queijo.

O café e o queijo, no mesmo lugar

titulo-sm

Título de cartão e de ficha.

Ordenha ao amanhecer

corpo-grande

Parágrafo de abertura.

Queijo feito à mão, café colonial e tempo para ficar.

corpo

Texto corrido.

O dia começa às cinco, com as vacas chegando ao curral para a primeira ordenha.

corpo-mini

Legenda e nota.

Pote de vidro de 240 g, feito às segundas.

olho

Etiqueta em caixa alta, acima de títulos e em botões.

Um dia no quintal

bilhete

Legenda manuscrita.

as meninas no trato

Use

Uma palavra do título em itálico e âncora, para dar a entonação.
Etiqueta em caixa alta acima do título, com até 28 caracteres.
Texto corrido com 17 px ou mais, em tinta ou tinta suave.
Coluna de texto com até 36 rem de largura.
Letra de mão em legenda de retrato e em recado de uma linha.

Evite

Título em caixa alta ou em negrito.
Parágrafo inteiro em letra de mão ou em itálico.
Peso abaixo de 400 e tamanho abaixo de 16 px em qualquer texto.
Texto claro com transparência sobre fundo escuro.
Mais de uma palavra em âncora no mesmo título.

Grafismos

Os grafismos vêm de dentro da casa: a costura, o crochê, a toalha, o álbum de fotos. São poucos de propósito. Um por bloco é o bastante.

Pesponto

Divisor entre blocos e linha do tempo. Substitui o filete reto.

.pesponto

Bico de crochê

Emenda de duas seções de cores diferentes. A seção de cima veste o bico.

<Bico cor=… />

À mesa

Xadrez

Fundo das seções de mesa e de comida. Sempre com papel por cima para o texto.

.xadrez

Casca lisa

Canastra Real

Papel costurado

Ficha de queijo, cartão, bilhete. O pesponto corre por dentro da borda.

.papel .papel-costurado

Renato na varanda da queijaria com uma peça de queijo cortada — o Renato, na varanda

Retrato

Foto de gente e de momento, com legenda à mão. Giro entre -3° e 3°.

<Retrato />

Curral pela manhã, com as vacas do outro lado da porteira

Janela

Moldura de topo redondo para foto em pé. No máximo uma sequência por página.

forma="janela"

Carimbo

Selo de origem e de reconhecimento. Um por página.

<Carimbo />

Paninho

Enfeite grande e fraco, sangrando pelo canto de um bloco escuro.

<Paninho />

Use

Bico só na emenda de duas cores. A cor do bico é a da seção de cima.
Pesponto na cor âncora sobre claro e âncora clara sobre escuro.
Xadrez com 42% de opacidade, na cor de linha.
Paninho com 10% a 25% de opacidade, cortado pela borda.

Evite

Dois grafismos fortes no mesmo bloco (xadrez com paninho, por exemplo).
Bico no meio de uma seção ou em volta de um cartão.
Texto direto sobre o xadrez, sem papel.
Retrato para foto de produto ou de paisagem: essas vão sangradas.

Fotografia

A fotografia é a parte mais importante da identidade. Lugar e produto entram largos, de borda a borda. Gente entra em retrato de álbum.

Peça de queijo Canastra cortada, mostrando a massa amanteigada — Sangrada: produto em primeiro plano, a casa ao fundo.

Use

Luz natural de manhã cedo ou de fim de tarde.
Gente da casa trabalhando ou recebendo, olhando para a câmera ou para o que faz.
Madeira, barro, pano e planta no quadro. É o que a paleta repete.
Foto deitada com 2400 px de largura para capa; assunto no centro, por causa do corte no celular.

Evite

Flash direto, filtro de aplicativo e balanço de branco azulado.
Fundo de estúdio e produto recortado.
Texto ou marca d'água em cima da foto.
Banco de imagens. Toda foto é do Quintal.

O site aplica sozinho um banho morno leve (.filme) para fotos de origens diferentes conversarem. Entregue a foto com a cor natural, sem tratamento.

Componentes

As peças que se repetem pelo site. Cada página se monta com elas; componente novo só entra quando nenhuma destas resolve.

Botões

Encomendar queijo Como chegar Conhecer a nossa história

Chamar no WhatsApp Como chegar

Sólido: a ação principal da página, uma por tela. Contorno: a segunda ação. Texto: link de dentro da prosa. Claro: sobre foto e sobre cor. O rótulo começa com verbo, tem até 20 caracteres e diz o que acontece ao clicar. Todo botão tem 48 px de altura ou mais, e ícone nunca aparece sem a palavra ao lado.

Etiquetas

Casca floridaMais de 30 diasPeça de 600 g

Uma propriedade verificável por etiqueta, com até 4 palavras.

Número de capítulo

7h30

Hora, ano e ordem aparecem grandes, em Fraunces leve e âncora.

Leite cruFeito à mãoSerra da CanastraCura lenta

Voz

O texto fala como a família fala: na primeira pessoa do plural, com frase curta e dado concreto. Quem lê tem de ouvir a Nilseia, não um folheto.

Assim	Assim não	Por quê
A gente recebe do jeito mineiro, como quem recebe amigo em casa.	Oferecemos uma experiência de hospitalidade única.	“A gente” e uma comparação do dia a dia no lugar de palavra de folheto.
Casca lisa e trinta dias de cura nas bancas de madeira.	Um queijo incrível, de sabor inigualável.	Propriedade que dá para conferir no lugar de elogio.
A porteira fica aberta todos os dias, sem agendamento.	Venha nos visitar quando quiser!	A informação que a pessoa precisa, sem ponto de exclamação.
No começo a gente jogou muito queijo fora.	Superamos desafios ao longo da nossa trajetória.	O fato como aconteceu. A história da casa não esconde o tropeço.

Use

“A gente” e “nós”. O visitante é “você”.
Número exato: 5h, 14 dias, 240 g, três suítes.
Nome próprio de quem fez parte: tio Célio, Ivair e Lúcia, Roberto.
Inglês com o mesmo sentido e até 15% mais longo.

Evite

“Incrível”, “único”, “experiência”, “premium”, “gourmet”.
Ponto de exclamação e emoji no site.
Promessa que a casa não cumpre: reserva automática, entrega com prazo fixo.
Diminutivo em série. Um “vaquinhas” vale; cinco cansam.

Página e movimento

Da referência escolhida pela família, o site do Tandjung Sari, ficam a capa de tela cheia, a foto larga e o menu em página inteira. O que exigia prática de internet saiu: a navegação é uma barra comum, com tudo escrito.

Peça	Regra
Barra do topo	Fixa, clara, com o brasão, quatro páginas escritas por extenso (história, queijos, hospedagem, visita), o idioma, o botão “Menu” e o botão “Reservar estada”. No celular ficam o brasão, o idioma e “Menu”; as duas ações descem para uma barra embaixo.
Menu	Abre em página inteira, com as oito páginas em letra grande e numeradas. O botão que abre é o mesmo que fecha, e diz “Fechar”.
Capa	Foto de tela cheia, título de até 3 linhas embaixo à esquerda e o bico da seção seguinte invadindo o pé da foto.
Ritmo de fundo	Base e neutro se alternam. Um bloco escuro (tinta, âncora ou apoio) por página, dois no máximo. Toda troca de cor leva bico.
Coluna	Largura máxima de 88 rem, margem de 1,5 rem no celular e 3 rem no computador. Texto corrido em até 36 rem.
Foto com ficha	Foto larga em 16:9 ou 3:2 e ficha de papel sobreposta no pé, alternando de lado.
Sequência	História e etapas descem em coluna, um capítulo abaixo do outro, com número grande. Nada corre de lado e nada prende a rolagem.
Fim de página	Convite sobre foto, com os dois botões: WhatsApp e como chegar. Depois, o rodapé.

Movimento

O movimento é pouco e curto: texto e foto aparecem em menos de um segundo quando chegam à tela, uma vez só. A rolagem é a do aparelho. Ficam de fora o cursor desenhado, o botão que foge do ponteiro, a tela de abertura e a seção que rola de lado. Com “reduzir movimento” ligado no aparelho, nada se mexe e nada fica escondido.

Token	Valor	Uso
`curva`	cubic-bezier(0.24, 0.43, 0.15, 0.97)	Curva única de tudo que se mexe.
`curva-saida`	cubic-bezier(0.65, 0, 0.35, 1)	Saídas e fechamentos.
`rapido`	200ms	Hover e foco.
`medio`	400ms	Troca de cor e de estado.
`lento`	700ms	Entrada de foto e de título. Nada demora mais que isto.

Aplicações

A mesma gaveta de cores, letras e grafismos fora do site. São modelos de construção, feitos com os tokens; a arte final de cada peça sai deles.

Rótulo de queijo
Papel claro, pesponto na borda, brasão no alto e o nome em Fraunces.

feito às segundas

Doce de leite

Pote de 240 g

Etiqueta de pote

Papel costurado com recado à mão. Vai amarrada no pote com barbante.

Publicação quadrada
Foto sangrada, véu de tinta embaixo, título em Fraunces e bico no pé.

Quintal do GlóriaQueijaria · Canastra

Papel de embrulho

O xadrez da toalha em âncora, com o letreiro num selo de papel.

Tokens

Os valores exatos, num arquivo só. O site lê deste arquivo; mudar um token muda o site inteiro e este guia.

Baixar tokens.json Baixar tokens.css

Como mudar um token

Edite o valor em src/design/tokens.json.
Rode npm run tokens. O comando gera src/app/tokens.css e atualiza os arquivos de download.
No código, use a cor pelo nome (bg-ancora, text-tinta-suave) ou a variável (var(--color-ancora)).

Uma exceção: text-base é tamanho de fonte no Tailwind, não cor. Para texto na cor base, use text-base-clara ou a variável.

Cor

Token	Valor	Classe	Uso
`--color-base`	#F1E9DB	`bg-base`	Fundo de página. A parede clara da casa.
`--color-base-clara`	#F8F3EA	`bg-base-clara`	Papel: fichas, retratos, cartões e barras fixas.
`--color-neutro`	#EAE0CC	`bg-neutro`	Segundo fundo claro, para alternar seções.
`--color-linha`	#D8CAB0	`bg-linha`	Filetes, bordas e o xadrez da toalha.
`--color-tinta`	#2A231E	`bg-tinta`	Texto e títulos. Fundo dos blocos escuros.
`--color-tinta-suave`	#4A3F37	`bg-tinta-suave`	Texto corrido.
`--color-tinta-tenue`	#5F544A	`bg-tinta-tenue`	Etiquetas e legendas sobre fundo claro.
`--color-noite`	#1C1713	`bg-noite`	Véu sobre fotografia.
`--color-ancora`	#A9512F	`bg-ancora`	A cor da marca: botão principal, destaque de título, pesponto.
`--color-ancora-escura`	#8A3D21	`bg-ancora-escura`	Texto pequeno em cor e estado de hover.
`--color-ancora-clara`	#E0AE92	`bg-ancora-clara`	Destaque sobre fundo escuro.
`--color-apoio`	#6B6A4B	`bg-apoio`	O verde do quintal: faixas, hospedagem, estados secundários.
`--color-apoio-escuro`	#4A4A33	`bg-apoio-escuro`	Fundo verde fechado e texto verde pequeno.
`--color-mata`	#2B3527	`bg-mata`	O verde fechado da mata: fundo das seções de hospedagem e de descanso.
`--color-apoio-claro`	#CFCDB3	`bg-apoio-claro`	Fundo verde claro e destaque sobre o verde.

Tipo

Token	Tamanho	Altura	Tracking	Peso
`.titulo-xl`	clamp(3rem, 7.4vw, 7.5rem)	0.94	-0.03em	300
`.titulo-lg`	clamp(2.3rem, 4.8vw, 4.5rem)	1.02	-0.024em	300
`.titulo-md`	clamp(1.8rem, 3vw, 2.85rem)	1.1	-0.018em	350
`.titulo-sm`	clamp(1.3rem, 1.75vw, 1.65rem)	1.2	-0.01em	400
`.corpo-grande`	clamp(1.2rem, 1.5vw, 1.45rem)	1.6	0	400
`.corpo`	clamp(1.0625rem, 1.12vw, 1.1875rem)	1.7	0	400
`.corpo-mini`	1rem	1.6	0	400
`.olho`	0.8rem	1.4	0.16em	700
`.bilhete`	clamp(1.5rem, 1.8vw, 1.8rem)	1.1	0	500

Espaço, raio e sombra

Token	Valor	Uso
`--espaco-1`	0.25rem	Passo da escala de 4 px.
`--espaco-2`	0.5rem	Passo da escala de 4 px.
`--espaco-3`	0.75rem	Passo da escala de 4 px.
`--espaco-4`	1rem	Passo da escala de 4 px.
`--espaco-6`	1.5rem	Passo da escala de 4 px.
`--espaco-8`	2rem	Passo da escala de 4 px.
`--espaco-12`	3rem	Passo da escala de 4 px.
`--espaco-16`	4rem	Passo da escala de 4 px.
`--espaco-24`	6rem	Passo da escala de 4 px.
`--espaco-secao`	clamp(5.5rem, 11vw, 10rem)	Respiro vertical de uma seção.
`--espaco-secao-compacta`	clamp(4rem, 7.5vw, 7rem)	Seção de apoio.
`--espaco-margem`	clamp(1.25rem, 3.2vw, 5rem)	Margem lateral da página. A página ocupa a tela quase toda.
`--espaco-largura`	120rem	Largura máxima do conteúdo.
`--espaco-leitura`	36rem	Largura máxima de uma coluna de texto.
`--radius-papel`	0.375rem	Fichas, cartões e retratos.
`--radius-foto`	0.25rem	Fotografia solta na página.
`--radius-janela`	999px	Topo arredondado da moldura em janela.
`--radius-pilula`	999px	Botões e etiquetas.
`--shadow-papel`	0 1px 0 rgb(42 35 30 / 0.05), 0 18px 32px -22px rgb(42 35 30 / 0.45)	Papel pousado na mesa.
`--shadow-retrato`	0 1px 0 rgb(42 35 30 / 0.06), 0 26px 44px -26px rgb(42 35 30 / 0.6)	Retrato de álbum.