Setup Tasks - Everyday Interface Patterns

A static onboarding task list shows Northstar Studio setup progress as 2 of 4 steps complete, with visible task states and no stored progress.

Program

Setup task lists should make progress and next steps visible without counting live checkboxes or storing completion state.

setup_task_list.html

Visuals: captured from real browser rendering

<section class="setup-tasks" aria-labelledby="tasks-title">
  <h2 id="tasks-title">Set up Northstar Studio</h2>
  <p id="setup-progress">2 of 4 steps complete</p>
  <div class="bar" role="progressbar" aria-labelledby="tasks-title" aria-describedby="setup-progress" aria-valuemin="0" aria-valuemax="4" aria-valuenow="2"></div>
  <ol>
    <li><span class="done">Complete</span> Add workspace name</li>
    <li><span class="done">Complete</span> Pick starter template</li>
    <li><span class="next">Next</span> Invite teammate</li>
    <li><span>Later</span> Review settings</li>
  </ol>
  <p class="note">Static setup list only; no stored progress, telemetry, or account backend runs.</p>
</section>
<style>
  .setup-tasks { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .setup-tasks p, .note { margin: 0; }
  .bar { inline-size: 100%; block-size: 12px; border: 1px solid #64748b; background: linear-gradient(90deg, #22c55e 50%, #e2e8f0 50%); }
  .setup-tasks ol { margin: 0; padding-left: 1.5rem; }
  .setup-tasks li { margin: 6px 0; }
  .done, .next { border-radius: 999px; padding: 2px 8px; background: #dcfce7; }
  .next { background: #fef3c7; }
  .note { color: #475569; }
</style>

Show the setup heading.
The heading names the onboarding task surface.
Show the pinned progress text.
The progress is static visible text, not a live count.
Expose the progress bar.
The bar has progressbar semantics and points to visible text.
Use an ordered list for setup steps.
The list makes setup sequence scannable.
Mark the next task.
The Next badge identifies the user-facing next step.
Check setup list honesty.
Pinned progress, ordered tasks, and no stored state.

pinned progress The progress is fixed at 2 of 4 steps complete.

readback progress The progressbar references visible progress text.

no stored state The lesson should not imply persisted setup state or telemetry.