Color
| Token | Light | Dark | Usage |
|---|---|---|---|
| --ink | #0C0C0D | — | Text on paper; ~70% of paint |
| --paper | #F7F7F5 | — | Light bg; dark-theme text; ~25% |
| --signal | #FF4D00 | same | Laps, links, focus, live states only; ~5% budget. Never body text. |
| --gray | #8A8A86 | same | Muted text, idle dots, placeholders |
| --dark | #101012 | bg | Dark-theme background |
| --hair | #E3E2DE | #232326 | Hairlines — the only depth |
| --bg / --fg / --muted / --line / --accent | semantic aliases | Components consume these, never raw values | |
AA: Ink/Paper 19.3:1 · Gray on Paper 3.1:1 (12px 600 caps = large-scale UI text, used for labels only) · Signal on Ink 5.9:1 · Signal on Paper 3.1:1 → ≥18px bold or fills only.
Type — IBM Plex Mono, 3 weights, self-hosted
| Token | Value | Usage |
|---|---|---|
| --fs-h1 | clamp(40px, 7vw, 68px) · 700 · lh 1.05 | One per page |
| --fs-h2 / --fs-h3 / --fs-h4 | 40 / 28 / 20 | 700 · 700 · 600 |
| --fs-body-l / --fs-body | 16 / 14 · 400 · lh 1.55 | Prose ≤ 72ch |
| --fs-micro + .micro | 12 · 600 · .18em · UPPERCASE | Section indices, table heads, keys |
| numerals | font-variant-numeric: tabular-nums | Everywhere — hashes must scan |
Space · shape · container
| Token | Value | Usage |
|---|---|---|
| --u … --u16 | 8 · 16 · 24 · 32 · 64 · 96 · 128 | 8px scale; gutter 24 |
| --layer | 32px = 4u | The mark's layer height — all vertical rhythm snaps to it |
| --sect-top / --sect-bottom | 96/128 · mobile 64/96 | Section padding (layer multiples) |
| --radius | 4px — mark layers ONLY | Containers are square-cornered |
| --maxw / --prose | 1120px / 72ch | 12-col, 24px gutters · breakpoints 480/768/1024 |
| depth | 1px var(--hair) | NO shadows · gradients · blurs |
Nav · SectionHeader · links · toggle
JUMPHASH [01] THESIS Body link: hover grows a 2px Signal underline →
JUMPHASH [01] THESIS Body link: hover grows a 2px Signal underline →
Datasheet table · status dots · KEY : VALUE
| Name | Status | → |
|---|---|---|
| LORRANO | PRODUCTION | lorrano.[tld] |
| MINCUT | DEVELOPMENT | [url] |
| Name | Status | → |
|---|---|---|
| LORRANO | PRODUCTION | lorrano.[tld] |
| MINCUT | DEVELOPMENT | [url] |
Button · input · code · demo rail
key = (key * 2862933555777941757 + 1) & 2^64-1 h("jumphash") → bucket 90/96
key = (key * 2862933555777941757 + 1) & 2^64-1 h("jumphash") → bucket 90/96
Footer
React implementations: components/ — StackupMark · StackupBand · Nav · Footer · SectionHeader · StatusDot · SystemsTable · KeyValueList · Button · CodeBlock · JumpDemo. No other primitives exist; if it isn't here, don't build it.
| REGISTRATION | layers slide into register · 600ms · cubic-bezier(.2, 0, 0, 1) · runs once · click replays |
| LAPS | opacity 0→1 · 150ms linear · delay 100ms after registration · only where overlap exists (computed, never placed) |
| MICRO-TRANSITIONS | 150ms — link underline grows left→right · button inverts · tick lands |
| REDUCED MOTION | render final state, no animation |
| BANNED | scroll-triggered fade-ins · parallax · carousels |
function fnv1a64(str){let h=14695981039346656037n;
for(const c of new TextEncoder().encode(str)){h^=BigInt(c);
h=(h*1099511628211n)&0xFFFFFFFFFFFFFFFFn}return h}
function jumpHash(key,n){let b=-1n,j=0n;const N=BigInt(n);
while(j<N){b=j;key=(key*2862933555777941757n+1n)&0xFFFFFFFFFFFFFFFFn;
j=((b+1n)*2147483648n)/((key>>33n)+1n)}return Number(b)} | Golden vector | fnv1a64 | Bucket |
|---|---|---|
| "jumphash" | 0x7EC173F1A74C4759 | 90/96 · 975/1024 |
| "berza" | — | 77/96 |
| "krov" | — | 50/96 |
| "" (empty input) | shows the "jumphash" result | 90/96 |
GOLDEN VECTORS: NOT RUN
Deterministic build-time art. The field runs left to right from mis-registration into register: layers firm up, and the laps — the only Signal — ignite where the overlap resolves. Seed is the serial number, 0x27BB2EE687B0B0FD; the LCG multiplier is the same constant. Palette is tokens only. No runtime JS: a static SVG emitted by art/colophon.gen.js, byte-identical on the same seed.