UI Onboarding Catalog

Fifteen named onboarding flows — welcome, wizards, account/profile setup, goals, permissions, product tour, empty state, checklist, success, invites, plans, integrations, preferences, and soft paywall. See CATALOG.md for recipes.

.onboard-welcome

Welcome Splash

Brand mark, value line, Get started + Sign in.

Northstar

Ship calmer field pages

Named layouts for heroes, sections, and the first week of setup.

.onboard-wizard

Multi-Step Progress Wizard

Step indicator, panel content, Back / Continue.

Step 1 of 3

Workspace name

What should we call this team space?

.onboard-account

Account Basics Form

Name, email, password with helper hints and Continue.

.onboard-profile

Profile / Avatar Setup

Pick an avatar, display name, bio — Skip or Save.

Profile

How you show up

Selected avatar
.onboard-goals

Interest / Goal Picker

Multi-select goal cards; Continue enables after one choice.

Goals

What brings you here?

Pick one or more — we’ll tune the first checklist.

.onboard-permissions

Permissions Explain

Why we need access, then Allow / Not now.

Permissions

A few extras, explained

  • Camera

    Scan packing lists and hut QR codes on trail.

  • Notifications

    Weather holds and booking reminders only.

  • Location

    Suggest nearby trailheads — never shared publicly.

.onboard-tour

Product Tour Hotspots

Dimmed UI with spotlight callouts and Next / Done.

Northstar Projects Team
Your first project card lands here.
Projects hub

Jump between landings and trip boards from this rail.

.onboard-empty

Empty-State First Action

Friendly empty canvas with one clear first-task CTA.

No projects yet

Create your first project to drop in a hero and mid sections.

.onboard-checklist

Checklist Onboarding

Setup tasks with progress bar and mark-done controls.

Getting started

Finish your setup

0 of 4 complete

  • Create a workspace

    To do

  • Invite a teammate

    To do

  • Connect a calendar

    To do

  • Publish a page

    To do
.onboard-success

Success / You’re Ready

Confirmation, summary of choices, Go to dashboard.

You’re ready

Harbor Studio is set. Here’s what we saved.

Summary
  • Goals: Ship a landing, Sell gear
  • Plan: Growth trial
  • Invites: 2 pending
.onboard-invite

Invite Teammates

Email chips, role select, Send invites + Skip.

Team

Invite teammates

Add emails — they’ll get a link to join Harbor Studio.

jordan@harbor.co · Editor
.onboard-plans

Plan / Trial Picker

Free vs Pro cards; single-select then continue.

Plan

Choose how you start

.onboard-integrations

Connect Integrations

Service tiles with Connect / Later (Connected toggles in place).

Integrations

Connect your tools

Optional — you can finish this from Settings later.

Slack

Booking alerts to a channel

Google Drive

Sync trail PDFs

Calendar

Hut windows on your schedule

Stripe

Collect gear payments

.onboard-prefs

Preference Defaults

Theme, density, and notification toggles.

Preferences

Set your defaults

Theme

Density

Notifications

Product tips

Occasional setup nudges

Marketing

Launches and seasonal offers
.onboard-paywall

Soft Gate / Paywall Preview

Blurred feature teaser with Upgrade + Continue free.

Growth

Unlock analytics

Upgrade to see funnels, or keep exploring on Free.