Components in practice.

Small building blocks for real HTML. These examples use the core stylesheet; add behaviour only when it serves the task.

Typography and reading

Notes from the garden

Clear type and a comfortable measure make a longer thought easier to return to. A panel can give that thought a place without competing with it.

A short note can sit alongside the reading.

<article class="l-panel">
  <h3>Notes from the garden</h3>
  <div class="l-reading">...</div>
</article>

Use headings in document order and choose a reading measure that suits the content. Panel depth is a visual choice; reserve focal treatment for one thing that needs emphasis.

Actions and fields

Project nameA read-only example field.

Preferred placeTry the control; this example does not save your choice.

Include resting places

<button class="l-btn" data-kind="primary">Save changes</button>
<label for="name">Project name</label>
<input class="l-input" id="name">

Use native buttons and labelled inputs. Keyboard users reach enabled controls with Tab and activate buttons with Space or Enter. Disabled actions are unavailable, not a substitute for an explanation. The buttons above are disabled because this reference does not save. Use Space to change the checkbox; use the arrow keys to choose a select option. These controls demonstrate their native state without saving it.

State and tables

Ready Review Resting

Example places
Place	State	Tasks done
North bed	Ready	8
East walk	Review	5

<span class="l-chip" data-state="attention">Review</span>
<table class="l-table">
  <caption>Example places</caption>
  <!-- Add column and row headers for the data. -->
</table>

Write the state in the label; colour alone cannot carry it. Use a real table with headings for comparisons. Ledger makes rows and columns easier to scan; see the field report.

Navigation

Ordinary links and native disclosure provide a small, keyboard-friendly way to move around a page.

Browse this reference

<details>
  <summary>Browse this reference</summary>
  <nav aria-label="Component reference sections">...</nav>
</details>

Tab to the summary and use Enter or Space to open it, then Tab to a link and press Enter. Use a descriptive navigation label when a page has more than one navigation region.

Instruments and focus

Use a focal catch for the one subject that deserves emphasis in a view. A static dial can illustrate a finite reading, with its value written in text.

Next visit

Ready

Start at the North bed

Eight of twelve planned tasks are complete. This is an illustrative snapshot.

8 of 12 tasks complete
This dial is a static illustration, not a live control or an exact scale.

<div class="l-focal-catch" data-state="active">
  <span class="l-focal-source" aria-hidden="true"></span>
  <div class="l-focal-subject">...</div>
</div>
<div class="l-dial" role="img" aria-label="Illustrative reading">
  <span class="l-hand"></span><span class="l-hub"></span>
</div>

State and measurements need an accompanying text label. The decorative hand has no built-in scale or behaviour; use a real, labelled control when the person needs to change a value.

Leads, threads and knots

These quiet marks establish hierarchy and continuity. They are decoration around meaningful text, not controls or a substitute for state labels.

A lead for a region

A short rule gives the section a point of entry.

Plan the next visit

Ready to begin

Record what changed

<div class="l-lead-line">...</div>
<div class="l-thread">
  <div class="l-knot" data-kind="lead">Plan the next visit</div>
  <div class="l-knot" data-state="live">Ready to begin</div>
</div>

The lead line is a decorative two-pixel rule at 75% width, coloured by --l-tone (accent by default). A thread has a 9px head and 2px line; knots are 6px. A lead knot uses semibold text without an extra dot. Live is a visual state, so also name the state in text. These marks are still; Ledger removes halos and Folio renders in black. Keep the underlying reading order meaningful.

Chapter openers and navigation

A serif Roman numeral gives each chapter a clear point of entry. The title and numeral share a baseline, with a short argument aligned to the title.

A useful place to begin

Leave one clear step for the next visit.

<header class="l-chapter">
  <span class="l-chapter-number" aria-hidden="true">IV</span>
  <h3 class="l-chapter-title">A useful place to begin</h3>
  <p class="l-chapter-argument">Leave one clear step for the next visit.</p>
</header>

Choose a heading level that fits the document. The numeral is decorative; the heading provides the chapter's name.

Case overview

These pill links offer a direct route into a longer document. Follow one to explore the corresponding chapter.

<ol class="l-case-overview">
  <li><a href="#chapter-purpose">
    <span class="l-case-overview-number" aria-hidden="true">I</span>
    A shared purpose
  </a></li>
</ol>

The full chapter example adds a scroll-tracking rail and demonstrates all three patterns in Night, Day and Folio.

Surfaces and print

Put l-room around a region and choose data-mode="night" or "day", and data-surface="study", "ledger" or "folio". The choices are independent. Folio prepares content for print. Print layouts need current form values as text, hidden controls, and content that fits the page. See the working examples.