Design preview · v2 · April 18, 2026 · +spatial · +getf3 dialects

Same man — radically different cuts.

Sixteen mockups across five properties — drjonesy.com (8 directions), app.drjonesy.com (3 directions), quietpulse.app, cleanschema.app, and now getf3.com (5 dialects). Same brand family, same type stack, radically different personalities. Tap any preview to open the full page on your phone.

getf3.com direction options — pick one to ship

§ NEW · 5 dialects · one-liner pitches
Pick one
Five working directions for getf3.com. Same brand family, same type stack, five different personalities. Each one-liner below is the pitch to give if you had ten seconds at a meeting. Tap Open to see the full page on your phone. A production recommendation sits at the top of the list.
01 · Accountability  ·  ★ RECOMMENDED
You versus yesterday. One score. No excuses.
Split scoreboard hero. Partner column pulls live. Flame-orange accent on the winning number. The most F3-native of the five.
Open ↗
02 · Hybrid
F3 as a peer to RACEprompt and QuietPulse.
Three-stop atmospheric gradient. Glass panels. Family strip. One flame moment on the streak. The brand-family bridge.
Open ↗
03 · Cinematic
One day, six scrolled scenes.
Scroll-snap stages: Hero, Focus at 7 a.m., Fight at 1 p.m., Finish at 9 p.m., Streak counting to 112, Join. Fully reduced-motion aware.
Open ↗
04 · Editorial
A considered long-read on keeping your word.
NYT Magazine tone on warm paper. Fraunces serif. Drop cap. Triptych and voices grid. The credibility play for investor conversations.
Open ↗
05 · Monolith
Six slabs. One word per slab. Heavy type, zero softness.
F3 / FOCUS / FIGHT / FINISH / PARTNER / DOWNLOAD. Geist 900. Mix-blend nav. The billboard play for a paid launch campaign.
Open ↗

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

30-agents carousel variants — six cuts of one story

§ 04 · 6 of 6 · IG 1080 × 1080 · tap to preview on mobile
Pick 2 to ship
One story, six design angles. Four in the existing IG template (eyebrow pills, dark nav, big data callouts, teal/purple gradient pivots). Two in the Hybrid register (atmospheric gradient, glass panels, Instrument Serif italic pivots, JetBrains Mono chrome). All 7 slides each. All enforce the no-em-dash rule. Hook slide 1 lands on the "someone asked" moment every time; slide 7 is the DM RACE ManyChat trigger.
01 · Real Talk IG 1080²

Real Talk — the template clone.

Direct descendant of the 112-view post. "REAL TALK" green-teal pill, bold headlines, teal/purple gradient on the pivot words ("AI agents", "raising kids", "board"). "30+" data callout in the middle. Lands on "Just my board." Closes with the DM RACE CTA. Safest bet.

refs · existing template · 7 slides · teal + purple gradient
Open fullscreen
02 · The Audit IG 1080²

The Audit — numbers-forward.

Three data callouts across the carousel. "30+" (agents), "1" (chief of staff), "0" (days to stop being scared of the second). Rhythm built around the numbers. Eyebrow tags: THE REALITY / THE TURN / THE STRUCTURE / THE LINE. Lands on "I don't have 30 tools. I have a system." Strongest for the saver crowd.

refs · existing template · 7 slides · data callouts
Open fullscreen
03 · Chief of Staff IG 1080²

Chief of Staff — the narrative arc.

Tension, then release. Slides 1 to 3 build the problem (fighting agents, no convener, the fear). Slide 4 is the turn: "So I built a Chief of Staff." Slide 5 is a 4-item role list of what the Chief actually does. Lands on "The house stays clean." Strongest for the DM-worthy shareable moment.

refs · existing template · 7 slides · narrative tension
Open fullscreen
04 · 30 Toddlers IG 1080²

30 Toddlers — lean into the humor.

The punchline is the post. "30 toddlers in a room" is slide 2. Slide 3 is a 6×5 grid of numbered toddler tiles (purple + teal tint). Eyebrow tags playful: WORTH NOTING / THE ANALOGY / THE MESS / THE PAYOFF. Closes with "The house stops burning down." Strongest for reach and comments.

refs · existing template · 7 slides · humor + visual grid
Open fullscreen
05 · Hybrid · Editorial IG 1080²

Hybrid · Editorial — the field manual.

Magazine spread in square format. Atmospheric 3-stop radial + grain background. Instrument Serif italic pivots on kids, scared, feeds, board. JetBrains Mono section headings (§ 01 · The Question). Geist body. Glass pull-quotes with mask-composite edge-light. Reads like a published dispatch, not a post. Strongest for positioning.

refs · Hybrid theme · Geist · Instrument Serif · JetBrains Mono
Open fullscreen
06 · Hybrid · Confident IG 1080²

Hybrid · Confident — the museum plate.

Monolith-confident type weight, Hybrid palette. One idea per viewport. "How many agents?" → "30+" → "It's like raising kids." Single oversized Geist headline each slide, Instrument Serif reserved for the pivot word and the closer. Atmospheric depth, visual restraint. Feels like a museum plate. Strongest for saves, weakest for comments.

refs · Monolith × Hybrid · one idea per slab
Open fullscreen

getf3.com — five direction options

§ 05 · 5 of 5 · accountability app · Focus · Fight · Finish
Pick 1 to ship
Five distinct dialects for the F3 marketing site. Same brand palette (navy · purple · teal · F3 flame orange #FF6A2C), same content (three pillars, partner system, Jada Sullivan co-founder note, real App Store link), radically different personalities. F3 is not a separate brand — it is a sibling of drjonesy.com. Open these on your phone and pick the one that feels most like the version of F3 you want to live with. Honest pick at the top: Hybrid reads as the safest family-member candidate; Accountability is the highest-conviction ship.
F3 · 01 · Accountability getf3.com

Accountability — you versus yesterday.

Stripped. Serious. Journaling-quiet with a competitive edge. Split-screen scoreboard hero: yesterday's 82 next to today's live 94. Instrument Serif carries the quiet authority. JetBrains Mono for every number. Flame orange reserved for "today's" score and one pivot word. Features render as a ledger, not a marketing grid. Partner section positions the app as scoreboard, not coach.

refs · NYT Athletic · Strava · serious sports · quiet journaling
Open fullscreen
F3 · 02 · Hybrid · family getf3.com

Hybrid — the family-member cut.

Brand-family Hybrid matched to drjonesy.com. Atmospheric 3-stop gradient, glass panels with mask-composite edge-light, Instrument Serif italic pivots on yesterday and unbreakable. Family strip shows F3 + RACE + QuietPulse + CleanSchema as siblings. 112-day streak rendered in flame orange — the single-accent moment. Safe bet to ship if you want F3 to look like it belongs in the window with the other three.

refs · Hybrid www · same type stack · same palette
Open fullscreen
F3 · 03 · Cinematic getf3.com

Cinematic — one day, six stages.

Motion-first. Scroll-snap through one F3 day. Six stages: Hero 6am → Focus 7am → Fight 1pm → Finish 9pm → Streak → Download. The streak counter animates 0 → 112 when you reach its stage. Each stage bathes in its own radial (teal · flame · purple). Timeline dots on the right follow you through the day. Reduced-motion-aware. Strongest for reach; riskiest for static preview.

refs · Apple product pages · scroll-snap · stage choreography
Open fullscreen
F3 · 04 · Editorial getf3.com

Editorial — a field dispatch.

NYT Magazine meets Offscreen. Warm paper #F6F1E8, Fraunces serif variable with opsz tuning, real drop cap on the lead paragraph, 3-column continuation body, inline pull-quote, triptych (Morning / Midday / Evening) with mono spec lists, voices grid with three real beta testimonials. Jada's origin story told as a lead article. Flame restrained to drop cap + pivots + one CTA block. Strongest for positioning F3 as a framework book, not a habit app.

refs · NYT Magazine · Offscreen · The Browser · print spread
Open fullscreen
F3 · 05 · Monolith getf3.com

Monolith — five slabs, one system.

Museum-quiet. Five 100vh slabs: FOCUS. / FIGHT. / FINISH. / PARTNER. / DOWNLOAD. Geist 900 at 16vw (clamped 96–260px). One word per slab, each with its own color wash (red · flame · teal · purple · navy). Mix-blend-mode difference nav inverts automatically against each slab color. Instrument Serif italic carries the human note at each slab's foot. The punctuation is the signature — each period painted in the slab's accent. Strongest for craft. Weakest for SEO.

refs · Stripe Sessions · Dia · Arc Help · museum plate
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; F3 uses flame #FF6A2C more heavily as its family 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.