Ink & Switch — research and dispatch footer
Footer · Research
Landing page · Research
A monochrome research-lab landing opens with interactive wireframe letterforms on black, then shifts to a quiet serif-and-sans editorial page of research themes, essays and projects.
Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.
---
version: alpha
name: Ink & Switch — experimental research-lab landing
colors:
primary: '#000000'
surface: '#FCFCFC'
text: '#000000'
typography:
primaryRole:
fontFamily: Merriweather, serif
fontSize: 32px
fontWeight: 300
lineHeight: 48px
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 monochrome research-lab landing opens with interactive wireframe letterforms on black, then shifts to a quiet serif-and-sans editorial page of research themes, essays and projects.
Captured from https://www.inkandswitch.com/ at 2026-10-16T06:07:26.714805+00:00. This is a full-page capture.
## 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 “An independent research lab exploring the future of tools for tho”: Merriweather, serif, 32px, weight 300, line height 48px.
- h1 “Research Areas”: "Merriweather Sans", sans-serif, 24px, weight 300, line height 36px.
- h2 “Local-first Software”: "Merriweather Sans", sans-serif, 14px, weight 600, line height 24px.
- h2 “Malleable Software”: "Merriweather Sans", sans-serif, 14px, weight 600, line height 24px.
- h2 “Programmable Ink”: "Merriweather Sans", sans-serif, 14px, weight 600, 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
Open with a full-width black anniversary artwork and compact explanatory copy beside the letterforms. Below, use a centered 928px editorial lane with the lab mark and serif mission statement. Arrange research themes as illustrated rows, featured publications as a typographic list, then production software, lab information, appearances and a compact newsletter footer.
Desktop image: 1440 × 4347px at a 1440px viewport. Mobile evidence: 390 × 844px at a 390px viewport. Measured document widths were 1440px desktop and 390px mobile.
At 390px the black artwork stacks above its explanatory copy and fills the opening viewport. The editorial lane narrows to about 365px; the mission heading decreases from 32px to 21px. Research rows retain icons beside wrapped text and the footer stacks. The artwork changes between captures; timings, drag behavior and reduced-motion support were not tested.
## Elevation & Depth
The page is almost entirely flat. Black artwork is separated sharply from the off-white editorial area; line drawing and typography create contrast instead of shadows.
## Shapes
Use wireframe art, hand-drawn-like icons and underlined text links. Avoid adding card borders around every publication; the newsletter field is the main outlined control.
## Components
A monochrome research-lab landing opens with interactive wireframe letterforms on black, then shifts to a quiet serif-and-sans editorial page of research themes, essays and projects. 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.
If copying fails, download the file or select the text above.
Design belongs to its original creator. Use this example for inspiration, not as a licensed template.