PROMPT_016 / REDESIGN

FROM 'AI MADE THIS' TO 'WHO DESIGNED THIS?'

A full visual overhaul into dark monochrome industrial-editorial without touching functionality.

BEST FOR: Working apps with generic default styling.
DIFFICULTY: Advanced
TOOLS: Lovable · Cursor · Bolt

USE THIS IN LOVABLE

Redesign this app's visual language without changing any functionality or routes.

Palette: backgrounds #050505 / #0B0B0B / #0E0E0E / #151515, text #F5F5F3 / #A1A1A1 / #686868, borders rgba(255,255,255,0.10) default, 0.28 hover. Strictly monochrome — color only inside content previews.

Type: a bold extended display face for headings at -0.03em tracking, a neutral sans for UI, monospace only for 10-12px technical labels. Use clamp() for responsive display sizes.

Surfaces: solid dark cards, glass reserved for floating controls, mixed radii (24px panels, 18px cards, pill buttons), textured backgrounds using a faint 56px grid plus 3% grain.

Motion: 180/350/700ms with cubic-bezier(0.22, 1, 0.36, 1); card lift 4px, button lift 3px, scroll reveal 14px, arrow shift 3px. Nothing else.

Rewrite tokens in the stylesheet and refactor components to use them — do not scatter hardcoded values.

---
Tool: Lovable. Apply the changes directly to the existing codebase, reuse the current design tokens and component structure, and do not introduce new dependencies.

RECOMMENDED INTERACTIONS.

STRUCTURE / 56PX

INTERACTION_023CSS

Tech Grid

Faint technical grid with a radial fade.

Background / LightView

TEXTURE / 3%

INTERACTION_024CSS

Grain Overlay

Film grain that stops black from looking flat.

Background / LightView

GLASS / SURFACE

Blur 24px · edge light

INTERACTION_010CSS

Glass Panel

Heavy dark glass with an inner edge highlight.

App UI / MediumView

RELATED PROMPTS.

All prompts

PROMPT_001 / LANDING PAGES

MAKE MY WEBSITE FEEL EXPENSIVE.

Adds restrained motion, glass surfaces, premium hover behavior, better typographic transitions and professional microinteractions.

premiumlanding-pagemicrointeraction

Preview

PROMPT_002 / LANDING PAGES

BUILD A LANDING PAGE THAT LOOKS HIRED.

A complete dark, monochrome, editorial landing page structure with asymmetric bento sections and restrained motion.

premiumlanding-pagedark-ui

Preview

PROMPT_003 / BUTTONS

GIVE MY CTA GRAVITY.

A reusable cursor-following button component with proper touch and reduced-motion fallbacks.

buttonmousepremium

Preview