redesign-existing-projects

Follow a scan-diagnose-fix sequence: read the codebase to identify the framework and styling method, audit for generic design patterns, then apply targeted upgrades in priority order. Start with font swaps and color cleanup, then add interaction states, and test after every change.

Replace default fonts like Inter with characterful options such as Geist or Outfit, remove purple-blue AI gradients, break the three-card-column layout into asymmetric grids, and add hover, active, loading, and empty states. Tint shadows to match the background and add subtle grain or texture.

Yes, it works with Tailwind, vanilla CSS, styled-components, and other styling methods. Before modifying configuration, check whether the project uses Tailwind v3 or v4, and always work within the existing stack rather than migrating frameworks.

The most common patterns are Inter font everywhere, purple-blue gradients, three equal card columns, pure black backgrounds, generic box shadows, Lucide icons, and centered symmetrical layouts. The audit checklist covers over 60 such patterns across typography, color, layout, and components.

Avoid incremental redesign when the project needs a full rebrand, a framework migration, or when the underlying information architecture is fundamentally broken. This approach is designed for targeted visual upgrades on functional codebases, not ground-up rebuilds.