Style Transfer Prompts

What is Style Transfer?

You have working HTML. The structure is fine. But the visual style needs to change — from “corporate blue” to “Apple minimal”, or from “generic Tailwind” to “premium glassmorphism”.

Style transfer re-skins without restructuring.

The Base Prompt

Restyle the following HTML to match [TARGET STYLE].

Rules:
1. Do NOT change the HTML structure (tags, nesting, content).
2. Only modify Tailwind utility classes and inline styles.
3. Keep all existing functionality (links, forms, interactive elements).
4. Maintain or improve accessibility (contrast ratios, focus states).
5. Ensure the result is responsive (test at 375px, 768px, 1280px).

Target Style: [DESCRIBE OR PASTE STYLE GUIDE]

HTML to restyle:
[PASTE HTML]

Style Presets

Apple Minimal

Target Style: Apple HIG Minimal
- Colors: gray-50 bg, gray-900 text, single blue accent (#0071E3)
- Typography: Inter, -0.02em tracking on headings, font-bold headlines
- Spacing: Generous — py-20+, gap-8+, p-8 on cards
- Radius: rounded-2xl on cards, rounded-xl on buttons
- Shadows: Very subtle — shadow-sm to shadow-md max
- Borders: 1px at 8% opacity (border-black/8)
- Effects: backdrop-blur-xl on elevated surfaces
- Motion: transition-all duration-300 ease-out
- Dark mode: gray-950 bg, elevated surfaces lighter

Brutalist

Target Style: Brutalist Web Design
- Colors: Black & white primary. One accent color (red-500 or yellow-400).
- Typography: Mono or bold sans (Space Grotesk, JetBrains Mono). UPPERCASE headings.
- Spacing: Tight — py-8, p-4 on cards, gap-2
- Radius: rounded-none everywhere. Square edges.
- Shadows: None or very harsh (shadow-[8px_8px_0_black])
- Borders: 2-3px solid black. Visible, structural.
- Effects: None. No blur, no gradient, no glass.
- Motion: None or instant (duration-0). Or: intentionally janky.
- Dark mode: Optional. If yes: pure white on pure black.

Glassmorphism Premium

Target Style: Premium Glassmorphism
- Colors: Dark base (gray-950), light glass surfaces (white/5 to white/10)
- Typography: Inter or DM Sans, light weight headings (font-light text-4xl)
- Spacing: Very generous — py-24+, p-10 on cards
- Radius: rounded-3xl on cards, rounded-2xl on buttons
- Shadows: Colored glow — shadow-[0_8px_32px_oklch(55%_0.15_250/0.15)]
- Borders: 1px white at 10% (border-white/10)
- Effects: backdrop-blur-2xl, bg-white/5, saturate-150
- Motion: duration-500 ease-out, hover:scale-[1.02]
- Always dark. No light mode needed.

Swiss / International

Target Style: Swiss International Typography
- Colors: White bg, black text. Red accent (#FF0000) used sparingly.
- Typography: Helvetica Neue or Inter. Strict grid alignment. Size contrast is the hierarchy tool.
- Spacing: Mathematical — consistent grid. Section py based on column width.
- Radius: rounded-none. Maybe rounded-sm on buttons.
- Shadows: None.
- Borders: Hairline (1px) used as grid dividers, not decoration.
- Effects: None. Pure typography and whitespace.
- Motion: Minimal. Functional only.
- Grid: Visible grid structure. Asymmetric layouts are OK if grid-aligned.

Combining Style Transfer with Webspire Patterns

Take the Webspire [pattern-name] pattern and restyle it to match [style preset].

Keep the HTML structure from the pattern, but apply the style rules above.
Also ensure the result still uses Webspire component tokens (--ws-*) where possible,
updating the token values to match the target style.

Checklist

• [ ] HTML structure unchanged (same tags, same nesting)
• [ ] Only Tailwind classes and CSS custom properties modified
• [ ] Contrast ratios maintained (WCAG AA)
• [ ] Responsive layout preserved
• [ ] Focus states visible and accessible
• [ ] Style is consistent across all sections (not just the hero)
• [ ] Dark mode handled (if target style requires it)