Groovia — Design System / Parts 1 & 2

01

01 — Identidade / Logo

Versão Principal — Fundo Escuro

Versão Light — Fundo Claro

Fundo Violeta

Fundo Neon

Usos proibidos

Escala desproporcionada

Fundo não autorizado

Rotacionado

Baixa opacidade

02

02 — Paleta de Cores

Primária

Violeta

#6300FF

--color-primary

Acento

Verde
Neon

#00FF7F

--color-accent

Neutro

Preto
Prof.

#0A0A0A

--color-dark

Escala Violeta — 50 a 900

50

100

200

300

400

500

600

700

800

900

Escala Verde Neon — 50 a 900

50

100

200

300

400

500

600

700

800

900

Escala Neutra

fff

f5

e8

d0

a8

80

58

38

24

14

0a

Gradientes de Marca

Brand Primary

linear-gradient(135deg, #6300FF, #00FF7F)

Dark Violet

linear-gradient(135deg, #0A0A0A, #6300FF)

Neon Dark

linear-gradient(135deg, #00FF7F, #0A0A0A)

Deep Violet

linear-gradient(180deg, #6300FF, #390099)

Spatial

linear-gradient(90deg, #0A0A0A, #260066, #6300FF)

Groovia Brand

linear-gradient(135deg, #1AFF8C, #6300FF, #0A0A0A)

Verificação WCAG 2.2

Prévia	Texto	Fundo	Razão	Nível	Uso
Groovia	#FFFFFF	#6300FF	7.8:1	AAA ✓	Botões, destaques
Groovia	#0A0A0A	#00FF7F	13.2:1	AAA ✓	CTAs, badges
Groovia	#00FF7F	#0A0A0A	15.6:1	AAA ✓	Dark mode labels
Groovia	#FFFFFF	#0A0A0A	20.5:1	AAA ✓	Corpo de texto
Groovia	#6300FF	#F5F5F5	8.1:1	AAA ✓	Links light mode

Cores Semânticas

success

#16A34A

--color-success

warning

#D97706

--color-warning

error

#DC2626

--color-error

info

#2563EB

--color-info

03

03 — Design Tokens (W3C 2025)

Cor / Color

--color-primary#6300FF

--color-primary-hover#4D00CC

--color-primary-subtle#F0E5FF

--color-accent#00FF7F

--color-accent-hover#00CC66

--color-dark#0A0A0A

--color-dark-surface#141414

--color-light#FFFFFF

Tipografia

G

--font-displayBebas Neue

G

--font-bodySyne

G

--font-monoDM Mono

px

--text-base16px / 1rem

px

--text-4xl48px / 3rem

px

--text-hero120px / 7.5rem

lh

--leading-tight1.05 – 1.2

ls

--tracking-display0.01em

Espaçamento + Motion

--sp-14px

--sp-28px

--sp-416px

--sp-624px

--sp-832px

--dur-fast150ms

--dur-normal250ms

--ease-spring.34,1.56,.64,1

/* ── Groovia Design Tokens — CSS Variables ── */
:root {
  /* Primitivos */
  --violet-500: #6300FF;
  --neon-500: #00FF7F;
  --neutral-900: #0A0A0A;

  /* Semânticos */
  --color-primary: var(--violet-500);
  --color-primary-hover: #4D00CC;
  --color-accent: var(--neon-500);
  --color-dark: var(--neutral-900);

  /* Tipografia */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Syne', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-normal: 250ms;
}
    

04

04 — Sistema Tipográfico

Display / Headings

Bebas Neue

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 @&!?

Peso único: Regular (400)
Uso: Display, H1, H2 grandes, Números
Google Fonts — Open License
font-family: 'Bebas Neue', sans-serif

Corpo / Interface / Subtítulos

Syne

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Pesos: 400 Regular · 600 Semibold · 800 ExtraBold
Uso: H3-H4, corpo, labels, UI
Google Fonts — Open License
font-family: 'Syne', sans-serif

Escala Tipográfica — Major Third × 1.25

Display / Hero120px · Bebas
lh 0.92 · ls 0.01em
--text-hero

GROOVIA

H172px · Bebas
lh 0.95 · ls 0.01em
--text-6xl

CRIATIVIDADE
SEM LIMITES.

H248px · Syne 800
lh 1.05 · ls -0.03em
--text-4xl

Estratégia visual
que gera resultado.

H330px · Syne 700
lh 1.15 · ls -0.02em
--text-2xl

Identidade visual e branding para marcas que querem ser lembradas

H424px · Syne 600
lh 1.25 · ls -0.01em
--text-xl

Social media, branding, slides e design system

Body Large20px · Syne 400
lh 1.65 · ls 0
--text-lg

Criamos marcas que comunicam com clareza e impacto em todos os pontos de contato. Design orientado a resultado, executado com precisão criativa.

Body16px · Syne 400
lh 1.6 · ls 0
--text-base

Transformamos estratégia em design. Cada pixel tem intenção, cada detalhe comunica. O design system da Groovia garante consistência em todos os pontos de contato da marca.

Label / Tag11px · DM Mono
lh 1 · ls 0.12em CAPS
--text-xs

Serviços da Agência · Branding · Social Media · Slides

Caption12px · DM Mono
lh 1.6 · ls 0.04em
--text-sm

Groovia Agency · groovia.com.br · Design System v1.0 · 2025

Combinações em Contexto

Case de Sucesso

+340%
ALCANCE

Resultado entregue para marca do setor de moda em 60 dias de trabalho.

Novo Serviço

BRANDING
DIGITAL

Identidade visual completa para marcas que querem dominar o digital.

Ver proposta →

Dado de impacto

87
MARCAS

transformadas em 3 anos de operação da agência.

05

05 — Espaçamento & Grid

Escala de Espaçamento — Base 8px

sp-1

4px

sp-2

8px

sp-3

12px

sp-4

16px

sp-6

24px

sp-8

32px

sp-12

48px

sp-16

64px

sp-24

96px

sp-32

128px

Sistemas de Grid

Web / Landing Page

12

Colunas: 12
Gutter: 24px
Margem: 80px
Max-width: 1280px

Social Media

4

Colunas: 4
Gutter: 40px
Margem: 60px
Safe zone: 60px

Apresentações

6

Colunas: 6
Gutter: 32px
Margem: 80px H / 60px V
1920×1080px

Grid 12 colunas — Web / Landing

Grid 4 colunas — Social Media

✓ Faça

Use tokens semânticos, nunca valores hardcoded

Mantenha espaçamentos em múltiplos de 4px

Combine Bebas Neue (display) + Syne (corpo)

Aplique violeta como cor de ação, neon como acento

Use dark first — fundo escuro é padrão da marca

✕ Não faça

Não use outras fontes além das definidas

Não inverta o ponto de acento do logo

Não aplique mais de 3 cores em uma composição

Não reduza o corpo de texto abaixo de 16px

Não coloque o logo sobre fundos não aprovados