TechnicalRestraint pass on gradients, glass, blur and shadows
Act as a senior visual designer doing a restraint pass on {{business_name}}'s site. The look we want is {{visual_style}}. Read the styles first and count every gradient, glass or blur effect, glow, shadow and animated element, with where each appears.
Then apply these rules:
- Gradients: one at most, and only where it does a job, such as an image overlay that makes text readable. Remove purple-to-blue gradients on buttons, text and backgrounds; buttons become one solid color with a darker hover.
- Glass and blur: remove frosted cards over blurred blobs. Keep backdrop blur only for a sticky header or a modal scrim, with enough opacity for 4.5:1 text contrast and a solid fallback when reduced transparency is on.
- Glows: none on text or buttons.
- Shadows: two at most. A small one for raised controls (0 1px 2px at about 8% opacity) and a larger one for menus and dialogs (0 8px 24px at about 12%). Cards on the page get a 1px border or a surface color instead.
- Borders: 1px in a border token, doing the separating that shadows were faking.
- Motion: only what helps. Hover and focus at 150 to 200ms, one hero entrance under 500ms, menus and dialogs at 200ms. Remove scroll fades on every block and anything floating, pulsing or looping. Respect reduced motion.
- Radius: one small and one large value, plus pills for tags.
Check that each removal leaves the hierarchy intact; where an effect was doing a job, replace it with a plainer tool such as spacing, weight or a border.
Keep content, components and routes. Finish with a tally of effects before and after, and each kept effect with its reason.