Design System · 2026

GRUB
SYSTEM

Tokens, componentes e padrões que constroem toda a comunicação visual da Grub Shades — do digital ao físico.

VERSÃO 1.0
ABRIL 2026
SIDERAL SYNC
USO INTERNO
01 — Tokens

CORES PRIMÁRIAS

Variáveis CSS globais que sustentam todo o sistema. Nunca usar valores hex direto — sempre referenciar o token.

Cores primárias
Grub Green
--g-dark
#197B30
Grub Neon
--g-mid
#2ECC40
Grub Black
--black
#0A0A0A
White
--white
#FFFFFF
Neutros & Superfícies
Smoke
--smoke
#111111
Carbon
--carbon
#1A1A1A
Slate
--slate
#252525
Charcoal
--charcoal
#363435
Surface 1
--surface-1
rgba(255,255,255,0.04)
Surface 2
--surface-2
rgba(255,255,255,0.07)
Feedback & Estado
Danger
--danger
#E74C3C
Warning
--warning
#F39C12
Green Ghost
--
rgba(46,204,64,0.12)
01 — Tokens

ESPAÇAMENTO

Escala de 10 valores baseada em múltiplos de 4px. Usar sempre os tokens — nunca valores arbitrários.

TokenValorBarraUso comum
--sp-14px
gap interno, ícone
--sp-28px
padding badge, gap pequeno
--sp-312px
padding tag, gap compacto
--sp-416px
padding botão, gap lista
--sp-524px
padding card sm, gap componente
--sp-632px
padding card md, gap seção interna
--sp-748px
gap entre grupos
--sp-864px
padding seção, margin capítulo
--sp-996px
padding página, entre sections
--sp-10128px
cover, hero, espaço grande
Border Radius
--r-sm
6px · badges
--r-md
10px · botões
--r-lg
16px · cards
--r-xl
24px · modais
--r-full
100px · pills/tags
Sombras & Glows
Shadow SM
--shadow-sm
0 2px 8px rgba(0,0,0,0.4)
Shadow MD
--shadow-md
0 4px 24px rgba(0,0,0,0.5)
Shadow LG
--shadow-lg
0 8px 48px rgba(0,0,0,0.6)
Glow SM
--glow-sm
0 0 16px rgba(46,204,64,0.2)
Glow MD
--glow-md
0 0 32px rgba(46,204,64,0.25)
Glow LG
--glow-lg
0 0 64px rgba(46,204,64,0.15)
02 — Tipografia

ESCALA TIPO

Todas as variações de texto com fonte, peso, tamanho e uso definidos. Passe o mouse sobre cada linha para destacar.

Display
Bebas Neue
GRUB SHADES
56px
400
H1
Bebas Neue
NOVA VISÃO, NOVO ÓCULOS
40px
400
H2
Bebas Neue
SISTEMA DE LOGO
28px
400
Subtitle
Space Grotesk
Parceiros da cena 420
21px
700
Body LG
Space Grotesk
Marca brasileira de óculos posicionada no universo 420 lifestyle premium.
17px
400
Body MD
Space Grotesk
O óculos que identifica quem você é antes de você falar.
14px
400
Body SM
Space Grotesk
Informação complementar, legendas, metadados de card.
12px
400
Label
JetBrains Mono
DESIGN AUTORAL · 420 LIFESTYLE
10px
400
Mono Price
JetBrains Mono
R$169
28px
700
Code / Tag
JetBrains Mono
#grubshades · #420brasil · #420lifestyle
12px
400
03 — Componentes

BOTÕES & AÇÕES

5 variantes × 3 tamanhos. Passe o mouse para ver o estado hover. O botão primário é o único com glow verde.

Variantes — tamanho padrão
Tamanhos
Estados
Full width
03 — Componentes

BADGES & TAGS

Identificadores visuais de status, categorias e labels. Sempre em JetBrains Mono.

Badges de status
● Em estoque Esgotado × Fora de linha ⚠ Últimas unidades Novo Premium
Tags de categoria (clicáveis)
Todos Classic Bold Premium Redondo Esportivo Oversized
Hashtags
#grubshades #420lifestyle #420brasil #oculosdesol #marcaindependente
Cards de produto
Classic
R$119
Modelos 1–20 · Formas clássicas, armações translúcidas e lentes coloridas.
redondo vintage colorido
Bold
R$169–179
Modelos 22–32 · Formas oversized com impacto máximo. O mais vendido.
quadrado esportivo camo
Premium
R$189–199
Modelos 21, 33–40 · Designs exclusivos e acabamentos diferenciados.
wrap shield exclusivo
Cards de estatística
40
Modelos
200
Unidades
R$155
Ticket médio
R$6.2K
Em estoque
Card manifesto / citação
"Não espera o stand. Invade o evento."
Mantra operacional · Grub Shades
"O óculos que identifica quem você é antes de você falar."
Promessa de marca
Avatares
GS
GS
GS
GS
GS
Avatar group
GS
+4
A
B
List items — menu / catálogo
01
Modelo Classic Redondo
SKU-001 · Translúcido · 5 unidades
R$119
!
Modelo Bold Camo
SKU-028 · Camuflado · 2 unidades
R$179
40
Modelo Premium Shield
SKU-040 · Espelhado · Esgotado
R$199
Exibição de preço
R$ 169
Preço padrão
R$199 R$ 169
Com desconto
R$ 155 / ticket médio
Com período
Barra de estoque / progresso
Modelo Bold Esportivo 4/5 disponíveis
Modelo Classic Vintage 1/5 — últimas!
Estoque total 200/200
Dividers
Neutro
Verde (seção)
Com label
Coleção Bold
03 — Componentes

ALERTAS & FEEDBACK

Estados de sistema: sucesso, erro, aviso e informação. Sempre com ícone + título + descrição.

✓
Pedido confirmado
Seu óculos está a caminho. Código de rastreio enviado por e-mail.
✕
Modelo esgotado
Este modelo não tem mais unidades disponíveis. Veja alternativas abaixo.
!
Últimas 2 unidades
Esse modelo está quase esgotando. Garanta o seu agora.
i
Entrega via Sedex
Prazo estimado: 3 a 7 dias úteis para todo o Brasil.
05 — Formulários

INPUTS & FORMS

Campos, selects, toggles. Foco em verde — nunca azul. Erro em vermelho. Sucesso em verde neon.

✓ E-mail válido
CEP não encontrado. Verifique e tente novamente.
Receber novidades no Instagram
Notificar quando modelo voltar ao estoque
06 — Motion

TRANSIÇÕES

Três velocidades de animação. Passe o mouse nos cards para ver a transição ao vivo. Sempre usar easing ease — nunca linear.

Fast
--transition-fast · 0.15s
Hover de botão, badge, ícone. Micro-interações instantâneas.
Mid
--transition-mid · 0.3s
Hover de card, abertura de menu, fade de alerta.
Slow
--transition-slow · 0.5s
Entrada de modal, transição de página, reveal de seção.
07 — Padrões

CARD INSTAGRAM

Anatomia do post padrão Grub Shades. Fundo sempre escuro, logo verde, legenda com tom direto e hashtags ao final.

GS
grubshades
@grubshades · 420 lifestyle

Novo lançamento. O Bold Shield chegou pra mudar o jogo. Design que identifica antes de você falar. 🌿

#grubshades #420lifestyle #oculosdesol
Anatomia do post
1. Imagem — Fundo escuro ou flat lay com contexto. Nunca fundo branco genérico.
2. Primeira linha — Frase de impacto curta e direta. Máx. 10 palavras.
3. Corpo — Descrição com tom de tribo. Emoji 🌿 sempre ao final.
4. Hashtags — #grubshades sempre primeiro. Máx. 12 hashtags por post.
Regras de cor no post
✓
Fundo escuro com logo verde ou detalhe verde
✓
Fundo verde com logo branco (somente fundo sólido)
✕
Cores quentes dominantes (laranja, amarelo, vermelho)