1
2
3
4
5<div class="d-grid gap-3">
  <h1 class="fw-semibold">Product Console</h1>
  <h2 class="h3">Operations playbook</h2>
  <h2 class="h4">Incident summary</h2>
</div>

1
2
3
4
5
6
7
8<div class="d-grid gap-2">
  <h1 class="mb-0">h1. Team roadmap</h1>
  <h2 class="mb-0">h2. Sprint planning</h2>
  <h3 class="mb-0">h3. Release checklist</h3>
  <h4 class="mb-0">h4. Ticket priorities</h4>
  <h5 class="mb-0">h5. Deployment notes</h5>
  <h6 class="mb-0">h6. Open action items</h6>
</div>

1
2
3
4
5
6
7
8<div class="d-grid gap-2">
  <p class="h1 mb-0">h1. Dashboard view</p>
  <p class="h2 mb-0">h2. Usage analytics</p>
  <p class="h3 mb-0">h3. Team activity</p>
  <p class="h4 mb-0">h4. API usage</p>
  <p class="h5 mb-0">h5. Integration status</p>
  <p class="h6 mb-0">h6. Audit log</p>
</div>

1
2
3<h3 class="mb-0">
  Maintenance window <small class="text-body-secondary">Planned 02:00–03:00 UTC</small>
</h3>

1
2
3
4
5
6
7
8<div class="d-grid gap-2">
  <h1 class="display-1 mb-0">Display 1 · Uptime</h1>
  <h1 class="display-2 mb-0">Display 2 · Capacity</h1>
  <h1 class="display-3 mb-0">Display 3 · Releases</h1>
  <h1 class="display-4 mb-0">Display 4 · Delivery</h1>
  <h1 class="display-5 mb-0">Display 5 · Quality</h1>
  <h1 class="display-6 mb-0">Display 6 · Legible</h1>
</div>

1
2
3
4
5<div class="d-grid gap-3">
  <p class="moo-page-description text-body-secondary mb-0">Track status, ownership, and escalation points from one shared index.</p>
  <span class="text-body-secondary">Muted text fits status chips and non-blocking helper notes.</span>
  <span class="small fw-semibold">Section label</span>
</div>

1<p class="lead mb-0">Lead copy is useful for a short onboarding message or migration note.</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26<div class="d-grid gap-2">
  <p class="mb-0">
    Use <mark>mark</mark> to highlight text for reference.
  </p>
  <p class="mb-0">
    <del>This line is no longer accurate.</del>
  </p>
  <p class="mb-0">
    <s>This line is no longer relevant.</s>
  </p>
  <p class="mb-0">
    <ins>This line was added to the document.</ins>
  </p>
  <p class="mb-0">
    <u>This line carries a non-textual annotation.</u>
  </p>
  <p class="mb-0">
    <small>This is fine print and supporting detail.</small>
  </p>
  <p class="mb-0">
    <strong>This line carries strong importance.</strong>
  </p>
  <p class="mb-0">
    <em>This line carries emphasis.</em>
  </p>
</div>

1
2
3<p class="mb-0">
  <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> keeps its expanded meaning available on hover.
</p>

1
2
3
4
5
6
7
8
9<figure class="mb-0">
  <blockquote class="blockquote mb-2">
    <p class="mb-0">A calm interface makes the next action easier to find.</p>
  </blockquote>
  <figcaption class="blockquote-footer mt-2 mb-0">
    A design principle in
    <cite title="Moo UI handbook">Moo UI handbook</cite>
  </figcaption>
</figure>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<div class="d-grid gap-3 w-100">
  <figure class="text-center mb-0">
    <blockquote class="blockquote mb-2">
      <p class="mb-0">A calm interface makes the next action easier to find.</p>
    </blockquote>
    <figcaption class="blockquote-footer mt-2 mb-0">
      A design principle in
      <cite title="Moo UI handbook">Moo UI handbook</cite>
    </figcaption>
  </figure>
  <figure class="text-end mb-0">
    <blockquote class="blockquote mb-2">
      <p class="mb-0">A calm interface makes the next action easier to find.</p>
    </blockquote>
    <figcaption class="blockquote-footer mt-2 mb-0">
      A design principle in
      <cite title="Moo UI handbook">Moo UI handbook</cite>
    </figcaption>
  </figure>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div class="d-grid gap-3 w-100">
  <ul class="list-unstyled mb-0">
    <li>Unstyled lists keep their structure without bullets.</li>
    <li>The content remains a real list for assistive technology.</li>
  </ul>
  <ul class="list-inline mb-0">
    <li class="list-inline-item">Inline item one</li>
    <li class="list-inline-item">Inline item two</li>
    <li class="list-inline-item">Inline item three</li>
  </ul>
  <dl class="row mb-0">
    <dt class="col-sm-3">Term</dt>
    <dd class="col-sm-9">A short definition aligned with the grid.</dd>
    <dt class="col-sm-3">Another term</dt>
    <dd class="col-sm-9 mb-0">Another definition in the same rhythm.</dd>
  </dl>
</div>

1
2
3
4
5<div class="d-grid gap-2 w-100">
  <p class="text-start mb-0">Start-aligned text follows the reading direction.</p>
  <p class="text-center mb-0">Center-aligned text suits short, focused labels.</p>
  <p class="text-end mb-0">End-aligned text closes the row cleanly.</p>
</div>

1
2
3
4
5<div class="d-grid gap-2">
  <p class="text-lowercase mb-0">QUIET SYSTEM STATUS</p>
  <p class="text-uppercase mb-0">quiet system status</p>
  <p class="text-capitalize mb-0">quiet system status</p>
</div>

1
2
3
4
5<div class="d-grid gap-2">
  <p class="fs-5 mb-0">A slightly larger supporting line.</p>
  <p class="fw-semibold mb-0">A stronger label for an important state.</p>
  <p class="fst-italic mb-0">A quiet note that stays in the same hierarchy.</p>
</div>

1
2
3
4
5<div class="d-grid gap-2">
  <p class="lh-1 mb-0">Tight line-height keeps a compact label close together.</p>
  <p class="lh-base mb-0">Base line-height keeps ordinary reading comfortable.</p>
  <p class="lh-lg mb-0">Large line-height gives a longer sentence more air.</p>
</div>

1
2
3
4<div class="d-grid gap-2">
  <p class="text-decoration-underline mb-0">Underline a policy reference before users confirm action.</p>
  <p class="text-decoration-line-through mb-0">Strike through an obsolete process step that was revised.</p>
</div>

1<p class="font-monospace mb-0">npm run lint --workspace=ui</p>

1
2
3<p class="mb-0">
  Use <code>npm run format</code> for local CI-aligned formatting.
</p>