---
name: simple-healthcare-style-guide
description: How Simple Healthcare products look, sound, and are built. Use when writing UI, copy, documents, or slides for Simple Healthcare, or when using the simple-shared-react component library.
---

# Simple Healthcare style guide

Canonical source: https://guide.simplehc.com. This file is a map, not a copy. Follow the links for values, tables, and examples.

Simple Healthcare is an independent healthcare price and access platform. Products: Roadmap (plan sponsors, advisors), Landscape (analysts), Search (patients). Stack: React 19, Next.js, Tailwind 4, `motion/react`, and the shared `simple-shared-react` package (components, `base.css` palette and element styles, fonts).

Every section on the site carries a status: **Adopted** (what ships today), **Draft**, **Proposed**, or **Not started**. Treat Adopted as fact and the rest as the intended direction. Where code and recommendation disagree, the page says so.

## Pages

| Page | URL | Covers |
|---|---|---|
| Brand | https://guide.simplehc.com/brand | Logo files and rules, palette, typeface, gradients, documents and slides |
| Design language | https://guide.simplehc.com/design-language | Vision, principles, tone of voice, terminology, accessibility, writing, microcopy, i18n |
| Foundations | https://guide.simplehc.com/foundations | Tokens: color contrast, layout, type scale, elevation, motion, iconography |
| Core components | https://guide.simplehc.com/core-components | Every shared component with a live demo and a checklist audit |
| Products | https://guide.simplehc.com/products | Search, Landscape, Roadmap: audience, UI shape, lockups, density profiles, naming |

## Non-negotiables

Rules that hold everywhere. Details and rationale are at the linked sections.

**Color** ([/brand#colors](https://guide.simplehc.com/brand#colors), [/foundations#color](https://guide.simplehc.com/foundations#color))
- Four families, each an 11-step Tailwind scale: `blue` (Simple Blue, brand), `orange` (Portland Orange, accent), `teal` (Keppel, charts only), `gray` (cool-tinted neutral). `green` and `red` exist for success and error only.
- One orange accent per screen. Teal never on buttons or text. Never a raw hex in a component; add a token to `base.css` instead.
- Never color alone: pair status color with text or an icon. Semantic roles and dark mode: [/foundations#color-semantic](https://guide.simplehc.com/foundations#color-semantic), [/foundations#color-dark](https://guide.simplehc.com/foundations#color-dark).

**Type** ([/brand#type](https://guide.simplehc.com/brand#type), [/foundations#typography](https://guide.simplehc.com/foundations#typography))
- Manrope for everything; Noto Sans Mono for code, identifiers, and columns of numbers only.
- Element styles in `base.css` set the scale (h1 24px … p 14px). Use semantic HTML and override with scale steps (`text-2xl!`), never arbitrary sizes.
- Sentence case for headings, buttons, labels, and tags.

**Layout** ([/foundations#layout](https://guide.simplehc.com/foundations#layout))
- 4px grid via Tailwind spacing. `gap` on parents, not margins on children. Containers: `max-w-2xl` prose, `max-w-4xl` pages, `max-w-6xl` data. Gutters `px-6 sm:px-8`. Mobile-first Tailwind breakpoints.
- Radius: `rounded` (4px) controls, `rounded-md` cards, `rounded-lg` floating surfaces, `rounded-full` pills. Outer radius ≥ inner. See [/foundations#layout-radius](https://guide.simplehc.com/foundations#layout-radius).

**Elevation and motion** ([/foundations#elevation](https://guide.simplehc.com/foundations#elevation), [/foundations#motion](https://guide.simplehc.com/foundations#motion))
- Five elevation levels, flat to overlay, mapped to `shadow-*` classes. Every overlay is `z-50` today; a layered scale is proposed.
- All animation uses `motion/react`. No CSS keyframes or Tailwind `animate-*`. Enter pattern: fade in, scale from 0.95, short slide from the origin; `easeOut`, 200–300ms.

**Icons** ([/foundations#iconography](https://guide.simplehc.com/foundations#iconography))
- `<Icon icon="Name" size="sm|md|lg|xl"/>` (16/20/28/36px), PascalCase names keyed by purpose, `currentColor`. Reserved icons (X, Trash, Pencil, Plus, Search, Funnel, ChevronDown, Info, TriangleAlert, CircleCheck, CircleX, Outbound) mean one thing everywhere.

**Logo and gradients** ([/brand#logo](https://guide.simplehc.com/brand#logo), [/brand#gradients](https://guide.simplehc.com/brand#gradients))
- Two colorways only: dark on light surfaces, light on blue-800 and darker. Files at `/logos/Logo-Full-{Dark,Light}.svg` and `/logos/Logo-{Dark,Light}.svg` (mark). Never recolor, box, or shadow.
- Three gradients, always `bg-gradient-to-br` across two adjacent blue steps.

## Voice and copy

Full guidance: [/design-language#voice](https://guide.simplehc.com/design-language#voice), [#writing](https://guide.simplehc.com/design-language#writing), [#microcopy](https://guide.simplehc.com/design-language#microcopy), [#terminology](https://guide.simplehc.com/design-language#terminology).

- Plainspoken, evidence-led, confident, warm. Lead with the answer; show sources and caveats rather than hiding them. Estimates are labeled as estimates.
- Second person, active voice, Oxford comma, no exclamation points. Currency `$1,240`, ranges `$980–$1,410`, dates `September 16, 2026` in prose and ISO 8601 in tables.
- Buttons are verb + object ("Save plan"). Errors say what happened and what to do next. Callouts: orange = caveat, blue = context, green = done.
- Use the terminology table for domain words (negotiated rate, cash price, estimate, in network, facility, provider, plan sponsor, billing code, published prices).

## Components

Catalog with demos and per-item audits: https://guide.simplehc.com/core-components. Import from `simple-shared-react` (`@shared/components/*`).

Shipped: `Button`, `Tabs`, `TabLinks`, `Pagination`, `Dropdown` (a value picker with search, multi-select, and async options, not a menu), `Toggle`, `Password`, `Range`, `Callout`, `Toast` (`ToastProvider` + `useToast()`), `Info` (tooltip), `Modal`, `Loading`, `LoadingSkeleton`, `Card`, `Tag`, `Code`, `Icon`. Native `input`, `textarea`, `select`, `ul`/`ol` are styled by element in `base.css`.

Not built yet: breadcrumbs, dropdown menu, styled checkbox and radio, calendar, progress bar, accordion, carousel, avatar. Check the page before assuming a component exists.

Known cross-cutting gaps: `Button` does not forward `aria-*` props, icon-only close buttons lack accessible names, and nothing honors `prefers-reduced-motion`. Contrast failures and their fixes: [/foundations#color-a11y](https://guide.simplehc.com/foundations#color-a11y).

## Products

Three products, one brand: https://guide.simplehc.com/products. They are told apart by density, lockup, and gradient tone, never by a product-specific color.

- **Simple Search** (patients, free): one task per screen, 16px body, cards not tables, plain language, phone first. Bright blue gradient.
- **Simple Landscape** (analysts, free and paid tiers): tables first, persistent visible filters, wide `max-w-6xl` container, sources and dates on every dataset. Light blue gradient, marketing only.
- **Simple Roadmap** (brokers, advisors, plan sponsors, paid): persistent sidebar and breadcrumbs, progressive disclosure (tiles → chart → table), 14px body and 12px tables, every chart has a takeaway. Dark blue gradient, covers only.
- Lockup: full logo + hairline + product name in Manrope Semibold. Product glyphs: Search=`Search`, Landscape=`Database`, Roadmap=`ChartBar`, always beside the name. Full name ("Simple Search") on first mention and outside the product; short name inside. Tiers are a Tag, not a color. Density table: [/products#density](https://guide.simplehc.com/products#density).

## Documents and slides

Rules for decks, reports, and one-pagers: [/brand#documents](https://guide.simplehc.com/brand#documents). Dark blue gradient cover with the light logo, white content pages with the dark logo, Manrope throughout, Keppel for the primary chart series, orange to highlight a single point.