Frontend Design Constraints

Overview

Apply a bold, intentional visual direction for frontend work while keeping layouts usable on desktop and mobile.

Core Constraints

• Avoid safe, average-looking layouts; make the design feel intentional and slightly surprising.
• Choose expressive, purposeful fonts; avoid default stacks like Inter, Roboto, Arial, or system UI.
• Define CSS variables for color and spacing to establish a clear visual direction.
• Avoid purple-on-white defaults and avoid a default dark-mode bias.
• Use a non-flat background: gradients, shapes, or subtle patterns to build atmosphere.
• Add a few meaningful animations (page-load, staggered reveals); avoid generic micro-motions.
• Ensure the page loads properly and remains readable on both desktop and mobile.

Exception

If working inside an existing website or design system, preserve its established patterns, structure, and visual language.