TechnicalCollectible prompt

Restraint pass on gradients, glass, blur and shadows

Count every effect on your site, keep the few that do a job, and replace the rest with plainer tools.

Lovablev0Cursor

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

Restraint 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.
Technicalnvoka.com/library/nvoka-restraint-pass-on-gradients-glass-blur-and-shadowsScan to open
Technical

Restraint pass on gradients, glass, blur and shadows

Count every effect on your site, keep the few that do a job, and replace the rest with plainer tools.

Nvoka logo

Curated by Nvoka

Lovablev0CursorClaude Code
Add to my library

Make it yours

Fill in the blanks and change any word. Only your copy changes, never the card.

Fill in the blanks

0 of 2 filled

Your prompt

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.
See all