Refresh current websites

Modernize without chaos

Refresh current websites

How to redesign, rebrand, and restructure an existing site with SuperGrok Heavy — audit → tokens → surgical rewrites → deploy — without losing SEO or breaking forms.

Pick a refresh mode before you prompt

ModeWhenHeavy instruction
PolishStructure OK, looks datedKeep IA + copy intent; restyle tokens, type, spacing only
RestructureConfusing nav / weak funnelNew IA map first; migrate URLs with redirects
RebrandNew logo/colorsToken pass + component inventory; freeze routes
RebuildLegacy WP/HTML messExtract content → rebuild static/React → Hostinger
PerformanceLooks fine, feels slowImages, fonts, JS budget, cache headers only
Never start with “make it modern”

Vague = purple gradients and random radii. Always lock mode, brand constraints, and “do not change URLs/forms” unless you intend to.

Step 1 — Audit prompt (paste with screenshots or HTML dump)

Site audit
/design Audit this existing website for a visual + conversion refresh.

I will provide: [screenshots OR repo path OR HTML export]

Output ONLY:
1. What works (keep)
2. What looks dated / AI-slop risk
3. Hierarchy problems (nav, CTAs, type scale)
4. Mobile failures
5. Token proposal (≤5 colors, ≤2 fonts, radii scale)
6. Ordered refresh plan in 5 PRs / phases
7. Risks to SEO and forms

Do NOT write application code yet.

Step 2 — Page inventory (force Heavy to catalog)

Inventory before rewrites
Create a page inventory as a markdown table:

| Path | Purpose | Primary CTA | Traffic priority | Refresh action |
|------|---------|-------------|------------------|----------------|
| / | Home | Demo | High | Restructure hero |
| /pricing | Pricing | Buy | High | Clarify tiers |
| /blog/* | SEO | Newsletter | Medium | Template only |
| /contact | Form | Submit | High | Keep endpoint |

Rules:
- Do not invent pages we don't have
- Flag orphan pages
- Flag 3 highest-ROI pages to refresh first

Step 3 — Surgical rewrite prompts

Homepage only
Refresh ONLY the homepage.

Constraints:
- Keep all existing routes and form action URLs
- Keep current brand accent hex: #2DD4BF
- Keep logo SVG path unchanged
- Rewrite hero + social proof + features density
- Improve mobile spacing; no horizontal overflow at 390px
- Do not touch pricing page or blog templates

Deliver: diff summary of files changed + before/after notes per section.
CLI plan for multi-page refresh
/plan Refresh marketing site in 3 phases:
Phase 1: tokens + shell (nav/footer)
Phase 2: home + pricing
Phase 3: inner pages + blog template
Constraints: no URL changes; preserve form endpoints; WordPress stays unless we agree to migrate.
Wait for approval between phases.

CSS-layer refresh (fastest win on static / WP)

When you cannot rewrite components yet, layer a design system over legacy markup:

refresh-layer.css
:root {
  --bg: #0a0b0d;
  --fg: #f2f3f5;
  --muted: #a0a8b4;
  --accent: #2dd4bf;
  --border: #2a303a;
  --font: "IBM Plex Sans", system-ui, sans-serif;
  --display: "Syne", system-ui, sans-serif;
  --space: 1rem;
  --radius: 10px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Map common legacy classes without rewriting HTML */
.site-header { border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); }
.btn-primary {
  background: var(--accent);
  color: #042f2e;
  border: 0;
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.card {
  background: #12151a;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  padding: 1.25rem;
}

/* Kill common dated patterns */
.mega-gradient-hero { background: var(--bg) !important; }
.shadow-heavy { box-shadow: none !important; }

@media (max-width: 640px) {
  .container { padding-inline: 1rem; }
  .row { flex-direction: column !important; }
}
Hostinger: enqueue the layer (WordPress child theme)
<?php
// functions.php (child theme)
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'refresh-layer',
    get_stylesheet_directory_uri() . '/refresh-layer.css',
    [],
    '1.0.0'
  );
});

Content rewrite without redesigning layout

Copy-only pass
Rewrite marketing copy only. Do not change layout, classes, or structure.

Audience: [who]
Offer: [what]
Voice: specific, concrete, no hype adjectives (ban: revolutionary, seamless, cutting-edge)

For each section output:
- New headline (≤8 words)
- New subhead (≤20 words)
- 3 bullets with real outcomes
- CTA label

Map replacements as: old → new so I can paste into CMS.

Preserve SEO while refreshing

SEO guardrails for Heavy
While refreshing:
1. Keep title/H1 primary keyword intent unless we redefine positioning
2. Do not delete indexable pages without 301 plan
3. Keep image alt text; improve if empty
4. Preserve canonical URLs
5. Generate a redirects.csv for any path changes:

from,to,type
/old-services,/services,301
/about-us,/about,301

6. After refresh, list pages that need Search Console re-inspection
Hostinger / nginx-style redirects example
# .htaccess (Apache / many Hostinger plans)
RewriteEngine On
RewriteRule ^old-services/?$ /services [R=301,L]
RewriteRule ^about-us/?$ /about [R=301,L]

Safe rollout sequence

  1. Backup (Hostinger on-demand)
  2. Staging subdomain refresh
  3. Forms + analytics smoke test
  4. Mobile 390px visual pass
  5. Swap DNS / publish
  6. CDN purge
  7. Search Console URL inspection for top 5 pages
Post-deploy verification prompt
Verify the refreshed site:
- Homepage hero CTA works
- Contact form submits
- No console errors on / /pricing /contact
- No horizontal overflow at 390px
- 301s for old paths return Location headers
Report a pass/fail table.
Tip

Full rebuilds: use Startup websites patterns, then Hostinger deploy. Prompt craft: Get what you want.