Radical 2030

Radical 2030 (Mercury)

Most design output drifts toward a narrow "2022 SaaS" archetype: deep-blue primary, Inter everywhere, centered hero with a big stat, soft gradient background, rounded-corner cards, emoji-as-icon, white-on-white with thin borders. It reads as safe, professional, and already dated. This skill's job is to push every aesthetic decision away from that archetype toward styles that will still feel current in 2030.

It does this two ways:

1. Override the style pool. When the design-system skill is selecting a style, discard the product-type's Style_Priority entirely — that field encodes the 2022 defaults this skill exists to replace. Use the set of entries with era_2030: yes in styles.csv as the candidate pool, ranked by match against the reasoning row's Color_Mood / Typography_Mood / product keywords. Hard-reject any entry with era_2030: no. Cite the discarded Style_Priority entries out loud so the designer sees the override is deliberate.
2. Enforce a specific anti-pattern list (below) during any Figma creation work. If something is being placed that matches an anti-pattern, stop and pick the radical alternative.

The era_2030 filter

Read from ${CLAUDE_SKILL_DIR}/../design-system/data/styles.csv (the design-system skill owns the data). Keep era_2030 == "yes". These are the styles this skill endorses:

The era_2030 hard-reject list

When design-system is picking a style, refuse these. Not "prefer alternative if available" — refuse.

The concrete anti-pattern list

These fire during any Figma creation work, independent of style choice. If you catch yourself reaching for one of these, stop and swap to the radical alternative.

Color / gradient

• No linear-gradient #3B82F6 → #8B5CF6 at 135°. This is the SaaS aurora gradient. Every AI product, every landing page. If you want a gradient, use a mesh, an off-axis angle (17°, 73°), or unexpected hues (emerald → rust, amber → violet).
• No "brand blue #2563EB or #4F46E5". Pick an unusual primary: deep oxblood #5B1A1D, acid lime #C6F432, hot orange #FF4500, or a desaturated neutral with one radical accent.
• No pastel-purple / lavender backgrounds. If you want a tinted surface, shift to desaturated warm (bone, putty, clay) or cool (slate, gunmetal).
• No "ambient gradient in a 500×500 blurred circle". Covered in the ambient-depth skill as a technique — but if it's the default "how do I make this look premium", you're defaulting to the thing everyone does. Consider type-as-subject, kinetic elements, or editorial whitespace instead.

Layout

• No centered hero with headline + subhead + pill CTA + "as seen in" logo row. This is the 2022 SaaS landing page in its purest form. Break symmetry: left-aligned with huge type, asymmetric grid, hero-as-editorial- article opener.
• **No 12-col grid with 3 feature cards in a row each with icon + h3 + 2 lines
  • link.** Pick a different structural spine per section (see tab-metaphors). Mix card-grid with full-bleed blocks, with editorial text-only sections, with interactive HUD panels.
• No floating card with 8–16px corner radius and 0 1 2 0 rgba(0,0,0,0.04) shadow. Either commit to hard edges (brutalist: 0 radius, 4px hard black shadow offset), or commit to spatial (true depth, multi-layer parallax).

Typography

• No Inter everywhere. Inter is great; it is also the default. For radical output, pair a display face (Fraunces, Migra, PPNeueMontreal, Redaction, JetBrains Mono, Departure Mono) with a neutral body and let the display carry the voice.
• No "headline at 48px semibold, subhead at 18px, body at 16px". The scale is right but the proportions are safe. Try 96px bold display + 14px monospace caption + 20px body — exaggerated scale ratios.
• No sentence case for display. Try uppercase tight-tracked, or title case with a serif in italic for emphasis.

Icons

• No emoji in the nav bar, on buttons, or as data category markers. This is a UX rule and a taste rule — emoji date instantly.
• No mixed icon sets. Heroicons outline + Lucide filled + Phosphor bold — instantly reads as unfinished.
• No "icon + label + chevron" list row for every content type. Vary it: some rows have a thumbnail, some are text-only, some are full-bleed.

Components

• No "rounded-full pill button in brand blue with white bold label". Alternatives: sharp-corner button with inverted fill-on-hover; text-link with animated underline; a brutalist button with a hard shadow that offsets on press.
• No "input with 1px border, 8px radius, grey-400 placeholder". Try: underlined input, terminal-prefix input, inline-label input, oversized input that dominates the screen.
• No "modal with blurred backdrop, centered card, X in top-right". Alternatives: bottom sheet, corner drawer, full-bleed takeover, inline expansion.

How to use this skill alongside others

• With design-system: apply the era_2030 filter during step 3 (style selection). Cite the rejected styles when explaining the choice.
• With tab-metaphors: for a multi-tab app, combine radical-2030's style pool with tab-metaphors' structural variety. E.g. Cyberpunk Mobile HUD (radical) across 4 tabs that use different layout spines (metaphors).
• With ambient-depth: ambient-depth is still a useful technique, but use it as one element in a radical composition, not as the entire look.
• With mercury-gotchas: no interaction — gotchas is operational, this is aesthetic.

Self-check before declaring done

Ask these three questions about the output. A "yes" on any one is a failure; rework before reporting.

1. Could this have been made with a 2021 shadcn + Tailwind starter kit?
2. Does it look like Stripe, Linear, or Notion?
3. Would a skeptical designer who has seen 500 SaaS landing pages in the last year find it boring?

If all three are no, the output earned the "2030" label.