Ink & Switch — editorial featured-work list

---
version: alpha
name: Ink & Switch — editorial featured-work list
colors:
  primary: '#000000'
  surface: '#FCFCFC'
  text: '#000000'
typography:
  primaryRole:
    fontFamily: Merriweather Sans, sans-serif
    fontSize: 24px
    fontWeight: 300
    lineHeight: 36px
  supporting:
    fontFamily: Merriweather, serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
omitted:
- section: spacing
  reason: Per-reference dimensions and observed composition are given in Layout; no
    global scale is inferred.
- section: rounded
  reason: Observed shape roles are described in Shapes without inventing a global
    radius scale.
- section: components
  reason: Reference-specific components are described in prose rather than an inferred
    implementation API.
---

## Overview

A publication-list section uses linked essay titles, short summaries and small icon-and-year metadata to organize research without image-heavy cards.

Captured from https://www.inkandswitch.com/ at 2026-10-16T06:10:07.619459+00:00. This reference isolates `#writing`.

## Colors

primary: `#000000`; surface: `#FCFCFC`; text: `#000000`. These values describe observed interface roles, not a complete brand palette. Keep text and surfaces distinct; do not spread the primary accent across every element.

## Typography

- h1 “Featured Work”: "Merriweather Sans", sans-serif, 24px, weight 300, line height 36px.
- p “We publish the results of our research here on our website and in”: Merriweather, serif, 16px, weight 400, line height 24px.
- a “our writing”: Merriweather, serif, 16px, weight 400, line height 24px.
- a “newsletter”: Merriweather, serif, 16px, weight 400, line height 24px.
- h3 “Malleable Software”: "Merriweather Sans", sans-serif, 16px, weight 350, line height 24px.

The primary token describes a sampled heading or link, not an inferred global type scale. Use the accompanying composition to establish hierarchy rather than applying one size everywhere.

## Layout

Place a light sans-serif heading and serif introductory paragraph above a vertical sequence of publications. Each item has an underlined title, a short descriptive summary and a muted metadata line with research-area icons and essay or notebook type. Keep the list narrow inside the wider section and separate items with whitespace rather than rules.

Desktop image: 928 × 1076px at a 1440px viewport. Mobile evidence: 366 × 1264px at a 390px viewport. The selected element measured 928.00 × 1075.12px desktop and 364.84 × 1263.12px mobile. Crops use current document coordinates after a warm-up full-page screenshot; integer rounding may add at most one pixel per edge.

At 390px the list remains one column. Titles and summaries wrap while the small metadata rows stay beneath them. The selected section becomes taller; unrelated sticky anniversary navigation is excluded by resetting the document scroll before the crop.

## Elevation & Depth

Use a flat off-white surface, black type and muted gray metadata. There are no elevated cards in the selected section.

## Shapes

Underlines and small outline symbols provide visual anchors. Do not put every publication inside a rounded container.

## Components

A publication-list section uses linked essay titles, short summaries and small icon-and-year metadata to organize research without image-heavy cards. Preserve the selected reference's hierarchy and reading order. This is one visible state: hover, focus, validation, menus, downloads and successful transactions are untested unless explicitly described. No credentials were entered, forms submitted, accounts created or purchases made. Any customer statements, pricing or performance claims visible in the source are source-owned copy, not independently verified facts.

## Do's and Don'ts

- Do preserve the specific spacing relationships, content grouping and type hierarchy described above.
- Do provide accessible focus indicators and responsive controls in a new implementation; this is a recommendation, not a claim that every source state passed testing.
- Do use original content and substantiated claims when adapting the pattern.
- Don't reproduce observed source overflow, clipping or ticker-spacing defects.
- Don't infer animation timing, validation behavior or completed transactions from a static frame.