A single reconciled system. Madeira’s rock and laurisilva, the cold North Atlantic, and one Swedish red mixed from Falun copper - set in a humanist serif over a precise grotesque, every measure on an 8 px grid.
Palette
6 colors · tuned so Faluröd leads
Basaltink
#171E1A
.22 .012 165
Laurisilvaprimary
#3B5B47
.44 .050 156
Oceansecondary
#3B5669
.44 .045 238
Falurödaccent
#801818
locked · SE
Granitemuted
#716F65
.54 .016 100
Limewashground
#E5E4DB
.92 .012 101
Faluröd is fixed at its real pigment value - #801818, the iron-oxide red of Falun. Laurisilva and Ocean are held to one another - matched in lightness and low in chroma (L ≈ 0.44) - so the green and steel-blue read as one calm pair and the red is left to carry attention. Basalt anchors below; Granite and Limewash share a warm near-neutral axis.
One modular scale: base 16 px, ratio 1.25 (the 5:4 major third). Every size is 16 × 1.25ⁿ - nothing chosen by eye.
Display · n5 Spectral 500 · 49px
Hewn from basalt
Heading · n3 Spectral 600 · 31px
Selected work
Title · n2 Spectral 600 · 25px
A unit of the grid
Lead · n1 Plex Sans 400 · 20px
The standfirst sits one step above body.
Body · n0 Plex Sans 400 · 16px
Volcanic rock and limewashed plaster, the deep green of the laurisilva, the cold blue of the Atlantic - and against all of it, one steady red. The body holds a calm grotesque so the serif can speak.
Small / Eyebrow · n-1 Plex Sans · 13px
Scope of work
Captions and metadata hold Granite, never pure black.
Rebuilt as tracery. Each motif is drawn so its arcs run unbroken into the next tile - a continuous net rather than stamped units - drawn in ocean, the secondary blue, kept low in opacity so it sits behind the page, not on top of it. Compass-and-rule construction on the 8 px grid, after the Gothic and the de tapete azulejo. Three densities.
rosette net · r24 · continuous petals
quatrefoil tracery · Gothic · 48px
star & ring · densest · 64px
Buttons
2px radius · 8px rhythm
Hierarchy
View the work SecondaryBook a callGhostQuiettext link →Disabled
Sizes · 8 / 12 / 16 px padding
SmallMediumLarge
Iconography
24px grid · 1.5px stroke · geometric
A line set drawn from primitives - straight runs, right angles, and circles on the 24 px box - to match the engineered grotesque. No flourishes.
arrow
external
chevron
plus
close
check
search
mail
download
menu
grid
clock
calendar
document
circle
diamond
Components
a first pass · many to react to
Tags & status
avionicsstructurespropulsion
ActiveArchivedBlocked
Field
noah@
Used only to send the call link.
Selection
Toggle
Tabs
OverviewMethodNotes
Segmented
GridList
project shot
2025 · structures01
Re-entry heat shield lattice
A mass-optimised TPS substructure, parametrised end to end.
Spec table
mass4.20 kg
margin+1.8×
statusre-test
ownerN. Hyden
Note
An informational block on Surface. No left-bar gimmick - the icon carries the meaning.
Blockquote
Structure first; the surface only has to be honest about it.
- working principle
Meter
verification64%
risk burndown28%
Breadcrumb & pagination
indexworkheat shield
123…9
Noah Hyden.WorkWritingAboutContactBook a call
tokens.css
--color-basalt #171E1A --space-1 8px
--color-laurisilva#3B5B47--space-2 16px
--color-ocean#3B5669--space-4 32px
--color-faluröd#801818--ratio 1.25
Interactive
one island · client-rendered · lazy
The rest of this page is static HTML that ships no JavaScript. The panel below is a single island - prerendered here for free, then bundled on its own and mounted live by pimas only once it scrolls into view.
Only this box is. The rest of the site is static HTML with zero JavaScript - this accordion is a single lazy-loaded island, mounted live by pimas when it scrolls into view.
Opening a panel writes one signal. Only the two nodes that read it - this row's “+/–” glyph and its panel height - re-run. There is no virtual DOM and no diff pass, so nothing else on the page is touched.
To own the whole stack end to end - the same reason this site dropped Claude's design-canvas runtime. pimas renders this island in the browser and prerenders every other page to static HTML from the exact same component code.
Primitives - onMount & ErrorBoundary
two new pimas primitives · dogfooded live
Two more pieces of the framework, exercised in one island. On the left, onMount focuses a field once it’s in the live DOM. On the right, an ErrorBoundary catches a child that throws during render - and recovers on reset.
onMount · ref autofocus
onMount ran after these nodes entered the DOM, so the field could take focus. An effect alone sees a detached node.
ErrorBoundary · crash & reset
count = 0
Increment to 3 and the child throws during render; the boundary swaps to this fallback. reset zeroes the count and rebuilds the live counter.