Web Designer Skill

Expert guidance for creating responsive, maintainable websites with sharp attention to design details.

Core Principles

Design Consistency

• Load project styleguide first—check references/styleguide.md or project's design tokens
• Use semantic color names (--color-navy) not raw values (#1E3A5F)
• Maintain typography hierarchy: one display size per page, consistent heading progression
• Spacing: use design tokens (section-gap, card-padding) not arbitrary values

Mobile-First Responsive

• Start with mobile layout, progressively enhance for larger screens
• Breakpoints: sm:640px, md:768px, lg:1024px, xl:1280px
• Touch targets: minimum 44x44px for interactive elements
• Test: content readable without horizontal scroll at 320px width