Sheet 02.13 / Components · Content

ArticleHeader

Breadcrumbs, the serif title, the description and a byline with date and reading time. The title is Hedvig Letters Serif with a 0.8px stroke.

CLASSb-crumbsDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — articleheaderlive, on a 768 rail

article / head

Hairlines Instead of Shadows

Why every edge on the sheet is a 1px line, and what a shadow would have to earn to come back.

AuthorOct 17, 2026 · 6 min read

Anatomy

Parts

Part	Class	Notes
Crumbs	`.b-crumbs`	Mono, muted, slash-separated.
Title	`.b-article-title`	Serif with a thin stroke, balanced wrap.
Byline	`.b-byline`	A 28px portrait in a hairline circle, the name, then date and time.
Contents	`.b-toc`	Optional list of H2s for long articles.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-pad" style="padding-top:48px;padding-bottom:32px;display:flex;flex-direction:column;gap:16px">
      <nav class="b-crumbs" aria-label="Breadcrumb"><a href="#n">Notes</a><span>/</span><span>Lines</span></nav>
      <h1 class="b-article-title">Hairlines Instead of Shadows</h1>
      <p style="margin:0;font-size:17px">Why every edge on the sheet is a 1px line, and what a shadow would have to earn to come back.</p>
      <div class="b-byline"><svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="currentColor" aria-hidden="true" style="color:var(--line-strong)"><circle cx="14" cy="14" r="13.5"/><path d="M4.5 4.5L23.5 23.5M23.5 4.5L4.5 23.5"/></svg><span style="color:var(--ink);font-weight:500">Author</span><span class="b-meta">Oct 17, 2026 · 6 min read</span></div>
    </div>
  </div>
</div>

Use the serif only for titles and prose H2s.
Give the real reading time.

Don't

Put a hero image above the title.
Use the serif in UI.