Stepwise — Multi-step Wizard (Navy/Amber)
Dark navy multi-step form wizard landing page with one warm amber accent: hero register card with a gradient progress bar, step ticks, active focus field, Back/Continue nav and step dots, plus patterns, library and pricing.
Summary
A dark, premium 'Stepwise' form-SaaS landing page built around a hero multi-step wizard card. A sticky translucent navy nav sits above a two-column hero: left is the headline + value copy + CTAs, right is a glowing register wizard card (Step 1 of 4) with a gradient progress bar, labeled step ticks, a grouped name field-pair with an active focus state, an @-prefixed display-name input, Back/Continue step nav, and a footer of progress dots + autosave reassurance. Below: a trusted-by strip, a 6-card 'anatomy' patterns grid, a 3-step prompt-to-flow timeline, a 3-up pattern library, a 3-tier pricing block with a featured middle plan, a glowing CTA panel and a 4-column footer. Single warm amber accent on a deep navy field with a cream ink scale; Inter throughout; rounded-xl/2xl cards, soft inset hairlines, ambient blurred glows, and a faint dotted grain texture.
Style
Dark, confident, product-grade landing aesthetic: a deep navy canvas with a single warm amber accent and a cream ink scale. Everything reads on three navy tones plus glows: amber is reserved for the brand mark, the active step, focus rings, primary buttons (a top-lit amber gradient), progress fills and key icons. Cream text at three opacities (bright cream for headings, soft cream for body, muted cream for captions). Soft 1px inset hairlines (cream at ~10-14% opacity) define cards instead of hard borders; cards carry deep low shadows; ambient amber/navy blurred radial glows and a faint dotted-grain background add depth. Inter, very bold/black headings with tight tracking. Rounded corners: lg/xl on controls, 2xl/22px on cards, full on pills/dots. Phosphor (ph:) bold line+fill icons.
Layout & Structure
Top-to-bottom on a max-w-[1180px] container: (1) sticky translucent nav; (2) hero section with a two-column grid — left value copy + CTAs + check-row, right the multi-step wizard card — over ambient glows + grain, with a trusted-by strip pinned to the section's bottom; (3) a 6-card 'anatomy' patterns grid; (4) a 'prompt to flow' two-column block with a 3-step numbered timeline; (5) a 3-up pattern library grid; (6) a centered 3-tier pricing block with a raised featured middle plan; (7) a glowing CTA panel; (8) a 4-column footer. The hero is lg:grid-cols-[1.02fr_1fr]; all grids collapse to one column on mobile and the wizard's step ticks/fields reflow at the 390px (xs) breakpoint.
Sticky nav
Hero (left copy column)
Hero (multi-step wizard card)
Trusted-by strip
Patterns (anatomy) grid
Prompt-to-flow timeline
Pattern library grid
Pricing block
CTA panel
Footer
Special Notes
Color discipline is the heart of the design: three navy tones (#0b1f3a / #102a4d / #163661, plus #081729 for the darkest sections and nav blur) carry the entire surface, a cream ink scale (#f4efe3 / #cdd6e3 / #9fb0c8) carries all text at three opacities, and amber (#f0b429 with #f7d479/#d99a16 variants) is the ONLY accent — reserved for the brand mark, the active step + ticks, focus rings, primary buttons, progress fills, the active step dot and key icons, so attention always lands on the path forward. Depth comes from soft inset cream hairlines (not hard borders), deep low card shadows, ambient blurred amber/navy glows and a faint dotted grain rather than heavy elevation. The hero wizard is the reusable centerpiece: it teaches the full multi-step anatomy (header + step chip, labeled progress, grouped fields with an active focus state, Back/Continue gating, step dots, autosave note) and the first field ships pre-activated so the amber focus treatment is visible in a static frame. Layout is fully responsive on a max-w-[1180px] container: the hero two-column collapses to one, the wizard step ticks collapse to a single 'Name · Step 1/4' label at the 390px xs breakpoint, and every grid (patterns, library, pricing) drops to one column on mobile. Icons are Phosphor (ph:) bold; type is Inter throughout. Note this is a static design frame: focus rings, hover lifts, backdrop-blur and progress only animate live, and the 'Stepwise' brand + field copy are illustrative placeholders to swap.