Sintesy
Design System.
Página viva para produto e desenvolvimento: direção visual, tokens, escala tipográfica, componentes, motion, guidelines artísticas e exemplos reais do sistema da home.
Direção
Editorial, seco, premium.
Contraste alto, grid técnica e objetos com base inferior física.
Escopo atual
Home primeiro.
Header, hero, trust strip e seção de reuniões são a fonte do sistema.
Assinatura visual
Como deve parecer.
O sistema é mais uma gramática visual do que um kit de peças isoladas.
A página deve parecer um produto premium, direto e inteligente — não uma landing genérica azul.
A grid precisa aparecer como estrutura técnica, mas nunca competir com texto e CTAs.
Objetos devem parecer apoiados sobre a interface: contorno + base inferior física.
Editorial é tempero: usar em palavras-chave, não em blocos longos.
Neutros frios vencem bege/amarelado. Evitar ruído cromático sem função.
Movimento deve explicar sequência e comportamento, não apenas decorar.
Paleta e semântica.
A home usa tokens semânticos. Evite hardcodes fora do `:root` quando já existir equivalente.
--canvas
Base#ffffff
Fundo principal da página
--canvas-parchment
Surface#f5f5f7
Off-white estrutural, pausas e áreas neutras
--surface-pearl
Surface#fafafa
Cards, dropdowns e superfícies elevadas
--surface-tile-1
Dark#272729
Tile escuro principal
--surface-tile-2
Dark#2a2a2c
Variação escura secundária
--surface-tile-3
Dark#252527
Variação escura profunda
--surface-black
Dark#000000
Preto absoluto para alto impacto
--ink
Text#1d1d1f
Headlines, corpo forte e fills primários
--ink-muted-80
Text#333333
Contornos fortes e texto secundário escuro
--ink-muted-48
Text#7a7a7a
Texto discreto e metadados
--body-muted
Text#cccccc
Texto secundário em dark surfaces
--hairline
Border#e0e0e0
Contorno claro e apoio muted
--divider-soft
Border#f0f0f0
Separadores internos e rings suaves
Inter + Editorial.
Inter dá precisão de produto. O editorial entra como contraste em palavras-chave.
Exemplo de headline
Resuma
Reuniões.
O editorial deve ser curto, memorável e nunca substituir texto longo.
| Classe | Tamanho | Peso | Tracking | Uso |
|---|---|---|---|---|
| .ds-title-xl | clamp(3rem, 6vw, 5.5rem) | 600 | -0.065em | Headline hero |
| .ds-title-lg | clamp(2.25rem, 4vw, 4rem) | 600 | -0.055em | Títulos de seção |
| .ds-title-md | clamp(1.75rem, 2vw, 2.35rem) | 600 | -0.045em | Títulos de cards grandes |
| .ds-copy-lg | 1.125rem | 400 | normal | Parágrafo introdutório |
| .ds-copy | 1rem | 400 | normal | Corpo padrão |
| .ds-highlight | inherit | 400 | -0.02em | Ênfase editorial curta |
Objetos apoiados.
Componentes principais usam contorno de 2px. A base inferior é `box-shadow`, não `border-bottom`.
Radius scale
--radius-sm
6px
Detalhes pequenos
--radius-md
10px
Botões e inputs
--radius-lg
16px
Cards compactos
--radius-xl
24px
Cards principais
--radius-2xl
28px
Frames protagonistas
--radius-pill
9999px
Pílulas e badges
Shadow scale
--shadow-soft
0 1px 2px rgba(5,5,5,.05)
Sombra mínima
--shadow-card
0 12px 34px rgba(5,5,5,.08)
Sombra difusa atrás do objeto
--shadow-bottom-sm
0 3px 0 var(--hairline-strong)
Apoio baixo
--shadow-bottom-md
0 5px 0 var(--hairline-strong)
Apoio padrão
--shadow-bottom-lg
0 8px 0 var(--hairline-strong)
Apoio protagonista forte
--shadow-bottom-muted-lg
0 8px 0 var(--hairline)
Apoio claro / break strip
Biblioteca viva.
Componentes macro já existem em `src/components/design-system/`. Microcomponentes narrativos ainda pertencem às seções.
DSKicker
Pílula contextual para introduzir seção ou status.
DSCard default
Objeto elevado
DSCard bright
Protagonista
DSCard soft
Secundário
DSCard floating
Flutuante
DSFrame
Moldura protagonista para a hero. Contorno forte, radius grande, fundo com gradiente leve e apoio inferior forte.
DSBreakStrip
Faixa de pausa visual, prova social e respiro entre cenas.
Inputs e header controls
Grid section
O layout da home usa linhas laterais, nós quadrados e centro com largura máxima.
Ainda são section-owned.
Esses padrões são importantes, mas ainda vivem nas seções por terem comportamento específico de cena.
Tile do marquee com redução de opacidade no contexto e destaque no ativo.
Meeting cards usam vídeo em cor, contraste elevado e estado speaking.
Orgânico, funcional.
Motion deve ajudar a entender a cena, não competir com a mensagem.
Cluster → scatter
1120ms
cubic-bezier(0.18, 1.16, 0.28, 1)
Hero note cards saem de um bloco e encontram posição final.
Stagger de conteúdo
520ms
cubic-bezier(0.22, 1, 0.36, 1)
Linhas internas entram em sequência curta.
Step-scroll
marquee loop
steps / linear controlado
Trust strip anda em passos, mantendo leitura.
Sheen
980ms
ease-out
Brilho rápido em superfícies premium.
Speaking / active
220–300ms
ease
Cards de participante elevam quando ativos.
Reduced motion
imediato
none
Remove animações decorativas quando o usuário prefere menos movimento.
Como combinar peças.
Transforme conversa em decisão.
Kicker + headline curta + copy funcional + CTA. Evitar excesso de ornamento.
Checklist visual
- ✓ Existe um elemento dominante?
- ✓ A borda é tokenizada?
- ✓ A sombra representa apoio, não enfeite?
- ✓ O editorial está curto?
- ✓ Motion tem função?
O que já é sistema.
| Item | Status | Uso | Variações |
|---|---|---|---|
| DSButton | Pronto | CTAs, login e ações principais | primary, secondary, compact, fluid/full |
| DSCard | Pronto | Superfícies e objetos elevados | default, soft, bright, floating, breakStrip |
| DSFrame | Pronto | Moldura protagonista da hero | outline-frame |
| DSBreakStrip | Pronto | Faixa de pausa/prova social | break-strip |
| DSKicker | Pronto | Badges, labels e pílulas | kicker |
| DSGridSection | Pronto | Grid estrutural da home | linhas laterais + nós |
| .ds-input | CSS | Campos e controles de formulário | focus ring |
| .ds-header-control | CSS | Switcher e controles do header | 45px / 44px mobile |
| HeroNoteCard | Local | Cards narrativos da hero | cluster → scatter |
| TrustTile | Local | Tiles do marquee | step-scroll + hover focus |
| Meeting cards | Local | Participantes/transcrição/resumo | reveal progressivo |