rahul-sha/portfolio-design-system

Portfolio-Designsystem

Diese Website hat ein Designsystem. Lies DESIGN.md im Repository-Stammverzeichnis, bevor du Styling änderst, und arbeite von dort aus.

Regeln

1. Jede Farbe, Schriftgröße, Abstandsschritt, Radius und Dauer ist eine CSS-Custom-Property im :root-Block oben in index.html. Verwende das Token in Regeln. Schreibe niemals einen rohen Hex-Wert, eine Pixelgröße oder eine Dauer, die bereits von einem Token abgedeckt werden.
2. Ein neuer Wert benötigt ein neues Token in :root und eine entsprechende Zeile in DESIGN.md in der gleichen Änderung. Das Designsystem lebt auch in Claude als Designsystem-Artefakt (https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1). Wenn ein Token, Muster oder eine Regel hier geändert wird, aktualisiere project/tokens.json und project/README.md in diesem Artefakt in derselben Arbeit, sodass die drei Kopien nie auseinanderdriften.
3. Text und Hintergrund kommen als Paar. Eine neue Panel-Farbklasse setzt beides. Überprüfe die Paarung mit der AA-Liste in DESIGN.md und führe den axe-Scan aus README.md aus, bevor du einen Pull-Request eröffnest.
4. Es gibt keinen Dark Mode. Füge keine prefers-color-scheme: dark-Regeln hinzu. Die Seite setzt color-scheme: light absichtlich.
5. Bewegung verwendet --ease und die --dur-*-Tokens und muss unter prefers-reduced-motion: reduce gestoppt werden.
6. Teste bei 390 px und 1280 px Breite, mit und ohne reduzierte Bewegung, unter Verwendung des webapp-testing-Skills. Ein Styling-Refactoring sollte pixelidentische Screenshots vorher und nachher erzeugen.

Wo die Dinge liegen

• Tokens: :root in index.html
• Referenz- und Musterkatalog: DESIGN.md
• Three.js-Farben: Hex-Literale in scene.js, von Hand mit der Palette abgeglichen
• Die Kopie in Claude: https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1 (Tokens, Markenhandbuch, Komponentenvorschauen)