Frontend UI Development

Instructions

Page & layout structure

• Responsive grid / flex layouts

• Clear visual hierarchy

• Consistent spacing and alignment

Components

• Reusable and modular components

• Props-driven design (where applicable)

• Accessible elements (buttons, inputs, links)

Styling

• Clean, modern design system

• Consistent colors, typography, and spacing

• Mobile-first and responsive breakpoints

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>