Ink & Switch — illustrated research-area list

---
version: alpha
name: Ink & Switch — illustrated research-area 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 monochrome research-theme section pairs four custom line-art symbols with uppercase linked labels and compact explanations beneath a quiet editorial introduction.

Captured from https://www.inkandswitch.com/ at 2026-10-16T06:07:23.690473+00:00. This reference isolates `#research-areas`.

## 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 “Research Areas”: "Merriweather Sans", sans-serif, 24px, weight 300, line height 36px.
- p “Our research spans a wide variety of domains from theoretical com”: Merriweather, serif, 16px, weight 400, line height 24px.
- h2 “LOCAL-FIRST SOFTWARE”: "Merriweather Sans", sans-serif, 14px, weight 600, line height 24px.
- a “LOCAL-FIRST SOFTWARE”: "Merriweather Sans", sans-serif, 14px, weight 600, line height 21px.
- p “Exploring software architecture that returns data to users and en”: "Merriweather Sans", 16px, weight 400, 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

Use the Research Areas heading above a serif explanatory paragraph. Each theme is a horizontal row with a generous icon gutter and a narrow text block. Align label and description left, leaving substantial open space to the right of the list on desktop. The four illustrated items are one coherent section, not individual trivial crops.

Desktop image: 928 × 613px at a 1440px viewport. Mobile evidence: 366 × 709px at a 390px viewport. The selected element measured 928.00 × 612.00px desktop and 364.84 × 708.00px 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 section narrows from 928px to about 365px. Icon-and-copy rows stay side by side; descriptions wrap and the section height grows from 612px to 708px. Preserve the icon gutter while allowing text to wrap.

## Elevation & Depth

This section is flat off-white with black text and line art. No card elevation or shadow is present.

## Shapes

Custom icons use black outlines and round nodes. Labels are underlined text links, not buttons or chips.

## Components

A monochrome research-theme section pairs four custom line-art symbols with uppercase linked labels and compact explanations beneath a quiet editorial introduction. 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.