@font-face { font-family: 'Lora'; src: url('/assets/fonts/lora-regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'Lora'; src: url('/assets/fonts/lora-medium.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; } @font-face { font-family: 'Lora'; src: url('/assets/fonts/lora-semibold.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; } @font-face { font-family: 'Lora'; src: url('/assets/fonts/lora-bold.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #1D2939; --primary-muted: #475467; --secondary: #0E7A6B; --secondary-light: rgba(14, 122, 107, 0.08); --bg: #FCFBFA; --surface: #FFFFFF; --border: #E5E2DE; } body { font-family: 'Lora', Georgia, serif; background: var(--bg); color: var(--primary); -webkit-font-smoothing: antialiased; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; background: var(--primary); color: white; padding: 10px 14px; border-radius: 8px; transform: translateY(-160%); } .skip-link:focus { transform: translateY(0); } /* ── Nav ─────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(252, 251, 250, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 12px; } .nav-logo { font-size: 20px; font-weight: 600; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 8px; } .nav-logo svg { opacity: 0.75; } .nav-spacer { flex: 1; } .nav-link { font-size: 14px; color: var(--primary-muted); text-decoration: none; padding: 8px 14px; border-radius: 8px; transition: color 0.2s; } .nav-link:hover { color: var(--primary); } .nav-cta { background: var(--primary); color: white; text-decoration: none; padding: 10px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: opacity 0.2s; } .nav-cta:hover { opacity: 0.85; } /* ── Hero ────────────────────────── */ .hero { max-width: 1100px; margin: 0 auto; padding: 120px 24px 60px; display: flex; align-items: center; gap: 60px; } .hero-text { flex: 1; min-width: 0; } .hero-text h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 20px; } .hero-text h1 span { color: var(--secondary); } .hero-text p { font-size: 17px; color: var(--primary-muted); line-height: 1.65; margin-bottom: 28px; max-width: 500px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .btn-primary { background: var(--primary); color: white; text-decoration: none; padding: 14px 32px; border-radius: 12px; font-size: 15px; font-weight: 600; font-family: 'Lora', Georgia, serif; transition: opacity 0.2s; } .btn-primary:hover { opacity: 0.85; } .btn-secondary { background: transparent; color: var(--primary); text-decoration: none; padding: 14px 32px; border-radius: 12px; font-size: 15px; font-weight: 500; font-family: 'Lora', Georgia, serif; border: 1.5px solid var(--border); transition: border-color 0.2s; } .btn-secondary:hover { border-color: var(--primary-muted); } .hero-sub { margin-top: 16px; font-size: 13px; color: var(--primary-muted); } .hero-sub a { color: var(--secondary); text-decoration: none; font-weight: 600; } .hero-search { display: flex; gap: 8px; max-width: 500px; margin-top: 4px; } .hero-search input { flex: 1; min-width: 0; font-family: 'Lora', Georgia, serif; font-size: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--primary); } .hero-search input:focus { outline: none; border-color: var(--secondary); } .hero-search button { font-family: 'Lora', Georgia, serif; font-size: 14px; font-weight: 600; background: var(--primary); color: white; border: none; border-radius: 10px; padding: 12px 20px; cursor: pointer; } .hero-search button:hover { opacity: 0.85; } .hero-phone { flex-shrink: 0; width: 320px; } .hero-phone picture { display: block; } .hero-phone img { width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(29, 41, 57, 0.15)); } /* ── Value Props (quick hits) ────── */ .value-props { max-width: 1100px; margin: 0 auto; padding: 0 24px 60px; } .value-props > h2 { font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 28px; } .value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .value-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .value-card .vi { flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; color: var(--secondary); } .value-card .vi svg { width: 22px; height: 22px; } .value-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 3px; } .value-card p { font-size: 13px; color: var(--primary-muted); line-height: 1.45; } /* ── How It Works ─────────────────── */ .how { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .how-inner { max-width: 1100px; margin: 0 auto; padding: 80px 24px; } .how-inner h2 { font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 48px; } .how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; text-align: center; } .how-step { display: flex; flex-direction: column; align-items: center; } .how-num { width: 40px; height: 40px; background: var(--secondary-light); color: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; margin-bottom: 14px; } .how-step h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .how-step p { font-size: 14px; color: var(--primary-muted); line-height: 1.55; } /* ── Deep Dive (technical features) ─ */ .deep { max-width: 1100px; margin: 0 auto; padding: 80px 24px; } .deep h2 { font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 12px; } .deep .subtitle { text-align: center; color: var(--primary-muted); font-size: 15px; margin-bottom: 48px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.55; } .deep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .deep-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px; } .deep-icon { width: 36px; height: 36px; background: var(--secondary-light); border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--secondary); } .deep-icon svg { width: 20px; height: 20px; } .deep-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .deep-card p { font-size: 13px; color: var(--primary-muted); line-height: 1.55; } /* ── Stats ────────────────────────── */ .stats { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .stats-inner { max-width: 1100px; margin: 0 auto; padding: 60px 24px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; text-align: center; } .stat-num { font-size: 36px; font-weight: 700; color: var(--secondary); } .stat-label { font-size: 13px; color: var(--primary-muted); margin-top: 4px; } /* ── Screenshots gallery ─────────── */ .gallery { padding: 60px 0; } .gallery-header { max-width: 1100px; margin: 0 auto 28px; padding: 0 24px; text-align: center; } .gallery-header h2 { font-size: 28px; font-weight: 600; margin-bottom: 12px; } .gallery-header .subtitle { color: var(--primary-muted); font-size: 15px; line-height: 1.55; max-width: 560px; margin: 0 auto; } /* Horizontal scroll row. Padding uses max(24px, ...) so on wide viewports the first shot lines up with the centered content column but the row itself bleeds to the viewport edge — gives the "swipe through these" feel without a hard right border. */ .gallery-scroll { display: flex; gap: 20px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: max(24px, calc((100vw - 1100px) / 2)); padding: 16px max(24px, calc((100vw - 1100px) / 2)) 28px; scrollbar-width: none; -ms-overflow-style: none; } .gallery-scroll::-webkit-scrollbar { display: none; } .gallery-shot { flex: 0 0 auto; width: 300px; scroll-snap-align: start; } .gallery-shot picture { display: block; } .gallery-shot img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 16px 36px rgba(29, 41, 57, 0.18); } @media (max-width: 600px) { .gallery-shot { width: 78vw; } } /* ── Privacy ──────────────────────── */ .privacy { max-width: 700px; margin: 0 auto; padding: 80px 24px; text-align: center; } .privacy h2 { font-size: 22px; font-weight: 600; margin-bottom: 12px; } .privacy p { font-size: 15px; color: var(--primary-muted); line-height: 1.6; margin-bottom: 16px; } .privacy-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } .privacy-badge { font-size: 12px; font-weight: 600; color: var(--secondary); background: var(--secondary-light); padding: 6px 14px; border-radius: 20px; } .privacy-more { margin-top: 20px; font-size: 14px; } .privacy-more a { color: var(--secondary); text-decoration: none; font-weight: 600; } .privacy-more a:hover { text-decoration: underline; } /* ── FAQ ──────────────────────────── */ .faq { max-width: 760px; margin: 0 auto; padding: 80px 24px 20px; } .faq h2 { font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 36px; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 22px; margin-bottom: 12px; text-align: left; } .faq-item h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .faq-item p { font-size: 14px; color: var(--primary-muted); line-height: 1.6; } /* ── CTA ──────────────────────────── */ .cta { max-width: 700px; margin: 0 auto; padding: 0 24px 80px; text-align: center; } .cta h2 { font-size: 28px; font-weight: 600; margin-bottom: 12px; } .cta p { font-size: 15px; color: var(--primary-muted); line-height: 1.6; margin-bottom: 28px; } .cta p a { color: var(--secondary); text-decoration: none; font-weight: 600; } .cta p a:hover { text-decoration: underline; } .cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* ── Footer ───────────────────────── */ footer { border-top: 1px solid var(--border); padding: 24px; text-align: center; font-size: 13px; color: var(--primary-muted); } footer a { color: var(--primary-muted); text-decoration: none; } footer a:hover { color: var(--primary); } /* ── Responsive ───────────────────── */ @media (max-width: 768px) { .hero { flex-direction: column-reverse; padding-top: 100px; gap: 40px; text-align: center; } .hero-text p { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .hero-phone { width: 240px; } .nav-link { display: none; } }

Private supplement & medication tracking for your whole stack.

One private tracker for your entire protocol: prescriptions, supplements, hormones, peptides, nootropics. Log a dose and see its half-life curve, what's still active, and how compounds interact. No account. No Serum cloud. Your tracker data is not sent to us.

Also available as a native app. Free, no account needed. Browse the compound library.

Serum pharmacokinetic tracker showing modeled serum-level curves for a daily regimen

Why Serum is different from other supplement trackers

One broad compound catalog

Serum covers prescriptions, peptides, AAS, psychedelics, and supplements, with model confidence shown per route.

Catch stack conflicts

13,000+ modeled interaction checks auto-flagged: absorption blockers, dangerous combos, and nutrient depletions you'd never spot manually.

Zero-trust by design

No account. No analytics. No Serum data server. We do not receive what you take; platform health sync and exports happen only when you enable them.

Grounded in the research

Published studies and labels support the catalog. Each route is labeled as validated, predicted, calibrated, inferred, or unverified.

How it works

1

Build your stack

Pick from 500+ supplements, medications, and peptides, or add your own compound with custom half-life data.

2

Log your doses

One tap records a dose. Bundle a whole morning stack together and track every ingredient at once.

3

See what's active

Population-based curves estimate absorption, metabolism, and elimination from your logged doses.

4

Dial it in

Compare how timing, dose, and frequency change the projected curve. Reminders help you follow the regimen you entered.

Built for optimizers

Most trackers count pills. Serum adds population-based estimates of release, absorption, metabolism, and elimination after a logged dose.

Absorption & elimination modeling

First-order absorption via the Bateman equation with calibrated absorption rates, elimination rates, and oral bioavailability for each drug. Buspirone at 4%, curcumin at 5%, propranolol at 25%.

Active metabolite cascades

Drugs like fluoxetine, codeine, and amitriptyline produce active metabolites. Serum models the full parent-to-metabolite conversion cascade with independent half-lives.

Prodrug conversion kinetics

Testosterone esters, lisdexamfetamine, simvastatin. Prodrugs are modeled with their conversion mechanics, not just the active form.

Steady-state projections

See where your levels are heading with regular dosing. Tracks time to steady state, peak, and trough. Multiple sources (standalone + bundles) are combined.

Loading suggestions & cycling

Review a model-derived loading suggestion, then configure loading phases, custom frequencies, on/off cycling, and as-needed PRN dosing. Projections adjust accordingly.

Bundles & overlap detection

Track a multivitamin as one dose, and each ingredient gets its own curve. Overlap detection flags when the same compound comes from multiple sources.

937
Drugs & Supplements
2,011
Published Studies
25,909
Drug Interactions
937
PK / PBPK Models
635
Enzyme / Transporter Tags

Your data stays yours

Core tracking works offline. No accounts, Serum cloud sync, analytics, or telemetry. Your regimen, dose history, and settings stay in app or browser storage. The native app excludes them from Android cloud backup; on iOS, it asks the system to exclude them from iCloud Backup.

Android device-to-device setup can transfer local app data. Optional Health Connect and Apple Health integration can sync under your platform settings when you enable it.

No account required No analytics No Serum cloud Export to JSON

Read the full privacy policy →

Frequently asked questions

What is Serum?

Serum is a free supplement and medication tracker that adds pharmacokinetic modeling: log a dose and see its estimated half-life curve, what's still active in your system, and where your levels are heading at steady state — for every compound in your stack.

What does a half-life curve show?

A half-life curve estimates how much of a compound is in your system over time: how fast it absorbs, when it peaks, and how long it takes to clear. Serum combines every logged dose into one curve per compound, so you can see modeled peaks, troughs, and time to steady state for your schedule.

Does Serum check supplement and medication interactions?

Yes. Serum runs 13,000+ modeled interaction checks across its catalog — absorption conflicts, contraindications, nutrient depletions, and timing requirements — and automatically flags conflicts within your current stack.

Can I track peptides, hormones, and nootropics, not just vitamins?

Yes. The catalog covers 500+ compounds: vitamins, minerals, prescriptions, hormones, peptides, and nootropics. Each gets route-specific models — oral, injection, and topical — instead of a single generic half-life.

Is my health data private?

Serum works offline with no account, no analytics, and no Serum-operated cloud. Your regimen and dose history stay in local app or browser storage, excluded from cloud backups, and you can export or delete them at any time.

Is Serum free?

Yes. The web app and native apps are free with no account required. Serum is not a medical device; its curves are population-level estimates, not medical advice.

Track your stack. See what's active.

Free and works right in your browser. For notifications and health platform sync, install the native app.

Serum is not a medical device and does not diagnose, treat, cure, or prevent any medical condition. Consult a healthcare professional for medical advice, diagnosis, or treatment.