Products

One brand, three products

How Search, Landscape, and Roadmap are labeled and represented, and how they are told apart without breaking the brand.

Simple SearchSimple LandscapeSimple Roadmap

The position this page takes

Products are differentiated by density, lockup, and gradient tone, not by color. Every product uses the same palette, type, components, and voice. What changes is how much fits on a screen and how the reader moves through it. The identity proposals below have not been through a branding pass.

Adopted

Draft

Proposed

Not started

The lineup

Three products, three audiences, one company. Each is described by the job it does and the shape of interface that job needs.

Lineup

Draft

Who each product is for and what it has to do well. The audiences also appear on the Design language page under Vision.

SearchPatients, and anyone paying for careFree, no account LandscapeAnalysts, researchers, and data teamsFree and paid tiers RoadmapBrokers, licensed advisors, and self-insured employersPaid

Product	Audience	The job	Shape of the UI
Search	Patients, and anyone paying for care	A straight answer about what care will cost, before committing to it.	The most public thing we make. One question per screen, and the answer should feel obvious.
Landscape	Analysts, researchers, and data teams	Browse, filter, and export price transparency data. The data is the product.	A workbench. The interface gets out of the way of the table.
Roadmap	Brokers, licensed advisors, and self-insured employers	Analytics, benchmarking, and strategy for the health plans they fund.	The most complex product. Navigation and comprehension carry the load so the analysis can stay deep.

Audiences and what they need from us are also on Design language.

Simple Search

Draft

The most public thing we make. One question per screen, and the answer should feel obvious.

Who: Patients, and anyone paying for care
Pricing: Free, no account
The job: A straight answer about what care will cost, before committing to it.

Design for

One task per screen. A search, then a result. Filters are a second step, never the first.
Generous space and larger type: 16px body, lg buttons, a single primary action.
Results are cards, not tables. Every number carries its label: median, estimate, cash price.
Plain language throughout. A billing code is never shown without its name.
Phone first. Most readers arrive from a search engine on a phone, often in a stressful moment.

Reach for

Button (lg), Card, Callout (orange for estimates), Tag, LoadingSkeleton, and the Bright blue gradient for the hero.

Avoid

Dense tables, multi-step filters, jargon, and anything that requires an account to see a price.

Simple Landscape

Draft

A workbench. The interface gets out of the way of the table.

Who: Analysts, researchers, and data teams
Pricing: Free and paid tiers
The job: Browse, filter, and export price transparency data. The data is the product.

Design for

Tables first: sortable columns, sticky headers, mono numbers with tabular figures, right-aligned.
Filters are persistent and visible. They survive navigation and are never hidden behind a modal.
Every dataset shows its source, its published date, and its row count.
Export and API access are one click from any view, and the paid tier is labeled, not implied.
Wide container (max-w-6xl) so columns have room. Prose is rare and kept to a reading column.

Reach for

Table element styles, Dropdown (multi-select, search, async), Pagination, TabLinks, Range, Code for identifiers, Tag for tiers.

Avoid

Marketing chrome inside the app, hidden filters, and charts that replace the table instead of summarizing it.

Simple Roadmap

Draft

The most complex product. Navigation and comprehension carry the load so the analysis can stay deep.

Who: Brokers, licensed advisors, and self-insured employers
Pricing: Paid
The job: Analytics, benchmarking, and strategy for the health plans they fund.

Design for

A persistent sidebar, breadcrumbs, and one page template, so every analysis is found the same way.
Progressive disclosure: summary tiles, then the chart, then the table, then the export.
Dense but not cluttered: 14px body, 12px in tables, gap-4 between blocks, sm controls in toolbars.
Every chart has a title, a one-sentence takeaway, and a source. Keppel for series, orange for one highlight.
Definitions live in Info tooltips next to the term, so an advisor can explain a number to a client.

Reach for

Tabs, Card, Info, Modal for drill-ins, Toast for long exports, Dropdown for scope pickers (plan, period).

Avoid

Hero sections, oversized type, a second accent color, and charts without a takeaway.

Telling them apart

Same brand, recognizably different products. The proposals here use assets and tokens that already exist; nothing new is drawn or added to the palette.

Identity

Proposed

One logo, three lockups. The product name joins the full logo after a hairline, set in Manrope Semibold at the wordmark's cap height. Each product also owns one glyph from the icon set.

Landscape

Roadmap

Landscape

Paid tier

Roadmap

Landscape

Roadmap

Product glyphs

Reserved for the product, in the same sense as the reserved icons on Foundations. They only ever appear beside the product name, in app switchers, tags, cross-product links, and navigation.

Product	Name	Why
Search	`Search`	Already the reserved search icon. Beside the product name it reads as the product; alone it stays the action.
Landscape	`Database`	The product is the dataset.
Roadmap	`ChartBar`	The product is the analysis.

Don’t

Draw a new logo for a product, or recolor the mark to tell products apart.

One mark, one wordmark. The product name sits beside it in Manrope Semibold, separated by a hairline.

Don’t

Set "Simple Search" as one run of text in place of the logo.

The lockup keeps the real wordmark. The typed product name is only ever the second half.

Don’t

Use a product glyph on its own as if it were a logo.

Product glyphs appear with the product name, in switchers, tags, and nav. Alone, the mark is the only symbol.

Don’t

Shrink the full lockup until the product name is unreadable.

Below 24px tall, switch to the compact lockup: mark plus product name.

Color

Proposed

No product gets its own hue. Tone comes from which of the three Brand gradients a product uses in its hero, cover, and switcher tile.

Why not a color per product

The palette has four families with one job each. Orange means caveat and teal means chart series, and Roadmap is where the charts are. Giving a product either color breaks the meaning; adding a fifth family breaks the Brand rule. Either way, two products stop looking like one company.

SearchBright blue

LandscapeLight blue

RoadmapDark blue

Product	Gradient	Reads as	Where it appears
Search	`from-blue-500 to-blue-600`	Bright, open, consumer	Search hero, app switcher tile, social cards
Landscape	`from-blue-100 to-blue-200`	Light, quiet, a work surface	Marketing pages and section dividers. Never inside the workbench.
Roadmap	`from-blue-700 to-blue-800`	Dark, dense, serious	Title slides, report covers, login screen. Never inside the dashboard.

Gradient rules (direction, adjacent steps) are on Brand.

Don’t

Make Landscape teal and Roadmap orange so users can tell the tabs apart.

All three stay Simple Blue. Buttons, links, nav, and focus rings are identical across products.

Don’t

Use the product gradient as a button or panel background inside the app.

The gradient marks the product in heroes, covers, switcher tiles, and marketing. In-app chrome does not change.

Don’t

Tint a Roadmap dashboard darker "because it is the serious one."

Density carries seriousness. Surfaces are white on gray-100 in every product.

Density

Proposed

The real differentiator. Three profiles that pick different values from the same Foundations scales, so a Search result and a Roadmap dashboard share every token and none of the settings.

Token	Search	Landscape	Roadmap
Body text	16px (text-base)	14px (default)	14px; 12px in tables (text-xs)
Page container	max-w-3xl, centered	max-w-6xl	Full width beside a fixed sidebar
Between sections	gap-16	gap-8	gap-4 / gap-6
Card padding	p-6	p-5	p-4
Table rows	None; results are cards	py-3 (44px)	py-2 (36px)
Buttons	lg, one primary per screen	md	sm in toolbars, md for the primary action
Navigation	Header only. One path forward.	TabLinks across the top, filter rail on the left	Persistent sidebar plus breadcrumbs
Headings	Hero title steps up to md:text-5xl	Default element scale	Default; tile labels use h5
Motion	Full enter transitions and page reveals	Standard component transitions	Instant and Fast only; no page reveals
Hero	Yes, Bright blue gradient	Marketing pages only, Light blue	Never inside the app; Dark blue for covers and decks

Same tokens, different settings

Every cell above is a class from the layout, type, or motion scales. If a product needs a value that is not on a scale, the scale is wrong, not the product.

Landscape

Roadmap

Naming and tiers

Proposed

How to write the product names, and how a paid tier is labeled without becoming a fourth brand.

Product	Full name	In the product	Never
Search	Simple Search	Search	SimpleSearch, the Search tool, Simple search
Landscape	Simple Landscape	Landscape	SimpleLandscape, the data portal, Landscape Pro (until tiers are named)
Roadmap	Simple Roadmap	Roadmap	SimpleRoadmap, the analytics platform, the dashboard

Rule	Detail
Full name first	Simple Search on first mention and anywhere outside the product: marketing, documents, emails, the other two products. Inside, the lockup establishes context and the short name is enough.
Proper nouns	Search, Landscape, and Roadmap are capitalized when they mean the product. "Search for a facility" is a verb; "open Search" is the product.
"Simple" alone is the company	Never "in Simple" to mean a product. Name the product.
Tiers are tags, not brands	A paid tier is a Tag next to the product name in the lockup and in pricing copy. It never changes the logo, the color, or the product name.
Cross-product references	When one product points at another, render the product glyph and name inline, and link with the Outbound icon. "See the full dataset in Landscape" not "click here."

Tier names are not decided

Landscape has free and paid tiers with no agreed names. Until there are, copy says "the paid tier" and the lockup shows a

Paid tier

tag. Name the tiers before anything ships with a placeholder.