rahul-sha/portfolio-design-system

Système de design du portfolio

Ce site dispose d'un système de design. Lisez DESIGN.md à la racine du dépôt avant de modifier tout style, et travaillez à partir de celui-ci.

Règles

1. Chaque couleur, taille de police, pas d'espacement, rayon et durée est une propriété CSS personnalisée dans le bloc :root en haut de index.html. Utilisez le token dans les règles. N'écrivez jamais une valeur hexadécimale brute, une taille en pixels ou une durée déjà couverte par un token.
2. Une nouvelle valeur nécessite un nouveau token dans :root et une ligne correspondante dans DESIGN.md, dans le même changement. Le système de design vit également dans Claude sous la forme d'un artefact Système de design (https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1). Lorsqu'un token, un motif ou une règle change ici, mettez à jour project/tokens.json et project/README.md de cet artefact dans le même travail, afin que les trois copies ne dérivent jamais.
3. Le texte et l'arrière-plan vont par paires. Une nouvelle classe de couleur de panneau définit les deux. Vérifiez la paire par rapport à la liste AA dans DESIGN.md et exécutez le scan axe à partir de README.md avant d'ouvrir une pull request.
4. Il n'y a pas de mode sombre. N'ajoutez pas de règles prefers-color-scheme: dark. La page définit color-scheme: light intentionnellement.
5. Les animations utilisent --ease et les tokens --dur-* et doivent s'arrêter sous prefers-reduced-motion: reduce.
6. Testez à 390 px et 1280 px de largeur, avec et sans réduction de mouvement, en utilisant le skill webapp-testing. Une refonte stylistique doit produire des captures d'écran pixel-identiques avant et après.

Où se trouvent les éléments

• Tokens : :root dans index.html
• Catalogue de référence et de motifs : DESIGN.md
• Couleurs Three.js : littéraux hexadécimaux dans scene.js, maintenus manuellement en phase avec la palette
• La copie dans Claude : https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1 (tokens, charte graphique, aperçus de composants)