A neutral field lets the content breathe. Cobalt marks actions and focal points. Deep green gives reflective passages a different pace.
01
Direct attention.
Use one dominant signal at a time. Let contrast establish hierarchy.
02
Leave room.
Space is an active part of the composition. Give ideas a place to settle.
03
Make it legible.
Every action should reveal what it does and acknowledge what happened.
Light palette Click a swatch to copy its value.
The theme automatically follows your system preference and falls back to light when none is available. These reference swatches retain their original values in both themes.
Use Ink or Cobalt on Paper, and light text on Forest. Structural dividers can be subtle; interactive input borders need a stronger edge.
02 / Typography
Three voices. One conversation.
A precise sans serif for clarity. An expressive serif for a shift in perspective. Monospace for the quiet annotations.
DM SansHeadlines / body / interface
Attention is an environment.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Instrument SerifEditorial emphasis
A different way of seeing.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
DM MonoLabels / metadata / reference
FIELD NOTES / OBSERVATION 001
0123456789 — attention / affect / intent
Typography scale
Role
Desktop
Small screens
Line height
Hero display
56–98 px
54–80 px, fluid
1.025–1.04
Section heading
43–64 px
44 px
1.08
Card title
24–32 px
26–31 px
1.15
Body
16–18 px
16 px
1.6–1.85
Control label
14 px minimum
14 px minimum
1.5
Metadata
12–13 px
12–13 px
1.5
Sizes are expressed in rem in the implementation. Browser font preferences remain in control. Fonts fall back to Arial, Georgia, and monospace.
03 / Layout & spacing
Room to think.
An 8 px base rhythm, restrained corners, and a generous reading measure. The editorial grid becomes a single column on small screens.
4Fine adjustment
8Base unit
16Related elements
24Component padding
32Group spacing
48Section detail
64Desktop gutter
96Section rhythm
Adaptive, by composition.
Maximum width: 1440 px. Gutters: 64 → 40 → 28 → 24 px. Main editorial grids stack at 600 px. The framework index becomes a horizontal strip at 900 px.
Notice the arrangement before explaining it. What comes forward? What stays in the background?
Change the question.
Whose purpose does the experience serve? What would become clearer if one element were removed?
Look again, with context.
Compare your first impression with what you now understand. Keep the uncertainty visible.
One active tab / one visible panelArrow keys · Home · End
Input & feedback
Disclosure
When should a panel become a separate page?
Use a dialog for a focused, reversible reading task. Give content its own page when it requires a long workflow, its own navigation, or independent indexing. Field-note dialogs in this version support direct hash links.
How should an error be written?
Say what happened, preserve the person’s input, and explain a useful next step. Put the message beside the affected control and associate it programmatically.
What happens when motion is reduced?
The attention field starts paused. Lens selection and intensity still update the diagram immediately. Smooth scrolling and transition effects are removed.
05 / Interaction & motion
Responsive. Never restless.
Motion connects an action to its result. It should be easy to understand, easy to interrupt, and easy to switch off.
240 ms / ease out
One deliberate transition, on request.
Interaction behavior
Pattern
Behavior
Recovery
Buttons
200 ms color; subtle 2 px lift
Pressed state returns to baseline
Reading dialog
Focus moves inside; background becomes inert
Escape, close, or backdrop; focus returns
Lens tabs
Arrow keys select; content changes immediately
Selection remains reversible
Attention field
Gentle animation; pointer response; three lenses
Pause at any time; preference stays on this device
Copy action
Confirm only after clipboard success
Show the value if clipboard is unavailable
Input
Inline feedback on validation
Keep input; focus the invalid field
06 / Accessibility
Participation is part of the design.
Accessibility is built into the components. These are implementation rules, with final conformance dependent on real-device and assistive-technology review.
Readable contrast. Ink and supporting text on Paper; white on Cobalt; light text on Forest. Never use color as the only state indicator.
Comfortable targets. Main actions and touch controls use at least 44 px hit areas. Keep adjacent targets distinct.
Reduced motion. Respect the operating-system setting. Keep a visible pause control, and stop the canvas while it is off screen.
Meaningful structure. One h1, ordered headings, landmark navigation, associated labels, dialog titles, and announced feedback.
Flexible reading. Relative text sizing, responsive reflow, reserved image dimensions, and explanatory text alongside the diagram.
Recommended release review: keyboard-only navigation, a screen reader, 200% text enlargement, a narrow viewport, touch input, and reduced-motion preferences.
07 / Content & imagery
Curiosity, with a clear point.
Voice
Observant, precise, open to uncertainty. Use concrete questions and specific examples. Explain technical terms when they first appear.
Editorial structure
One observation, a clear title, a short premise, and a practical question. Studies are the primary unit: a runnable demonstration or a clearly labelled protocol. Earlier perspective notes remain supplementary.
Image direction
Light, material, refraction, and perception. Cobalt glass gives the attention essay a visual anchor. Typographic studies and exact diagrams support the other lenses.
Boundaries
Label illustrative experiments. Separate observation from evidence. Do not imply that the field measures a visitor’s attention or predicts their behavior.
Demonstrations retain responses only in this browser tab. Visitors can inspect, export, or clear the record. There is no pooled research data collection, tracking pixel, or submission service. The animation pause preference stays on this device.
Type and status are separate. A proposed experiment is a protocol, not a live study. “Ready to try” means a local demonstration is runnable.
Research interaction requirements
Surface
Contract
Invitation
Explain voluntary participation, temporary concealment, simulated claims, and the actual data handling before starting.
Experience
Confine variant styling and simulated information to the demonstration. Keep stop/reveal and exit routes visible.
Response
Record what was actually selected or rated. Never treat an unanswered question as a neutral rating.
Reveal
Show the exact intervention, actual response, candidate mechanism, alternative explanations, real-world context, and a countermeasure.
Replay
Remove the intervention and preserve unrelated presentation. Label the replay as informed; keep it linked to the first look.
Personal record
Separate completed, early-reveal, and replay entries. Offer download and clear actions. Never invent group results.
Six research lenses: Attention, Perception, Desire, Choice, Memory, Adaptation. The nine-part study record runs from Observation through Countermeasure, with sources and limitations alongside it.