Design System

Este documento descreve o sistema de design da plataforma LJ Velas & Aromas, cobrindo identidade visual, paleta de cores, tipografia, espaçamento, sombras, border radius, componentes base e diretrizes de acessibilidade.

---

1. Identidade Visual

A LJ Velas & Aromas é uma marca de velas artesanais premium. A identidade visual reflete os valores da marca: artesanalidade, calor humano, exclusividade e sofisticação acessível.

Conceito

A estética é orgânica e quente — como a chama de uma vela. Os elementos visuais evocam:

• Cera e âmbar: tons terrosos de marrom e laranja dourado para a paleta primária.
• Dourado radiante: brilho sutil que remete a acabamento premium e artesanato de qualidade.
• Verde sálvia: acento natural e sereno, referência a ervas e ingredientes botânicos.
• Creme e off-white: fundos aconchegantes que imitam a textura da cera natural.

A loja transmite uma experiência sensorial mesmo em ambiente digital — texturas suaves, sombras calorosas e tipografia elegante completam esse objetivo.

Paletas de cor principais

Paleta	Papel na marca	Tons centrais
Primary (Marrom âmbar)	Cor dominante — botões, links, destaques	#b96828 (500), #964e1a (600)
Gold (Dourado)	CTA principal, elementos premium, hover de destaque	#F4C430 (400), #d4a020 (500)
Sage (Verde sálvia)	Acento natural, indicadores de sucesso, badges verdes	#2D7A5F (500), #3da887 (400)
Cream	Fundos da loja, seções alternadas	#FFF8E7, #FDF0D5, #F5E6C8
Deep Brown	Texto principal da loja, headings escuros	#1A1410

Tipografia

A combinação tipográfica reforça o posicionamento premium e artesanal:

• Cinzel (serif clássico inspirado em inscrições romanas): usado em títulos e headlines da loja. Transmite sofisticação atemporal.
• Montserrat (sans-serif geométrico moderno): usado em corpo de texto, botões e elementos de UI da loja. Garante legibilidade em qualquer tamanho.

---

2. Dois Design Systems Separados

O projeto mantém dois sistemas de design distintos e intencionalmente desacoplados: um para a loja (área pública) e outro para o painel administrativo.

Loja — Design System "Artesanal"

Característica	Descrição
Tom	Quente, orgânico, sensorial
Cores	Paletas primary/gold/sage/cream — tons terrosos e naturais
Tipografia	Cinzel (títulos) + Montserrat (corpo)
Sombras	shadow-warm, shadow-gold, shadow-soft — difusas, calorosas
Border radius	rounded-card (1.25rem) em produtos, rounded-pill (9999px) em badges
Implementação	Classes Tailwind customizadas no tailwind.config.ts

Admin — Design System "Funcional"

Característica	Descrição
Tom	Clean, neutro, profissional, alta legibilidade
Cores	CSS custom properties (--admin-*) — paleta neutra com acento azul
Tipografia	Inter (sans-serif) — máxima legibilidade em interfaces densas
Sombras	shadow-admin, shadow-admin-md, shadow-admin-lg — sutis e funcionais
Border radius	Valores padrão do Tailwind — interface mais quadrada e densa
Implementação	CSS variables globais, isoladas das classes Tailwind da loja

Por que separar?

1. Contexto de uso radicalmente diferente: a loja precisa encantar visitantes; o admin precisa ser eficiente para operadores que passam horas na interface.
2. Evolução independente: mudanças na identidade da loja não afetam o admin e vice-versa.
3. Preparação para dark mode: CSS variables no admin permitem adicionar um tema escuro sem refatoração.
4. Performance: os tokens do admin são carregados apenas nas rotas /admin/*, evitando CSS desnecessário na loja.

---

3. Sistema de Cores

Paleta Primary — Marrom Âmbar

Cor dominante da loja. Usada em botões de ação secundária, links, indicadores de progresso e bordas de destaque.

Nível	Hex	Uso semântico
50	#fdf8f4	Background de seção levíssimo, hover de linha em tabelas
100	#f7e9d8	Background de cartão sutil, bordas transparentes
200	#eecfaf	Bordas sutis, divisores, skeleton loading
300	#e0ad7d	Estado hover de bordas, ícones decorativos secundários
400	#ce8849	Hover de elementos interativos, ícones de destaque
500	#b96828	Cor primária — botões secundários, links ativos
600	#964e1a	Hover de botão primário, estado pressionado
700	#773b13	Texto de destaque sobre fundo claro
800	#5c2c0d	Texto de alto contraste, cabeçalhos de seção
900	#3D2817	Texto de máximo contraste no tema claro
950	#1A1410	Texto ultra escuro, equivale ao deep — headings principais

Paleta Gold — Dourado Radiante

Reservada para CTAs principais, elementos premium e indicadores de atenção positiva.

Nível	Hex	Uso semântico
50	#fffef0	Background de notificação/alerta dourado suavíssimo
100	#fefce0	Background de badge dourado
200	#fdf5b0	Destaque de texto (highlight)
300	#fce870	Borda de alerta, ícone de estrela
400	#F4C430	Botão CTA dourado (btn-gold), hover de elementos gold
500	#d4a020	Estado ativo do botão gold, texto sobre fundo claro
600	#aa7e15	Texto dourado de alto contraste
700	#7e5d0f	Texto dourado muito contrastante
800	#5c430b	Bordas douradas escuras
900	#3f2f08	Texto dourado de máximo contraste

Paleta Sage — Verde Sálvia

Usada para estados de sucesso, indicadores ecológicos/naturais e elementos de confiança.

Nível	Hex	Uso semântico
50	#eef9f4	Background de mensagem de sucesso
100	#d5f0e4	Background de badge verde
200	#a5ddc8	Bordas de campos válidos
300	#6cc4a8	Ícones de confirmação secundários
400	#3da887	Ícones de sucesso, hover de elementos sage
500	#2D7A5F	Cor sage primária — badge "Em estoque", indicador de entrega
600	#226350	Estado ativo de elementos sage
700	#1a4d3e	Texto sage de alto contraste
800	#123c30	Texto sage muito contrastante
900	#0d2e25	Texto sage de máximo contraste

Cores funcionais da loja

Token	Valor	Uso
cream	#FFF8E7	Fundo principal da loja
cream-dark	#F5E6C8	Seções alternadas, footer
cream-warm	#FDF0D5	Hover de cards, backgrounds de hero
deep	#1A1410	Texto principal — mesmo valor de primary-950

---

4. Tipografia

Fonte	Classificação	Peso(s) usado(s)	Aplicação	Classe Tailwind
Cinzel	Serif clássico	400 (Regular), 600 (SemiBold), 700 (Bold)	Títulos de página, nome da loja, headings de seção, nome de produto	font-cinzel
Montserrat	Sans-serif geométrico	300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)	Corpo de texto, botões, labels, preços, descrições	font-montserrat
Inter	Sans-serif humanista	400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)	Toda a UI do painel admin — formulários, tabelas, menus, notificações	font-inter / font-sans

Hierarquia tipográfica na loja

H1 — Cinzel 700, 2.25–3rem     → Nome da loja, títulos de página principal
H2 — Cinzel 600, 1.75–2.25rem  → Seções de destaque (ex: "Mais Vendidos")
H3 — Cinzel 600, 1.25–1.5rem   → Subseções, nome de produto no card
H4 — Montserrat 600, 1rem      → Labels de categoria, cabeçalhos de formulário
p  — Montserrat 400, 0.875–1rem → Descrições, corpo de texto
small — Montserrat 400, 0.75rem → Metadados, datas, SKU

---

5. Espaçamento e Layout

O sistema de espaçamento usa a escala padrão do Tailwind (base 4px), sem customizações. As diretrizes abaixo definem os valores canonicamente usados no projeto.

Grid

• Layout principal: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
• Grid de produtos: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6
• Grid de seções: grid grid-cols-1 lg:grid-cols-2 gap-12

Gaps padrão

Contexto	Gap
Cards de produto	gap-6 (24px)
Formulários — campos	gap-4 (16px)
Seções de página	gap-12 a gap-16 (48–64px)
Ícone + texto inline	gap-2 (8px)
Breadcrumbs	gap-1 (4px)

Breakpoints Tailwind

Prefixo	Largura mínima	Dispositivo típico
(default)	0px	Mobile pequeno
sm:	640px	Mobile grande / tablet pequeno
md:	768px	Tablet
lg:	1024px	Desktop pequeno / laptop
xl:	1280px	Desktop
2xl:	1536px	Desktop grande / widescreen

---

6. Sombras

As sombras da loja são calorosas e difusas, usando o marrom profundo (#3D2817) como cor base para preservar harmonia com a paleta. As sombras do admin são neutras e funcionais.

Token	Valor CSS	Quando usar
shadow-warm	0 4px 24px -4px rgba(61,40,23,0.12)	Cards de produto, containers da loja, dropdowns
shadow-warm-lg	0 12px 48px -8px rgba(61,40,23,0.20)	Modais, drawers, overlays da loja
shadow-gold	0 4px 20px -4px rgba(244,196,48,0.35)	Botão CTA dourado (btn-gold) em hover/focus
shadow-soft	0 2px 12px 0 rgba(61,40,23,0.06)	Inputs focados, elementos sutis, avatares
shadow-admin	Neutro claro	Containers do painel admin
shadow-admin-md	Neutro médio	Cards e painéis do admin
shadow-admin-lg	Neutro forte	Modais e overlays do admin

Regra de ouro: nunca use shadow-warm em componentes do admin, nem shadow-admin em componentes da loja. Isso garante que cada contexto mantenha sua identidade visual.

---

7. Border Radius

Token	Valor	Aplicação
rounded-pill	9999px	Badges de status, tags de categoria, chips de filtro
rounded-card	1.25rem (20px)	Cards de produto, cards de destaque, banners
rounded-btn	3rem (48px)	Botões grandes — especialmente o btn-gold
rounded	0.25rem (4px) — padrão Tailwind	Inputs, selects, textareas, botões small
rounded-md	0.375rem (6px) — padrão Tailwind	Tooltips, dropdowns, menus do admin
rounded-lg	0.5rem (8px) — padrão Tailwind	Modais, painéis, cards do admin

---

8. Botão Dourado (btn-gold)

O btn-gold é o CTA de máxima prioridade da loja — usado quando há uma única ação principal que deve capturar toda a atenção do usuário.

Características

• Background: gold-400 (#F4C430)
• Texto: deep (#1A1410) — escuro sobre dourado para contraste WCAG AA
• Border radius: rounded-btn (3rem) — formato pílula alongado
• Sombra: shadow-gold em hover/focus
• Fonte: font-montserrat font-semibold
• Padding: px-8 py-4 para tamanho grande, px-6 py-3 para médio

Hierarquia de botões na loja

Prioridade	Estilo	Uso
1 — Primário ouro	btn-gold (gold-400, texto deep)	"Adicionar ao Carrinho", "Finalizar Compra"
2 — Primário âmbar	bg-primary-500 text-white rounded-btn	"Ver Produto", "Explorar Coleção"
3 — Secundário	border border-primary-500 text-primary-600 rounded-btn	"Saiba Mais", "Ver Todos"
4 — Ghost / Link	text-primary-600 underline	Ações terciárias, navegação inline

Quando NÃO usar btn-gold

• Em mais de um lugar por tela (dilui o impacto).
• No painel admin (usar botões neutros do admin DS).
• Em ações destrutivas (cancelar, deletar) — usar vermelho com estilo outline.

---

9. Admin Design System

O admin usa um sistema completamente separado, baseado em CSS custom properties (variáveis CSS), para máxima flexibilidade e preparação para temas alternativos (dark mode).

Variáveis CSS disponíveis

/* Estruturais */
--admin-bg              → Fundo da página do admin
--admin-surface         → Superfície de cards e painéis
--admin-surface-raised  → Superfície elevada (modais, popovers)

/* Bordas */
--admin-border          → Bordas padrão — separadores, inputs
--admin-border-strong   → Bordas de ênfase — alertas, foco

/* Texto */
--admin-text            → Texto primário — labels, valores
--admin-text-secondary  → Texto secundário — descrições, metadados
--admin-text-disabled   → Texto desabilitado — campos inativos

/* Acento */
--admin-accent          → Cor de destaque — botões primários, links ativos
--admin-accent-hover    → Hover do acento
--admin-accent-subtle   → Background de item selecionado / ativo

/* Sidebar */
--admin-sidebar-bg           → Fundo da sidebar
--admin-sidebar-text         → Texto de item de menu
--admin-sidebar-muted        → Texto secundário / ícones inativos
--admin-sidebar-active-bg    → Background de item ativo
--admin-sidebar-active-text  → Texto de item ativo
--admin-sidebar-border       → Linha divisória da sidebar

Por que CSS variables no admin?

1. Dark mode zero-cost: trocar o tema é alterar os valores das variáveis no seletor [data-theme="dark"] — sem duplicar classes Tailwind.
2. Escopo isolado: as variáveis são definidas em .admin-layout ou [data-admin], sem vazar para a loja.
3. Legibilidade: color: var(--admin-text) é mais expressivo do que lembrar qual shade de cinza usar.
4. Customização por cliente: em versões white-label futuras, basta sobrescrever as variáveis.

---

10. Acessibilidade

Contrastes mínimos (WCAG 2.1 — Nível AA)

Par de cores	Rácio mínimo	Status
btn-gold: texto deep (#1A1410) sobre gold-400 (#F4C430)	≥ 4.5:1	✅ Atende AA
Texto primary-700 sobre cream (#FFF8E7)	≥ 4.5:1	✅ Atende AA
Texto branco sobre primary-500 (#b96828)	≥ 4.5:1	✅ Atende AA
Texto admin-text sobre admin-bg	≥ 4.5:1	✅ Garantido por variável
Texto grande (≥ 18pt ou 14pt bold)	≥ 3:1	Requisito relaxado

Sempre verifique o contraste ao criar novos pares de cores usando ferramentas como WebAIM Contrast Checker.

Foco visível

Todo elemento interativo deve exibir um indicador de foco visível. O projeto usa:

• Loja: focus-visible:ring-2 focus-visible:ring-gold-400 focus-visible:ring-offset-2
• Admin: focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] focus-visible:ring-offset-2

Nunca use outline-none sem substituir por um estilo de foco equivalente.

Labels em inputs

• Todo <input>, <select> e <textarea> deve ter um <label> associado via htmlFor / id, ou aria-label quando o label visual é impraticável.
• Mensagens de erro devem ser associadas ao campo via aria-describedby.
• Campos obrigatórios devem ser marcados com aria-required="true" e indicador visual (*).

Semântica HTML

• Use elementos HTML semânticos (<nav>, <main>, <section>, <article>, <aside>, <header>, <footer>) em vez de <div> genérico onde há significado estrutural.
• Imagens de produto devem ter alt descritivo (ex: alt="Vela de soja aromática Lavanda & Baunilha, 200g").
• Imagens puramente decorativas devem ter alt="".