Murph
Murph
ChangelogDesignSecurityGitHub
Legal
Terms of UsePrivacy PolicyConsumer Health DataSubprocessors

Murph provides educational health information and tools to help you understand your data and have better conversations with your clinician. It is not intended to diagnose, treat, or prevent diseases or other conditions and is not a substitute for professional medical advice. If you are or may be pregnant, nursing, have a history of an eating disorder, or have another medical condition, please talk to your doctor before using Murph.

Murph © 2025–2026

Brand Guidelines

Warm signal,
quiet horizon.

Murph imagery feels spacious, warm, and quietly cinematic. Real light, real distance, no performance theatre.

Logo

Murph logo on light
Murph logo on dark

The mark is a field of quiet data points drawn into a warm center. Clarity without coldness — evidence, care, and measurable change.

Use the wordmark on light and dark backgrounds. Keep it calm, spacious, and uncluttered. Don't lock it up with taglines.

Palette

Dark

#1A1F16

Olive

#6B7F5A

Sage

#B5C4A1

Amber

#C4956A

Deep Amber

#8B6840

Cream

#FAF8F4

Typography

Fraunces

Fraunces

Serif — headlines & wordmark

Weights 400, 600 · Optical size 9–144

DM Sans

DM Sans

Sans — body, labels & UI

Variable weight · Subsets latin

Display

Fraunces 400 · –0.03em

Body text stays in DM Sans at comfortable reading sizes with generous line height.

DM Sans 400 · 16px

Section Label

DM Sans 500 · 11px · 0.18em

Image Direction

Murph canonical hero — solitary figure on a warm horizon

Wide horizon. Small figure. Warm light. Room for copy.

Big horizon, small human

Wide scenes with large negative space. One person held small, off-center, near an edge. The scene stays open and breathable.

Warm light over loud color

Amber-gold sunrise or sunset light, soft haze, low-contrast tonal shifts. If it feels neon, icy, or synthetic — it's not Murph.

Calm before information

A quiet field where signal can emerge. No busy props, tech hardware, graphs, dashboards, or floating metrics.

Space for copy

Preserve a calm side for typography. When cropping, keep one clear text lane rather than centering the subject.

Avoid

Labs. Floating UI. Stock-wellness smiles. Neon. Glossy biohacker aesthetics. Saturated teal-purple gradients. Victory poses. Clinical sterility.

Interactive Hero Concept

cursor-reactive background

Cursor-reactive background

Data that moves softly around your attention.

Large blurred dot clusters drift in the background. Hover shifts the field gently instead of screaming for attention.

Start an experimentReduced motion → still image

Background CSS

/* Ambient dot-field layers */
background:
  radial-gradient(circle at 30% 60%, rgba(160,122,78,0.3) 0%, transparent 50%),
  radial-gradient(circle at 70% 35%, rgba(140,104,64,0.15) 0%, transparent 40%),
  radial-gradient(circle at 55% 80%, rgba(196,149,106,0.12) 0%, transparent 35%);

/* Photo overlay — hero & OG */
background: linear-gradient(180deg,
  rgba(26,31,22,0.12) 0%, rgba(26,31,22,0.50) 100%);

Background Explorations

Testing built-in gradient types against the Murph motion language. Goal: large blurred fields, warm amber light, low-contrast motion.

Mesh Gradient

radial-gradient(
  circle at 45% 50%,
  rgba(210,190,140,0.6),
  rgba(200,170,120,0.3) 30%,
  rgba(230,220,200,0.5) 60%,
  #F0EBE0 80%
)

Multi-layer Radial

radial-gradient(circle at 40% 45%,
  rgba(140,104,64,0.5) 0%, transparent 30%),
radial-gradient(circle at 65% 55%,
  rgba(100,80,50,0.3) 0%, transparent 25%),
linear-gradient(180deg,
  #2A2518 0%, #1A1F16 100%)

AI Image Prompts

Starting points for generating hero images, social crops, and OG visuals with AI tools.

Prompt formula

Wide horizon. Lone figure. Warm haze. Low contrast. Real landscape.

Starter prompt

warm amber horizon lone figure near edge quiet negative space no UI overlays, no neon

Remember

Keep one calm side for copy. Let light carry the mood.