Design system aberto · v1.0
O sistema por trás deste site. Um único arquivo de tokens alimenta todas as páginas, os dois temas e os dois idiomas, e tudo está aberto para leitura.
O site antigo cresceu página por página. As cores variavam entre seções, e cada seção nova exigia escolher valores de novo. Ter tema claro e escuro dobrava esse trabalho.
Componentes só leem tokens semânticos, nunca hex direto. O violeta fica reservado para ação, foco e rótulos, então ele sempre tem um significado. Uma família tipográfica, Geist, com escala fixa. Movimento também tem tokens, e tudo desliga com movimento reduzido.
Uma página nova é montada com componentes que já existem. Um tema novo é um remapeamento de uns vinte tokens semânticos. O build exporta o tokens.json, então os mesmos valores podem ir para variáveis do Figma ou para outro código.
As primitivas são a paleta bruta. Nada na interface usa esses valores diretamente.
--ink-950#07060b--ink-900#0d0b13--ink-850#13101b--ink-800#1a1624--ink-700#262133--ink-500#5b546d--ink-300#8d87a0--ink-200#b5afc6--ink-100#e4e0ee--ink-50#f5f3fa--paper-0#ffffff--paper-50#faf9fd--paper-100#f2eff9--paper-200#e7e2f2--violet-200#d9cfff--violet-300#c2b3ff--violet-400#a68dff--violet-500#8a6cff--violet-600#6c4cf5--violet-700#5535d9--violet-800#3d24a8--violet-900#241566--magenta-400#ff7ab6--magenta-600#c2185b--green-400#48e3a0--green-600#0e7448Para que cada valor serve. Cada tema liga os mesmos nomes a primitivas diferentes. O contraste é calculado com os valores reais no build da página.
| Token | Uso | Escuro | Claro |
|---|---|---|---|
--bg | Fundo da página | #07060b | #faf9fd |
--surface | Cards e painéis | #0d0b13 | #ffffff |
--surface-raised | Elementos elevados, campos | #13101b | #f2eff9 |
--surface-sunken | Áreas rebaixadas | #050408 | #f2eff9 |
--fg | Texto principal | #f5f3fa18.4:1 · AAA | #120f1a18.1:1 · AAA |
--fg-muted | Texto corrido, secundário | #b5afc69.5:1 · AAA | #4f49628.1:1 · AAA |
--fg-subtle | Legendas, metadados | #8d87a05.9:1 · AA | #6a64805.3:1 · AA |
--line | Divisores, bordas de card | rgba(255, 255, 255, .08) | rgba(18, 15, 26, .09) |
--line-strong | Bordas de controles | rgba(255, 255, 255, .16) | rgba(18, 15, 26, .18) |
--accent | Fundo da ação principal | #6c4cf5 | #5535d9 |
--accent-hover | Ação principal, hover | #8a6cff | #3d24a8 |
--accent-fg | Texto sobre o accent | #ffffff5.3:1 · AA | #ffffff7.2:1 · AAA |
--accent-ink | Links, rótulos, texto em accent | #c2b3ff10.8:1 · AAA | #5535d96.9:1 · AA |
--accent-soft | Fundo de hover, linha selecionada | rgba(138, 108, 255, .14) | rgba(85, 53, 217, .09) |
--accent-glow | Brilho atrás de elementos-chave | rgba(108, 76, 245, .45) | rgba(108, 76, 245, .22) |
--success | Disponibilidade, confirmações | #48e3a012.3:1 · AAA | #0e74485.5:1 · AA |
--highlight | Ênfase rara | #ff7ab6 | #c2185b |
--focus-ring | Contorno de foco do teclado | #c2b3ff10.8:1 · AAA | #5535d96.9:1 · AA |
--nav-bg | Nav translúcida | rgba(7, 6, 11, .72) | rgba(250, 249, 253, .78) |
--scene-a | Cena 3D, cor principal | #8a6cff | #5535d9 |
--scene-b | Cena 3D, luz | #c2b3ff | #8a6cff |
--scene-c | Cena 3D, sombra | #241566 | #e7e2f2 |
Geist para tudo, Geist Mono para rótulos e código. Tamanhos grandes ganham espaçamento mais justo; o corpo fica com entrelinha 1.6.
Produtos que fazem voltar
Produtos que fazem voltar
Produtos que fazem voltar
Produtos que fazem voltar
Produtos que fazem voltar
Sete anos criando apps, sites, plataformas e jogos.
Sete anos criando apps, sites, plataformas e jogos.
Sete anos criando apps, sites, plataformas e jogos.
Sete anos criando apps, sites, plataformas e jogos.
Base de 4px. As seções respiram com um valor fluido, --section; as margens laterais acompanham a tela.
--space-14px--space-28px--space-312px--space-416px--space-524px--space-632px--space-748px--space-864px--space-996px--space-10144px--radius-sm8px--radius-md12px--radius-lg20px--radius-xl28px--radius-pill999px--shadow-1Cards em repouso--shadow-2Mídia em destaqueO movimento fica guardado para três momentos: o deck do hero, a história do Orra e a desmontagem do Como o Vk é construído. O resto fica parado. Efeitos ligados ao scroll usam só transform e opacity, e tudo para com prefers-reduced-motion.
Componentes reais deste site, com as mesmas classes e tokens. Passe o mouse e use o teclado.
Um primário por tela. Secundário para o segundo caminho, como o CV ao lado dos projetos.
Dois primários lado a lado, ou botão para navegar dentro de um parágrafo (use link).
Área mínima de 44px (40px no pequeno em linhas densas), anel de foco de 2px visível, branco sobre --accent em 5,3:1 (7,2:1 no claro).
Status para um fato atual (disponibilidade). Tags para escanear habilidades, nunca como única fonte de informação.
Tags que parecem clicáveis, ou mais de seis num card.
O ponto verde é decoração; o texto carrega o significado. Links mantêm o sublinhado.
Imagem primeiro, depois contexto, título, resultado em uma linha e uma ação. O card inteiro é um link só.
Links ou botões dentro do card; resultado com mais de duas linhas.
Uma parada de tab por card, o título é o nome acessível, as imagens têm alt real.
Números reais com o contexto que os torna úteis, numa frase.
Números sem origem, ou um número que precisa de nota de rodapé.
Os números são texto estático, então aparecem iguais com ou sem script.
Os dois. Design é o foco; o front-end deixa o handoff curto.
Sim.
Respostas curtas que as pessoas procuram, como fuso ou contrato.
Esconder conteúdo necessário para a decisão.
details e summary nativos: teclado e leitor de tela funcionam sem script.
O escuro é o padrão. A escolha fica salva no aparelho.
Traduzir por script: cada idioma é uma página com URL própria.
O rótulo do botão diz o que ele vai fazer. Os links de idioma têm hreflang e lang.
Os dois temas lado a lado, no mesmo componente. O escuro é o padrão; o claro é um remapeamento dos tokens semânticos, aplicado pelo atributo data-theme em qualquer elemento.
Mesmo HTML, mesmos nomes. Só a camada semântica muda.
Mesmo HTML, mesmos nomes. Só a camada semântica muda.
Histórico · v1.0, novembro de 2026: primeira versão pública.
