Frontend Design

Frontend Design

Overview

Build memorable, functional interfaces with a clear aesthetic direction (no generic templates). Focus on bold typography, cohesive palettes, purposeful motion, semantic structure, accessibility, and visual intensity that fits the product context.

Quick Start

• Collect intent: purpose, audience, platform constraints, framework, delivery format (HTML/React/Vue).
• Choose an aesthetic direction and signature move (stripe, glow, grain, magazine stack). See references/aesthetic-playbook.md.
• Calibrate visual intensity for the surface type before adding effects. See references/visual-intensity-and-motion.md.
• Define tokens: fonts, palette, shadows, radii, spacing scale. Load fonts early.
• Plan layout: hero + supporting sections, data/timeline rails, cards; pick grid system and motion plan.
• Build semantic markup, wire CSS variables, add motion with staggered reveals, then run accessibility and responsive checks.

Workflow

1) Define intent and aesthetic

• Ask for: target users, tone (brutalist, editorial, neon, soft craft, industrial, etc.), content types (cards, forms, charts), performance constraints.
• Pick a single memorable gesture and stick to it. Avoid mixed-font chaos unless the style calls for it.
• For dashboards, admin tools, SaaS app surfaces, heavy forms, or unclear visual requests, use references/visual-intensity-and-motion.md to avoid overdecorating operational UI.
• If the user is vague, propose 2–3 aesthetic directions from references/aesthetic-playbook.md and confirm.

2) Plan structure and tokens

• Establish CSS variables for palette, shadows, radii, spacing, and motion curve. Keep accent count to 1–2.
• Choose font pairing (display + body, optional mono). Provide fallbacks after custom fonts.
• Map sections and micro-interactions. For vanilla builds, start from semantic HTML; for React, break into composable pieces (Hero, FeatureList, Timeline, CTA Rail).
• Reference references/implementation-patterns.md for layout, motion, accessibility, and responsive patterns.

3) Build and animate

• Markup: semantic headings, skip links, ARIA labels for interactive elements, descriptive alt text.
• Layout: prefer CSS Grid for macro and Flexbox for clusters. Break the grid deliberately (asymmetry, overlaps) while preserving readability.
• Styling: use custom backgrounds (gradient meshes, grain, hatch) to avoid flat color; design buttons and cards with intentional borders/shadows.
• Motion: orchestrate a few meaningful animations only when they improve orientation, hierarchy, continuity, feedback, narrative, or perceived quality. Guard with prefers-reduced-motion.
• Data-driven UI: define arrays of content (cards, metrics, steps) to keep components DRY and easy to restyle.

4) Polish and QA

• Responsive: collapse grids, maintain padding, ensure CTAs remain prominent on mobile, swap hover cues for focus/active styles.
• Accessibility: one h1, logical heading order, focus styles, contrast AA+, labeled inputs, aria-live where status changes.
• Performance: avoid heavy shadows on mobile, compress/limit assets, use font-display swap, prefer CSS animations over JS-heavy effects.

References

• references/aesthetic-playbook.md: Pick strong aesthetic directions with fonts, colors, layout, and motion cues.
• references/implementation-patterns.md: HTML/React patterns, tokens, motion recipes, responsive and accessibility guidance.
• references/visual-intensity-and-motion.md: Decide how much polish, animation, shadcn/Motion usage, visual density, and dependency weight is appropriate for the product surface.

Assets

• assets/vanilla-starter/: Ready-to-run vanilla HTML/CSS/JS concept (avant studio theme) with gradients, grain, staggered reveals, skip link, and accessible structure. Copy and retheme by updating CSS variables, fonts, and content.