Design Expert

Design Expert

Use this skill when adjusting HTML/CSS, layout, or visual design in this repo. Keep the current editorial, light-theme aesthetic and reuse the design system.

Project rules (must)

• Use tokens from css/styles.css (:root) for colors, spacing, typography, and motion.
• Keep typography pairing: --font-serif for headings, --font-sans for body.
• Default theme is light; add .dark overrides only when requested or already in use.
• Prefer existing classes/components before creating new ones.

Responsive behavior

• Mobile-first; use existing breakpoints at 640px, 768px, and 1024px.
• Ensure tap targets are at least 44px and avoid horizontal overflow on small screens.
• Use flex/grid with wrapping; avoid fixed widths on mobile.

Motion + performance

• Animate with transform and opacity; avoid layout thrash.
• Respect prefers-reduced-motion.

Accessibility

• Use semantic HTML and visible focus states.
• Maintain text contrast at 4.5:1 or higher.

File placement

• Global styles: css/styles.css
• Page-specific styles: css/vision.css, css/docs.css

Reuse first

• Scan css/styles.css for existing patterns like .container, .btn, .card, .hero, .nav, .feature-detail, and .phone-mockup.