---
version: alpha
name: Ink & Switch — research and dispatch footer
colors:
  primary: '#000000'
  surface: '#FCFCFC'
  text: '#000000'
typography:
  primaryRole:
    fontFamily: Merriweather Sans, sans-serif
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
  supporting:
    fontFamily: Merriweather Sans, sans-serif
    fontSize: 13px
    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 compact three-column editorial footer combines illustrated research links, contact channels and a newsletter field with an understated hand-drawn accent.

Captured from https://www.inkandswitch.com/ at 2026-10-16T06:08:16.592561+00:00. This reference isolates `footer`.

## 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

- a “Local-first Software”: "Merriweather Sans", sans-serif, 13px, weight 400, line height 19.5px.
- a “Malleable Software”: "Merriweather Sans", sans-serif, 13px, weight 400, line height 19.5px.
- a “Programmable Ink”: "Merriweather Sans", sans-serif, 13px, weight 400, line height 19.5px.
- a “Universal Version Control”: "Merriweather Sans", sans-serif, 13px, weight 400, line height 19.5px.
- a “hello@inkandswitch.com”: "Merriweather Sans", sans-serif, 13px, weight 400, line height 19.5px.

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 two narrow navigation columns followed by a wider newsletter column. Label the columns with tiny muted uppercase headings. Research links repeat small topic symbols; contact links are plain underlined text. Put the dispatch description above a single outlined email field with an attached Sign Up action.

Desktop image: 928 × 169px at a 1440px viewport. Mobile evidence: 366 × 534px at a 390px viewport. The selected element measured 928.00 × 167.17px desktop and 364.84 × 533.17px 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 all three columns stack in reading order. The section grows from about 167px to 533px high. The newsletter field fits the narrow column and keeps its attached action. This is newsletter subscription, not account registration; no submission was made.

## Elevation & Depth

Keep the entire footer flat with no panel background changes or shadows. The email outline is sufficient to signal interaction.

## Shapes

Fine underlines, monochrome outline icons and a slightly rounded input group maintain the editorial style. A drawn crossing mark sits beside the email field.

## Components

A compact three-column editorial footer combines illustrated research links, contact channels and a newsletter field with an understated hand-drawn accent. 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.