Project Name Review - Everyday Interface Patterns

A static project-name review card shows Northstar Launch for Northstar Studio before create, with no project creation API or real save.

Program

Project creation review screens should show the exact name and workspace before the action without pretending to save a project.

project_name_review.html

Visuals: captured from real browser rendering

<section class="project-review" aria-labelledby="project-review-title">
  <h2 id="project-review-title">Review project name</h2>
  <dl>
    <div><dt>Project name</dt><dd>Northstar Launch</dd></div>
    <div><dt>Workspace</dt><dd>Northstar Studio</dd></div>
  </dl>
  <button type="button">Create project</button>
  <p class="note">Static project-name review only; no project creation API, real save, generated ID, or backend service runs.</p>
</section>
<style>
  .project-review { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .project-review dl { display: grid; gap: 8px; margin: 0; }
  .project-review dl div { display: grid; grid-template-columns: 9rem 1fr; gap: 8px; }
  .project-review dt { color: #475569; }
  .project-review dd, .note { margin: 0; }
  .project-review button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the project review card.
The section is labelled by its visible heading.
Use a description list for review fields.
The description list pairs labels with values.
Show the pinned project name.
The project name is fixed display data.
Show the pinned workspace.
The workspace is fixed display data.
Show the create affordance.
The button is type button and does not submit anything.
Check project-name honesty.
Project name, workspace, button, and no create service.

review heading The heading names the project-name review state.

pinned project data Northstar Launch and Northstar Studio are exact display data.

no create API The lesson should not imply a project creation API, real save, generated ID, or backend service.