Cristian's Figma wizard is the best structure the onboarder has had — named horizontal
stepper, outcome-named buttons, fail-soft credentials, a payoff step. But it is dressed
entirely in the WordPress/Gutenberg library. Our design DNA work went the other way: warm
paper, hairlines, indigo, mono labels. This page keeps his skeleton and
our skin, rendered as real HTML, so we can judge the middle ground before
the rebuild.
Recoleta is commercial and not bundled — headings below use Fraunces as a stand-in.
01
The two languages, side by side
observation
Cristian · WP-native
Inter 13px everywhere; headings are just bigger Inter
Gutenberg blue #3858E9 for pills, buttons, links
Cards: 8px radius, soft shadow, grey #F0F0F0 well
Stepper: blue pill + green dots, all 9 names spelled out
Full-screen takeover, 1440×1024 fixed, no admin chrome
Built from the official WP Figma library ("Text based button")
Tangible · brand DNA
Recoleta display, League Spartan UI, mono micro-labels
Indigo #6359D6 as the one accent; salmon only in the mark
Flat: 1px warm hairlines, 3–4px radii, no shadows
Vertical tile-ladder rail that states skip reasons in words
Contained neutral well + faint indigo grid, inside a hidden admin page
Olive/mint success, tobacco warning — earthy semantics, not RGB
The hybrid — what each parent contributes
From Cristian: the 9-step flow, horizontal named stepper, per-step outcome buttons, all copy, full-screen takeover, welcome brand panel, fail-soft connect, Done-page toggle
From Tangible: Recoleta step headings, a contained grid well, hairline flat cards, indigo replaces #3858E9 wholesale, olive done-dots, tobacco/mint notices, mono micro-labels and licence key, pill primary button, salmon kept to the logo mark
Shared ground: both already use a system/neutral body face — the hybrid keeps the native stack for body text, so the only webfont cost is display + mono
Cheapest wins
Swapping #3858E9 → #6359D6 and the gridded well converts ~80% of the visual identity for ~10 lines of tokens. The structure never moves.
Real tension
Cristian's shadowed 8px cards vs our flat hairline discipline. The hybrid picks flat — it is the more distinctive half, and it photographs as "us" instantly.
Both agree
Neither parent puts a webfont on body text. Recoleta appears only at heading sizes where FOUT is invisible, mono only on labels and keys.
02
Hybrid · 01 Welcome
licence + steward + telemetry
Cristian's two-column welcome, verbatim copy — including the 10%-off telemetry
incentive that still has no mechanism behind it. Skin: dark ink brand panel (not navy),
salmon play button as the single playful mark, licence key set in Space Mono, consent
panel on the indigo tint.
A Salmon lives only in the mark + play button — one playful thing per screen.B Licence key in Space Mono: identifier-shaped things get the data face.C Content well is neutral with the contained 22px indigo grid — the one unambiguously-Tangible device.D Pill primary survives here because the takeover owns the page; no core button to fight.
03
Hybrid · 03 Backend
the Choice archetype
Cristian's three option cards and reassurance line, unchanged. Skin: flat
hairline cards, selection = indigo tint + inset rail (our quietest state device) instead of
a glow, RECOMMENDED chip in olive-on-mint instead of green-on-green.
This is the one real decision in setup. You can switch later without
rebuilding your site, so start with the simplest option that fits.
Recommended
✓
Local database
Uses your site's own database. Nothing to sign up for, and it works
the moment you finish here.
Works immediately
No external account
Good up to a few thousand records
✓
Algolia
Hosted search with typo tolerance and fast results at scale. Needs an
Algolia account and API keys.
Typo tolerance built in
Scales to large catalogues
Requires an Algolia account
✓
Meilisearch
Open source engine, self-hosted or cloud. The same speed, with more
control over where data lives.
Open source
Self-hosted or cloud
Requires a server or plan
Switching later is genuinely supported. SearchSync keeps its own
index catalogue, so moving from Local to Algolia re-indexes your content without
touching your pages or views.
A Selected card: indigo tint + 3px inset rail + 1.5px border — no glow, no shadow.B Done steps get olive dots; upcoming get squared faint marks — earthy semantics.C Recoleta(-standin) carries the step heading; everything below is the native stack.
04
Hybrid · 09 Done
verified state + contextual notices
The busiest screen: two environment notices, next-step columns, the relocated
email toggle, agency CTA. Skin: notices use the inset-rail device (tobacco for staging,
indigo for the theme offer), the global-search button goes ink-dark, the toggle lands
olive when on.
A Notices carry the inset semantic rail — tobacco warning, indigo info — instead of Gutenberg's yellow/blue fills.B A fully green stepper: eight olive dots, one indigo pill. The flow reads finished at a glance.C The agency CTA sits on brand cream — marketing surface, marketing tint.
05
What the hybrid decides, what stays open
for the go/no-go
✓ Decided by this hybrid
Structure is Cristian's, wholesale. Nine named steps, horizontal stepper, outcome-named primaries, full-screen takeover. Our vertical tile-ladder rail is retired.
Skin is Tangible's, wholesale. Indigo #6359D6 replaces #3858E9 everywhere; the contained indigo grid replaces the flat grey well; flat hairline cards replace shadowed 8px cards.
Type split: Recoleta only at step-heading size, Space Mono only for keys/labels/counts, native stack for all body and UI text. Two webfonts, zero body FOUT.
State language: olive/mint success, tobacco warning, inset 3px rails, squared 2–4px marks. No Gutenberg greens or yellows.
Pill primary returns — legal here because the takeover owns the whole page, so the DNA doc's "core blue wins the button" rule (written for embedded admin screens) does not bind.
△ Still open
Consent placement. The Figma comments are live: Gabriel expects low opt-in on the Welcome card; Cristian asks if telemetry needs its own step; the email ask already migrated to Done as a toggle. The hybrid renders both as drawn but decides nothing.
The 10% discount. Promised on Welcome for telemetry opt-in — no coupon mechanism exists on tangible.one. Needs an offer issued on tangible_sync_consent, or the line comes out.
WP-native vs brand remains the standing decision (teardown gap #8). This page is the concrete "brand" candidate; Cristian's Figma is the "native" one. Someone now has to pick.
Recoleta licensing. Bundling in a distributed plugin ZIP needs licence verification first. If it fails, this page already proves a Fraunces-class substitute reads fine at heading sizes.
Suggestions + Build steps need machinery that doesn't exist yet (offers feed, store hand-off, live reindex progress) regardless of which skin wins.
Sources: .docs/research/2026-08-29-cristian-plugin-wizard-figma-teardown.md ·
.docs/research/2026-08-24-tangible-design-dna-for-wp-admin.md ·
site/onboarder/plugin-onboarding.html.
All wizard copy is Cristian's, verbatim from the Figma frames.