rahul-sha/portfolio-design-system

Sistema de diseño del portafolio

Este sitio tiene un sistema de diseño. Lee DESIGN.md en la raíz del repositorio antes de cambiar cualquier estilo, y trabaja a partir de él.

Reglas

1. Cada color, tamaño de fuente, paso de espaciado, radio y duración es una propiedad personalizada CSS en el bloque :root al principio de index.html. Usa el token en las reglas. Nunca escribas un valor hexadecimal crudo, tamaño en píxeles o duración que ya cubra un token.
2. Un nuevo valor necesita un nuevo token en :root y una fila correspondiente en DESIGN.md, en el mismo cambio. El sistema de diseño también reside en Claude como un artefacto de Sistema de Diseño (https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1). Cuando un token, patrón o regla cambie aquí, actualiza project/tokens.json y project/README.md de ese artefacto en la misma tarea, para que las tres copias nunca se desvíen.
3. El texto y el fondo vienen en pares. Una nueva clase de color de panel establece ambos. Verifica el emparejamiento contra la lista AA en DESIGN.md y ejecuta el análisis axe de README.md antes de abrir una solicitud de extracción.
4. No hay modo oscuro. No agregues reglas prefers-color-scheme: dark. La página establece color-scheme: light a propósito.
5. El movimiento usa --ease y los tokens --dur-* y debe detenerse bajo prefers-reduced-motion: reduce.
6. Prueba a 390 px y 1280 px de ancho, con movimiento reducido activado y desactivado, usando la skill webapp-testing. Una refactorización de estilo debe producir capturas de pantalla idénticas a nivel de píxel antes y después.

Dónde viven las cosas

• Tokens: :root en index.html
• Referencia y catálogo de patrones: DESIGN.md
• Colores de Three.js: literales hexadecimales en scene.js, mantenidos sincronizados con la paleta manualmente
• La copia dentro de Claude: https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1 (tokens, libro de marca, vistas previas de componentes)