Brand Kit

DESIGN SYSTEM

Cores, tipografia, espaçamento, movimento e tokens CSS da marca GUEPARD. Neutro em primeiro lugar, acento com parcimônia, alinhamento rigoroso.

Copiado!
Identidade visual

PALETA DE CORES

Proporção recomendada: 70% neutros (off-white, cinzas, branco em produto), 20% preto e branco institucionais (logo, tipografia, superfícies premium), 10% acentos (verde oliva, areia mineral ou bronze frio — baixa frequência).

Clique em qualquer swatch para copiar o valor hexadecimal.

Preto absoluto

#0A0A0A

Textos, logo, superfícies premium

Branco puro

#FFFFFF

Fundos limpos, fotografia de produto

Off-white frio

#F5F5F3

Fundo editorial, áreas secundárias

Cinza claro

#E7E7E4

Bordas, divisores

Cinza médio

#8E8E8A

Texto auxiliar, legendas

Grafite profundo

#1B1B1B

Cards escuros, heros

Accent verde oliva

#4D5A46

Acento sutil, baixa frequência

Areia mineral

#CBBFAF

Acento alternativo

Bronze frio

#8D7C67

Acento alternativo

ESCALA NEUTRA

#FFFFFF → #F5F5F3 → #E7E7E4 → #8E8E8A → #1B1B1B → #0A0A0A

Permitido

  • Neutros como base visual em ~70% da interface
  • Preto absoluto e branco para hierarquia e institucional (~20%)
  • Um acento por composição; verde oliva, areia ou bronze com moderação (~10%)
  • Gradientes discretos apenas entre #0A0A0A, #1B1B1B e cinzas da escala
  • Sombras curtas e suaves (premium, sem dramatizar)

Proibido

  • Cores saturadas fora da paleta (neon, primárias puras)
  • Vários acentos competindo na mesma tela
  • Cinzas genéricos de sistema que quebrem a temperatura fria do off-white
  • Sombras longas, pesadas ou coloridas exageradas
  • Tipografia display fora de Anton para títulos de impacto
Sistema tipográfico

TIPOGRAFIA

Display — Títulos de impacto
GUEPARD
Anton
Uso: heroes, títulos de seção, marca em destaque
Tamanho: 2rem – 4.5rem+ (clamp recomendado)
Sempre em maiúsculas quando for nome da marca: GUEPARD
Editorial — Suporte e citações

Precisão silenciosa. Produto em primeiro plano, narrativa contida.

Pull quotes, introduções editoriais, storytelling curto.

Playfair Display
Pesos: 400–700
Uso: suporte ao display, tom editorial
Não substitui Anton em headlines principais
Corpo — Interface e leitura

Texto de apoio, descrições de produto, formulários e navegação secundária usam Lato com espaçamento generoso e alinhamento consistente ao grid.

Legendas e metadata em peso mais leve mantêm hierarquia clara sem ruído visual.

Lato
Pesos: 300, 400, 700, 900
Uso: UI, parágrafos, labels (700 em caps)
Line-height: 1.65 – 1.85
Especificações — Código e dados 
--token-color-black: #0A0A0A;
SKU: GP-2026-014 · grid-cols-12
Roboto Mono
Pesos: 300, 400, 500
Uso: tokens, código, SKUs, tabelas técnicas
Tamanho típico: 0.75rem – 0.875rem

ESCALA TIPOGRÁFICA

TokenTamanhoFonteUso
--text-heroclamp(2.75rem, 7vw, 4.5rem)AntonHero principal
--text-displayclamp(2rem, 4vw, 3rem)AntonTítulos de seção
--text-editorialclamp(1.15rem, 2vw, 1.5rem)Playfair 500–600Introduções, quotes
--text-h31.125rem – 1.25remLato 700Subtítulos de card
--text-label0.7remLato 700Labels, tags, metadata
--text-body1remLato 400Corpo de texto
--text-sm0.875remLato 400Descrições secundárias
--text-spec0.8125remRoboto Mono 400Código, tokens, SKUs
Layout

ESPAÇAMENTO E GRID

Espaçamento generoso, grid simples (12 colunas recomendado), alinhamento rigoroso à baseline e às colunas. Gutter fixo evita composições “soltas”.

TokenValorUso principal
--space-2xs4pxMicro ajustes internos
--space-xs8pxGap inline, ícones
--space-sm16pxPadding compacto, gap em grupos
--space-md24pxGutter lateral, entre cards
--space-lg32pxSeções internas de card
--space-xl48pxBlocos dentro da página
--space-2xl64pxPadding vertical de seção (mobile)
--space-3xl96pxPadding vertical de seção (desktop)
--space-4xl128pxHero, respiração máxima
--container1200pxLargura máxima do conteúdo
--grid-columns12Colunas do grid principal
--gutter24pxEntre colunas / margem interna
Microinterações

MOVIMENTO E TRANSIÇÕES

Fade

opacity: 0 → 1
transition: opacity 0.25s ease

Overlays, toasts, conteúdo que entra sem deslocar o layout.

Slide curto

transform: translateY(8px) → 0
duration: 0.28s ease

Listas, cards em sequência; deslocamento mínimo.

Blur de entrada

filter: blur(6px) → blur(0)
+ opacity (mesma duração)

Modais e painéis (24–28px radius); use com moderação.

Hover sutil

border-color / opacity
transition: 0.2s ease

Links e chips; evite saltos bruscos de cor.

Escala mínima

transform: scale(1) → scale(1.02)
0.22s ease

Ícones ou thumbs; nunca hero inteiro.

Sombra premium

0 4px 24px -8px
rgba(10,10,10,0.08)

Elevação curta; cards 18–24px radius.

Border radius

Pequenos: 10–14px · Botões: 14–18px · Cards: 18–24px · Modais: 24–28px

Acessibilidade

Respeite prefers-reduced-motion: reduce — reduza ou desative blur, slide e escala.

Implementação

TOKENS CSS

:root {
  /* Cores */
  --color-black:       #0A0A0A;
  --color-white:       #FFFFFF;
  --color-offwhite:    #F5F5F3;
  --color-gray-light:  #E7E7E4;
  --color-gray-mid:    #8E8E8A;
  --color-graphite:    #1B1B1B;
  --color-accent-olive:#4D5A46;
  --color-accent-sand: #CBBFAF;
  --color-accent-bronze:#8D7C67;

  /* Tipografia */
  --font-display:   "Anton", sans-serif;
  --font-editorial: "Playfair Display", Georgia, serif;
  --font-body:      "Lato", sans-serif;
  --font-mono:      "Roboto Mono", monospace;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-card: 20px;
  --radius-modal: 26px;

  /* Sombra (curta, premium) */
  --shadow-card: 0 4px 24px -8px rgba(10, 10, 10, 0.08);

  /* Espaçamento */
  --space-2xs: 4px;   --space-xs: 8px;   --space-sm: 16px;
  --space-md: 24px;   --space-lg: 32px;  --space-xl: 48px;
  --space-2xl: 64px;  --space-3xl: 96px; --space-4xl: 128px;
  --container: 1200px;
  --grid-columns: 12;
  --gutter: 24px;

  /* Transições */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  --transition-base: opacity 0.28s ease, transform 0.28s ease;
}