Design System — Fernanda Piaz
Design System · Versão 1.0
Fernanda Piaz
Sistema visual para Instagram, TikTok e Site — construído sobre autoridade editorial, calor humano e o "terno com brilho" da marca.
Psicologia Comportamento Humano Autoridade Editorial Premium
0 · Fundação
Visão Geral Estratégica
O sistema foi construído sobre quatro tensões produtivas da imersão da Fernanda — cada uma traduzida em decisões visuais concretas.
Técnica + Intuitiva
Tipografia estruturada (Cormorant Garamond) com gestos visuais orgânicos (cobre queimado, canvas quente). A serifa editorial traz rigor; o canvas ivory traz acolhimento.
Formal + Descontraída
Tom de voz direto e a tipografia de autoridade convivem sem conflito — como um terno com brilho. A família DM Sans no corpo garante leitura fluida e moderna.
Exclusiva + Conectada
Paleta restrita (11 tokens, nunca mais) sinaliza curadoria. A linguagem de conteúdo permanece humana, próxima e sem jargão excessivo.
Ousada + Discreta
Cobre Queimado aparece uma vez por tela — e quando aparece, comanda. O restante do sistema respira em neutros quentes para não competir.
1 · Referências
Benchmark de Design Systems
Três sistemas de referência foram cruzados com o perfil da Fernanda. Nenhum foi copiado — cada um contribuiu com um elemento específico.
Claude (Anthropic)
Canvas quente tipo papel (#f5f4ed), personalidade editorial com serifa, sensação de "parceiro humano, não ferramenta". Inspirou o uso de Cormorant Garamond e o canvas FAF8F4.
Stripe
Autoridade premium com peso tipográfico leve (weight 300 em headlines) e sistema limpo que não grita. Inspirou o peso 500 no Cormorant e a disciplina de espaçamento.
ElevenLabs
Sofisticação minimalista, sombras quase invisíveis (sub-0.12 opacity), superfícies com temperatura. Inspirou o sistema de sombras e a leveza geral dos cards.
Ferrari
Uso esparso de cor de acento (Rosso Corsa = uma vez por tela), chiaroscuro editorial claro/escuro, fotografia como protagonista. Inspirou a regra "Cobre aparece uma vez por tela".
2 · Foundations
Paleta de Cores
11 tokens de cor — nunca mais. A restrição é intencional: cores adicionais diluem a identidade. Se precisar de variação, use opacidade.
Cobre Queimado
#A0522D
Cobre Dark
#7A3D20
Canvas Warm
#FAF8F4
Surface Ivory
#F4F1EB
Surface Dark
#1C1A18
Neutral Stone
#8C8880
Neutral Mid
#5C5A56
Neutral Dark
#2A2826
Border Warm
#E8E4DC
Feedback Success
#27AE60
Feedback Error
#C0392B
Verificação de Contraste (WCAG AA)
ParContrasteStatus
color-brand-primaryCobre #A0522D sobre Canvas #FAF8F4 → 4.6:1✅ AA (≥18px)
color-neutral-darkDark #2A2826 sobre Canvas #FAF8F4 → 14.8:1✅ AAA
color-surface-warmCanvas #FAF8F4 sobre Dark #1C1A18 → 14.8:1✅ AAA
3 · Foundations
Design Tokens
Nomenclatura: [categoria]-[escala/modificador]. Esses tokens são a linguagem compartilhada entre designers e desenvolvedores.
Tokens de Cor
TokenValor
color-brand-primary#A0522D
color-brand-primary-dark#7A3D20
color-surface-warm#FAF8F4
color-surface-ivory#F4F1EB
color-surface-dark#1C1A18
color-neutral-stone#8C8880
color-neutral-mid#5C5A56
color-neutral-dark#2A2826
color-border-warm#E8E4DC
color-border-subtle#F0EDE6
Tokens de Tipografia
TokenValor
font-displayCormorant Garamond
font-bodyDM Sans
font-weight-display500
font-weight-body400
font-weight-emphasis600
font-size-hero64px
font-size-h148px
font-size-h236px
font-size-h328px
font-size-body16px
4 · Foundations
Escala Tipográfica
Cormorant Garamond para emoção e autoridade. DM Sans para clareza e legibilidade digital. Nunca inverta esta divisão.
Cormorant Garamond — Display
Hero64px / 500 / lh 1.05
Fernanda Piaz
H148px / 500 / lh 1.10
Comportamento Humano
H236px / 500 / lh 1.15
Sua melhor versão
H328px / 500 / lh 1.20
Conexão e transformação
Body Serif18px / 400 / lh 1.60
"A mágica é amor e dedicação."
DM Sans — Body & UI
Body Lg20px / 400 / lh 1.60
Especialista em comportamento humano.
Body16px / 400 / lh 1.65
Ajudo você a aumentar sua eficácia e autoconhecimento, performando de maneira assertiva em todas as áreas da sua vida.
Body Sm14px / 400 / lh 1.55
Sessões presenciais e online · Consulta via Instagram
Button14px / 500 / lh 1.00
Agendar Sessão
Label11px / 600 / ls .12em
Psicóloga · CRP 00/00000
5 · Foundations
Espaçamento
Base 8px. Escala multiplicativa. Todos os componentes usam valores dessa escala — nunca valores arbitrários.
space-1
4pxGap mínimo, ícone-texto
space-2
8pxEspaçamento interno pequeno
space-3
12pxPadding de componentes compactos
space-4
16pxPadding padrão de cards
space-5
24pxGap entre elementos
space-6
32pxPadding de seções internas
space-7
48pxEspaço entre componentes maiores
space-8
64pxPadding de seções grandes
space-9
96pxEspaçamento entre seções da página
6 · Foundations
Border Radius
Sistema de curvatura contida — nunca pill, nunca sharp. A linguagem de forma transmite precisão sem rigidez.
0px · Nenhum
4px · sm
8px · md
12px · lg
16px · xl
32px · 2xl
TokenValorUso