Research

Sample notes and topic cards. Swap in papers, posts, or project write-ups as needed.

Design systems on static sites

Token-based colors, shared layout shells, and a single JS entrypoint keep multi-page static sites consistent without a heavy framework. Name roles once (paper, ink, signal, alert, confirm), then reuse them as text, background, or border.

Base text utilities and background helpers:

<p class="ink-black">Body copy on paper.</p>
<p class="signal-blue">Primary accent text.</p>
<span class="confirm-green bg paper-white"> Success chip </span>
<span class="alert-red bg paper-white"> Error chip </span>

Theme helpers for color, hover, background, and border:

<a class="theme-signal-blue hover-dark" href="/research.html">Research</a>
<button class="theme-confirm-green bg hover-dark rounded-md px-3 py-2">Save</button>
<div class="theme-neutral-gray border rounded-md p-3">Muted frame</div>

Accessible theming

Light is the default surface. Inverse swaps the same token names so components keep working when html.inverse is applied. Prefer role tokens over hard-coded hex so focus rings, accents, and body text stay readable on both paper and dark surfaces.

Soft hover for nav items, icon buttons, and chips:

<a class="theme-hover-accent rounded px-3 py-2" href="/products.html">Products</a>
<button type="button" class="theme-toggle-btn" aria-label="Toggle inverse theme">
  ◐
</button>

Lighter and stronger companions when you need hierarchy without leaving the palette:

<p class="theme-ink-black lum">Secondary note</p>
<p class="theme-signal-blue">Default link tone</p>
<p class="theme-signal-blue hover-dark">Darker on hover</p>
<p class="ink-black-dark">Strong emphasis</p>

signal confirm alert neutral

Performance defaults

Keep fonts local, ship one stylesheet, and limit client script to theme, width, and nav toggles. Cards and tables should inherit surface tokens so pages stay fast on first load and still flip cleanly between light and inverse.

Panel surface for notes, callouts, and resource blocks:

<article class="theme-card rounded-md p-4">
  Flat panel
</article>

<article class="theme-card border rounded-md p-4">
  Panel with optional border
</article>

Simple status row using the same roles:

<ul class="space-y-1">
  <li class="theme-confirm-green">Build completed</li>
  <li class="theme-signal-blue">Deploy in progress</li>
  <li class="theme-alert-red">Check failed tests</li>
</ul>

Quick theme checklist

1. Put page text on ink and surfaces on paper.

2. Use signal for links and primary actions, confirm for success, and alert for errors.

3. Add .lum, .hover-dark, .bg, or .border only when the control needs it.

4. Prefer theme-card and theme-hover-accent for repeated UI so light and inverse stay aligned.

Use this page for long-form content or link related material from resources.