Challenge F-01: Design System & Component Planning

Description

Good UI doesn't happen by accident. Before writing a single line of CSS, you need a design system — a shared set of decisions about colors, typography, spacing, and component patterns that keep the entire application visually consistent.

In this challenge, you'll define that system and plan which components to tackle first. Use GitHub Copilot to brainstorm approaches, explore color palettes, and think through component architecture. There's also a frontend-design skill available in this repo's .github/skills/ directory — read it for guidance on building polished, production-quality interfaces.

This planning pays off fast. A solid design system means every component you build in the next challenge already looks like it belongs.

You can also capture your design decisions as a custom prompt file (.github/prompts/) for design brainstorming, or extend the frontend-design skill with your own design system tokens — see Challenge C-00 for how.

Objectives

• Define a modern design system: color palette, typography scale, spacing system, and visual language
• Identify and plan at least 3 components to redesign from the Juice Shop frontend
• Use GitHub Copilot to brainstorm design approaches and explore alternatives
• Reference the frontend-design skill in .github/skills/frontend-design/SKILL.md for design guidance

Success Criteria

• Design system documented: color palette (primary, secondary, accent, neutrals), typography (font families, size scale), spacing scale
• At least 3 UI components identified for redesign with a brief plan for each
• GitHub Copilot used during the planning process
• The frontend-design skill file has been read and its guidance considered

Learning Resources

• GitHub Copilot Chat in the editor
• Thinking in design systems
• Modern CSS features
• Accessible color contrast