Frontend Design

Possible directions:

• brutally minimal
• editorial
• industrial
• luxury
• playful
• geometric
• retro-futurist
• soft and organic
• maximalist

Do not mix directions casually. Choose one and execute it cleanly.

2. Build the visual system

Define:

• type hierarchy
• color variables
• spacing rhythm
• layout logic
• motion rules
• surface / border / shadow treatment

Use CSS variables or the project's token system so the interface stays coherent as it grows.

3. Compose with intention

Prefer:

• asymmetry when it sharpens hierarchy
• overlap when it creates depth
• strong whitespace when it clarifies focus
• dense layouts only when the product benefits from density

Avoid defaulting to a symmetrical card grid unless it is clearly the right fit.

4. Make motion meaningful

Use animation to:

• reveal hierarchy
• stage information
• reinforce user action
• create one or two memorable moments

Do not scatter generic micro-interactions everywhere. One well-directed load sequence is usually stronger than twenty random hover effects.

Strong Defaults

Typography

• pick fonts with character
• pair a distinctive display face with a readable body face when appropriate
• avoid generic defaults when the page is design-led

Color

• commit to a clear palette
• one dominant field with selective accents usually works better than evenly weighted rainbow palettes
• avoid cliché purple-gradient-on-white unless the product genuinely calls for it

Background

Use atmosphere:

• gradients
• meshes
• textures
• subtle noise
• patterns
• layered transparency

Flat empty backgrounds are rarely the best answer for a product-facing page.

Layout

• break the grid when the composition benefits from it
• use diagonals, offsets, and grouping intentionally
• keep reading flow obvious even when the layout is unconventional

Anti-Patterns

Never default to:

• interchangeable SaaS hero sections
• generic card piles with no hierarchy
• random accent colors without a system
• placeholder-feeling typography
• motion that exists only because animation was easy to add

Execution Rules

• preserve the established design system when working inside an existing product
• match technical complexity to the visual idea
• keep accessibility and responsiveness intact
• frontends should feel deliberate on desktop and mobile

Quality Gate

Before delivering:

• the interface has a clear visual point of view
• typography and spacing feel intentional
• color and motion support the product instead of decorating it randomly
• the result does not read like generic AI UI
• the implementation is production-grade, not just visually interesting