Case de sistema visual
Este case documenta como o portfólio saiu de estilos repetidos para foundations, primitivos e regras compartilhadas. O objetivo não é simular uma biblioteca corporativa, mas demonstrar decisão, adoção e governança.
Voltar aos projetosProblema de sistema
O portfólio compartilhava cores, tipografia e aparência, mas repetia markup de botões, headings, tags e shells de seção. Radius de 2rem, sombras e reveals apareciam em contextos diferentes com o mesmo peso, reduzindo contraste editorial e aumentando o risco de drift.
Tokens CSS semânticos cobrem tema claro/escuro, superfícies, texto, bordas e contraste.
Carbona como família única, com pesos e escala curta para reduzir variação e custo de fonte.
Padrões e seções do site compartilham raio, sombra, borda e espaçamento — inventário abaixo.
Easings e durações tipados; reveal por seção e transição de tema sem competir com o conteúdo.
Tokens de cor
Todos os tokens semânticos de `src/index.css`. Alterar o tema no header atualiza os swatches.
--color-bg
--color-panel
--color-surface
--color-surface-elevated
--color-card
--color-placeholder
--color-primary
--color-primary-soft
--color-text-primary
--color-text-muted
--color-text-subtle
--color-border
--color-inverse
Tipografia
Carbona para UI e display. Pesos e escala criam contraste; tracking alto fica restrito a labels curtos.
Hero display
Product Design
Section title
Design system
Project card title
Design System
Card title
Tipografia
Body
Clareza, consistência e evolução visual para orientar novas páginas.
Card body
Tokens CSS controlam tema claro, tema escuro, superfície, bordas, texto e contraste.
Eyebrow
Tipografia
Card label
Processo
Navigation / Control
Projetos
Radius e elevação
Valores canônicos em CSS variables — usados via utilitários Tailwind `shadow-card` e `shadow-section`.
--radius-card
Cards usam 1.25rem; mídia, controles e features têm tokens próprios.
--shadow-card
Elevação leve para blocos repetidos na grade.
--shadow-section
Sombra mais profunda em hover e destaques de seção.
Motion
Tokens de easing e duração em `index.css`, consumidos por Framer Motion e CSS de tema.
--motion-ease-smooth
Curva principal de página e theme transition.
--motion-ease-card
Entrada de cards e reveals em seções.
--motion-duration-base
520ms — motion de UI e seções.
--motion-duration-theme
760ms — troca light/dark.
MotionConfig respeita a preferência do usuário; TypeCyclePhrase e scroll também oferecem comportamento estático.
Tema
O atributo `data-theme` no `<html>` troca o bloco de variáveis. Use o toggle do header para ver esta página em ambos os modos.
01
Fundos claros, primary escuro, bordas discretas — base de craft do portfolio.
02
Mesmos nomes de token; valores invertidos de superfície e texto sem classes duplicadas.
03
O primary do portfolio não replica nenhuma marca de clientes. DS de produto fica no case.
Padrões de UI
Botão primário
Ação principal via ActionLink: fundo primary, texto inverse e foco visível.
Botão secundário
CTA de apoio com borda, fundo surface e hierarquia menor que a ação principal.
Botão terciário
Controle auxiliar com área mínima de toque e estado hover discreto.
Toggle de idioma
Controle segmentado do header com aria-pressed e target de 44 px no mobile.
Ícones
Lucide React com stroke leve, usados em CTAs, cards, contato e navegação mobile.
Inventário
Lista alinhada a `rules/Design_System.md`, incluindo os primitivos extraídos quando passaram a ter usos recorrentes.
| Componente | Path | Status | Notas |
|---|---|---|---|
| SectionShell | ui/SectionShell.tsx | Ativo | Container, padding responsivo e ritmo de seção |
| SectionHeading | ui/SectionHeading.tsx | Ativo | Eyebrow, título e corpo no grid editorial |
| ActionLink | ui/ActionLink.tsx | Ativo | Ações primary, secondary e text com foco visível |
| Tag | ui/Tag.tsx | Ativo | Metadados curtos e categorias |
| SiteHeader | layout/SiteHeader.tsx | Ativo | Menu Escape, locale, theme e alvos 44 px |
| BackToTop | ui/BackToTop.tsx | Ativo | Aparece após scroll; reduced motion |
| Hero | sections/Hero.tsx | Ativo | TypeCyclePhrase + CTA tipográfico |
| Work | sections/Work.tsx | Ativo | Link único por card e srcset quando existe |
| Impact | sections/Impact.tsx | Ativo | Faixa feature com dados hierarquizados |
| Testimonials | sections/Testimonials.tsx | Ativo | Carrossel com índice e região nomeada |
| Contact | sections/Contact.tsx | Ativo | Copy-to-clipboard; capabilities no footer |
| ProjectMediaGrid | sections/ProjectMediaGrid.tsx | Ativo | figure/figcaption e object-contain |
| WordsPullUp | animations/WordsPullUp.tsx | Ativo | Heading semântico com fallback estático |
| ScrollLinkedAudio | audio/ScrollLinkedAudio.tsx | Ativo | MP3 sob demanda em /audio/ |
Grid e espaçamento
01
Seções usam padding lateral consistente e conteúdo centralizado em max-w-[1664px]. Exceções full-bleed devem ser intencionais e isoladas.
02
Layouts editoriais usam 12 colunas no desktop. Conteúdo de leitura deve ocupar 7 ou 8 colunas; labels e descrições laterais ficam entre 3 e 5 colunas.
03
Cards não devem ficar estreitos demais entre tablet e notebook. Nesses pontos, preferir duas colunas equilibradas antes de abrir composições assimétricas.
04
Containers com animação podem usar overflow-hidden, mas sombras, stacks e elementos em movimento precisam de altura suficiente para não parecerem cortados.
Uso prático