Glipearte Pegue e Monte

Design System
da marca

Documento de consulta para manter site, redes sociais, catálogo e futuras aplicações visualmente coerentes. Os valores agora estão separados entre logo, site e observações pendentes; valores extraídos do backup são identificados como tal.

01 · Fundação

O que sustenta a marca

Posicionamento

A Glipearte Pegue e Monte atua com aluguel de peças e kits para celebrações, permitindo que o cliente retire o material e monte sua própria decoração, com foco em praticidade e em tornar momentos comemorativos mais acessíveis.

Público

Pessoas interessadas em comemorar aniversários, batizados, bodas, chá revelação, chá de fraldas, mesversários, primeira comunhão e outras ocasiões especiais.

Personalidade visual

AlegreEleganteComemorativaAcessívelAfetiva

Adjetivos derivados da combinação de slogan, fotografias, linguagem e composição visual observadas nos materiais.

✓ A marca faz

Valoriza celebrações e experiências.
Mostra pessoas, eventos e emoção.
Combina sofisticação com comunicação simples.
Usa fotografia como parte importante da narrativa.
Apresenta kits e possibilidades de comemoração.

× A marca evita

Transformar a comunicação em catálogo frio de produtos.
Confundir cores da interface de redes sociais com cores da marca.
Adicionar novas cores sem origem nos materiais existentes.
Usar fontes como “oficiais” sem confirmação do arquivo ou CSS.
Perder a legibilidade do texto sobre fotografias.

02 · Logos

Marca sobre fundos claros e escuros

O arquivo disponível nesta documentação é a versão enviada pelo responsável pela marca e está incorporado diretamente neste HTML.

Aplicação em fundo claro

Arquivo incorporado: logo.png

#E9CC85 · #4566A3 · #000000 · #FFFFFF

Aplicação em fundo escuro

A mesma arte pode ser aplicada sobre fundo escuro desde que haja contraste suficiente.

Não existe uma versão branca oficial da logo Glipearte no backup analisado

Regras de aplicação: não distorcer, não alterar as proporções, não recriar a tipografia do logotipo, não trocar as cores extraídas sem uma versão oficial do arquivo e preservar área livre ao redor da marca. Como somente uma versão de arquivo foi disponibilizada nesta conversa, outras versões devem ser adicionadas a esta página quando fornecidas.

03 · Cores

Paleta real: logo × site

O backup do WordPress trouxe a configuração do Astra e permitiu confirmar os valores usados pelo site. A logo possui uma paleta própria, diferente da paleta global do site.

Divergência confirmada: a logo usa #E9CC85 e #4566A3, enquanto o site está configurado com #FA2E7D, #DB0356, #FBD8A9, #E2C298 e outros tons. Isso não é necessariamente um erro, mas significa que logo e site não compartilham uma única paleta cromática.

Cores do arquivo da logo

Dourado/champagne--glipearte-logo-gold

#E9CC85

Cor predominante real do arquivo da logo. Origem: arquivo da logo.

Azul--glipearte-logo-blue

#4566A3

Cor azul predominante real do arquivo da logo. Origem: arquivo da logo.

Branco--glipearte-logo-white

#FFFFFF

Áreas brancas da logo. Origem: arquivo da logo.

Preto--glipearte-logo-black

#000000

Tipografia/traços da logo. Origem: arquivo da logo.

Paleta global configurada no site

Rosa principal do tema--ast-global-color-0

#FA2E7D

Títulos de destaque, hover e elementos de ênfase. Origem: configuração real do site.

Rosa escuro--ast-global-color-1

#DB0356

Hover/estado secundário do tema. Origem: configuração real do site.

Carvão--ast-global-color-2

#262626

Texto principal e texto de botões. Origem: configuração real do site.

Marrom ameixa--ast-global-color-3

#704757

Texto secundário / tom de apoio. Origem: configuração real do site.

Pêssego--ast-global-color-4

#FBD8A9

Fundo principal das seções e botões. Origem: configuração real do site.

Branco--ast-global-color-5

#FFFFFF

Fundos claros e contraste. Origem: configuração real do site.

Bege--ast-global-color-6

#E2C298

Bordas/detalhes de apoio. Origem: configuração real do site.

Marrom escuro--ast-global-color-7

#322B22

Overlay de imagens. Origem: configuração real do site.

Preto--ast-global-color-8

#000000

Contraste. Origem: configuração real do site.

04 · Tipografia

Fontes e escala confirmadas

Agora há confirmação no backup do WordPress: o Astra está configurado com Open Sans para corpo e Playfair Display para títulos.

Open Sans

Família do corpo de texto.

Peso: 400

Tamanho base desktop: 15px

Line-height: 1.6em

Tablet/mobile não possuem tamanho explícito no Astra; o valor fica herdado.

Playfair Display

Família dos títulos.

Peso: 700

Line-height: 1em

Também é a família configurada para títulos globais do Astra.

Uso	Fonte	Peso	Desktop	Mobile
Corpo	Open Sans	400	15px	Sem valor próprio; herda
Títulos globais	Playfair Display	700	Escala por heading	Escala específica existe em elementos do site; ver abaixo
H1 do conteúdo importado	Playfair Display	700	90px no conjunto Astra Sites	40px
H2 do conteúdo importado	Playfair Display	700	50px	30px
H3 do conteúdo importado	Playfair Display	700	35px	25px
H4	Playfair Display	700	20px	Não explicitado
H5	Playfair Display	700	18px	Não explicitado
H6	Playfair Display	700	15px	Não explicitado

Nota: os valores de H1–H6 acima aparecem na configuração de site do Astra presente no backup. O H1/H2 visual da Home também pode receber ajustes próprios no Elementor; portanto, não trate a escala como regra universal para todo componente sem conferir o widget específico.

05 · Espaçamento

Valores realmente usados

Em vez de inventar uma escala, a documentação registra os valores encontrados no Elementor da Home. Eles são valores observados, não uma escala semântica oficial.

12px

observado no site

15px

observado no site

24px

observado no site

30px

observado no site

32px

observado no site

36px

observado no site

40px

observado no site

48px

observado no site

64px

observado no site

80px

observado no site

96px

observado no site

144px

observado no site

168px

observado no site

244px

observado no site

Repetições relevantes: 24px aparece em gaps; 48px aparece repetidamente em padding; 64px, 80px e 96px também aparecem em seções; 12px e 15px aparecem em componentes. O site ainda não apresenta uma escala única nomeada como tokens.

06 · Componentes

Blocos visuais que se repetem

Botões

O Astra usa padding desktop de 15px 40px e radius de 30px. No botão específico da Home, há ajustes adicionais de padding no Elementor.

Card de portfólio

Aniversários

Estrutura observada: fotografia + overlay escuro + título centralizado.

CTA

Uma celebração começa com uma boa escolha

Bloco de chamada usando a cor #FAD8AA, presente no site analisado.

Bloco institucional

Título + texto explicativo.

Categoria

Imagem contextual + nome da ocasião.

Chamada

Mensagem curta + ação.

Diagnóstico

Divergências confirmadas

O backup permitiu sair da análise por screenshot e comparar a logo com a configuração efetiva do site.

Logo × Site

Logo: dourado #E9CC85 + azul #4566A3.

Site: rosa #FA2E7D + rosa escuro #DB0356 + pêssego #FBD8A9 + bege #E2C298.

Tipografia

A tipografia que parecia apenas “serifada + sans-serif” agora está confirmada: Playfair Display 700 para títulos e Open Sans 400 para corpo.

Overlay

Os cards de categorias usam #322B22 como overlay global e passam para #FA2E7D no hover.

Botões

O Astra define 15px 40px de padding desktop e 30px de radius. O botão da Home recebe ajustes próprios no Elementor.

07 · Aplicações

Como a identidade aparece em cada canal

SITE

Site

Hero com fotografia, overlay escuro, Playfair Display nos títulos, Open Sans no corpo, chamadas claras, botões arredondados e cards de categorias. A paleta do site é a paleta Astra rosa/pêssego, não a paleta azul/dourada da logo.

INSTAGRAM

Instagram

Comunicação dinâmica, fotos e vídeos de eventos, logo como elemento de reconhecimento e linguagem emocional voltada à comemoração.

FACEBOOK

Facebook

Uso mais institucional: descrição da empresa, informações de contato, endereço e conexão com os demais canais.

08 · Tokens

CSS pronto para copiar

Este bloco agora distingue os tokens da logo dos tokens reais configurados no site.

:root {
  /* =========================
     GLIPEARTE — LOGO
     Valores extraídos do PNG
     ========================= */
  --glipearte-logo-gold: #E9CC85;
  --glipearte-logo-blue: #4566A3;
  --glipearte-logo-white: #FFFFFF;
  --glipearte-logo-black: #000000;

  /* =========================
     GLIPEARTE — SITE / ASTRA
     Valores extraídos do backup
     ========================= */
  --ast-global-color-0: #FA2E7D;
  --ast-global-color-1: #DB0356;
  --ast-global-color-2: #262626;
  --ast-global-color-3: #704757;
  --ast-global-color-4: #FBD8A9;
  --ast-global-color-5: #FFFFFF;
  --ast-global-color-6: #E2C298;
  --ast-global-color-7: #322B22;
  --ast-global-color-8: #000000;

  /* Aliases recomendados */
  --glipearte-web-primary: var(--ast-global-color-0);
  --glipearte-web-primary-dark: var(--ast-global-color-1);
  --glipearte-web-text: var(--ast-global-color-2);
  --glipearte-web-text-muted: var(--ast-global-color-3);
  --glipearte-web-peach: var(--ast-global-color-4);
  --glipearte-web-white: var(--ast-global-color-5);
  --glipearte-web-beige: var(--ast-global-color-6);
  --glipearte-web-overlay: var(--ast-global-color-7);
  --glipearte-web-black: var(--ast-global-color-8);

  /* Tipografia */
  --glipearte-font-body: "Open Sans", sans-serif;
  --glipearte-font-heading: "Playfair Display", serif;

  /* Layout confirmado */
  --glipearte-container-width: 1200px;
  --glipearte-narrow-width: 750px;

  /* Botão Astra */
  --glipearte-button-padding-desktop: 15px 40px;
  --glipearte-button-radius-desktop: 30px;
}

09 · Checklist

Antes de publicar

Use este bloco para revisar qualquer nova página, post, catálogo ou peça visual.

A logo utilizada é um arquivo oficial e não foi deformada. As cores usadas pertencem aos valores já confirmados ou foram aprovadas conscientemente. O texto mantém contraste suficiente com o fundo e com as fotografias. As cores da interface de Instagram/Facebook não foram confundidas com cores da marca. A peça transmite celebração, praticidade e emoção. As imagens mostram o contexto da comemoração quando isso for mais relevante do que um produto isolado. Fontes ainda não confirmadas não foram apresentadas como tipografia oficial. A peça foi verificada em tela pequena e não possui rolagem horizontal. Links, contatos e chamada para ação foram revisados antes da publicação.