Color

The brand palette lives in :root as --ps-* tokens. The site's older alias names (--ink, --gray-*, --paper, --rule) are repointed onto the brand palette, so every existing rule inherits the new colours without being rewritten.

Brand palette — --ps-*

Site aliases — repointed onto the brand palette

/* Brand tokens (Vol. 01) */
--ps-ink: #0E1417;
--ps-stock: #EEF1F0;
--ps-signal: #C8102E;   /* one per view; masthead mark only */
--ps-slate: #3A464D;
--ps-mist: #7E8B92;   /* AA-fail on stock 3.08:1 — large/decorative only */
--ps-rule: #D2D8D7;
--ps-stockdeep: #E4E9E8;
--ps-card: #FFFFFF;

/* Site aliases repointed onto the brand palette */
--ink: var(--ps-ink);
--gray-500: var(--ps-slate);   /* meta/labels — Slate passes 8.54:1 */
--paper: var(--ps-stock);
--rule: var(--ps-rule);
--link-underline: var(--ps-mist);

Typography

Three roles, three families. Voice carries the argument, Interface runs the machinery, and Evidence sets every number a reader is asked to trust.

Type scale — real specimens

<h1 class="report-thematic">The field is louder…</h1>
<h2>Industry Leaderboard</h2>
<h3 class="pattern-title">Design systems are absorbing…</h3>
<h3>Primary signals from industry</h3>
<p>The industry press keeps publishing…</p>
<p class="eyebrow">Jul 14 – Jul 20, 2026</p>
<p class="closer">Confidence is cheap this quarter…</p>

Buttons & Controls

The site has no form buttons — its controls are navigation pills, a disclosure toggle, and archive tabs. Each is shown here in its default and active states.

.cadence-pill — masthead nav (renders on ink)

.is-active inverts to a white fill; the plain pill goes to #1a1a1a on hover. .masthead-archive is a quieter uppercase text link that lives beside the pills. Focus ring flips to white on ink (see States).

<nav class="masthead-nav" aria-label="Primary">
  <a href="/" class="cadence-pill is-active" aria-current="page">Weekly</a>
  <a href="/monthly" class="cadence-pill">Monthly</a>
  <a href="/archive" class="masthead-archive">Archive</a>
</nav>

.scoring-disclosure summary — a pill-shaped <details> toggle

Native <details>, no JS. The marker is hidden and replaced by a rotating ▾ that points down when open. Try opening it — the summary hover/focus fill is the same treatment used everywhere.

<details class="scoring-disclosure">
  <summary>How we ranked these patterns</summary>
  <p class="scoring-rule">Industry patterns are ranked by <strong>distinct publishers</strong>…</p>
  <!-- scoring-table follows -->
</details>

.archive-tab — cadence tabs with count pill

.is-active underlines with an ink border and inverts the count pill to ink-on-white. The count is set in mono (the counting rule).

<nav class="archive-tabs" aria-label="Archive cadence">
  <a href="/archive?cadence=weekly" class="archive-tab is-active" aria-current="page">
    Weekly <span class="archive-tab-count">28</span>
  </a>
  <a href="/archive?cadence=monthly" class="archive-tab">
    Monthly <span class="archive-tab-count">6</span>
  </a>
</nav>

Cards & Tables

The leaderboard is the site's signature surface: a raised white card carrying a funnel, a ranked table, and a collapsible scoring disclosure. Zebra striping and tabular-nums keep the numbers legible; every count is mono.

.leaderboard — funnel + ranked table

The funnel (.lb-flow) wraps to two columns at 640px and one at 360px; arrows hide on wrap. Rows 1–3 anchor-link to their pattern blocks below the table; rows 4+ are plain. Zebra bands use --gray-100; ranks and counts are mono, right-aligned, tabular.

<div class="leaderboard">
  <div class="leaderboard-head">
    <div class="lb-flow" aria-label="Industry editorial funnel">
      <div class="lb-flow-step">
        <div class="lb-flow-num">412</div>
        <div class="lb-flow-label">Posts read</div>
      </div>
      <div class="lb-flow-arrow">→</div>
      <!-- Authors → Patterns ranked -->
    </div>
  </div>
  <table class="leaderboard-table">
    <thead><tr><th class="col-rank">#</th><th>Pattern</th><th class="col-mentions">Signals</th></tr></thead>
    <tbody>
      <tr>
        <td class="col-rank">1</td>
        <td>
          <div class="lb-title"><a href="#ind-1">Agent workflows…</a></div>
          <div class="lb-why">Six publishers framed agents…</div>
        </td>
        <td class="col-mentions">41</td>
      </tr>
    </tbody>
  </table>
</div>

.scoring-table — the audit table inside the disclosure

Same zebra + mono-num treatment, one size down. On mobile the third column (Publishers / Subreddits) hides so the pattern title keeps room.

<table class="scoring-table">
  <thead><tr>
    <th class="num col-rank-s">#</th><th>Pattern</th>
    <th class="num">Publishers</th><th class="num">Pieces</th><th class="num">Mentions</th>
  </tr></thead>
  <tbody><tr>
    <td class="num rank-cell">1</td>
    <td class="pattern-cell">Agent workflows…</td>
    <td class="num">6</td><td class="num">9</td><td class="num">41</td>
  </tr></tbody>
</table>

Content Blocks

The editorial primitives that carry an issue — the hero, the two flavours of blockquote, the signal lists, the take-away footnote, the closer, and the signal-quality footer.

.report-hero + .report-hero-credit

Full-bleed within the reader column, 4px radius. Credit is mono (counting rule — it's a credit line).

<figure class="report-hero" aria-label="Issue cover image">
  <img src="/heroes/{slug}.jpg" alt="{hero_scene}" loading="eager">
  <figcaption class="report-hero-credit">{scene} · Qwen-Image · {month year}</figcaption>
</figure>

.dissent & .visibility — labelled blockquotes

Both share an ink left-bar and a ::before label (DISSENT / VISIBILITY). Same shape, different label — the label is generated in CSS, not typed in the markup.

<p class="visibility">This pattern showed up in six publications…</p>
<p class="dissent">Not everyone agrees…</p>
<!-- The "Dissent" / "Visibility" labels are CSS ::before, not markup -->

.signal-list — primary signals

Disc markers in muted grey; the author is a small slate suffix. Community lists use the "The r/{name} subreddit" phrasing.

<ul class="signal-list">
  <li><a href="…" rel="noopener" target="_blank">Designing for agent hand-off</a><span class="signal-author">— A. Rivera</span></li>
  <li>The <a href="…">r/UXDesign</a> subreddit</li>
</ul>

.closer & .notably-absent — the Take Away close

The closer (Voice serif, heavy) sits above the rule; the "notably absent" footnote sits below it as the quieter meta-observation. Order matters — the ink rule separates the editorial close from the note of absence.

<p class="closer">Confidence is cheap this quarter…</p>
<p class="notably-absent"><span class="notably-absent-label">Notably absent this week:</span> any serious discussion…</p>

.signal-quality — editorial confidence footer

The score is mono (counting rule); the note is italic mist. Renders only when a composite score exists.

<footer class="signal-quality" aria-label="Editorial signal quality">
  <span class="signal-quality-label">Editorial signal</span>
  <span class="signal-quality-score">4.2 / 5</span>
  <span class="signal-quality-note">— per-section composite…</span>
</footer>

Navigation

Two ink chrome bars bracket every page — the masthead (mark + cadence pills) and the footer (copyright + wordmark). The archive adds cadence tabs and pagination.

.masthead — the ink header (the one place Signal red lives)

The reversed horizontal lockup carries the single instance of Signal red in the offset rule of the mark. Inner content maxes at 1080px. Logo drops to 30px under 640px.

<header class="masthead" role="banner">
  <div class="masthead-inner">
    <a class="masthead-logo" href="/" aria-label="Patterns and Signals — home">
      <img src="/images/ps-horizontal-reversed.svg" alt="Patterns and Signals">
    </a>
    <nav class="masthead-nav" aria-label="Primary"> … </nav>
  </div>
</header>

.footer — the ink footer

Centered column: copyright then wordmark, both centered at every width. The wordmark is white on ink.

<footer class="footer" role="contentinfo">
  <div class="footer-inner">
    <p class="footer-copyright">© 2026 Patterns and Signals. All rights reserved.</p>
    <img class="footer-tag" src="/images/ps-wordmark-white.svg" alt="Patterns and Signals">
  </div>
</footer>

.pagination — archive prev/next

Disabled ends render as muted spans (no link); the status is a small mist label. Shown here at the first page (Newer disabled).

<nav class="pagination" aria-label="Archive pagination">
  <span class="pagination-disabled">← Newer</span>
  <span class="pagination-status">Page 1 of 4</span>
  <a href="?page=2" rel="next">Older →</a>
</nav>

Layout

A single reading column, ink chrome full-width above and below. Breakpoints are few and purpose-built.

The 720px reader inside 1080px chrome is the defining layout relationship: text stays tight and readable while the ink bars span the viewport.

States

Interaction feedback is quiet and consistent — a colour shift on hover, an ink (or white) focus ring for keyboard users, muted spans for disabled.

Live: hover the pill, tab into the tabs, open the disclosure

Future Components

Predicted needs on the property's trajectory, spec'd lightly so the visual language is already decided when it's time to build. Each stays inside the monochrome-plus-one-break system and the counting rule.

1 · .bluf-marker — the Bottom-Line-Up-Front break

The brand rulebook names a second legitimate home for Signal red: "on the BLUF marker." A short, single lead sentence per issue could carry a red marker — the one break for that view — replacing the masthead as the red instance on issue pages that lead with a BLUF. Would need the one-signal rule enforced at the template level (red in the mark or the BLUF, never both).

/* one break per view — mutually exclusive with the masthead mark's red */
.bluf { border-left: 4px solid var(--ps-signal); padding-left: 1rem; }
.bluf-marker { font-family: var(--font-mono); color: var(--ps-signal);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; }

<p class="bluf"><span class="bluf-marker">Bottom line</span> The field is louder than it is sure.</p>

2 · .register-split — Industry ⇄ Community side-by-side

The whole editorial premise is the asymmetry between what industry publishes and what the community discusses. On wide viewports the two leaderboards could sit in a two-column split so the asymmetry is visible at a glance rather than by scrolling. Collapses to the current stacked order below 900px.

.register-split { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .register-split { grid-template-columns: 1fr 1fr; } }

<div class="register-split">
  <section class="report-section"> <!-- Industry leaderboard --> </section>
  <section class="report-section"> <!-- Community leaderboard --> </section>
</div>

3 · .trend-sparkline — a pattern's rank across issues

With an archive of weekly + monthly issues, a pattern's movement over time is the natural next signal. A tiny inline sparkline (mono-labelled, ink stroke, no second colour) beside a pattern title would show whether it's climbing or fading — evidence, so any numeric label is mono.

.trend-sparkline { display: inline-flex; align-items: baseline; gap: 0.4rem; }
.trend-sparkline svg { stroke: var(--ink); fill: none; }
.trend-delta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-500); }

<span class="trend-sparkline"><svg width="44" height="14">…</svg><span class="trend-delta">▲2</span></span>

4 · .mitopromo-card — the cross-promo that fills .mitopromo-slot

.mitopromo-slot already exists as an empty hole in issue.html, styled to add a top rule only when filled. The card that lands in it is unbuilt. It should read as a quiet aside, not an ad — Interface type, card surface, no red.

.mitopromo-card { background: var(--ps-card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 1.2rem 1.4rem; }
.mitopromo-kicker { font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); }

<aside class="mitopromo-slot"><div class="mitopromo-card"> … </div></aside>