NS Design System
v3.0.0 · 257 tokens

107Post header

The top of a post, in five versions. Same parts in the same order every time — category, title, standfirst, meta, cover — so the page does not re-teach itself when the art direction changes. The standfirst is one sentence saying what the piece argues; it is not the first paragraph repeated, which is the most common way this element is wasted.

Use it for

  • The top of every post
  • --minimal for a post with no art, which is most of them
  • --console where there are no assets at all — it needs none

Not for

  • A page hero — that is Hero, in Sections
  • Repeating the standfirst as the opening paragraph

Default

Centred, cover below, capped at --container-narrow. The workhorse.

Apex

Why your trigger fails at 201 records

Governor limits are per transaction, not per record. Once that lands, bulkification stops being a rule you follow and becomes the only design that makes sense.

Swarnil Singhai 6 min read Updated 12 Aug
Illustration · Namaste Salesforce
markup
<header class="ns-posthead ns-posthead--center">
  <div class="ns-posthead__inner">
    <a class="ns-tag ns-posthead__cat" href="#">Apex</a>
    <h1 class="ns-posthead__title">Why your trigger fails at 201 records</h1>
    <p class="ns-posthead__standfirst">Governor limits are per transaction, not per record. Once that lands, bulkification stops being a rule you follow and becomes the only design that makes sense.</p>
    <div class="ns-postmeta">
      <span><img class="ns-postmeta__avatar" src="../assets/logo/favicon.svg" alt=""><a class="ns-postmeta__author" href="#">Swarnil Singhai</a></span>
      <span><time datetime="2026-08-04">4 August 2026</time></span>
      <span>6 min read</span>
      <span>Updated 12 Aug</span>
    </div>
    <span class="ns-posthead__cover ns-ph ns-ph--sm" aria-hidden="true"></span>
    <span class="ns-posthead__credit">Illustration · Namaste Salesforce</span>
  </div>
</header>

Cover

Full-bleed image behind the text, scrimmed bottom-up to the brand navy so the meta line sits on the darkest part.

Architecture

The data model is the product

Every automation problem I have been called in to fix was a schema problem wearing a costume.

Swarnil Singhai 12 min read
markup
<header class="ns-posthead ns-posthead--cover">
  <div class="ns-posthead__bg"><span class="ns-ph" aria-hidden="true"></span></div>
  <div class="ns-posthead__inner">
    <a class="ns-tag ns-posthead__cat" href="#">Architecture</a>
    <h1 class="ns-posthead__title">The data model is the product</h1>
    <p class="ns-posthead__standfirst">Every automation problem I have been called in to fix was a schema problem wearing a costume.</p>
    <div class="ns-postmeta">
      <span><img class="ns-postmeta__avatar" src="../assets/logo/favicon.svg" alt=""><span class="ns-postmeta__author">Swarnil Singhai</span></span>
      <span><time datetime="2026-07-28">28 July 2026</time></span>
      <span>12 min read</span>
    </div>
  </div>
</header>

Wide

Left-aligned at the page container with the cover beside the text — for a post whose image is an argument rather than a decoration.

SOQL

What the query planner actually does

Selectivity, indexes, and why your report times out at 50,000 rows.

Priya Raman 9 min read
markup
<header class="ns-posthead ns-posthead--wide">
  <div class="ns-posthead__inner">
    <div class="ns-posthead__grid">
      <div>
        <a class="ns-tag ns-posthead__cat" href="#">SOQL</a>
        <h1 class="ns-posthead__title">What the query planner actually does</h1>
        <p class="ns-posthead__standfirst">Selectivity, indexes, and why your report times out at 50,000 rows.</p>
        <div class="ns-postmeta">
          <span><img class="ns-postmeta__avatar" src="../assets/logo/favicon.svg" alt=""><span class="ns-postmeta__author">Priya Raman</span></span>
          <span><time datetime="2026-07-14">14 July 2026</time></span>
          <span>9 min read</span>
        </div>
      </div>
      <span class="ns-posthead__cover ns-ph ns-ph--sm" aria-hidden="true"></span>
    </div>
  </div>
</header>

Minimal and console

Type only, hairline under — the version to reach for when someone asks what image should go here and there is no honest answer. --console is the same anatomy on the brand navy with the hairline grid, and needs no assets at all.

Notes

Notes on naming things

Swarnil Singhai 3 min read
Release

What shipped in Winter '27

The four changes that affect code you have already written.

Namaste Salesforce
markup
<div>
  <header class="ns-posthead ns-posthead--minimal">
    <div class="ns-posthead__inner">
      <a class="ns-tag ns-posthead__cat" href="#">Notes</a>
      <h1 class="ns-posthead__title">Notes on naming things</h1>
      <div class="ns-postmeta">
        <span><span class="ns-postmeta__author">Swarnil Singhai</span></span>
        <span><time datetime="2026-06-11">11 June 2026</time></span>
        <span>3 min read</span>
      </div>
    </div>
  </header>
  <header class="ns-posthead ns-posthead--console ns-pattern ns-pattern--blueprint">
    <div class="ns-posthead__inner">
      <a class="ns-tag ns-posthead__cat" href="#">Release</a>
      <h1 class="ns-posthead__title">What shipped in Winter '27</h1>
      <p class="ns-posthead__standfirst">The four changes that affect code you have already written.</p>
      <div class="ns-postmeta">
        <span><span class="ns-postmeta__author">Namaste Salesforce</span></span>
        <span><time datetime="2026-08-12">12 August 2026</time></span>
      </div>
    </div>
  </header>
</div>

Accessibility contract

  • The title is the page's h1; the category above it is a link, not a heading
  • The scrim on --cover is not optional: a title over an arbitrary photograph has no contrast guarantee
  • The date is a real
  • The cover's credit is a caption, not alt text — it describes the source, not the picture