Brand Toolkit

DESIGN SYSTEM

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

Copiado!
Identidade Visual

PALETA DE CORES

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

MARROM COURO

#6B3E2B

Principal · Botões · Headers

OFF-WHITE

#F5F3EF

Background · Texto em dark

COBRE ACCENT

#C28A52

Destaque · Stars · Labels

TINTA ESCURA

#1A0F09

Texto · Seções escuras · Footer

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
RANCHO FORTE
BEBAS NEUE
Uso: Heroes, seções, banners
Size: 2.5rem – 7rem
Letter-spacing: 0.02em – 0.06em
Heading — Subtítulos e navegação
COLEÇÃO 2026
PATCH DE COURO LEGÍTIMO
OSWALD
Uso: H2–H4, labels, CTAs, nav
Weight: 300–700
Letter-spacing: 0.08em – 0.2em
Body — Corpo de texto

Bonés com patch de couro legítimo. Country moderno que vai do sítio à cidade sem perder o estilo. Cada detalhe pensado — da aba estruturada ao ajuste metálico.

Aba curva · Patch couro bordado · Tecido de alta gramatura

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) Bebas NeueHero principal
--text-display clamp(2.6rem, 5vw, 4.2rem) Bebas NeueTítulos de seção
--text-h2 clamp(2rem, 3vw, 3rem) Bebas NeueSubtítulos principais
--text-h3 1.2rem – 1.5rem Oswald 600Headings menores
--text-label 0.72rem Oswald Section labels, tags
--text-body 1rem Inter 400 Corpo de texto
--text-sm 0.88rem Inter 400 Descrições, metadata
--text-xs 0.75rem Inter 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,62,43,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:         #6B3E2B;
  --couro-dark:    #4A2B1E;
  --couro-deep:    #3A1F12;
  --offwhite:      #F5F3EF;
  --offwhite-dark: #E8E5DF;
  --accent:        #C28A52;
  --accent-dark:   #A67140;
  --ink:           #1A0F09;

  /* Tipografia */
  --font-display:  "Bebas Neue", Impact, sans-serif;
  --font-heading:  Oswald, Inter, sans-serif;
  --font-body:     Inter, Poppins, 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;
}