📐 Style Guide

Fundamentos visuais formalizados para o design system da Celebra

Paleta de Cores

Primária

primary-light

#FF7AA2

primary

#FF477E

primary-dark

#B73058

Secundária

secondary-light

#8B96FF

secondary

#5465FF

secondary-dark

#3A48B0

Neutros

white

#FFFFFF

bg

#F4F4F4

text-light

#6B7280

text

#49516F

dark

#1F2937

Feedback

success

#10B981

warning

#F59E0B

error

#EF4444

info

#3B82F6

Escala Tipográfica

Fonte: Poppins (Google Fonts) — Hierarquia definida com sizes consistentes.

H1 Heading 1 48px / Bold (700)
H2 Heading 2 36px / Bold (700)
H3 Heading 3 28px / SemiBold (600)
H4 Heading 4 24px / SemiBold (600)
Body Body text — The quick brown fox jumps over the lazy dog. 16px / Regular (400)
Caption Caption — Texto auxiliar e metadados de interface 14px / Regular (400)
Label LABEL — TAGS E BADGES 12px / Medium (500)

Sistema de Espaçamentos

Base em múltiplos de 4px para consistência em todo o layout.

4
4px / 0.25rem
8
8px / 0.5rem
12
12px / 0.75rem
16
16px / 1rem
20
20px / 1.25rem
24
24px / 1.5rem
32
32px / 2rem
40
40px / 2.5rem
48
48px / 3rem
64
64px / 4rem
80
80px / 5rem

Grid

12 colunas, gutter de 24px (gap-6), max-width 1280px (max-w-7xl).

1
2
3
4
5
6
7
8
9
10
11
12
4 cols
8 cols
3 cols
6 cols
3 cols

Iconografia

Estilo: Outline — Base 24×24, stroke 2px. Complementado por emojis para categorias.

Ícones SVG (Heroicons Outline)

Emojis (Categorias)

💍
👑
🎂
🎓
🎉
🎤
💒
📸
🎵
💐
👗
🎁

Tom Visual

Definições formais que estabelecem a identidade do design system.

Border Radius

Button: 8px

--radius-btn

Card: 12px

--radius-card

Pill: 100px

--radius-pill

Sombras

Small

shadow-sm

Card

--shadow-card

Large

shadow-lg

Transições

Duração

300ms ease

Hover: scale

transform: scale(1.05)

Hover: color

primary → primary-dark