Artifact Futurism.
The design language behind this site - what it is, where it came from, and how each piece is built. It's a working spec, not a finished one.
Created 2026-06-12 · Last modified 2026-06-14
This is a living document. The system is still settling, so expect tokens, components, and language to change. Where something is provisional, it says so.
What it is
I've always loved mid-century industrial design - Braun, that clean, everything-has-a-job look. The dials, the dot grids, the little hand-labeled controls. At some point I started saving every image that gave me that feeling, and half of them weren't from the 50s at all: field guides, library cards, survey plates, old travel logs, instrument panels, science prints.
For a long time I thought I was collecting a style. Eventually I realized I was collecting a quality - the feeling of a record. Something that looks found rather than made, like it was pulled out of a drawer in an archive instead of designed last week. That's the thing I keep chasing, and Artifact Futurism is the name I landed on for it.
The artifact half is that record quality: paper, ink, file numbers, the sense that a page is one object in a larger collection. The futurism half is a thin layer of speculation on top - readouts, orbit rings, star charts - as if the same hands that drew the field manuals also drew the controls for a future that never quite showed up.
This is my read on it, not a rulebook. The principles matter more than the specifics - I picked this purple, these fonts, these parts, but you could swap any of them and it would still hold. It's a starting point, and I'll keep refining it.
What I'm after
A few things this isn't. It's not nostalgia - I'm not trying to make things look old. It's not pure retro-futurism, and it's not minimalism either. Those all feed in, but none of them is the point.
What I'm actually after is design that feels discovered rather than manufactured. I'm drawn to the pull of records - a weathered notebook, a field guide, a library card, a survey plate, a dossier, a log of a transmission from somewhere far off. I want the work to carry that same "this came from somewhere real" weight while still being useful, legible, and a little bit playful.
The hard part is doing it without tipping into costume. The moment it reads as a theme or a parody, it's dead. It has to feel like a real tool that happens to have a point of view.
Four pillars
Four things turn up in almost every reference I've saved. I think of them as the pillars - the system lives where all four overlap, not in any one alone.
Observation. Paying attention and writing it down: field journals, photography, scientific illustration, natural-history plates, the habit of recording what you actually see.
Documentation. Putting knowledge in order: archives, catalogs, indexes, labels, file numbers - the structure that says this belongs to a larger collection.
Instrumentation. Interfaces that explain themselves: control panels, technical manuals, gauges, diagrams, designs where every part looks like it has a job.
Speculation. The hint that the world runs past the edge of the page: imagined institutions, alternate histories, retro-futures, a reference to something that may or may not exist.
On their own, none of these is enough. A field guide with no speculation is just a field guide; a sci-fi panel with no documentation is just set dressing. Artifact Futurism is the overlap.
Where it comes from
These are the places the look seems to borrow from. Not rules, not claims of ownership - just the traditions the references keep circling.
Braun-era product functionalism. The Rams T3 radio is the thesis statement: a dot-grid speaker, one dial, nothing else. Several references are direct riffs on this hardware language, translated to screens.
Mid-century technical print. Diagram posters, instrument faceplates, field-guide plates. Hairline rules, registration marks, dotted lines, small uppercase labels, a subtle paper tooth.
Library and archival systems. Dossiers, file numbers, indexes, catalog records, plate labels - documents that imply a whole collection sitting behind the one page you're looking at.
Retro-futurist instrumentation. Orbit rings, readout chips, meridians, constellation scatter, control-panel logic from a future imagined with analog tools.
Minimal editorial pages. Long-form pages with almost no interface - a wordmark, a rule, serif body, generous margins. The page is the content.
Playful institutional fiction. Things that feel like they came from some expedition, field office, or archive that may or may not actually exist.
A few of the touchstones the references kept circling back to:
- Dieter Rams / Braun - the T3 radio: a dot-grid speaker, one dial, nothing else.
- Teenage Engineering - the OP-1 and field series: mono labels, honest controls, one disciplined color pop, play taken seriously.
- Mid-century technical print - diagram posters, instrument faceplates, field-guide plates.
- Bauhaus and science prints - solar-system and orbital charts drawn with grid discipline.
- Instrument-cluster UIs - aviation and audio panels: gauges, readouts, labeled controls.
- E-ink displays - high-contrast, paper-like screens with no glow or gradient: ink on paper that happens to update.
- Archives and catalogs - records, file numbers, indexes, and the feeling that every item is part of a bigger set.
- Minimal editorial pages - long-form articles with almost no chrome.
Principles
Paper, not white. Backgrounds are warm bone, cream, putty. Pure white reads clinical and breaks the material illusion.
Ink with confidence. Near-black, used big. Oversized numerals and headings carry the weight color would otherwise have to.
Accents point, they don't decorate. Purple, ochre, and teal each get a job. If everything is accented, nothing is.
Functional ornament only. Decoration has to look like it's doing a job - an index, a scale, a leader, a dot grid. Most of it isn't doing anything, and that's fine. The one rule is it has to look like it earns its place, even when it doesn't.
Number and label everything. Two-digit indexes, mono microlabels, timestamps and coordinates as texture.
Flat surfaces, drawn edges. No gradients, no shadows. Depth comes from hairline borders and blocks of putty.
Grid and air. Strong columns, generous whitespace. Density lives in the details, not the layout.
Warmth over system. The archive frame should never make the work feel cold. The human voice, the observation, the curiosity come first. If the frame fights the writing, the frame loses.
The frame
The archive. The system treats every page, project, and photo as a record inside a larger collection. Dossier headers, plate numbers, file codes, coordinates, logs - they aren't just decoration. They're what makes a single page feel like it belongs to something bigger.
The speculative layer. Under that sits a small fiction: a future sketched with analog tools, by the same people who drew the field manuals. Orbit rings, meridians, readout chips, constellation scatter. I keep it to a dose - call it 5 to 10 percent of any view, never more. The base stays document-on-paper; the futurism is a signal, not the whole transmission.
One rule sits over both: the content is real. Real dates, real places, real project names. The fiction lives only in structure and labels, never in what the page actually says. And the warm first-person voice always wins - if the frame ever makes the writing feel cold, the frame loses.
Open questions
Things I'm still working out:
- Is this mostly a visual language, or a way of working that runs deeper than the look?
- How much of it leans on the speculative layer versus the plain documentary side?
- Where's the line between an artifact and an archive?
- How much story does a project need before it feels part of the system?
- Does any of this hold up off the screen - in print, in packaging, on an actual object?
- Which parts are load-bearing, and which are just my own taste?
Some of these I'll answer in later revisions. Some probably stay open, and for a field notebook that's the right state to be in.
Color
Paper for every surface, one neutral ink, and three accents that each carry a job. Purple points (links, active states). Ochre is the highlighter and the warm fill. Teal is the third leg - cool counterweight, used sparingly.
Tokens: --paper --paper-raised --putty --rule --ink --muted --accent / --accent-deep --ochre / --ochre-deep --accent3 / --accent3-deep. Bright accents are for fills, large text, and decoration; the -deep variants are for body-size text and links. Ochre and teal are both confirmed.
The core above is the everyday set. Below it sits an extended palette - harvested from the Vesper Atlas build (June 2026), where the system first had to handle data, status, and multi-series charts. It only adds slots; the paper, ink, and accent values never change.
Extended neutrals & accents
Status - never colour alone
Soft tints - all carry ink at AAA
Heatmap ramp & segment palette - chart fills
The extended slots are mostly fills and chart series. Two carry body-size text on paper: --indigo (6.37:1, AA) and --status-red (5.92:1, AA). The rest - status green/amber, coral, violet-mid, text3, and every segment colour - are for blocks, large text, or chart fills, and status is always paired with an icon or label, never colour alone. Soft tints carry --ink at AAA.
Type
Three voices, each with a job. Outfit carries the structure, IBM Plex Mono does the instrument detailing, Lora holds the prose.
headings / UI
numerals
labels / index
prose / captions
Tokens: --font-sans (Outfit) --font-mono (IBM Plex Mono) --font-serif (Lora). Self-host all three at build; subset to Latin and the weights in use.
Decorations
A modular parts catalog - eighteen named elements, each one ID'd. The governing rule never changes: pick one or two per view, never more. Each must look like it does a job. The first thirteen are below; DEC-14 to DEC-18 and the section-glyph set arrived with the Atlas harvest and are shown under Instrument graphics.
All thirteen shown above. CSS parts: .ruler .dec-dots .leader .regmark .dec-meridian .dec-const .chip-readout; instrument figures (orbit, dial, waveform, globe, nested) are inline SVG using var() colors.
Marks and links
The highlighter is the signature interaction. Links and the home hero use the same idea: an ochre (or accent-tinted) marker stroke that sweeps in behind the text on hover, with an organic, hand-drawn edge - never a flat block. Text darkens to ink underneath for AAA contrast. Try it: hover this link.
a.hl for links (ochre); .mark + .mark--ochre/--purple/--teal for the hero words. Brush shape is an SVG mask wiped on with an angled clip-path; mix-blend-mode: multiply for ink-like overlap. Both honor prefers-reduced-motion.
Controls & form elements
Functional UI follows the same rules as the rest of the system: flat surfaces, drawn edges, one accent that means something. Buttons and interactive cards lift 2px on hover - an interface reacting to your finger, no shadow, only movement. Folder tabs run a three-way ochre/purple/teal rotation across a row. Inputs are drawn like everything else - ink borders on paper-raised, mono labels, a purple focus ring - no soft pills, no glow.
.btn.btn--primary / .btn--secondary; .folder + .tab (hover via :nth-child(3n+1/2/3)); .menu-toggle readout chip in the header. Form parts: .contact-form, .form-field + .flabel, native select with a drawn chevron, restyled input[type=radio] / [type=checkbox] (filled purple when checked), and a .toggle switch - all with the purple focus ring. The form posts to FormSubmit on a flat site.
Documents
The archive components: a dossier header for metadata, plate frames for images, and the readout chip for stamps and stats. These carry the archive frame.
.dossier with .row/.k/.dots/.v; .plate with .plate-head + figcaption; .chip-readout for stamps.
Progress & data
When the system has to show progress or counts, it stays on-material: drawn ink frames, putty tracks, mono legends, and a diagonal hatch for the unfinished part - the near-universal "pending" pattern. The done portion is a solid fill; the remainder is the same colour at 35% on a 45-degree hatch.
Segmented weighted bar - with crop marks
.segbar + .seg (each a solid .fill and/or hatched .todo); legend is .segtrack + .segtrack-item (mono swatch + name + percent). Wrap any frame in .cropmarks for the registration stubs (DEC-14). Labels live in the legend, never inside the bar.
Single progress bar - hatch vs fill
.progress with .done (solid) + .rest (45-degree hatch, segment colour at 35% alpha, 2px stripe / 8px pitch). The hatch (DEC-16) reads as "in progress" while keeping each segment's colour. Atlas JS helper: unfinishedHashBg().
Dashboard tiles, records & milestone
.dash-row + .dash-stat (.is-violet/.is-amber/.is-teal/.is-coral soft tints, mono .lbl, big .val); .dash-records + .dash-rec (dotted leader); .dash-milestone + .dash-ms-bar/-fill (putty track, flat ochre fill). All flat - no shadow.
Polls & filters
Two query patterns. The poll uses a hole-punch selector - a white disc with a hard 2px offset shadow, the one place flat-surface depth is allowed, so it reads as a physical punch. The filter bar is a drawn instrument strip of mono chips, the active one inked solid.
.poll / .poll-opt (.is-selected fills the punch with --accent); thin .poll-track + .poll-bar under each row (colours cycle accent / teal / ochre), never a full-height fill.
.filter-bar + .filter-chip (inactive = plain ink text, .is-active = solid ink fill, paper text); .filter-sep splits groups; .filter-meta is the mono count.
Status & caution
Warnings get an industrial caution placard, not a soft red pill: a light-amber date chip plus a mono tag with a hazard-stripe spine. It reads like a warning sticker on equipment. Status colour is always paired with text or an icon, never carried by colour alone.
.due-pill + .caution-tag (mono, ochre fill, ink/ochre hazard-stripe spine via ::before). Status dots use --status-green/amber/red beside a text label - the label, not the colour, carries the meaning.
Instrument graphics
The richest part of the retro-futurist layer, harvested from Atlas: five new decorations (DEC-14 to DEC-18) and a set of line-art section glyphs. All obey the dosage rule - roughly one per view - and draw colour from tokens so they retheme automatically.
DEC-14 crop marks · DEC-15 document watermark
.cropmarks on any positioned frame - eight ink stubs overshoot the corners like a registration plate.
.doc-watermark - a ~6% mark stamped in the corner behind content.
DEC-17 orbital graph · DEC-18 viewport panel
atlas-orbital-graph.svg (the orrery; also the watermark mark) and atlas-viewport.svg (a dot-grid instrument panel framing a clipped orbital chart - the layer at full strength). Both are SVG assets; obey the one-orbital-element-per-view cap.
Section glyphs - GLY-01..08
Line-art instrument glyphs for section headings: thin ink strokes, muted detail, one accent mark, ~120x72 viewBox, rendered ~60px wide beside a heading. They draw from --ink / --accent / --ochre / --accent3 and retheme automatically.
Full source: decoration-library.html. On Atlas these apply as a data-URI under [data-section] h2::after. The subject names (tasks, crew, log...) are an example set - swap the drawings to fit a surface; the construction rules carry over.
Accessibility
The site is meant to be evidence of how I work, so the contrast is verified, not eyeballed. WCAG 2.2 AA is the floor for every pair and state; body text and links clear AAA.
| Ink on paper | #1B1A17 / #F4F1E9 | 15.4:1 - AAA |
| Purple-deep link on paper | #5C3879 / #F4F1E9 | 8.1:1 - AAA |
| Teal-deep on paper | #1F5A52 / #F4F1E9 | 7.04:1 - AAA |
| Muted label on paper | #5F5B51 / #F4F1E9 | 5.6:1 - AA |
| Indigo on paper | #5A4F8A / #F4F1E9 | 6.37:1 - AA |
| Status-red on paper | #9E3B3B / #F4F1E9 | 5.92:1 - AA |
| Ink on soft tints | #1B1A17 / tint-* | 13-15:1 - AAA |
| Coral / status-green / status-amber / violet-mid / text3 | on paper | 3.3-4.5:1 - large / UI / fill only |
Focus rings: 3px --accent outline, 2px offset. Non-text contrast (3:1) on input borders and meaningful icons. Motion is gated behind prefers-reduced-motion. Bright accents never carry body-size text on paper. Among the harvested tokens, only --indigo and --status-red clear AA for body text; the rest are fills, large text, or chart series, and status colour always rides with a label or icon.
Living document, last revised 2026-06-14 (rev 02: extended palette and the Atlas component harvest - data, status, polls, filters, dashboards, and instrument graphics DEC-14 to DEC-18 plus the section-glyph set). This system started under the name Analog Functionalism; Artifact Futurism is where it landed. As it grows - more components, the blog reskin, real type hosting - this page grows with it. Nothing here is frozen.