Reciprocal
Elements bend the field; the field bends them back. Nothing is inert.
Forces · Design Systemv0.1
A system you can feel.
Every element is a body — it bends the field, and the field bends it back. This is that thesis as a design language: the tokens, the 34 forces, the glyphs, and the type that document it.
01 — Brand
The page is the idea made literal.
Everything you touch moves the field, and the field moves it back. The interface is the visible surface of one reciprocal system.
Felt before understood
The visible surface and the invisible system are designed as one. People feel coherence before they can name it.
Structured, not stiff
Load-bearing systems that still give. Constraints are forces, not walls.
We say
- Everything you touch moves the field.
- The interface is only the visible surface.
- The goal is coherence.
We avoid
- Hype, metrics theater, buzzwords.
- “Synergy”, “revolutionary”, “game-changing”.
- Decoration without behavior.
02 — Force palette
Canonical nine Every accent is a force.
The palette is the catalog. Each of the 34 forces is an accent with a canonical colour (§20.2), a glyph, and — for the nine — a discipline it maps to.
03 — Surfaces & ink
Surfaces A deep, near-black field.
Colour is an accent, never a flood — pure hue lives on the mark and the glyph; surfaces stay deep, ink stays legible.
48121624324864Radii
Elevation
04 — Type
Bricolage & Martian Mono.
Two families: Bricolage Grotesque handles prose and display; Martian Mono handles every label, counter, and measurement.
Display · Bricolage
Aa Gg
Variable · 300–800 · opsz 12–96Mono · Martian Mono
Aa Gg
Variable · 300–700 · tabularForces
300 · LightForces
400 · RegularForces
500 · MediumForces
600 · SemiboldForces
700 · BoldForces
800 · ExtraboldDisplay A system you can feel.
600 · −0.04em · 0.98 · Hero statements H1 Things made real.
600 · −0.035em · 1.0 · Page titles H2 One reciprocal field.
600 · −0.03em · 1.04 · Section titles H3 Executable design systems
600 · −0.02em · 1.1 · Card titles Body The visible surface and the invisible system that holds it up.
400 · −0.011em · 1.6 · Running text Small On the systems behind the screen.
400 · 0 · 1.5 · Secondary text 05 — Forces
The force set 34 forces. One reciprocal field.
The vocabulary is verbs — what a body does to the matter around it. Each is a glyph, a two-letter symbol, a colour, and a per-frame law. Read the full manual →
Atattract
v += û · (1 − d/r)² · S · 0.5 (+ orbital swirl) Pulls matter into a well — an inverse-square gravity well bent into a spiral.
Rerepel
v −= û · (1 − d/r)² · S · 0.5 Pushes matter away — an inverted well that carves a clean void.
Swswirl
v += û⊥ · (1 − d/r)^1.4 · S · 0.45 · spin (+ 0.12 inward) Spins matter into a whirlpool — a tangential force that circles without collapsing.
Ststream
v += ĥ · (1 − d/r)^1.1 · S · 0.5 Blows a directional current — a constant push along a fixed heading.
Viviscosity
v −= v · (1 − d/r) · (0.05 + 0.07·S) Thickens the medium — viscosity that bleeds momentum off.
Jtjet
feed: v += û·(1 − d/r)²·(0.25 + 0.15·S); at the nozzle (<24px): relaunch as a jet A fountain — draws matter in, then jets it back out along a heading.
Tetether
v += û · (d − rest) · k; v *= 0.985, rest = 0.6·r A tether with a rest length — holds matter at a fixed radius.
Wlwall
inside box: push out the shallower axis, v_axis ← −0.85·v_axis A surface that bounces — an elastic collision off a bounding box.
Sksink
capture within absorbR; at capacity, release everything (supernova) Swallows matter and holds it — accretion, then supernova at the cap.
Grgravity
F = G·M·d̂ / (d² + ε²), ε = r_s = 2GM/c²; |v| ≤ c A true inverse-square well — the real GM/d² law, softened at the core.
Chcharge
F = −σ·q·GM·d̂ / (d² + ε²) Coulomb attraction or repulsion — inverse-square, set by sign.
Mgmagnetism
v ← rotate(v, θ), θ = q·spin·B·(1 − d/r) A force perpendicular to motion — bends a moving particle without doing work.
Ththermal
v += √(2T) · ξ, T = S·(1 − d/r), ξ ~ N(0,1) per axis Brownian agitation — random kicks that heat the medium.
Cocollide
overlapping, approaching discs exchange normal momentum (e = S) Hard-sphere contact — particles bounce off one another.
Dfdiffuse
deposit φ; v += ∇φ · S; field blurs ∂φ/∂t = D∇²φ Lays a trail and climbs it — matter follows the diffused mark up-gradient.
Pgpropagate
pulse φ at the source; v += r̂·|∇φ|·S (ride the front out); ∂²φ/∂t² = c²∇²φ A travelling wave — a disturbance that moves through the field.
Mymemory
M(x) += λ where matter sits; v += û · (1 − d/r)² · S · 0.5 · (1 + μ·M) A trace of where matter has been — past paths persist and pull.
Lelens
v ← rotate(v, θ_max · (1 − d/r) · sign) Bends passing tracks like refraction — focuses or scatters them.
Gagate
if v·n < 0: v −= 2(v·n)·n A conditional aperture — passes some particles, blocks others.
Bybuoyancy
v_y −= (ρ_med − ρ_p)·g, ρ_p = base / (size·(1 + heat)) Lifts lighter matter and sinks heavier — density against a field.
Shshear
v∥ += S · (offset⊥ / r) · (1 − d/r) Opposing currents at a boundary — a velocity gradient.
Czcrystallize
if heat < ½: v += (node − p)·k; v *= 0.9 Snaps matter onto a lattice — order grown from a seed.
Alalign
v += (ĥ·|v| − v)·k, ĥ = neighbour-mean heading (or the body heading) Turns matter to a common heading — flocking orientation.
Wdwind
v += curl(ψ)·S, ψ = sin(x·s + 0.2t)·cos(y·s − 0.2t) A broad, noisy current — turbulent drift across the field.
Cncohesion
neighbours: push if d < r₀, pull if r₀ < d < r₁ Mutual attraction within a group — a surface tension.
Prpressure
ρ = Σ W(d, h); v += −k·(ρ − ρ₀)·∇W (push down the density gradient) Outward push from crowding — a density repulsion.
Huhunt
predator: v += seek(nearest prey)·S; prey: v += flee(nearest predator)·S Tracks and chases a target — pursuit steering.
Spspawn
while engaged: emit S·2 particles/frame along the heading, each living ~90 frames Seeds new matter at a source — emission of fresh particles.
Lklink
neighbours: e = d − L; v += ½k·(e/L)·û (holds rest length L = range·0.35) Binds two bodies with a constraint — rigid or elastic.
Momorph
assign p → target t (hash of gx); v += (t − p)·k + jitter·(1 − arrived) Matter assembles into a mark — a logo or chart grown from drifting particles, never words.
Rsresonate
modifier: scales sibling S by S(t) = 1 + sin(ω·t) A modifier that breathes — scales its sibling forces with a pulsing strength.
Slspotlight
modifier: gates siblings outside an angular cone of the heading A modifier cone — confines its sibling forces to a directed beam.
Pmpigment
on overlap: c_p ← mix(c_p, tint, rate); the colour advects with matter Carries colour through the medium — a dye that mixes.
Fffieldflow
n̂ = netField/|netField|; v += (n̂·|v| − v)·k_steer + n̂·gain·a_accel, gain = S·(1 − d/r) Follows the field lines — matter streams along the field a body radiates.
06 — Formations
The whole field can change its mind.
Forces act locally; a formation is a single global bias over every particle. Five of them, one per section of the journey.
Ambient Hero · resting driftGentle curl-noise drift — nothing pulls; matter just breathes. The default everywhere.
Wells Work · matter poolsMatter pools into a few gravity wells. Bodies gain weight where they gather.
Lanes Writing · a current carriesA directional current carries particles sideways in bands.
Scatter Practice · energy dispersedBrownian dispersal — energy without direction.
Accretion Contact · everything gathersEverything gathers toward one mass — the closing pull.
07 — Library
Force glyphs Glyphs & motion.
The force glyphs are pure CSS shapes — they double as the icon set and the system vocabulary. One easing curve drives all motion.
attractrepelswirlstreamviscosityjettetherwallsinkgravitychargemagnetismthermalcollidediffusepropagatememorylensgatebuoyancyshearcrystallizealignwindcohesionpressurehuntspawnlinkmorphresonatespotlightpigmentfieldflowblackholewhiteholestarquasargalaxynebulatornadofountainThe shared parts the Lab and the design system both run on — a status pill, a
segmented toggle, force-tinted tabs, and a mono readout. Each tints to the active force via --fc.
Status pill
Resolving — 2/3 passed
Confirmed — 3/3 passed
Mismatch — 1 failed
Segmented · tabs · readout
dist80px
speed0.00px/f
force0.080|Δv|
The Lab's advanced inputs, drawn properly — slider, stepper, angle dial,
dual range, and styled select. Pick a force to re-tint the whole set via --cc.
Tint · active force Attract
Slider · two treatments
Stepper
particles
thickness
px
Angle dial
35°deg
heading 35° drag · or ←/→ · shift = 15°
Dual range · sweep bounds
sweep bounds120→380px
Select
falloff curve
0.9sopacity + 28px rise0.45slit / dim cross-fade~2slerp 0.03 / framecontinuouslerp 0.08 / frameEasing: cubic-bezier(0.16, 1, 0.3, 1) — everywhere.