DESIGN SYSTEM

Sistema de Marca · v1.0

ABSOLUT SPORT
DESIGN SYSTEM
PARA TODA A EQUIPE

Tudo que a marca usa, num lugar só. Cores, tipografia, logos, componentes. Use, baixe, contribua.

🇩🇪 Frankfurt 🇧🇷 Rio de Janeiro 🇺🇸 Los Angeles 🇦🇷 Argentina 🇨🇴 Colombia 🇲🇽 México 🇵🇪 Peru 🇳🇱 Holanda 🇵🇹 Portugal 🇨🇳 China

Brand Kit · Download

Toda a marca,
num zip.

Logos, SoulCraft GX, tokens CSS e o script Zero-to-O. Tudo o que precisa pra começar.

📦

absolut-brand-kit.zip

4 logos · SoulCraft GX · tokens.css · zero-to-o.js · README

↓

Marca · Identidade

Logos
oficiais.

Quatro variantes pra cobrir qualquer fundo. ABSOLUT Sport sempre escrito completo, nunca só "Absolut". Azul+preto é o padrão. Azul+branco em fundo escuro. Monocromático em P&B.

Azul + Preto · Primária

Fundos claros · Light mode · Material institucional

SVG ↓

Azul + Branco

Fundos escuros · Dark mode · Foto noturna

SVG ↓

Branco · Monocromático

Fundos azuis ou escuros · Aplicações especiais

SVG ↓

Preto · Monocromático

Impressão P&B · Fundos claros · Documentos

SVG ↓

Logo · Qual usar

Decisão em
uma olhada.

Onde vai aparecer? A matriz responde.

Fundo claro

Fundo escuro

Colorido

Azul + Preto

Azul + Branco

Monocromático

Preto mono

Branco mono

Paleta · Tokens

Cores da
marca.

Clique em qualquer card para copiar o hex. Tokens CSS estão em colors_and_type.css.

Brand Core

Neutrais

Status

Tipografia · DNA Tipográfico

Sistema
tipográfico.

SoulCraft GX é a fonte da marca — todo headline usa ela. Barlow resolve UI e corpo. JetBrains Mono resolve dados, preços e código.

Hero · 72px · SoulCraft Black · Headlines de marca

DOS ESTÁDIOS
PARA A HISTÓRIA

Display · 48px · SoulCraft ExtraBold

Experiências Lendárias

Headline · 32px · SoulCraft Bold

CONMEBOL Libertadores™ 2025

Title · 22px · Barlow SemiBold · UI headings

Agência Oficial de Pacotes para as Finais

Body · 16px · Barlow Regular · Corpo de texto

Somos a única agência oficial de pacotes para as Finais da CONMEBOL Libertadores™ e Sudamericana™. Conectamos torcedores, empresas e delegações a momentos inesquecíveis com eficiência alemã, entusiasmo brasileiro e estilo de vida californiano.

Iconografia · Lucide

Ícones
do sistema.

Lucide é o set oficial. 2px stroke, geométrico, moderno. Catálogo completo →

trophy

ticket

plane

hotel

calendar

map-pin

users

shield

star

check

arrow-right

info

Motion · Transições

Movimento
com propósito.

Três velocidades. Três funções. Passe o mouse nos cards pra sentir.

--transition-fast

0.15s ease-out

Feedback instantâneo: hover, click, toggle.

--transition-default

0.20s ease-out

Padrão: cards, botões, mudança de estado.

--transition-slow

0.35s ease-out

Ênfase: modal, drawer, reveal de conteúdo.

Princípios

Movimento é função, nunca decoração.
Hover sobe 3px. Press desce 2px. Sempre ease-out.
Nada de mola. Energia controlada, não saltitante.
Respeite prefers-reduced-motion.

Tokens · Espaço · Forma

Espaçamento
e forma.

Escala de Espaço

Border Radius

4px · botões

8px · cards

12px

16px

Pill

100px · badges

Biblioteca · Componentes

Catálogo de
componentes.

13 previews vivos. Clica num e abre o componente em nova aba.

Figma · Templates oficiais

Templates
prontos pra baixar.

Quatro arquivos Figma. O Rafa mantém. Duplica no teu workspace e adapta pro evento.

ENXOVAL
ADS

Anúncios · Social

Enxoval ADS 2026

Kit completo de anúncios para campanhas de evento. Formatos para Instagram, Facebook e display ads.

Templates para a loja Shopify — banners promocionais, descrições de pacote, layouts de produto.

Modelos de voucher e ingresso digital — pacotes, hospedagem e experiências VIP.

Abrir no Figma

E-MAIL

E-Mail Marketing

Template E-Mail MKT 2026

Templates de e-mail marketing — newsletter, lançamento de pacote, follow-up de carrinho.

Abrir no Figma

Princípios · Aplicação

Como
usar.

Voz e tom

Bold e aspiracional — escreva com carga emocional
Segunda pessoa (você) — fale direto com o cliente
Caps em headlines maiores e CTAs principais
"ABSOLUT Sport" — sempre escrito completo
Marcos oficiais com ™ — Libertadores™, Sudamericana™

Don't

Voz e tom

Não use frieza luxo — não somos cold luxury
Não escreva apenas "Absolut" sem o "Sport"
Não exagere em emojis em peças institucionais
Não misture vozes — defina uma e siga
Não use linguagem corporativa genérica

Fotografia

Full-bleed photography — multidão, estádio noturno
Overlay escuro de baixo para cima — legibilidade
Highlights quentes, contraste dramático
Iluminação noturna de estádio é a paleta
Pessoas em movimento, emoção real capturada

Don't

Fotografia

Sem ilustrações desenhadas à mão
Sem padrões decorativos planos
Sem stock photos genéricas de business
Sem imagens AI-generated em peças finais
Sem filtros saturados de Instagram dos anos 2010

Tipografia

SoulCraft GX para todo headline de marca
Barlow para corpo, UI e menus
JetBrains Mono para preços, dados e código
Use o truque do "0 → O" em texto SoulCraft
Respeite a hierarquia: Hero · Display · Headline · Title · Body

Don't

Tipografia

Não use Google Fonts aleatórias por estética
Não misture mais de 3 famílias na mesma peça
Não use fontes com serifa em material institucional
Não estique ou aperte SoulCraft — ela já é condensada
Não use ALL CAPS em corpo de texto longo

Engenharia · Implementação

Para
devs.

Importe os tokens e a página herda toda a paleta, tipografia e escala. Funciona em qualquer HTML/CSS/React.

1. Importe o CSS de tokens

Cole no <head> antes de qualquer estilo seu. Todas as variáveis ficam disponíveis globalmente.

<link rel="stylesheet" href="https://design.absolut-sport.com.br/colors_and_type.css">

2. Use os tokens via CSS Variables

Cores, tipografia, spacing, radius — tudo via var(--token). Nunca hardcoded.

/* ✓ correto */
.cta {
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-display);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
}

/* ✗ errado — não use valores hardcoded */
.cta { background: #155F97; padding: 12px 24px; }