Produtos Sobre Apresentação Design System Destaques

Guia de Design

Design System

Um guia completo dos elementos visuais e componentes que compõem a identidade da EORA Brasil, garantindo consistência e qualidade em todas as nossas interfaces.

Explore nossa documentação detalhada de cores, tipografia, componentes e padrões de design que fazem parte da nossa identidade visual única.

Elementos da Marca

Uso do Logotipo

Principal

Fundo Escuro

Gradiente

Fundo Claro

Manchas e Padrões

Manchas Orgânicas - Principal

Manchas Kids - Contraste

Padrão Natural

Diretrizes de Uso:

Manchas orgânicas devem ser usadas como elemento de fundo para criar profundidade
Para a linha Kids, combine as manchas principais com cores suaves de contraste
O padrão natural pode ser usado como textura sutil em fundos claros

Cores

Cores Primárias

Nossa paleta principal é baseada em tons de verde que representam nossa conexão com a natureza.

hunter-50

#F4F7F4

hunter-100

#E6EDE6

hunter-200

#C5D4C5

hunter-300

#9CB69C

hunter-400

#6B8F6B

hunter-500

#355135

hunter-600

#2A412A

hunter-700

#1F301F

hunter-800

#152015

hunter-900

#0A100A

hunter-950

#050805

Cores Secundárias

Cores complementares que dão suporte à nossa identidade visual.

forest-50

#F5F8F5

forest-100

#E8F0E8

forest-200

#C8D8C8

forest-300

#A1BFA1

forest-400

#729872

forest-500

#228B22

forest-600

#1B6F1B

forest-700

#145214

forest-800

#0E360E

forest-900

#071B07

forest-950

#040D04

Cores de Contraste - Linha Kids

Paleta especial para produtos infantis, combinando nossa identidade com tons suaves e alegres.

Lavanda

#E6E6FA

Rosa Suave

#FFC0CB

Amarelo Pastel

#FFEF96

Azul Bebê

#89CFF0

Tipografia

Sistema Tipográfico

Nossa tipografia combina a elegância da Cormorant Garamond para títulos de destaque com a clareza da Outfit para textos. Esta combinação cria uma hierarquia visual clara e transmite naturalidade e sofisticação.

Cormorant Garamond

Fonte serifada para títulos de destaque

Light

Regular

Medium

Semibold

Bold

Outfit

Fonte sem serifa para textos e interface

Light

Regular

Medium

Semibold

Bold

Hierarquia de Títulos

Display Large

Para títulos principais e heróis

Beleza Natural

Size: text-5xl md:text-6xl lg:text-7xl Weight: font-bold Font: Cormorant_Garamond

Display Medium

Para títulos de seção importantes

Cuidado Essencial

Size: text-4xl md:text-5xl lg:text-6xl Weight: font-semibold Font: Cormorant_Garamond

Heading 1

Para títulos de seção secundários

Produtos em Destaque

Size: text-3xl md:text-4xl Weight: font-medium Font: Outfit

Heading 2

Para subtítulos e cards principais

Benefícios do Produto

Size: text-2xl md:text-3xl Weight: font-medium Font: Outfit

Estilos de Texto

Body Large

Para textos introdutórios e destaques

Descubra nossa linha completa de produtos naturais, desenvolvidos com ingredientes orgânicos selecionados.

Size: text-lg md:text-xl Weight: font-light Font: Outfit

Body Default

Para textos gerais e descrições

Nossos produtos são desenvolvidos com ingredientes naturais e sustentáveis.

Size: text-base Weight: font-normal Font: Outfit

Body Small

Para informações secundárias e metadados

Informações adicionais e detalhes do produto

Size: text-sm Weight: font-normal Font: Outfit

Estilos Especiais

Overline

Para rótulos e categorias

NOVO LANÇAMENTO

Size: text-sm uppercase tracking-wider Weight: font-medium Font: Outfit

Quote

Para citações e destaques

"A natureza é a melhor fonte de beleza"

Size: text-2xl md:text-3xl Weight: font-normal italic Font: Cormorant_Garamond

Button

Para botões e calls-to-action

COMPRAR AGORA

Size: text-sm md:text-base Weight: font-medium Font: Outfit

Heros

Hero Padrão

Novo Lançamento

Natureza para
sua Beleza

Descubra nossa linha completa de produtos naturais, desenvolvidos com ingredientes orgânicos selecionados.

Características:

Layout em duas colunas com imagem flutuante
Gradientes suaves e efeitos de blur para profundidade
Animações sutis nos botões e imagem

Componentes

Botão Primário

<button class="bg-gradient-to-r from-[#2A412A] to-[#1B6F1B] text-white px-6 py-3 rounded-full hover:shadow-lg transition-all duration-300 transform hover:scale-105 font-medium">
  Botão Primário
</button>

Botão Secundário

<button class="border-2 border-[#2A412A] text-[#2A412A] px-6 py-3 rounded-full hover:bg-[#F4F7F4] transition-all duration-300 font-medium">
  Botão Secundário
</button>

Texto Button

<button class="text-[#2A412A] hover:text-[#1B6F1B] font-medium flex items-center gap-2 group">
  <span>Text Button</span>
  <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
  </svg>
</button>

Botão de Ícone

<button class="w-10 h-10 rounded-full bg-[#2A412A] text-white flex items-center justify-center hover:bg-[#1B6F1B] transition-colors">
  <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
  </svg>
</button>

Cartão

Título do Cartão

Conteúdo do cartão

<div class="group relative">
  <div class="absolute inset-0 bg-gradient-to-br from-[#F4F7F4] to-[#E8F0E8] rounded-3xl -rotate-6 group-hover:rotate-0 transition-transform duration-300"></div>
  <div class="relative bg-white rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300">
    <div class="w-12 h-12 bg-[#F4F7F4] rounded-xl mb-4 flex items-center justify-center">
      <svg class="w-6 h-6 text-[#2A412A]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
    </div>
    <h3 class="text-xl font-bold text-[#2A412A] mb-4">Título do Cartão</h3>
    <p class="text-[#4A774A]">Conteúdo do cartão</p>
    <div class="mt-6">
      <button class="text-[#2A412A] hover:text-[#1B6F1B] font-medium flex items-center gap-2 group">
        <span>Saiba Mais</span>
        <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
</div>

Campo de Entrada

<input 
  type="text" 
  placeholder="Digite aqui..." 
  class="w-full px-4 py-3 rounded-lg border-2 border-[#E6EDE6] focus:border-[#2A412A] focus:outline-none transition-colors text-[#2A412A] placeholder-[#7DA47D]"
/>

Distintivo

<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#F4F7F4] text-[#2A412A]">
  Distintivo
</span>

Alerta

Mensagem de alerta

<div class="bg-[#F4F7F4] border-l-4 border-[#2A412A] p-4 rounded-r-lg">
  <div class="flex items-center gap-3">
    <svg class="w-5 h-5 text-[#2A412A]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <p class="text-[#2A412A] font-medium">Mensagem de alerta</p>
  </div>
</div>

Ícones

Confirmar

Adicionar

Seta Direita

Informação

Espaçamento

Espaço 4

1rem (16px)

Espaço 6

1.5rem (24px)

Espaço 8

2rem (32px)

Espaço 12

3rem (48px)

Componentes de E-commerce

Cartão de Produto

Categoria

-15%

Nome do Produto

Descrição do produto em duas linhas para manter a consistência do layout.

R$ 89,90 R$ 105,90

<div class="group relative">
  <div class="absolute inset-0 bg-gradient-to-br from-[#F4F7F4] to-[#E8F0E8] rounded-3xl -rotate-6 group-hover:rotate-0 transition-transform duration-300"></div>
  <div class="relative bg-white rounded-3xl p-6 shadow-xl hover:shadow-2xl transition-all duration-300">
    <div class="relative aspect-square mb-4 overflow-hidden rounded-xl">
      <img 
        src="https://i.ibb.co/zhbPSK1k/IMG-20241218-WA0121.jpg" 
        alt="Nome do Produto"
        class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500"
      />
      <div class="absolute top-4 left-4 bg-[#2A412A] text-white px-3 py-1 rounded-full text-sm">
        Categoria
      </div>
      <div class="absolute top-4 right-4 bg-rose-500 text-white px-3 py-1 rounded-full text-sm font-bold">
        -15%
      </div>
    </div>
    <h3 class="text-lg font-semibold text-[#2A412A] mb-2">Nome do Produto</h3>
    <p class="text-[#4A774A] text-sm mb-4 line-clamp-2">Descrição do produto em duas linhas para manter a consistência do layout.</p>
    <div class="flex items-center justify-between">
      <div class="flex flex-col">
        <span class="text-2xl font-bold text-[#2A412A]">R$ 89,90</span>
        <span class="text-sm text-gray-500 line-through">R$ 105,90</span>
      </div>
      <button class="bg-[#2A412A] text-white px-4 py-2 rounded-full hover:bg-[#1B6F1B] transition-colors duration-300 flex items-center gap-2">
        <span>Comprar</span>
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
        </svg>
      </button>
    </div>
  </div>
</div>

Contador de Quantidade

<div class="flex items-center gap-2">
  <button class="w-8 h-8 rounded-full bg-[#F4F7F4] text-[#2A412A] flex items-center justify-center hover:bg-[#E8F0E8] transition-colors">
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
    </svg>
  </button>
  <input 
    type="number" 
    value="1" 
    min="1"
    class="w-16 text-center px-2 py-1 border-2 border-[#E6EDE6] rounded-lg focus:border-[#2A412A] focus:outline-none"
  />
  <button class="w-8 h-8 rounded-full bg-[#F4F7F4] text-[#2A412A] flex items-center justify-center hover:bg-[#E8F0E8] transition-colors">
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
    </svg>
  </button>
</div>

Avaliação do Produto

{[1, 2, 3, 4, 5].map(star => ( ))}

(4.5/5 - 128 avaliações)

<div class="flex items-center gap-2">
  <div class="flex items-center">
    {[1, 2, 3, 4, 5].map(star => (
      <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
      </svg>
    ))}
  </div>
  <span class="text-sm text-[#4A774A]">(4.5/5 - 128 avaliações)</span>
</div>

Seletor de Variação

Tamanho:

{['P', 'M', 'G', 'GG'].map(size => ( ))}

<div class="space-y-4">
  <label class="block text-[#2A412A] font-medium">Tamanho:</label>
  <div class="flex flex-wrap gap-2">
    {['P', 'M', 'G', 'GG'].map(size => (
      <button class="w-10 h-10 rounded-full bg-white text-[#2A412A] border-2 border-[#E6EDE6] hover:border-[#2A412A] focus:border-[#2A412A] focus:outline-none transition-colors font-medium">
        {size}
      </button>
    ))}
  </div>
</div>

Item do Carrinho

Nome do Produto

Tamanho: M

R$ 89,90

<div class="flex items-center gap-4 p-4 bg-white rounded-xl border border-[#E6EDE6]">
  <img 
    src="https://i.ibb.co/Z6Z7kBj0/IMG-20250109-WA0025.jpg" 
    alt="Nome do Produto" 
    class="w-20 h-20 object-cover rounded-lg"
  />
  <div class="flex-1">
    <h4 class="text-[#2A412A] font-medium">Nome do Produto</h4>
    <p class="text-sm text-[#4A774A]">Tamanho: M</p>
    <div class="flex items-center gap-4 mt-2">
      <div class="flex items-center gap-2">
        <button class="w-6 h-6 rounded-full bg-[#F4F7F4] text-[#2A412A] flex items-center justify-center hover:bg-[#E8F0E8]">-</button>
        <span class="text-[#2A412A]">1</span>
        <button class="w-6 h-6 rounded-full bg-[#F4F7F4] text-[#2A412A] flex items-center justify-center hover:bg-[#E8F0E8]">+</button>
      </div>
      <span class="text-[#2A412A] font-medium">R$ 89,90</span>
    </div>
  </div>
  <button class="text-rose-500 hover:text-rose-600">
    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m4-6v.01M5 7V4h14v3H5z" />
    </svg>
  </button>
</div>

Galeria de Produtos

Padrão

Linha Kids

Produtos em Destaque

Padrão

Destaque da Semana

Nome do Produto em Destaque

Descrição detalhada do produto destacando seus principais benefícios e características especiais.

R$ 89,90 R$ 129,90

Linha Kids

Destaque da Semana

Nome do Produto em Destaque

Descrição detalhada do produto destacando seus principais benefícios e características especiais.

R$ 89,90 R$ 129,90

Características do Produto

Padrão

100% Natural

Ingredientes naturais e seguros

Dermatologicamente Testado

Seguro para peles sensíveis

Sustentável

Embalagem reciclável

Linha Kids

100% Natural

Ingredientes naturais e seguros

Dermatologicamente Testado

Seguro para peles sensíveis

Sustentável

Embalagem reciclável

Call to Action

Padrão

Descubra Nossos Produtos Naturais

Produtos seguros e eficazes para toda a família, desenvolvidos com ingredientes naturais selecionados.

Linha Kids

Descubra Nossos Produtos Naturais

Produtos seguros e eficazes para toda a família, desenvolvidos com ingredientes naturais selecionados.

Linhas de Produtos

Linha Kids

Produtos naturais e seguros desenvolvidos especialmente para a pele delicada das crianças

Infantil

Kit Cuidados Kids

Kit completo de cuidados naturais para crianças

Natural Vegano Kit Completo

R$ 99.90

Infantil

Sabonete Kids

Sabonete natural e suave para pele sensível

Natural Vegano Dermatologicamente Testado

R$ 25.90

Infantil

Shampoo Kids Natural

Shampoo suave com ingredientes naturais para crianças

Natural Vegano Hipoalergênico

R$ 45.90

Design System por Integrare

Este design system foi cuidadosamente desenvolvido pela Agência Integrare, combinando expertise em design com a essência única da EORA Brasil.

aintegrare.com.br

• redeintegrare.com

• 2025

Design System

Elementos da Marca

Uso do Logotipo

Manchas e Padrões

Diretrizes de Uso:

Cores

Cores Primárias

Cores Secundárias

Cores de Contraste - Linha Kids

Tipografia

Sistema Tipográfico

Cormorant Garamond

Outfit

Hierarquia de Títulos

Display Large

Display Medium

Heading 1

Heading 2

Estilos de Texto

Body Large

Body Default

Body Small

Estilos Especiais

Overline

Quote

Button

Heros

Hero Padrão

Natureza para sua Beleza

Características:

Componentes

Botão Primário

Botão Secundário

Texto Button

Botão de Ícone

Cartão

Título do Cartão

Campo de Entrada

Distintivo

Alerta

Ícones

Espaçamento

Componentes de E-commerce

Cartão de Produto

Nome do Produto

Contador de Quantidade

Avaliação do Produto

Seletor de Variação

Item do Carrinho

Nome do Produto

Galeria de Produtos

Padrão

Linha Kids

Produtos em Destaque

Padrão

Nome do Produto em Destaque

Linha Kids

Nome do Produto em Destaque

Características do Produto

Padrão

100% Natural

Dermatologicamente Testado

Sustentável

Linha Kids

100% Natural

Dermatologicamente Testado

Sustentável

Call to Action

Padrão

Descubra Nossos Produtos Naturais

Linha Kids

Descubra Nossos Produtos Naturais

Linhas de Produtos

Linha Kids

Kit Cuidados Kids

Sabonete Kids

Shampoo Kids Natural

Design System por Integrare

Natureza para
sua Beleza