Três Grãos

Uma experiência de origem que combina território, informação e clareza.

Três Grãos demonstra como transformar origens de cafés especiais em um site editorial completo, com hero, história da casa, regiões e um caderno de notas. O projeto tem identidade visual própria, com tema claro e escuro, tipografia e marca redesenhados, além de uma seção de pedidos que permite explorar lotes e organizar uma seleção sem a complexidade de um checkout real.

Este tour apresenta as decisões que orientaram a experiência, da identidade visual à lógica de pedidos, além da interface final.

O desafio

Uma experiência de varejo de cafés especiais precisa contar a origem antes de vender e equilibrar informação de produto com controle da seleção, sem interromper a descoberta. A identidade visual da marca também precisa se sustentar em qualquer tema de leitura, claro ou escuro.

O objetivo

A experiência aproxima o visitante da história e dos produtos, e dá controle da seleção sem criar a expectativa de uma operação de compra real.

  • Contar a história da casa antes de vender
  • Ancorar a marca em uma identidade visual própria (tema, tipografia e símbolo)
  • Facilitar a descoberta de produtos
  • Permitir filtragem por categoria
  • Oferecer feedback imediato
  • Manter a sacola sempre compreensível
  • Adaptar a experiência para celulares e para a leitura em claro ou escuro
  • Deixar claros os limites da demonstração

A jornada do usuário

A pessoa conhece a origem da casa e escolhe o tema de leitura que preferir. Em seguida, mantém o contexto de cada origem enquanto transforma interesse em uma seleção revisável.

  1. Conhecer a história e as origens da casa

  2. Alternar entre os temas claro e escuro

  3. Explorar o menu

  4. Filtrar produtos

  5. Adicionar à sacola

  6. Ajustar quantidades

  7. Confirmar simulação

As principais decisões

A interface equilibra uma atmosfera editorial com controles diretos para cada ação.

01

Menu organizado por contexto

As categorias ajudam o visitante a encontrar rapidamente o tipo de item desejado.

02

Sacola acessível durante a navegação

O visitante consegue revisar e alterar sua seleção sem perder o contexto do cardápio.

03

Feedback em cada interação

Adicionar, remover ou alterar uma quantidade produz uma resposta visual imediata.

04

Estados previstos

A experiência considera sacola vazia, remoção de itens, limpeza completa e confirmação simulada.

05

Tema claro e escuro sem JavaScript

Um interruptor no cabeçalho troca a paleta inteira da página por meio de um seletor CSS `:has()`. Não há re-renderização nem necessidade de um script para evitar o piscar do tema padrão antes da hidratação.

06

Marca e tipografia com identidade própria

O símbolo e o logotipo foram reconstruídos como contorno vetorial fiel a uma referência visual. A tipografia, serifada e sem serifa, é hospedada pelo próprio projeto, sem depender de fontes ou ícones de terceiros.

O que acontece por trás da interface

A interface mantém a sacola sincronizada enquanto o visitante navega. Quantidades, itens e resumo são atualizados imediatamente após cada ação. O interruptor de tema no cabeçalho troca claro e escuro na hora, porque a paleta inteira da página é resolvida pelo navegador via CSS, sem re-renderização nem piscar.

Estratégia cultural de marca, narrativa de origem, cardápio interativo, tema claro/escuro e experiência responsiva de pedidos.

Acessibilidade e experiência

Filtros, controles de quantidade, o interruptor de tema e mensagens foram organizados para tornar cada ação evidente e fácil de retomar.

  • Controles com nomes compreensíveis
  • Navegação por teclado
  • Foco visível
  • Interruptor de tema com papel de switch e estado anunciado
  • Contagem e resumo atualizados
  • Estado vazio explicado
  • Feedback após cada ação

Responsividade

Em telas menores, catálogo e seleção se organizam em uma coluna com áreas de toque confortáveis, e a ilustração de montanha da hero cede lugar ao texto. Em telas amplas, a seleção acompanha a navegação sem competir com as origens, e o traço do relevo ganha espaço ao lado do texto.

Qualidade demonstrada

O conceito mostra como uma experiência de comércio pode continuar simples mesmo com uma identidade visual própria e várias pequenas decisões.

  • Identidade visual própria (tema, tipografia e marca)
  • Ilustração vetorial construída sob medida
  • Lógica de sacola
  • Controle consistente das interações
  • Estado vazio bem resolvido
  • Microinterações discretas
  • Adaptação para mobile
  • Ausência de pagamento ou pedido real

O padrão aplicado ao projeto

A demonstração parte de princípios que tornam uma experiência digital mais útil, confiável e confortável de usar.

Experiência clara
Funcionamento em diferentes tamanhos de tela
Navegação por teclado
Feedback após as ações
Conteúdo localizado
Comportamento previsível
Ausência de complexidade desnecessária
Transparência sobre os limites da demonstração
Detalhes técnicos

Implementação em foco

  • O tema claro e escuro é resolvido inteiramente em CSS, sem depender de JavaScript: um checkbox oculto no cabeçalho é lido por um seletor `:has()` que substitui um conjunto de variáveis customizadas, o que evita o piscar do tema padrão antes da hidratação.
  • O símbolo e o logotipo formam um único caminho vetorial em `currentColor`, reconstruído a partir de uma referência visual. O contorno original foi extraído de um PNG por varredura de contorno em subpixel e ajustado a curvas de Bézier, de modo que o nome da marca não depende de nenhuma fonte.
  • A tipografia, serifada nos títulos e sem serifa no corpo do texto, é hospedada pelo próprio projeto via next/font/local, como exige a política de segurança de conteúdo do site, que bloqueia fontes carregadas de terceiros.
  • A ilustração de montanha da hero e o relevo topográfico da seção de origens são SVG desenhados à mão e coloridos pelas mesmas variáveis CSS do tema, sem depender de imagens, ícones de terceiros ou bibliotecas de ilustração.
  • O menu e a sacola compartilham uma única fonte local para manter itens, quantidades e resumo coerentes.
  • As categorias mudam apenas os produtos mostrados, sem descartar a seleção já feita.
  • A remoção, a limpeza da sacola e a confirmação simulada têm estados próprios e mensagens de retorno.
  • O conteúdo de cada idioma permanece em arquivos dedicados, com rotas equivalentes para a demonstração.

O que esta demonstração não faz

A demonstração explora a decisão de pedido sem simular uma operação que não existe.

  • Não realiza pedidos
  • Não possui checkout
  • Não recebe pagamentos
  • Não solicita endereço
  • Não envia ou armazena dados

Acessar o projeto

Explore a história da casa, alterne entre os temas claro e escuro, filtre os lotes e monte uma seleção demonstrativa sem checkout ou pedido real.

Ver projeto

Próximo projeto

Veja a seguir uma experiência B2B de logística rodoviária, feita de direção e ritmo.

Explorar próximo projeto: Routebound