Frontend UI Development

Instructions

1. Page & layout structure

   • Responsive grid / flex layouts
   • Clear visual hierarchy
   • Consistent spacing and alignment

2. Components

   • Reusable and modular components
   • Props-driven design (where applicable)
   • Accessible elements (buttons, inputs, links)

3. Styling

   • Clean, modern design system
   • Consistent colors, typography, and spacing
   • Mobile-first and responsive breakpoints

4. UI/UX principles

   • Intuitive navigation
   • Clear call-to-actions
   • User-friendly interactions and feedback

Best Practices

• Follow mobile-first approach
• Keep UI simple and purposeful
• Use consistent design tokens
• Ensure accessibility (contrast, focus states)
• Optimize for performance and readability

Example Structure

<div class="page-container">
  <header class="navbar">
    <h1 class="logo">Brand</h1>
    <nav class="nav-links">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main class="content">
    <section class="card">
      <h2>Section Title</h2>
      <p>Well-structured and readable content.</p>
      <button class="primary-btn">Action</button>
    </section>
  </main>
</div>