---
paths:
  - "**/*.{liquid,css,scss,html,jsx,tsx,vue}"
---

# Lamas Destilaria — Design System (regras de implementação de UI)

v1.1 · 2026-09-11 · Fonte da verdade: Figma `LTAVVh06I315DtDsEzSLjO` · Referência visual: https://lamas-design-system.pages.dev
Arquivos do DS no projeto: `lamas-tokens.css` (todas as variáveis), `lamas-components.css` (componentes de referência), `lamas-tokens.json` (formato DTCG).
**Antes de usar um token cujo nome você não tem certeza, leia `lamas-tokens.css`. Nunca invente um nome de token.**

## Regras obrigatórias

1. Cor, espaçamento, raio e tamanho só com `var(--…)`. Proibido hex, `rgb()` e px soltos em componente. Exceções: `0` e proporções de imagem.
2. Use o token **semântico** (`--color-text-primary`, `--space-stack-md`). Nunca o primitivo (`--primitive-*`, `--space-4`, `--radius-sm`) dentro de componente.
3. **O dourado nunca preenche controle interativo** (botão, input, toggle, chip). Dourado só em: link dentro de texto (`--color-accent-signature-text-safe`), ícone pontual, filete decorativo e Badge Gold.
4. Raio pelo papel, não pelo gosto: imagem `--radius-media` (0) · Button Squared `--radius-button-squared` · campo `--radius-field` · card `--radius-surface` · dropdown/toast `--radius-floating` · modal/drawer `--radius-overlay` · botão pílula `--radius-button` · tag `--radius-tag` · avatar/contador `--radius-pill`.
5. Texto sobre foto: sempre `--color-text-on-media` com uma camada `--color-overlay-media` entre a foto e o texto.
6. Alvo de toque mínimo `--size-control-md` (44px) no mobile, mesmo que o ícone visível tenha 24px.
7. Tipografia só pelas classes `.t-*` (ou por regras que repliquem exatamente os mesmos valores). No máximo uma `.t-headline` por página; nada maior que ela.
8. Caixa alta: `.t-overline` só para rótulos de 1 a 3 palavras. Frase inteira em caixa alta usa `.t-caption` + `text-transform: uppercase`.
9. Mobile-first. Desktop em `@media (min-width: 1024px)`. Não criar outros breakpoints sem aprovação de design.
10. Tema escuro por bloco: `data-theme="dark"` no container. Nunca duplicar CSS com cores escuras escritas à mão.
11. Foco visível em todo elemento interativo: `outline: var(--size-border-focus) solid var(--color-focus-ring); outline-offset: 2px;`.
12. Movimento: 150ms em mudança de cor/estado, 200ms em abrir/girar, `ease-out`. Sempre respeitar `prefers-reduced-motion`.
13. Campo de texto com fonte de pelo menos 16px no mobile (evita o zoom automático do iOS).

## Qual token usar

| Preciso de… | Token |
|---|---|
| Fundo da página | `--color-bg-base` |
| Fundo de card / superfície | `--color-surface-default` (hover: `--color-surface-alt`) |
| Bloco invertido (ex.: Depoimentos) | fundo `--color-surface-inverse`, texto `--color-text-on-inverse`, apoio `--color-text-on-inverse-muted` |
| Texto principal / de apoio | `--color-text-primary` / `--color-text-secondary` |
| Placeholder, desabilitado | `--color-text-disabled` |
| Divisor decorativo | `--color-border-default` |
| Contorno de controle (precisa de contraste) | `--color-border-strong` |
| Erro · sucesso · aviso | `--color-feedback-danger` · `-success` · `-warning` |
| Espaço entre rótulo e valor, ícone e texto | `--space-stack-xs` (8) |
| Entre título e subtítulo | `--space-stack-sm` (12) |
| Entre parágrafo e botão | `--space-stack-md` (16) |
| Entre grupos dentro de card/coluna | `--space-stack-lg` (24) |
| Entre blocos de uma seção (título e grade) | `--space-layout-block-gap` (40) |
| Padding vertical de seção | `--space-layout-section-y-mobile` (32) / `-desktop` (48); seção com foto no desktop `--space-layout-media-section-y` (144) |
| Margem lateral / gutter | `--space-layout-margin-mobile` (16) / `-desktop` (96) · `--space-layout-gutter-mobile` (16) / `-desktop` (24) |
| Recuo interno de card com texto | `--space-inset-card` (24) |

## Tipografia (Arpona nos títulos, Work Sans no resto)

| Classe | Mobile | Desktop ≥1024 | Uso |
|---|---|---|---|
| `.t-headline` | Arpona 30/1.1 | Arpona 48/1 | Frase de hero |
| `.t-heading-xl` | Arpona 24/1.1 | Arpona 36/1.1 | H1 de PDP/PLP |
| `.t-heading-lg` | Arpona 20/1.2, maiúsculas | Arpona 30/1.1, maiúsculas | H2 de seção |
| `.t-heading-md` | Arpona 18/1.2 | Arpona 24/1.2 | H3 |
| `.t-heading-sm` | Arpona 16/1.2 | Work Sans 20/1.2 | Nome de produto em card |
| `.t-sub-headline` · `.t-body` · `.t-body-sm` | 18/1.6 · 16/1.6 · 14/1.4 | igual | Abertura · corpo · apoio |
| `.t-caption` · `.t-overline` · `.t-label` | 12/1.4 +0.02em · 12/1.2 +0.12em maiúsc. · 14/1.2 +0.02em | igual | Legenda/frase · rótulo curto · rótulo de campo |
| `.t-button` | 14/1, +0.08em, maiúsculas, SemiBold | igual | Botão e link de ação |
| `.t-price-lg` · `.t-price` · `.t-price-strike` | 16 · 14 · 14 riscado | 20 · 14 · 14 | PDP · card/carrinho · preço cheio |

Fontes: Work Sans 400/500/600 (Google Fonts). Arpona pelo kit Adobe Fonts do projeto (família CSS `arpona`); nunca substituir por outra serifada em produção.

## Componentes (contrato de markup — base em `lamas-components.css`)

- **Button**: ação `<button class="btn btn--primary">`, navegação `<a class="btn …">`. Estilos `--primary | --secondary | --ghost`; forma `--squared` (padrão é pílula); tamanhos `--sm` (36) · padrão (44) · `--lg` (56); `--block` = largura total. Desabilitado com `disabled` ou `aria-disabled="true"`. Rótulo escrito normal no HTML (a caixa alta vem do CSS). Botão só com ícone precisa de `aria-label`. Ghost sobre foto: cor `--color-text-on-media`.
- **Badge**: `<span class="badge">` + tom `--gold | --danger | --success` (sem modificador = neutro). Texto curto. Gold só para edição limitada ou coleção especial. Nunca clicável.
- **Toggle**: `<button class="toggle" role="switch" aria-checked="false">` com rótulo visível ou `aria-label`.
- **Input**: `<div class="field [field--sm|field--lg] [field--filled|field--error|field--disabled]"><input …></div>`. Erro também leva `aria-invalid="true"`.
- **Form Field**: `.form-field` > `label.form-field__label[for]` + `.field` + `p.form-field__helper` (ligado por `aria-describedby`). Erro: `.form-field--error`.
- **Accordion**: `.accordion__item` > `button.accordion__header[aria-expanded][aria-controls]` (texto em `<span>` + `svg.accordion__chevron`) + `div.accordion__panel[role=region][hidden]`. Cada item abre de forma independente. No footer, o painel contém `<ul><li><a>`.
- **Card de produto** (ainda não é componente fechado no Figma): `article.product-card` · largura `--size-card-product` · imagem com raio 0 e badge no canto superior direito · categoria em `.t-caption` · nome em `.t-heading-sm` · `.t-price` · botão `btn--primary btn--squared btn--sm btn--block`.
- **Carrossel mobile**: `.carousel` (scroll horizontal com `scroll-snap`, próximo card aparecendo na borda), container com `role="region"`, `aria-label` e `tabindex="0"`. Sem setas no mobile.

## Layout das seções (desktop → mobile)

- **Nav**: sobre o hero com overlay. Mobile: logo 34px, links e idioma dentro do menu hambúrguer; ícones busca/perfil/sacola/menu com área de toque de 44px.
- **Hero e seções com foto**: desktop com texto na coluna `--size-layout-content-column` (470). Mobile: conteúdo ancorado embaixo, largura total, recorte da imagem centrado no assunto.
- **Vitrine**: desktop 4 cards por linha (gutter 24). Mobile: carrossel.
- **Premiações**: mobile em carrossel, medalhas de 96px.
- **Depoimentos**: desktop 3 cards de `--size-card-testimonial`. Mobile: cards empilhados em largura total.
- **Texto + imagem** (Brasil/Minas): mobile com imagem em cima (mesma proporção) e texto embaixo.
- **Footer mobile**: fundo escuro (`data-theme="dark"`); marca → newsletter → links em Accordion → região/idioma → redes sociais → base legal centralizada.

## Shopify

- Plataforma: Shopify (migração da Tray), tema Online Store 2.0 — confirmar com o dev se a base é o Dawn.
- A pasta `assets/` do tema não tem subpastas: use `assets/lamas-tokens.css` e `assets/lamas-components.css`.
- Carregue os tokens em `layout/theme.liquid` **antes** do CSS do tema: `{{ 'lamas-tokens.css' | asset_url | stylesheet_tag }}`.
- Não crie cores de marca pelos esquemas de cor do editor de tema. Se o tema exigir, configure com os mesmos valores dos primitivos e referencie os tokens no CSS.
- Imagens: `image_url` + `image_tag` com `widths` e `sizes`; mídia sempre com raio 0.

## Decisões provisórias (não "corrija" sem falar com design)

- Button SM usa 36 / 16 / 8 (no Figma a variante está escalada por engano).
- Input vazio usa borda `--color-border-default`, que tem contraste baixo; pode mudar para `--color-border-strong`.
- `.t-heading-sm` muda de família entre mobile e desktop; a definição final está pendente.
- Evite Badge Success e Warning dentro de blocos escuros: o contraste reprova no tema Dark.
- Não existem tokens de sombra/elevação nem de animação além da regra 12: não invente valores, pergunte.
- Select, drawer do menu, card de depoimento e ícones sociais ainda não têm especificação final: peça ao design.

## Quando faltar algo

Não invente valores. Se precisar de algo que não existe, proponha um token novo seguindo o padrão de nomes (`--color-…`, `--space-…`, `--size-…`, `--radius-…`) e sinalize para aprovação. Na dúvida entre dois tokens, escolha pelo **papel** (para que serve), não pelo valor numérico.

## Checklist antes de entregar

- [ ] Nenhum hex, `rgb()` ou px solto no diff (buscar `#[0-9a-fA-F]{3,8}` e `[0-9]+px`), fora dos arquivos de tokens.
- [ ] Nenhum `--primitive-*` ou `--space-N` usado dentro de componente.
- [ ] Nenhum controle interativo com fundo dourado.
- [ ] Todo interativo tem foco visível e alvo de 44px no mobile.
- [ ] Testado em 390px e 1440px, e o bloco `data-theme="dark"` (se houver) conferido.
- [ ] Texto sobre foto tem o overlay por baixo.