Lead with the answer
Give readers the useful conclusion first, then provide the evidence and qualifications that support it.
Design system · Version 1.0
Clear by design.
A practical visual language for making public water information calm, credible, and easy to act on.
Our interface should feel like a careful editor and a useful field guide: direct, spacious, evidence-led, and human.
Utah Water Quality · 202601 / Principles
Trust comes from clarity.
Make sources visible
Dates, units, providers, limitations, and official references should be easy to find and understand.
Use emphasis sparingly
Coral signals action and focus. It should guide attention without implying alarm or becoming decoration.
Let information breathe
Generous spacing and strong hierarchy turn dense public records into calm, scannable reading.
02 / Color
Warmth without noise.
Our palette is mostly neutral. Coral marks primary action; blush softens illustrations and supporting moments. Status colors belong to data, never decoration.
Ink
--ink#18181B
Coral
--blue#F0503C
Blush
--blue-light#FBC9BF
Paper
--paper#FFFFFF
Mist
--paper-deep#F4F4F5
Muted
--muted#71717A
60 / 30 / 10
Let white and mist carry roughly 60% of a page, ink and quiet neutrals 30%, and coral or blush no more than 10%.
03 / Typography
One family. Many voices.
Google Sans Flex keeps the system clear and adaptable. Scale, weight, optical size, and spacing—not extra typefaces—create hierarchy.
Understand the water where you live.
Official answers, clearly explained.
Public water is routinely monitored. Your local system and home plumbing complete the picture.
Use sentence case, short paragraphs, and familiar language. Explain technical terms at first use and keep the most important qualification close to the claim it modifies.
DATA REVIEWED · JULY 2026
05 / Components
Useful, quiet, responsive.
Actions
Primary for the page’s main task. Secondary for alternatives. Text links for supporting routes.
Form controls
Use a visible label and specific example. The focus ring must never rely on color alone.
Cards
Cards organize related choices. Keep the whole card clickable only when it has one destination.
Provo City
Official reports, source water, current status, and reviewed measurements.
Open report ↗Detection does not always mean violation.
Compare the result, unit, limit, and reporting period before drawing a conclusion.
See methodology ↗Status language
Pair color with a plain-language label and an explanation of what is known.
Current
Source data is available and within the expected update window.
Review needed
Information may be older or incomplete. Check the named authority.
Not available
The source does not provide enough information to make a claim.
06 / Content
Write for the next decision.
Readers usually arrive with a concern. Answer the question without exaggerating certainty, then offer the next useful step.
“Lead can enter water through home plumbing. A tap sample provides home-specific information.”
Specific, calm, and clear about the limit of a system-wide report.
“Your water is completely safe and lead-free.”
Absolute claims hide uncertainty and go beyond what public system data can establish.
Say “legal limit” before introducing “maximum contaminant level (MCL).”
Use “the available data shows” instead of “we guarantee.”
End with the source, contact, test, or report that helps the reader move forward.