Fasting Monitor · v2 design doc
Design doc · v2 · approved 2026-05-26

Fasting Monitor v2.

One artifact. Three layers. Two doors. The architecture pass that precedes any line of code.

The artifact lives at fasting.leematulis.com and exists to help strangers get curious about fasting, help experimenters log their own, and help one person — the maintainer — stay in touch with his own pattern. v1.0 shipped a biomarker visualizer. v2 turns that into a personal log middle layer. Layer 3 — thesis material — is deliberately deferred.

StatusApproved design, ready to implement
Target shipNext fast in the rhythm, 2026-07-10
Pre-shipv1.5 polish, this week
Approved byLee Matulis
The calls

Eleven decisions that hold the design together.

Approving a design means making these calls in advance, on the record, so the build doesn't quietly drift.

01

Three-layer architecture.

Educational → personal log → thesis. Layer 3 deferred from v2.

02

Door visibility on layer 1.

Log your own fast wins primary placement. See Lee's experiment secondary.

03

Four-axis sliders, hidable.

Physical, mental, spiritual, social — each on a –5 to +5 scale. Any axis can be hidden (especially spiritual, if it doesn't fit a user's language).

04

Overall ease, once.

Captured at fast end on a 1–10 scale. Not a per-checkin slider. Not derived.

05

Static-first plus tiny backend.

Vanilla HTML/CSS/JS, no framework, no build step for the artifact itself. A small Cloudflare Workers + KV layer exclusively for the maintainer's data, so it can be public-readable.

06

Visitor data is per-device.

localStorage only. Download my data button for backup. No cross-device sync in v2.

07

Same slider UI for everyone.

No separate admin UI for the maintainer. His writes hit the Cloudflare endpoint with a password; visitor reads come from the same endpoint without auth.

08

Past fasts backfill via conversation.

Maintainer dictates / feeds notes to Claude; Claude writes the record into Cloudflare KV. No markdown-by-hand. No vault sync. No files.

09

Reminder cadence is user-configurable.

Default for new visitors: every 4h. Default for the maintainer: first prompt at 24h, then every 6h — his OMAD baseline means 0–24h doesn't register as fasting for him.

10

Full brand palette in play.

Not just the warm-black-and-cream lockup. Colors used deliberately, decisions documented at implementation time.

11

Layer 3 is deferred wholesale.

The thesis / manifesto / armored framing for a one-person experiment — all out of v2. Named here so we know what we're explicitly not building yet.

The architecture

Three layers, two in v2.

Progressive disclosure by depth of engagement. Outer ring reaches anyone. Inner ring waits.

LAYER 1 · EDUCATIONAL LAYER 2 · PERSONAL LOG LAYER 3 · THESIS deferred depth ↓

Layer 1 — Educational surface ships v2

The biomarker visualizer that exists today, evolved. Brand strip, timer, phase pill, six KPI cards, multi-curve chart over 72 hours. Two new doors below the chart: Log your own fast primary, See the maintainer's experiment secondary. Share-this-view button as the lowest-effort contagion vector.

Layer 2 — Personal log middle ships v2

The dual-purpose core. Same component shape, two data sources: maintainer's view and visitor's view. Streak strip, fast cards, current-fast slot, cross-fast comparison overlay. The "100× easier" mechanic lives here.

Layer 3 — Thesis / deep view deferred

The manifesto, the long-form journal as standalone, the citations library as its own page, the framing for the n=1 experiment. Named so we know what we're not building yet.

The jobs

Three people. Three reasons to be here.

When the artifact does its job, each of these three walks away with what they came for.

The maintainer

Stay in touch with my own pattern.

When I'm between fasts — planning the next, mid-fast, or just finished one — I want to see my experiment at a glance, including count, longest, shortest, and what I did and felt during each, so I can make decisions about the next fast and the surrounding content from a grounded place.
New visitor

Curiosity onramp.

When I'm curious or skeptical about fasting and I've landed here from social or word-of-mouth, I want to see what actually happens inside a body during a fast — biomarkers, phases, timing — in a form I can grasp in under a minute, so I can decide whether I want to try it myself or share it with someone who would.
Returning experimenter

Watch my own pattern emerge.

When I'm fasting, or about to, or just finished, I want to log my own fast in under a minute and see my own history accumulate over time, so I can watch my pattern emerge, compare fasts, and share the moments when something interesting shows up.
The flows

How they actually move through it.

Each flow is a one-page journey. No URL changes, no page loads, no surprises.

Flow A · New visitor — cold landing

From share or search → choice in under a minute.

Lands fasting.leematulis.com Reads layer 1 timer · chart · KPIs · phase Sees two doors below the chart Log your own fast primary See the experiment secondary Layer 2 inline Layer 2 inline
Flow B · Returning experimenter

localStorage-detected → welcome banner → resume or history.

Lands localStorage flag set Welcome back banner "You're on fast #N" Resume current fast, check-in due View history full log Layer 2 — their data Layer 2 — their data
Flow C · Maintainer — dashboard owner

Detected → layer 2 above the fold → check-in inline.

Lands ?me=lee or local flag Layer 2 above fold streak strip · fast cards Check-in inline four sliders + note Save POST → Cloudflare KV (gated)
The data

One record shape. Same for everyone.

Maintainer and visitor share the same Fast Record schema. Depth of fill differs by usage, not by shape.

id: fast-2026-07-10 fast_label: "July fast" # optional human label, null if untitled start_time: 2026-07-10T22:00:00+03:00 end_time: 2026-07-13T08:00:00+03:00 # null while in progress overall_ease: 8 # 1–10, set once at fast end breaking_food: "warm bone broth, then steamed vegetables" structured: true # false for pre-slider backfilled fasts checkins: - time: 2026-07-11T22:00:00+03:00 # 24h in physical: 1 mental: 3 spiritual: 4 social: null # axis hidden by user notes: "feeling clear, no hunger" activities: physical: ["walking 8km", "yoga 30min"] mental: ["finished design doc", "deep reading"] spiritual: ["meditation 45min", "silent sunrise"] social: ["dinner conversation while not eating"] journal: | Free-form text. The reflective layer. The maintainer writes here. Visitors optionally write here.
Sliders · physical / mental / spiritual / social · –5 to +5 each · spiritual is hidable Ease · captured once at fast end · 1–10 Comparison · overlay any two or more fasts on shared time-axis
The stack

Static-first. One tiny backend. No framework.

Cheap, fast, reliable, easy to deploy, easy to evolve. The shape of the stack matches the shape of the artifact.

One HTML filevanilla JS · ~1000 lines max

No React, Vue, Svelte. No build step. Edit the file, deploy through the existing pipeline. Chart.js loaded from CDN as v1 already does.

One JSON endpointCloudflare Workers + KV

~50 lines of JavaScript. Free tier sufficient indefinitely for projected usage. GET reads maintainer's record set publicly. POST writes maintainer's data, gated by a password.

localStorage for visitorssingle JSON blob, per device

Same schema. Download my data button for backup. No cross-device sync in v2 — that's an acceptable trade for not needing accounts.

Hermes for deploysalready operational

Static HTML deploys the way every other artifact does. Cloudflare Worker deploys once at setup, separately.

The inputs

Three paths in. Zero markdown.

If logging a fast requires touching a file, the design has failed. The slider is the surface; the data is what falls out.

01

Visitor data — automatic, invisible zero friction

Slider UI in the artifact. Browser writes to localStorage on each save. No files, no commits, no deploys, no JSON awareness required.

02

Maintainer's future fasts — same slider, different endpoint password-gated POST

Same slider UI as visitors. On save, UI POSTs to the Cloudflare endpoint with a password. Worker validates, writes to KV, returns success. Public reads come from the same endpoint without auth. Data is public-by-design.

03

Maintainer's past fasts — backfill via conversation one-time per fast

Maintainer dictates / feeds notes to Claude. Claude extracts structured fields and writes the record into Cloudflare KV via the same authenticated endpoint. Records marked structured: false if slider data is null — artifact handles gracefully with text-only entries.

No markdown files. No build scripts. No vault sync. If the slider can't capture it, the design has to grow — not the workaround.

The gates

What "shipped" means.

Each criterion is a verifiable check. Failing any of them means we fix it or document why we deferred — never silently move on.

Maintainer — timing thresholds
Recall · full history visible in under 3 seconds of page load
Start a fast · under 10 seconds from intent to fast-created
Slider check-in · under 15 seconds — four sliders, optional note, save
End a fast · under 30 seconds — end_time + overall ease + breaking food
Public latency · maintainer saves are visible to a fresh visitor within 5 seconds
New visitor — comprehension & onramp
Comprehension · purpose clear within 30 seconds, no scrolling, no reading explanatory copy
Onramp visibility · both doors visible above the fold, mobile (360px minimum) and desktop
Load · under 1.5 seconds to interactive on 4G
Share-ready · one clean above-the-fold composition is screenshot-worthy at Instagram-square crop
Returning experimenter — continuity
Recognition · returning visitor sees Welcome back, fast #N banner
Resume · one click to current fast or history
Compare-with-maintainer · toggle works, overlays visually distinct, no labeling confusion
Backup · Download my data button exports JSON
Share-card quality · auto-generated card on fast completion clears the maintainer's own art bar
Engagement signals — measurable per cycle
Signal #1 — experimentation · at least one visitor per cycle completes start + check-in + end (GA4 custom events)
Signal #2 — audience growth · one piece of content per cycle uses the artifact; inbound social referral trends up month-over-month
Signal #3 — revenue · not a v2 criterion, deferred
Quality & craft
Brand alignment · matches full palette, colors used deliberately, decisions documented
Scientific rigor · every physiological claim cites a primary source
No silent errors · no JS errors in any supported browser console
Lighthouse · Performance ≥ 90, Accessibility ≥ 90, Best Practices ≥ 90 on mobile
Cross-browser · Safari iOS, Chrome Android, Chrome desktop, Firefox desktop, Safari desktop
Not now

What we deliberately aren't building.

Naming what's out of scope is part of the design. The reason to write it down is so it can't quietly creep back in.

Deferred to v3+ — reconsider when usage justifies
  • Accounts & authentication
  • Cross-device sync for visitors
  • Push notifications via service worker
  • Real-time biomarker integration (Oura, CGM, Apple Health)
  • AI insights / auto-generated summaries
  • Social features (comments, follows, feed)
  • Native mobile app
Deferred to v2.x — smaller, plausibly mid-cycle
  • Custom rhythm UI for visitors
  • Email reminders (browser only in v2)
  • Smart reminder cadence based on prior fasts
  • Deeper palette integration if v2 ships with a starter subset
Explicitly not in scope
  • Multi-user social comparison
  • Print-friendly view / PDF export
  • Multi-language — English first
Architectural scope discipline
  • No new backend services beyond the single Worker + KV namespace
  • No build framework — vanilla stays
  • No analytics beyond GA4
  • No CMS
Still loose

Five things to figure out.

Not blockers — open questions visible to the design surface so they can't quietly become defaults.

Question 01

Maintainer detection — URL parameter, localStorage flag, or URL hash + token? Provisionally URL param + localStorage; revisit if edit-mode security becomes a real concern.

Question 02

Palette extraction — when visual design starts, pull the full palette and map components to specific colors. Current artifact uses a close-but-not-exact treatment.

Question 03

Compare-with-maintainer overlay UX — how to visually distinguish two sets of curves on one chart without labeling confusion. May need iteration during implementation.

Question 04

Share-card art direction — what does a great share card look like? Needs creative judgment when we hit visual design.

Question 05

Hermes deploy mechanics for the Cloudflare Worker — Worker deploys separately from the static HTML deploy. Wire into existing pipeline or treat as one-time setup?

Pre-ship

The smaller landing before v2.

v1.5 ships a polish pass on the existing artifact — not layer 2. Smaller scope, faster turnaround, timed to a near-term announcement. Candidates were proposed below, and the final pick is still being interrogated against the brand lens (because not every "polish" candidate clears it).

  • Brand alignment pass against the full palette
  • Static "maintainer's experiment so far" cards — three past fasts as text-only entries
  • Next-fast countdown / date indicator
  • Share-this-view button generating a clean image card
  • Citation links on each biomarker curve