Atlas Studio — Charting Your Account, Step One of Three
Premium dark-navy multi-step signup / onboarding screen (step 1 of 3) for an AI design tool: a 3-step progress tracker, glassy translucent cards on a midnight-navy ground with soft amber glows, a single warm amber accent, focus-reactive fields, a password strength meter, a role selector, and a 'what you unlock' value panel with a testimonial.
Summary
A premium dark-navy multi-step onboarding / signup screen for an AI product design tool ('Atlas Studio'). It is framed as step 1 of 3 with a progress tracker, and pairs the account-creation form on the left with a 'what you unlock' value panel and a testimonial on the right. The mood is calm, trustworthy and high-end: a deep midnight-navy ground washed with soft amber glows and a faint dot grid, cream text, a single warm amber accent, and large rounded glassy cards.
Style
Dark, premium SaaS aesthetic. A near-black midnight-navy canvas (#07162b) layered with soft radial amber + steel-blue glows (the .grain wash) and a masked dot grid (#aebfd8 at 10% opacity, 26px). Surfaces are translucent navy cards (navy-800 at ~55% over the glow) with thin 1px navy-600 hairline borders, generous 24px rounded corners and a soft elevated shadow plus subtle backdrop blur. Type is Inter (400-900). The single accent is warm amber (#f0b429): used for the logo tile, the active progress node, the primary CTA, focus rings, icons and 5-star ratings. Text is cream (#f6f1e7) at varied opacities (full for headings, ~65-80% for body, ~35-45% for hints). No second accent color, no hard borders, no heavy gradients on text. Everything reads soft, glassy and deliberate.
Layout & Structure
A full-height screen: a slim sticky glass top nav, a full-bleed centered onboarding section, and a footer. The section is centered in a max-w-7xl container with ~20-32px side padding: a centered eyebrow pill, a centered headline + subhead, then a two-column body (lg:grid-cols-[1.55fr_1fr]) with the form card on the left (wider) and a stacked context column on the right (value panel + testimonial + 'log in' line). Below the two columns sits a centered trust strip. Below the lg breakpoint the two columns stack to a single column (form first, then context). The defining structural element is the 3-step progress tracker at the top of the form card.
Sticky glass nav
Eyebrow + heading
Progress tracker (the signature element)
Form card - fields
Form card - role select + CTA row
Form card - SSO
Right context column
Trust strip + footer
Special Notes
Keep it to ONE accent (warm amber #f0b429) on the deep-navy ground; do not introduce a second hue. The depth model is soft glass, not hard edges: thin 1px hairline borders, 24px rounded-3xl corners, soft layered shadows and backdrop blur (no thick borders, no hard offset shadows). The mandatory hero element is the 3-step progress tracker (Step 1 of 3, 33% bar, active amber node 1 + outlined nodes 2/3) at the top of the form card, since this is a multi-step onboarding rather than a single signup. Use Inter throughout (extrabold 800/900 for headings, 400-600 for body). Text is cream #f6f1e7 at graduated opacities (full headings, 55-80% body, 35-45% hints) - never pure white. Layout is a wider form (1.55fr) beside a narrower context column (1fr) on desktop, stacking to one column below lg; everything stays centered in a max-w-7xl container with no horizontal overflow at 390px.