frontend-design

# Frontend Design ## Core Design Principles ### Visual Hierarchy Every screen needs a clear reading order. Use size, weight, color, and spacing to guide the eye. ```tsx // Good: Clear hierarchy export function ArticleCard({ title, excerpt, author, date }: ArticleCardProps) { return ( <article className="rounded-xl border border-gray-100 p-6 shadow-sm hover:shadow-md transition-shadow"> {/* Primary: title grabs attention */} <h2 className="text-xl font-semibold text-gray-900 leading-snug mb-2"> {title} </h2> {/* Secondary: excerpt supports */} <p className="text-gray-600 text-sm leading-relaxed line-clamp-3 mb-4"> {excerpt} </p> {/* Tertiary: metadata recedes */} <div className="flex items-center gap-2 text-xs text-gray-400"> <span>{author}</span> <span>·</span> <time>{date}</time> </div> </article> ) } ``` ### Spacing System Use a consistent spacing scale. Tailwind's default scale (4px base) works well. ```tsx // Design token constants — define once, use everywhere export const spacing = { xs: 'gap-1', // 4px — tight inline elements sm: 'gap-2', // 8px — related items md: 'gap-4', // 16px — section padding lg: 'gap-6', // 24px — card padding xl: 'gap-8', // 32px — section gaps '2xl': 'gap-12', // 48px — page sections '3xl': 'gap-16', // 64px — hero sections } as const // Usage: consistent padding inside cards function Card({ children }...