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.

Execution Checklist

1. Pick a clear visual direction (type, palette, background motif).
2. Define CSS variables for colors, spacing, and typography early.
3. Implement layout with responsive behavior and readable hierarchy.
4. Add purposeful motion that supports content scanning.
5. Review for default-stack fonts, purple bias, and flat backgrounds.