Brand Toolkit

DESIGN SYSTEM

Cores, tipografia, espaçamento e tokens visuais da marca ERA MATO. Use sempre. Sem exceções.

Copiado!
Identidade Visual

PALETA DE CORES

Três cores. Nada mais. A identidade da Era Mato vive na consistência — não na variedade. Nunca use cores fora desta paleta.

MARROM PROFUNDO

#6B3A1F

Principal · Navbar · Headers

JUTA / OFF-WHITE

#F5F0E8

Background · Texto em dark

COURO / ACCENT

#C4956A

Destaque · CTAs · Labels

PRETO PROFUNDO

#1A1008

Texto · Seções escuras · Footer

VERDE MATO

#4A6741

Accent secundário · Badges

LARANJA MATO

#C4622D

Accent quente · Destrutivo

AREIA

#E8D5B7

Superfícies · Cards

ESCALA DE TONS — COURO

Clique para copiar o hex

PERMITIDO

  • Couro em fundos claros
  • Accent como destaque pontual
  • Off-white em seções escuras
  • Gradientes apenas entre tons da paleta

PROIBIDO

  • Qualquer azul, verde, roxo ou neon
  • Branco puro (#FFFFFF) como fundo principal
  • Cinzas genéricos de SaaS
  • Mais de 3 cores em uma mesma tela
Sistema Tipográfico

TIPOGRAFIA

Display — Títulos de impacto
ERA MATO
ANTON
Uso: Heroes, seções, banners
Size: 2.5rem – 7rem
Letter-spacing: 0.02em – 0.06em
Heading — Subtítulos e navegação
Coleção 2025
Original Caps · Since 2023
PLAYFAIR DISPLAY
Uso: H2–H3, destaques, títulos
Weight: 400–700
Itálico para "Since 2023"
Body — Corpo de texto

Bonés com patch de couro e identidade. Feitos para quem sabe que o mato nunca saiu de dentro.

Patch trevo · Couro artesanal · Estrutura premium

INTER
Uso: Parágrafos, descrições, UI
Weight: 300–600
Line-height: 1.65 – 1.85

ESCALA TIPOGRÁFICA

TokenTamanhoFonteUso
--text-hero clamp(3.8rem, 9vw, 7rem) AntonHero principal
--text-display clamp(2.6rem, 5vw, 4.2rem) AntonTítulos de seção
--text-h2 clamp(2rem, 3vw, 3rem) AntonSubtítulos principais
--text-h3 1.2rem – 1.5rem Lato 700Headings menores
--text-label 0.72rem Lato Section labels, tags
--text-body 1rem Lato 400 Corpo de texto
--text-sm 0.88rem Lato 400 Descrições, metadata
--text-xs 0.75rem Lato 400 Captions, badges
Layout

ESPAÇAMENTO E GRID

TokenValorUso principal
--space-xs 8px Gap inline, badges
--space-sm 16px Padding interno pequeno
--space-md 24px Gap entre cards, gutter
--space-lg 48px Padding de cards grandes
--space-xl 64px Padding de seções mobile
--space-2xl 96px Padding de seções desktop
--space-3xl 128px Seções hero e CTAs grandes
--container 1280px Largura máxima
--gutter 24px Padding lateral
Microinterações

MOVIMENTO E TRANSIÇÕES

HOVER PADRÃO

transition: all 0.28s ease

Botões, cards, links. Suave e confiante.

LIFT DE CARD

transform: translateY(-6px)
box-shadow: 0 24px 48px -12px
rgba(107,58,31,0.22)

Cards de produto ao hover.

REVEAL SCROLL

opacity: 0 → 1
translateY: 28px → 0
duration: 0.7s ease

Elementos entram ao aparecer na viewport.

ZOOM DE IMAGEM

transform: scale(1.04)
transition: 0.5s ease
(overflow: hidden no pai)

Imagens de produto e lifestyle ao hover.

BOTÃO LIFT

transform: translateY(-1px)
background: var(--accent)

CTA muda de couro para cobre no hover.

MARQUEE

animation: marquee-scroll
22s linear infinite
translateX(-50%)

Strip de marca em loop contínuo.

REGRA

Sempre respeite @media (prefers-reduced-motion: reduce) — desative animações para usuários que preferem menos movimento.

Implementação

TOKENS CSS

:root {
  /* Cores */
  --couro:         #6B3A1F;
  --couro-dark:    #3B1F0E;
  --couro-deep:    #3B1F0E;
  --offwhite:      #F5F0E8;
  --offwhite-dark: #E8D5B7;
  --accent:        #C4956A;
  --accent-dark:   #C4956A;
  --ink:           #1A1008;

  /* Tipografia */
  --font-display:  "Anton", Impact, sans-serif;
  --font-heading:  "Playfair Display", Georgia, serif;
  --font-body:     Lato, sans-serif;

  /* Espaçamento */
  --space-xs:  8px;    --space-sm: 16px;
  --space-md:  24px;   --space-lg: 48px;
  --space-xl:  64px;   --space-2xl: 96px;
  --space-3xl: 128px;
  --container: 1280px; --gutter: 24px;

  /* Transições */
  --transition-fast: all 0.18s ease;
  --transition-base: all 0.28s ease;
  --transition-slow: all 0.5s ease;
}