Frontend Philosophy

3. Purposeful Motion

• Concept: Animation should delight, not distract. Scattered micro-interactions create noise.
• Rule: One well-orchestrated animation beats a dozen minor transitions. Focus on high-impact moments.
• Practice: Use CSS animations for HTML, Motion library for React. Prioritize staggered reveals and surprsing hover states.

4. Brave Spatial Composition

• Concept: Predictable layouts are forgettable. Safe spacing feels automated.
• Rule: Either generous negative space OR controlled density — not the middle ground.
• Practice: Embrace asymmetry, overlap, diagonal flow, and grid-breaking elements.

5. Atmosphere & Depth

• Concept: Flat solid backgrounds lack presence and feel unfinished.
• Rule: Layer visual richness through gradient meshes, noise textures, geometric patterns, and transparencies.
• Practice: Add dramatic shadows, decorative borders, grain overlays.

Adherence Checklist

Before completing your task, verify:

• Typography: Did you avoid generic system fonts?
• Color: Are the color choices bold and intentional?
• Motion: Is there a primary, high-impact animation?
• Space: Does the layout feel designed rather than templated?
• Depth: Is there visual richness (textures, gradients, layering)?