Design preview · v2 · April 18, 2026 · +spatial · +pair experiments

Same man — radically different cuts.

Eleven mockups across two properties — drjonesy.com (8 directions, incl. the two new pair-experiment cuts) and app.drjonesy.com (3 directions). Same copy, same brand palette, same three apps. What changes is the outfit: typography system, grid, personality, information hierarchy. Tap any preview to open the full page on your phone.

drjonesy.com — eight directions

§ 01 · 8 of 8 · marketing site · +spatial · +pair experiments
Compare pair
Testing whether Monolith (won for www) bridges to Spatial (approved for app). Open the original Monolith first so your eye calibrates — then open Harmonized and Hybrid next to it. Harmonized swaps only the type stack (the cheap test). Hybrid keeps Monolith's skeleton but introduces Spatial's atmosphere and glass at handshake moments (the richer test). Stack them in three tabs.
✦ NEW · Harmonized — cheap test drjonesy.com

Monolith × Harmonized — the cheap test.

Monolith's DNA, wearing Spatial's type stack. Six 100vh slabs intact — 16vw hero, horizontal apps carousel, scroll-snap rhythm, mix-blend nav — but Inter Tight → Geist, Fraunces → Instrument Serif, JetBrains Mono matched. Palette tightened to navy · purple · teal. Tests whether the pair handshakes on type alone.

refs · Stripe Sessions · Dia · Geist · app.drjonesy.com
Open fullscreen
✦ NEW · Hybrid — ambitious test drjonesy.com

Monolith × Spatial hybrid — the ambitious test.

Monolith's skeleton + Spatial's vocabulary at handshake moments only. Page-wide atmospheric field + grain replaces per-slab color. Glass with mask-composite edge-light on the apps cards and the CTA promise tiles. Pointer parallax scoped to the apps slab only — hero holds still. Slabs otherwise unchanged.

refs · Dia · Arc · Rauno · Apple Vision · Stripe Sessions
Open fullscreen
✦ NEW · Spatial drjonesy.com

Spatial — depth-first marketing.

The app spatial direction, translated for persuasion. Atmospheric light field, glass panels with mask-composite edge-light, ivory→purple→teal gradient serif on "Not Hype.", three apps as gallery objects at different Z, pointer parallax. Stillness instead of scroll motion. Same brand, different emotion.

refs · Dia · Arc · Rauno · Apple Vision · app-v2-03
Open fullscreen
01 · Editorial drjonesy.com

Editorial — a field journal.

NYT Magazine meets Pentagram. Warm paper, Fraunces serif as body type, drop caps + pull quotes, apps rendered as a Table of Works. The consultant as author, not SaaS founder.

refs · Offscreen · NYT Mag · Pentagram · Ramp
Open fullscreen
02 · Brutalist drjonesy.com

Brutalist — stop the thumb.

Cash App / Gumroad / Workwear. 3px solid borders, hard 12px drop shadows, Archivo Black hero at 11vw, scrolling tape marquee, rotated sticker block. The loudest of the five — built to survive a scrollfeed.

refs · Gumroad · Cash App · Workwear
Open fullscreen
03 · Motion drjonesy.com

Motion — cinematic pacing.

Apple product page / Linear launch / Rauno. Sticky scroll stages, conic-gradient brand orb, 3D device cards with light leaks, serif marquee, IntersectionObserver reveals. Feels alive. Reduced-motion honored.

refs · Apple · Linear · Rauno · Vercel
Open fullscreen
04 · Terminal drjonesy.com

Terminal — CLI-native.

Vercel / Railway / Turso. Mono-first, window chrome, $ ls ./apps listing, RACE as a real code block, consulting as POST /commission with a JSON response. Syntax-colored prose. Signals to a technical buyer.

refs · Vercel · Railway · Turso · berk.es
Open fullscreen
05 · Monolith drjonesy.com

Monolith — one idea per screen.

Stripe Sessions / Dia / Arc Help. Six 100vh slabs with scroll-snap. Inter Tight at 16vw, Fraunces italic accents, apps as a horizontal carousel. Reads like a typographic monument, not a pitch page.

refs · Stripe Sessions · Dia · Arc
Open fullscreen

app.drjonesy.com — three directions

§ 02 · 3 of 3 · product surface · built around RACE composer
06 · Dashboard app.drjonesy.com

Dashboard — a real product shell.

Linear / Vercel / Railway. 260px sidebar, workspace switcher, composer + output panel, recent runs table, templates drawer. Preserves every live RACE input. Keyboard-first. Built for Team/Enterprise plans.

refs · Linear · Vercel · Railway
Open fullscreen
07 · Consulting portal app.drjonesy.com

Consulting portal — a direct line.

Superhuman meets Notion. Personalized greeting, deliverables queue, milestone timeline, threaded messages with Jonesy, team seats, "Notes from Jonesy" block. Warm paper palette. This is what the Team plan feels like.

refs · Superhuman · Notion · Intercom
Open fullscreen
08 · Spatial app.drjonesy.com

Spatial — depth-first.

Dia / Arc / Rauno / Vision. Glass panels with edge-light, RACE fields orbiting the composer at different Z depths, parallax on pointer move, ambient 3-point color wash. Gradient buttons. Brand palette composed, not picked.

refs · Dia · Arc · Rauno · Apple Vision
Open fullscreen

Brand system — per-product dialects

§ 03 · 2 of 2 · proposals for quietpulse.app + cleanschema.app
Same DNA, different dialect
Shared primitives across all four properties — Geist + Instrument Serif + JetBrains Mono, navy / purple / teal palette, atmospheric field + grain + glass + edge-light available. Each property pulls the subset of primitives appropriate to its register. www runs Hybrid (confident, persuasion-loud). app runs Spatial (depth, atmosphere). quietpulse.app runs Serene (restorative, serif-heavy, teal-dominant). cleanschema.app runs Technical (mono-heavy, dot-grid, before/after as proof). Open the two new ones below — they should feel like cousins of www, not strangers.
QP · Serene quietpulse.app

QuietPulse — the Serene dialect.

Privacy-first wellness, in a quieter register. Instrument Serif italic carries the hero; Geist body recedes; Mono almost vanishes. Teal becomes the dominant accent — purple retreats. No 3-stop atmospheric wash, no edge-lit glass. Generous leading, slow 9s breath cycles, ivory body text for warmth. App screenshots are placeholder thin-glass frames marked data-todo for real renders.

refs · Kinfolk · Headspace · Calm · Spatial palette quieted
Open fullscreen
CS · Technical cleanschema.app

CleanSchema — the Technical dialect.

Privacy-first PII scrubber, mono-heavy. JetBrains Mono leans heaviest — it's a data tool. Geist for headings, Instrument Serif for one pivot word ("structure"). Navy-dark + dot-grid background. Purple appears only on the download CTA. Hero side-by-side: terminal proof on the right with edge-lit glass. Before/after CSV demo is the product proof point — Jennifer Martinez → Denise Holloway, real schema preserved.

refs · Raycast · Vercel · Linear · Hybrid mono palette
Open fullscreen
How to use this. Tap any preview to open the full page. Each mockup has a collapsed <details> block at the top titled "What this is + why it works" — 8 bullets explaining the design moves and which craft principle each embodies. All mockups use the same brand colors (navy #0F172A, purple #7C3AED, teal #10B981, with orange #F97316 accent) and the same content — only the typography, grid, and personality change. Pick the one that feels most like you; we'll take it deeper from there.