Simple Healthcare
Brand

How Simple Healthcare looks

The logo, the palette, the typeface, and the gradients. What to use, when to use it, and how not to.

Logo and template downloadsSimple Blue, Portland Orange, KeppelManrope

Colors

Adopted

Four families, each an 11-step scale exposed as Tailwind utilities (bg-blue-600, text-orange-500, and so on). Blue is the brand; the rest have one job each.

Simple Blue

Brand
50
100
200
300
400
500
600
700
800
900
950

Portland Orange

Accent
50
100
200
300
400
500
600
700
800
900
950

Keppel

Data accent
50
100
200
300
400
500
600
700
800
900
950

Gray

Neutral
50
100
200
300
400
500
600
700
800
900
950

When to use which

ColorUse it for
Simple BlueEverywhere the brand needs to be felt: headers, primary buttons, headings on dark, links. The dominant color on any screen or page.
Portland OrangeOne accent per screen. The single call to action, the eyebrow dot, a caveat or estimate. If two things are orange, neither is the accent.
KeppelCharts and data visualization, so a series color never gets confused with a status color. Not for buttons or text.
GrayText, borders, and surfaces. Cool-tinted to sit with the blue; never mix in a warm or neutral gray from another palette.
WhiteThe default surface. Most of a Simple screen is white; the palette is what sits on it.
Don’t
Put orange and teal side by side as decoration.
Do
Blue and white carry the brand. Orange appears once; teal only in charts.
Don’t
Use the mid steps (300 to 500) as backgrounds for text.
Do
Text sits on 50 to 100 tints or on 800 and darker. The mid steps are for buttons, charts, and fills that carry no text.
Don’t
Combine blue and orange text on the same surface.
Do
One colored text at a time. Body text is gray; colored text is a link or a status, never both on one line.
Don’t
Reach for a color outside the four families.
Do
Green and red exist for success and error only. Everything else is blue, orange, teal, or gray.

Contrast ratios, semantic roles (success, warning, danger), and dark mode are covered on Foundations.

Type

Adopted

One typeface. Manrope is a geometric sans with a large x-height that stays legible at the small sizes healthcare data demands.

ManropeAa Bb Cc Dd Ee Ff Gg 0123456789
Regular 400Medium 500Semibold 600Bold 700Extrabold 800
Noto Sans Mono$1,240.00 · CPT 99213 · 2026-09-17

For code, identifiers, and columns of numbers. Never for headings or emphasis.

Headings

Bold or Semibold, tight tracking, blue-900 on light and white on dark. Sentence case, not Title Case.

Body

Regular, gray-700, relaxed leading. 14px in product screens, 16px in documents and marketing.

Labels

Bold, uppercase, wide tracking, 12px. Eyebrows, tags, and table headers. Use sparingly; more than one per screen region turns to noise.

Both typefaces are free under the SIL Open Font License and available from Google Fonts: Manrope and Noto Sans Mono. The full type scale, line heights, and readability rules are on Foundations.

Gradients

Adopted

Three blue gradients, all running top-left to bottom-right across two adjacent steps of the scale. The subtle shift adds depth without reading as a second color.

Light blueblue-100 → blue-200
Bright blueblue-500 → blue-600
Dark blueblue-700 → blue-800
GradientClassUse for
Light bluebg-gradient-to-br from-blue-100 to-blue-200Tinted panels, feature callouts, and slide backgrounds that hold dark text.
Bright bluebg-gradient-to-br from-blue-500 to-blue-600Buttons, stat tiles, and small hero elements that hold white text.
Dark bluebg-gradient-to-br from-blue-700 to-blue-800Page heroes, title slides, footers. The light logo sits on this.

Keep the direction

Always to-br: light corner top-left, dark corner bottom-right. A gradient running the other way, or across non-adjacent steps, reads as a different brand.

Branding in documents and slides

Proposed

The same rules, applied outside the product: reports, decks, one-pagers, and proposals. The goal is that a slide and a screen look like the same company made them.

ElementRule
Title slide, cover pageDark blue gradient with the light full logo top-left. Title in white Manrope Bold, subtitle in blue-100.
Content slides, body pagesWhite background, dark full logo small in a corner. Headings blue-900, body gray-700.
Section dividersLight blue gradient with blue-900 text. Give the section number in orange-600.
TablesBlue-900 header text on blue-50, gray-200 rules, no vertical lines. Numbers right-aligned in Noto Sans Mono.
ChartsKeppel for the primary series, blue-600 for the second, gray-400 for context. Orange only to highlight one point.
Callouts and estimatesOrange-50 panel with orange-800 text, mirroring the Callout component, so a caveat looks the same in a deck as in the app.
FooterPage number, document title, and "Simple Healthcare" in gray-500 12px. Nothing else.
Simple Healthcare
2026 Price Transparency Report
Prepared for Acme Benefits · September 2026
Median rates by facility
Simple Healthcare12

Templates

Word document

Reports, one-pagers, and proposals. Cover page, heading styles, and table style are pre-set.

PowerPoint deck

Title, section divider, and content layouts with the logo and gradients in place.

Don’t
Use the presentation tool's default theme fonts (Calibri, Arial, Inter).
Do
Install Manrope on any machine that edits Simple documents. Fall back to a system sans only for export to recipients who cannot install fonts.
Don’t
Fill every slide with the dark gradient.
Do
One dark slide to open, one to close. The middle is white so charts and tables read.
Don’t
Add clip art, stock photography of stethoscopes, or emoji.
Do
Use the Icons set at a single color, or no imagery at all. The data is the picture.