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:

No	Style	Why it reads 2030
38	Neubrutalism	Hard edges, raw weight, zero polish
40	Y2K Aesthetic	Chrome, plastic, excess — rejecting clean-SaaS
41	Cyberpunk UI	High-contrast edge lighting, HUD overlays
42	Organic Biophilic	Generative curves, nature-first, anti-grid
43	AI-Native UI	Generative typography, fluid states, prompt-surface
46	Dimensional Layering	Depth without the "floating card" cliche
47	Exaggerated Minimalism	Almost-wrong whitespace, editorial scale
48	Kinetic Typography	Type as subject, not body
50	Swiss Modernism 2.0	Grid-true editorial, modern weight choices
51	HUD / Sci-Fi FUI	Edge-aligned, monospace, data-as-ornament
55	Spatial UI (VisionOS)	Depth, glass without being glassmorphism
57	Gen Z Chaos / Maximalism	Anti-minimal, stacked, deliberately messy
58	Biomimetic / Organic 2.0	Generative + computed curves
59	Anti-Polish / Raw Aesthetic	Unfinished-on-purpose, hand-placed
60	Tactile Digital / Deformable UI	Elements react to pressure/cursor
61	Nature Distilled	Handmade warmth, natural palette
62	Interactive Cursor Design	Cursor is part of the composition
63	Voice-First Multimodal	Minimal visual, maximal prompt
65	Gradient Mesh / Aurora Evolved	Generative gradients, not blue→purple
66	Editorial Grid / Magazine	Magazine layouts, deliberate asymmetry
67	Chromatic Aberration / RGB Split	Controlled glitch, retro-tech
73	Terminal CLI (Mobile)	Monospace-first, command-surface
74	Kinetic Brutalism (Mobile)	Raw type + motion
77	Neo Brutalism (Mobile)	Hard shadows, flat primaries
78	Bold Typography (Mobile Poster)	Type is the hero
80	Cyberpunk Mobile HUD	Overlay + neon + mono

The era_2030 hard-reject list

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

No	Style	Why it's out
2	Neumorphism	Low contrast, accessibility failure, already dated
3	Glassmorphism	Every SaaS app 2020–2024
9	Claymorphism	Rounded 3D pastel — reads as 2021 Dribbble
10	Aurora UI	Generic blue→purple gradient, overused
14	Liquid Glass	Glassmorphism rebranded
19	Soft UI Evolution	Neumorphism rebranded
20	Hero-Centric Design	"Big headline + subhead + pill CTA + dashboard screenshot" — the most overfit SaaS pattern
21	Conversion-Optimized	A checklist of 2022 SaaS clichés
24	Social Proof-Focused	Logo cloud + testimonial grid, seen 10,000 times
30	Executive Dashboard	"KPI cards + line chart + activity feed" — generic admin
72	SaaS Mobile (High-Tech Boutique)	Self-describing
82	Claymorphism (Mobile)	As above
83	Enterprise SaaS (Mobile)	As above
85	Neumorphism (Mobile)	As above

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.