index.mdx

title	Project clarity for every team
description	A focused example of a product landing page built with PureStack.
template	doc
layout	fullWidth showNav showToc
nav	title order icon Home 1 lucide:compass

<Flex container="nav" align="center" justify="between" wrap="true" class="gap-6 py-4 bb-1 b-subtle" aria-label="Explore Waypoint"

Explore Waypoint Platform Workspace Plans Starter guide

<Grid container="section" columns="1" columnsLg="minmax(0, 0.85fr) minmax(0, 1.15fr)" alignItems="center" class="gap-6 py-6 mb-6" aria-labelledby="wp-hero-title"

The Waypoint starter

Make every next step clear.

A shared home for plans, progress, and decisions. Give your team the context to move forward together.

Explore the workspace Adapt this starter

An illustrative product and workspace, built with PureStack.

●●● Waypoint / Project view Example Active initiativeQ4 / 2026

Autumn launch

On track

One clear view of launch readiness.

Milestone progress4 of 5

Design handoffComplete Help center draftComplete Accessibility reviewNext up

Next review Friday 10:00 · Project check-in Open decision Release date Owner assigned 02 ● Sample workspace View the full preview

<Grid container="section" columns="1" columnsMd="3" class="gap-5" aria-label="The Waypoint approach"

<Flex direction="column" class="gap-1 py-2 pl-4 bl-2 tone--accent tone-border"

<span class="text-eyebrow tone-text fs-xxxs fw-800 mb-0">01 / Plan</span>
<strong>Give the work direction.</strong>

02 / Align Keep everyone in the loop. 03 / Deliver Make progress visible.

<Grid container="section" columns="1" columnsMd="minmax(0, 0.9fr) minmax(0, 1.1fr)" class="gap-6 my-6 py-6" aria-labelledby="wp-process-title"

01 Set the directionGive every initiative a purpose, owner, and meaningful milestones. 02 See the progressBring updates, status, and the next review into one shared view. 03 Share the learningTurn the week's work into a short, useful story for everyone.

<Panel tone="accent" variant="spotlight" class="theme--dark rounded-lg p-6" aria-labelledby="wp-brief-title"

<Grid columns="1" columnsMd="minmax(0, 0.8fr) minmax(0, 1.2fr)" alignItems="center" class="gap-6 py-6"

<div>
  <span class="text-eyebrow tone-text fs-xxxs fw-800"
    >The Friday brief</span>
  <div class="large-fs mt-3 mb-5">
    <h2 id="wp-brief-title" class="fs-h2 fw-700 m-0">
      An update people will actually read.
    </h2>
  </div>
  <p class="tone-text-surface-alt opacity-75 lh-7 mb-0">
    Share what moved, what needs a decision, and where the team goes next.
    The example workspace keeps the details close when someone wants to go
    deeper.
  </p>
  <BtnLink
    href="/workspace/"
    variant="link"
    icon="lucide:arrow-up-right"
    iconPosition="end"
    class="p-0 mt-6 fw-700"
    >Explore the example workspace</BtnLink>
</div>
<Panel
  tone="neutral"
  variant="flat"
  class="theme--light rounded-lg p-6 rotate-1"
>
  <Flex
    direction="column"
    directionSm="row"
    justify="between"
    class="gap-1 pb-4 bb-1 b-default text-eyebrow fs-xxxs fw-800 mb-0"
    ><span>Week 06 / Autumn launch</span><span>Friday brief</span></Flex>
  <h3 class="mt-5 mb-1">A good week of progress.</h3>
  <p class="text-subtle fs-xxs mb-4">
    The design handoff is complete. The help center draft is ready for final
    review.
  </p>
  <Flex align="start" class="gap-3 py-3 bt-1 b-subtle"
    ><span
      class="tone--success tone-text-bg-button fs-xxxs"
      aria-hidden="true"
      >●</span><Flex direction="column" class="gap-1"
      ><strong class="fs-xxs">Moved forward</strong><span class="text-subtle fs-xxxs mb-0"
        >Release checklist prepared for review</span></Flex></Flex>
  <Flex align="start" class="gap-3 py-3 bt-1 b-subtle"
    ><span
      class="tone--warning tone-text-bg-button fs-xxxs"
      aria-hidden="true"
      >●</span><Flex direction="column" class="gap-1"
      ><strong class="fs-xxs">Needs a decision</strong><span class="text-subtle fs-xxxs mb-0"
        >Confirm the release date after accessibility sign-off</span></Flex></Flex>
  <Flex
    justify="between"
    class="pt-4 bt-1 b-default text-eyebrow fs-xxxs fw-800 mb-0"
    >Next review
    <strong class="tone--accent tone-text">Friday, 10:00</strong></Flex>
</Panel>

One visual language can carry a product story, a working preview, and the guide behind it.

01 / The story Platform Discover the workflow and how it supports a team. 02 / The product Workspace Explore project status, charts, and decisions in context. 03 / The foundation Starter guide Find the files, components, and settings to make it yours.

Looking for the plan layout? Explore example plans

<Flex container="section" direction="column" directionMd="row" align="start" alignMd="center" justify="between" class="gap-6 pt-6 mb-6 bt-1 b-subtle" aria-labelledby="wp-final-title"

Read the getting started guide