---
paths:
  - "pages/**"
  - "components/**"
  - "static/**"
  - "PRODUCT.md"
  - "DESIGN.md"
---

# UI Rules

## Context
- Read `PRODUCT.md` before making UX, copy, or layout decisions.
- Read `DESIGN.md` before changing colors, type, spacing, elevation, or component
  styling.

## Design System
- Reuse existing tokens and primitives from `components/design-system/` before
  adding hard-coded values.
- Keep the portfolio aligned with the current direction: light paper background,
  Trirong plus Rubik typography, selective project accent colors, soft shadows,
  and restrained motion.
- When a visual pattern is repeated three or more times, extract it into
  `components/design-system/` or an existing shared component.

## Tests
- Jest tests live under `components/__tests__/`.
- Prefer focused component regressions for high-risk UI behavior.