Lumme Visual Identity

Uso das Cores

🔤 Tipografia

/* SEMPRE importar ambas as fontes */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-display: 'Playfair Display', Georgia, serif;  /* Títulos, H1, H2, marca */
  --font-body:    'Inter', system-ui, sans-serif;       /* Tudo o mais */
}

Escala Tipográfica

🖼️ Sistema de Imagens

Estilo Fotográfico da Marca

FEEL: "Farmácia de luxo em meio à floresta"

Características obrigatórias:
  ✅ Produtos em frasco de vidro âmbar/verde escuro com tampa dourada
  ✅ Fundo neutro: branco puro, creme (#F8F5F0) ou verde floresta suave
  ✅ Elementos naturais: folhas verdes frescas, gotas de água, texturas botânicas
  ✅ Iluminação: suave, lateral, quente (simulando luz natural de manhã)
  ✅ Sombra: sutil drop shadow dourada/terrosa abaixo do produto
  ✅ Proporção: quadrada (1:1) para cards, 4:5 para destaque, 16:9 para hero
  ✅ Color grading: leve toque quente, saturation controlada
  
  ❌ EVITAR: fundos brancos puros sem contexto, iluminação estrelante
  ❌ EVITAR: elementos plásticos, sintéticos ou artificiais
  ❌ EVITAR: filtros muito saturados (Instagram-style)
  ❌ EVITAR: texto sobreposto à parte principal do produto

Prompts Padrão para generate_image

Produto Principal (Sérum):

A premium botanical skincare serum glass dropper bottle with a dark forest green 
label and gold metallic cap, sitting on a clean cream (#F8F5F0) background. 
Surrounded by fresh green monstera leaves, white jasmine flowers, and tiny water 
droplets. Soft morning side-lighting casts a warm golden shadow. Top-down 45-degree 
editorial angle. Ultra high-end cosmetic brand photography. No text. 8K resolution.

Hero Background:

Lush tropical botanical flat lay — green palm fronds, monstera leaves, eucalyptus 
branches on a cream linen texture. Subtle golden morning light from top-left. 
Negative space on left 40% for text overlay. Premium beauty brand aesthetic. 
No products, no text. Nature photography editorial style.

Ingrediente (Jambu):

Close-up macro photography of fresh jambu plant (Acmella oleracea) with purple flowers
and bright green leaves with water droplets. Cream and soft green tones, warm morning 
light, premium botanical illustration style. No text. Square crop.

📐 Regras de Composição Layout

Grid System

Container max: 1280px (max-w-7xl)
Padding lateral: 1.5rem mobile / 2rem tablet / 4rem desktop
Gap seções: 6rem (py-24) entre seções principais
Gap interno: 2rem (gap-8) entre elementos de mesma seção

Border Radius

--radius-sm:   0.5rem;   /* Inputs, badges pequenos */
--radius-md:   0.75rem;  /* Botões, tags */
--radius-lg:   1.25rem;  /* Cards */
--radius-xl:   2rem;     /* Cards principais, modals */
--radius-full: 9999px;   /* Pills, avatares, badges circulares */

Shadow System

--shadow-xs:  0 1px 3px 0 rgb(22 48 32 / 0.08);
--shadow-sm:  0 4px 12px -2px rgb(22 48 32 / 0.10);
--shadow-md:  0 8px 24px -4px rgb(22 48 32 / 0.12);
--shadow-lg:  0 16px 48px -8px rgb(22 48 32 / 0.16);
--shadow-xl:  0 32px 64px -12px rgb(22 48 32 / 0.20);
--shadow-gold: 0 8px 32px -4px rgb(220 174 58 / 0.25);

🧩 Componentes Visuais Padrão

Eyebrow (Subtítulo acima do título)

<span class="inline-block text-[11px] font-bold tracking-[0.25em] text-[#8A9E7B] uppercase mb-3">
  Puro Cuidado Natural
</span>

Divider Orgânico

<div class="relative h-px my-16">
  <div class="absolute inset-0 bg-gradient-to-r from-transparent via-[#DCAE3A]/30 to-transparent"></div>
</div>

Benefit Badge (estilo ProBotanics)

<div class="inline-flex items-center gap-2 bg-white/90 backdrop-blur-sm 
            border border-[#8A9E7B]/20 rounded-full px-4 py-2 shadow-sm">
  <span class="w-6 h-6 rounded-full bg-[#8A9E7B]/20 flex items-center justify-center">
    <!-- ícone SVG aqui -->
  </span>
  <span class="text-[11px] font-bold text-[#163020] uppercase tracking-wide">Natural</span>
</div>

CTA Primário

<a href="#" class="inline-flex items-center justify-center gap-2 px-8 py-4 
                   bg-[#DCAE3A] text-[#163020] font-bold text-sm rounded-full 
                   shadow-[0_8px_32px_-4px_rgb(220_174_58/0.40)] 
                   hover:bg-[#F0C84B] hover:shadow-[0_12px_40px_-4px_rgb(220_174_58/0.50)]
                   active:scale-[0.98] transition-all duration-200 uppercase tracking-wider">
  Ver Oferta →
</a>

Card de Produto

<article class="group bg-white rounded-[1.25rem] overflow-hidden 
                border border-[#163020]/5 hover:border-[#DCAE3A]/30
                shadow-[0_4px_12px_-2px_rgb(22_48_32/0.08)] 
                hover:shadow-[0_16px_48px_-8px_rgb(22_48_32/0.16)]
                hover:-translate-y-1 transition-all duration-500">

🌿 Elementos Decorativos SVG

Folha Decorativa (use para seções premium)

<!-- Leaf decoration top-right -->
<div class="absolute -top-8 -right-8 w-40 h-40 opacity-10 pointer-events-none">
  <svg viewBox="0 0 200 200" fill="#163020">
    <path d="M100,10 C100,10 180,50 180,120 C180,170 140,190 100,190 C60,190 20,170 20,120 C20,50 100,10 100,10 Z"/>
  </svg>
</div>

✅ Checklist Visual (antes de finalizar qualquer página)

• Playfair Display em TODOS os títulos H1, H2, H3?
• Inter em todo texto de corpo e UI?
• Paleta restrita às 5 cores principais?
• Fundo de página em --lumme-cream (#F8F5F0)?
• CTAs: dourado com texto floresta?
• Imagens: fundo creme, elementos botânicos?
• Espaçamento generoso (py-24 entre seções)?
• Mobile-first? (375px funciona?)
• Hover states em todos os elementos interativos?
• loading="lazy" em imagens abaixo do fold?
• Sombras verdes (não cinzas) nos cards?