Design System · v1.0 · July 2026
The EverBetter design system
One brand across website, product marketing, and email — clinical calm with one exuberant thread: the rainbow infinity. This page is the source of truth for anyone building in the EverBetter brand.
Logo
Primary wordmark — light surfaces. /images/everbetter-logo.png
Reversed wordmark — navy / dark surfaces. /images/everbetter-logo-white.png
The mark alone — favicons, avatars, small spaces. /images/everbetter-mark.png
- Clearspace: keep at least the height of the “E” around the wordmark.
- Never recolor the mark, stretch it, or place the black wordmark on dark surfaces.
- The ™ ships with the wordmark asset — don’t re-add it in text next to the logo.
- Only the assets above are approved — no redrawn, animated, or SVG re-creations of the mark.
Color
Clinical ice and deep navy carry the interface; blue carries action. Click any chip to copy its hex.
Light mode — the default experience
Dark mode — navy sections & adaptive email
The infinity gradient
Sampled from the logo. Use as one thread, not a wash: the header hairline, the email top bar, a serif-italic phrase in a hero, list markers on navy. Never as large fills, button colors, or body text.
Typography
Plus Jakarta Sans
AaBbCcDdEeFf 0123456789
The workhorse — every weight from 400 to 800. Self-hosted variable font.
Fraunces italic only
The art and science of healing
The editorial voice — italic accents inside headlines and pull quotes. One phrase per screen, never body text.
More than an EHR.
Clinical excellence, delivered.
Stop cursing your software.
AI-Native Intelligence
EverBetter was built by a physician to end the torture of a thousand clicks.
J Gen Intern Med, 2023
Components
Buttons
Card
AI Clinical Timeline
Labs, genomics, wearables, journals and notes in one longitudinal picture that updates continuously.
Stat
J Gen Intern Med, 2023
Form field
Dark mode is used on navy website sections and in email dark mode — same components, token-swapped. Emails adapt automatically via prefers-color-scheme; the site uses explicit navy sections.
Voice & principles
We do
- Physician-founded warmth: “built by a clinician, for clinicians.”
- Concrete claims with citations — every statistic sourced and dated.
- Honest comparisons: name what competitors do well.
- Serif italics for the emotional beat; sans for everything factual.
- One rainbow moment per screen — it’s the signature, not the wallpaper.
We don’t
- Uppercase eyebrow kickers above H1s, or decorative label bars.
- Emoji as feature icons — line-drawn SVG only.
- Gradient-clipped stat numbers or gradient text outside brand moments.
- Unsourced numbers, “revolutionary/game-changing,” or competitor bashing.
- Dark patterns anywhere — including email (visible unsubscribe, honest subjects).
Asset index
| Asset | Path | Use |
|---|---|---|
| Wordmark (light) | /images/everbetter-logo.png | Headers, light surfaces |
| Wordmark (dark) | /images/everbetter-logo-white.png | Navy surfaces, email dark mode |
| Infinity mark | /images/everbetter-mark.png | Favicons, avatars |
| Founder portrait | /images/dr-david-haase.webp · -sm.webp | Quotes, about, email signatures |
| Platform screenshot | /images/platform-overview.png | Heroes, ads |
| Pre-visit UI | /images/pre-visit.webp | Product context |
| Visit flow strip | /images/visit-progress-bar.png | Pre-visit alignment story |
| Team portraits | /images/team/*.webp | Team page, internal |
| OG card | /images/og-default.png | Social sharing |
| Email templates | emails/*.html (repo) | GHL, via scripts/build_email_templates.py |