Kitchen sink

Every common Loam block in one page.

Use this page to check rhythm, density, responsive behavior, and component coverage before creating a new generated document.

Typography

Loam uses Fraunces for expressive headings, Inter for readable body copy, and JetBrains Mono for technical artifacts. The system keeps prose narrow enough for deep reading while allowing wide tables and diagrams when needed.

Use marked text sparingly for terms that need a working-notes feel.

Callouts

Record

Use records for durable planning facts, decision log entries, or owner notes.

Note

Use notes for useful context that should stay close to the surrounding prose.

Info

Use callouts to surface constraints, facts, or exceptions that change how the reader should interpret the plan.

Risk

This release changes public styling hooks, so agents should reference the versioned asset URL.

Decision

Use the Loam bundle as the shared source for generated document styling.

Assumption

Most generated pages are read in a modern browser on a laptop or desktop display.

Question

Use questions for reader-facing choices that need an answer before implementation.

Open question

Use open questions to track unresolved work that should not block the rest of the document.

Record callouts

Planning record

Use source CSS modules and ship a bundled distribution file for static HTML pages.

Decision record

Use callout variants for records that need a semantic decision, risk, assumption, or question state.

Code

component.html 
<div class="loam-callout loam-callout--record">
  <span class="loam-callout__icon" aria-hidden="true">
    <svg class="loam-icon"><use href="/dist/loam-icons.svg#loam-icon-record"></use></svg>
  </span>
  <div>
    <p class="loam-callout__title">Record</p>
    <p>Use Loam classes for shared document styling.</p>
  </div>
</div>
terminal 
$ pnpm build
Built public/dist/loam.css and public/dist/loam.js
Generated static docs
diff 
@@ layout @@
- <div class="custom-card">
+ <article class="loam-card">

Tables and matrices

Component Use when Status
Callout Reader needs a constraint or warning before continuing. Ready
Timeline Work has ordered milestones or incident events. Ready
Theme
Single light Loam theme, tokenized for later variants.
Audience
Engineers and technical stakeholders.
Output
Browser-first static HTML.

Timeline and tasks

Foundation

Scaffold docs, tokens, and distribution files.

Owner: design systems. Output: first working bundle.

Agent examples

Add examples, templates, and agent guidance.

Owner: docs. Output: kitchen sink and starter pages.

Release check

Verify linked and self-contained HTML pages before publishing the tag.

Owner: release. Output: versioned public assets.

  • Use versioned distribution assets.

    DoneRequired for linked pages

  • Preserve Mermaid source beside inline SVG output.

    DoneKeeps diagrams editable

  • Publish the first tagged release.

    PendingNeeds repository remote

Diagram

Agent page generation flow
Agent page generation flow User prompt Loam classes and snippets Static HTML
Mermaid source 
flowchart LR
  Prompt[User prompt] --> Loam[Loam classes and snippets]
  Loam --> HTML[Static HTML]

Tabs and details

Link Loam CSS and JS from a versioned public URL when the viewer has network access.