rahul-sha/portfolio-design-system

Sistema de design do portfólio

Este site possui um sistema de design. Leia o arquivo DESIGN.md na raiz do repositório antes de alterar qualquer estilo e trabalhe a partir dele.

Regras

1. Toda cor, tamanho de fonte, passo de espaçamento, raio e duração são propriedades personalizadas CSS no bloco :root no topo do index.html. Use o token nas regras. Nunca escreva um valor hexadecimal bruto, tamanho em pixels ou duração que um token já cubra.
2. Um novo valor precisa de um novo token no :root e uma linha correspondente no DESIGN.md, na mesma alteração. O sistema de design também reside no Claude como um artefato do Sistema de Design (https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1). Quando um token, padrão ou regra mudar aqui, atualize o project/tokens.json e o project/README.md desse artefato no mesmo trabalho, para que as três cópias nunca divirjam.
3. Texto e fundo vêm como um par. Uma nova classe de cor de painel define ambos. Verifique o par contra a lista AA no DESIGN.md e execute a varredura axe do README.md antes de abrir um pull request.
4. Não há modo escuro. Não adicione regras prefers-color-scheme: dark. A página define color-scheme: light propositalmente.
5. Movimento usa --ease e os tokens --dur-* e deve parar sob prefers-reduced-motion: reduce.
6. Teste em 390 px e 1280 px de largura, com movimento reduzido ativado e desativado, usando o skill webapp-testing. Uma refatoração de estilo deve produzir capturas de tela pixel-idênticas antes e depois.

Onde as coisas vivem

• Tokens: :root no index.html
• Catálogo de referência e padrões: DESIGN.md
• Cores Three.js: literais hexadecimais no scene.js, mantidas em sincronia manualmente com a paleta
• A cópia dentro do Claude: https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1 (tokens, guia de marca, prévias de componentes)