Fundação visual da marca. Tokens, componentes e padrões para criar
experiências consistentes e refinadas.
01 — Identidade
Marca
O símbolo "a." e a logotipia "andmarcelle" são os elementos centrais da
identidade visual. Use-os conforme as variações abaixo.
a.
andmarcelleFundo escuro
a.
andmarcelleFundo gradiente
a.
andmarcelleFundo claro
Escalas do símbolo
a.
24px
a.
36px
a.
52px
a.
72px
a.
100px
02 — Paleta
Cores
Paleta extraída da identidade visual da marca. O roxo e suas variações
são a voz cromática central, ancorada no preto profundo.
Black
#0A090C
Background primário
Void
#111014
Surface base
Purple Deep
#3D0B8C
Acento escuro
Purple Rich
#5B12B8
Primária da marca
Purple Mid
#7B3ACD
Interativa / foco
Purple Muted
#9B6FC8
Texto secundário
Lavender
#E4DDEF
Texto sobre roxo
Mauve
#C8A8D0
Acento rosa suave
White
#FAFAF9
Texto principal
Gradient Brand
160deg · #3D0B8C → #7B3ACD → #C8A8D0
Gradiente principal da marca
Gradient Glow
radial · #5B12B8 → #0A090C
Fundo com brilho ambiente
03 — Tipografia
Tipografia
SF Pro Display como fonte primária — limpa, moderna e de alta legibilidade.
Usada tanto em headings quanto em corpo de texto da marca.
Aa
ExtraLight
200
Aa
Light
300
Aa
Regular
400
Aa
Medium
500
Aa
Bold
700
Escala tipográfica
--text-xs
0.75rem / 12px
andmarcelle — Labels, captions, metadados
--text-sm
0.875rem / 14px
andmarcelle — Corpo secundário, UI labels
--text-base
1rem / 16px
andmarcelle — Corpo principal de texto
--text-xl
1.25rem / 20px
andmarcelle — Subtítulos, card titles
--text-3xl
1.875rem / 30px
andmarcelle — Section titles
--text-5xl
3rem / 48px
andmarcelle
--text-8xl
6rem / 96px
and marcelle
04 — Espaço
Espaçamento
Sistema baseado em múltiplos de 4px. Consistência espacial em todos
os componentes e layouts.
--space-1
0.25rem / 4px
--space-2
0.5rem / 8px
--space-3
0.75rem / 12px
--space-4
1rem / 16px
--space-6
1.5rem / 24px
--space-8
2rem / 32px
--space-12
3rem / 48px
--space-16
4rem / 64px
--space-24
6rem / 96px
--space-32
8rem / 128px
05 — Forma
Raio de borda
Bordas suavizadas como parte da identidade visual — arredondadas mas
nunca excessivamente circulares, exceto em pills.
--radius-sm
6px
--radius-md
12px
--radius-lg
20px
--radius-xl
28px
--radius-2xl
40px
--radius-full
∞ pill
06 — Profundidade
Sombras & Glow
Elevação expressa por sombras escuras e glow roxo — assinatura
luminosa única da marca.
shadow-sm
shadow-md
shadow-lg
glow-sm
glow-md
glow-lg
07 — Componentes
Botões
Hierarquia clara: primário com gradiente e glow, secundário translúcido,
ghost sutil e destrutivo.
Variantes
Tamanhos
Estados
Com ícone
08 — Rótulos
Badges & Tags
Badges de status
BrandAtivoPendenteErroRascunho
Tags
andmarcelleDesign SystemBrandingUI / UXv1.0 Novo
09 — Formulários
Inputs
Seu nome como aparece na conta
✉
Usamos para comunicações importantes
⚿
Senha incorreta. Tente novamente.
10 — Cards
Cards
✦
Ativo
Brand Identity
Sistema visual completo para a andmarcelle com tokens, componentes e diretrizes.
◈
Publicado
Color Tokens
9 cores base e 2 gradientes extraídos da paleta oficial da marca.
⬡
Beta
Components
Biblioteca de componentes reutilizáveis prontos para produção.
11 — Avatares
Avatares
Tamanhos
M
MA
MA
MA
MA
Grupo de avatares
A
M
B
+4
12 — Feedback
Alertas & Feedback
◈
Informação
Design system atualizado para a versão 1.0. Consulte o changelog para ver as novidades.
✓
Publicado com sucesso
As alterações foram salvas e publicadas em produção.
⚠
Atenção necessária
Alguns tokens estão sem uso definido. Revise antes de publicar.
✕
Erro ao salvar
Não foi possível conectar ao servidor. Tente novamente em instantes.
Progress bars
Identidade visual100%
Componentes78%
Documentação45%
13 — Controles
Toggles & Tooltips
Switches
Notificações ativas
Modo escuro
Salvar automaticamente
Tooltips (hover)
Divisores
ou continue com
14 — Animação
Movimento
Curvas de easing personalizadas que dão ao sistema um ritmo fluido
e expressivo — sem jank, sem artificialidade.
ease-out
cubic-bezier(0.16, 1, 0.3, 1)
Entradas — aceleração rápida, desaceleração suave
ease-in
cubic-bezier(0.7, 0, 0.84, 0)
Saídas — início lento, aceleração na saída
ease-inout
cubic-bezier(0.87, 0, 0.13, 1)
Transições — ênfase no ponto médio
Durações
150ms
fast — micro-interações
250ms
base — componentes
400ms
slow — modais, painéis
700ms
slower — página, hero
15 — Iconografia
Ícones Glass 3D
Biblioteca de ícones com efeito de vidro tridimensional. Reflexos especulares,
gradientes de profundidade e glow roxo — extensão natural da identidade visual da marca.