Biblioteca do Design System

Tokens, componentes e padrões de tela do novo e-commerce da Lamas Destilaria, extraídos do Figma em 10/09/2026. Tudo nesta página é desenhado com os próprios tokens que ela documenta.

Como usar

1. Tokens: copie o bloco da seção Arquivos (ou use o botão de download). Componentes nunca usam hex nem px soltos — sempre var(--…).
2. Fontes: Work Sans (Google Fonts) para corpo e interface; Arpona (Adobe Fonts, kit do projeto) para títulos. Nesta prévia a Arpona aparece substituída pela Spectral, porque o kit é privado.
3. Mobile-first: o estilo base é o mobile (frame 390px). O desktop entra em min-width: 1024px. Não existe breakpoint de tablet ainda.
4. Temas: Light é o padrão. data-theme="dark" em qualquer elemento troca aquele bloco inteiro — é o equivalente ao "modo explícito" do Figma (é assim que o footer escuro funciona).
5. Fonte da verdade: o arquivo Figma Lamas Destilaria — Ecommerce. Se esta página e o Figma discordarem, vale o Figma.

Princípios

Regras que explicam as decisões. Quando algo não estiver especificado, decida por elas.

Cores

Duas camadas. Primitivos são os valores brutos da marca e não entram direto em componente. Semânticos dizem para que a cor serve e mudam entre Light e Dark. Use sempre o semântico.

Primitivos

Semânticos

A coluna "Agora" mostra o valor do tema ativo. Use a chave Tema escuro na lateral para comparar.

Contraste (calculado ao vivo)

Texto normal precisa de 4,5:1 (WCAG AA). Texto grande e bordas de controle precisam de 3:1. Os valores são recalculados quando você troca o tema.

Tipografia

Duas famílias: Arpona (serifada) para títulos e Work Sans para todo o resto. Cada classe CSS junta o par Mobile/Desktop do Figma e troca sozinha em 1024px.

Mapa Figma → CSS

Espaçamento

Escala de base 4, alinhada ao grid de 8. Componentes usam o token semântico (o papel), nunca o degrau da escala direto.

Escala

Semânticos

Raio

Quanto mais longe da página, mais redondo. Imagem de mídia é sempre reta.

Grid e breakpoints

Largura máxima do conteúdo no desktop: --size-layout-max-width (1248 = 1440 − 2 × 96). Coluna de texto sobre mídia: --size-layout-content-column (470, mantém 45–75 caracteres por linha).

Mobile / 4 col (margem 16, gutter 16)

Ícones

Família Vuesax, estilo linear, 24px. A cor vem de currentColor — o ícone herda a cor do texto do controle onde está.

Button

Duas famílias com as mesmas 27 variantes (3 estilos × 3 tamanhos × 3 estados): Pill (pílula, principal) e Squared (cantos de 6px, mais discreto — usado em cards, vídeo e newsletter). Cores sempre neutras.

Pill · MD · passe o mouse para ver o hover

Squared · SM, MD e LG

Propriedades

Tokens por tamanho

Tokens por estilo e estado

Raio: --radius-button (999) no Pill, --radius-button-squared (6) no Squared. Texto: estilo Button (.t-button).

Acessibilidade

• Ação → <button>; navegação → <a class="btn">. Nunca <div> clicável.
• Foco visível: anel de 2px em --color-focus-ring (já no CSS desta biblioteca).
• Botão só com ícone precisa de aria-label.
• Sobre foto escura, o Ghost precisa do texto em --color-text-on-media — no Figma o hero usa essa troca.

Copiar<button class="btn btn--primary">Comprar</button>
<a class="btn btn--ghost" href="/sobre">Saiba mais</a>
<button class="btn btn--primary btn--squared btn--sm btn--block">Comprar</button>

Badge

Selo de produto. O tom Gold é a única exceção em que o dourado preenche — reservado a coleção especial e edição limitada, nunca a algo clicável.

Padding --space-inset-tag-y × --space-inset-tag-x (4 × 8) · raio --radius-tag · texto Overline (rótulo curto).

Copiar<span class="badge badge--gold">Edição limitada</span>

Toggle

Interruptor liga/desliga. Ligado usa o preto de ação — nunca o dourado. Clique para testar.

Trilho --size-toggle-track 48 × 28 · padding --space-1 · raio --radius-pill. Use role="switch" + aria-checked e sempre um rótulo visível ou aria-label.

Copiar<button class="toggle" role="switch" aria-checked="false" aria-label="Receber novidades"></button>

Input e Form Field

Input é só a caixa. Form Field junta rótulo + Input + mensagem de ajuda. O foco usa o dourado escuro como traço — é borda, não preenchimento, então respeita a regra do dourado.

Input MD · clique para ver o foco

Form Field · Default e Error

Raio --radius-field (8 — campo não vira pílula). Form Field: pilha com --space-field-stack-gap (8), rótulo em Label, ajuda em Caption.

Copiar<div class="form-field">
  <label class="form-field__label" for="email">E-mail</label>
  <div class="field"><input id="email" type="email" placeholder="seu@email.com" aria-describedby="email-h"></div>
  <p class="form-field__helper" id="email-h">Usamos seu e-mail só para o rastreio do pedido.</p>
</div>

Accordion

Item de lista que abre e fecha — FAQ, detalhes do produto, notas de degustação e links do footer mobile. O divisor fica embaixo de cada item, para empilhar sem borda dupla.

Comportamento: cada item abre de forma independente (não fecha os outros). Cabeçalho é <button aria-expanded> controlando uma region. No footer mobile, o painel contém uma lista de links (<ul><li><a>), não um parágrafo.

Card de produto

Ainda não é componente no Figma (é um nó solto na Home). Abaixo, o padrão com os valores normalizados para a escala de tokens — o original tem gaps de 21 e 29,78 e usa padding de 205px para posicionar o badge. Confirme com design antes de fechar.

Desktop: 4 por linha, gutter 24 (fecha os 1248). Mobile: carrossel horizontal com o mesmo card de 294 — o próximo card "espia" na borda para indicar que dá para arrastar.

Carrossel mobile (arraste)

Implementação: overflow-x: auto + scroll-snap-type: x mandatory, scroll-padding igual à margem mobile, barra de rolagem escondida, região com aria-label e tabindex="0" para rolar pelo teclado.

Seções da Home

Como cada seção se comporta no desktop (1440) e no mobile (390). Os links abrem o nó exato no Figma.

Frames completos: Desktop — Home · Mobile — Home (mockup iPhone).

Footer mobile (proposta)

Renderizado aqui com os componentes desta biblioteca e data-theme="dark" no bloco — do mesmo jeito que o Figma usa o modo explícito Dark. Troque para light e tudo acompanha.

Pendências

O que ainda pode mudar. Onde houver ⚠ nesta página, o motivo está aqui.

Afetam a implementação

• ButtonVariantes SM (Pill e Squared) estão escaladas no Figma (25,43 / 11,3 / 5,65). Implementar com 36 / 16 / 8.
• ContrasteBorda do Input vazio usa border-default (#D9D9D9 ≈ 1,4:1 no claro). A regra de acessibilidade para contorno de campo pede 3:1, e o próprio token diz para usar border-strong em inputs. Decisão de design pendente.
• ContrasteNo tema escuro, texto branco sobre Success e Warning (e Danger no limite) não passa — veja a tabela de contraste com o tema escuro ligado. Afeta o Badge em blocos Dark.
• TipografiaHeading SM: Mobile é Arpona 16, Desktop é Work Sans 20. Os cards da Home mobile hoje usam o estilo desktop. Definir a família do nome de produto.
• TipografiaMobile/09 Price (16px) diz ser "preço no card mobile", mas os cards mobile usam Desktop/14 (14px). Esta biblioteca trata 16px como preço principal da PDP no mobile.
• BreakpointSem tablet. Desktop a partir de 1024px é proposta desta biblioteca.
• Fococolor/focus/ring existe mas nenhum componente do Figma aplica. A biblioteca já implementa anel de 2px.
• MovimentoNão há tokens de animação. A biblioteca usa 150ms (cor, toggle) e 200ms (chevron), ease-out, e respeita prefers-reduced-motion.
• SombraElevação/sombra não definida (vai ser necessária para drawer, dropdown e toast).

Componentes ainda não criados

• Select (footer usa prévia), drawer do menu hambúrguer (raio --radius-overlay), card de produto, card de depoimento, set de ícones como componente, ícones de redes sociais.

Limpeza no Figma (não bloqueia o dev)

• Button / Squared Secondary: espessura da borda ligada a uma variável desconhecida ("size/border/Número") em vez de size/border/hairline.
• Rótulos do footer em accent-signature (dourado) sobre fundo claro dão 2,74:1 — reprovado para texto pequeno. No Dark passa.
• Descrições desatualizadas: font/family/display ainda cita a Spectral; estilos Desktop 01–05 ainda têm o aviso "[ATENÇÃO: família em Spectral]"; alguns dizem "caixa alta" sem estar em caixa alta.
• Pesos de ícone misturados (1 / 1.5 / bold).
• Valores fora da escala herdados do desktop: gaps de 21 e 29,78 no card de produto, avatar do depoimento com padding fracionado, paddings das seções de mídia desktop (151 / 153 / 328).
• Texto: "Proposíto" → "Propósito" (seção Inovação).

Para o Claude do dev

Um arquivo de regras em Markdown para o assistente de código seguir o design system sozinho: quais tokens usar, como montar cada componente, o que é proibido e o que ainda está em aberto.

No Claude Code (terminal ou editor)

1. Salve o arquivo no repositório do tema como .claude/rules/lamas-design-system.md.
2. Copie lamas-tokens.css e lamas-components.css para a pasta assets/ do tema.
3. Pronto. O cabeçalho do arquivo faz o Claude carregar as regras automaticamente sempre que abrir arquivos .liquid, .css, .html e similares — e só nesses casos, para não ocupar espaço à toa.

No Claude pelo navegador (claude.ai)

1. Crie um Projeto para a loja.
2. Adicione no conhecimento do projeto: este arquivo, lamas-tokens.css e lamas-components.css.

Quando o design system mudar

O link deste arquivo é fixo. Basta baixar de novo, ou pedir ao próprio Claude Code: “baixe o arquivo do link e substitua a regra em .claude/rules”. A versão aparece logo abaixo do título do arquivo.

Copiar

Arquivos

Estes são os mesmos arquivos que a página usa — não existe cópia separada. O tokens.json segue o formato W3C de design tokens, para quem usa Style Dictionary, Tailwind ou similar.

Copiar