Style Guide

Typography

.heading-display — 64px / 600 / Hero H1

The quick brown fox jumps over the lazy dog

.heading-1 — 48px / 600 / Page titles

The quick brown fox jumps over the lazy dog

.heading-2 — 40px / 600 / Section headlines

The quick brown fox jumps over the lazy dog

.heading-3 — 32px / 600 / Subsection headers

The quick brown fox jumps over the lazy dog

.heading-4 — 24px / 600 / Small section labels

The quick brown fox jumps over the lazy dog

.heading-5 — 16px / 600 / Callouts, footer headers

The quick brown fox jumps over the lazy dog

.heading-6 — 14px / 600 / Badge labels, markers

The quick brown fox jumps over the lazy dog

.text-large — 20px / 400 / Hero subheads, lead paragraphs

Resource Monitor gives rural water systems real-time visibility into every meter, every day. No more guesswork, no more surprise water loss.

.text-body — 16px / 400 / Default body copy

Our platform connects to your existing AMI infrastructure and transforms raw meter data into actionable intelligence. Track usage patterns, detect anomalies, and reduce non-revenue water loss across your entire distribution network.

.text-small — 14px / 400 / Card copy, helper text

Supports all major AMI vendors including Badger, Neptune, Sensus, and Mueller. Data syncs every 15 minutes with automatic anomaly detection.

.text-caption — 12px / 400 / Captions, timestamps, fine print

Last updated March 4, 2026 • Data reflects most recent 24-hour billing cycle.

.text-label — 12px / 600 / Uppercase eyebrow text

HOW IT WORKS

.text-mono — 15px / 400 / Technical specs, model numbers

Flow Rate: 12.4 GPM • Model: SRII-250 • Read: 0048291

Colors

Brand Colors

Water

#294A66

Light Water

#265D7F

Sky

#C0DCF3

Mud

#E1D3C6

Light Mud

#FCFAF6

Slate Gray

#2F2D2D

Medium Gray

#ADACAC

Light Gray

#E3E4E5

Lightest Gray

#F4F4F6

White

#FFFFFF

Black

#000000

Link Blue

#2196F3

Alert Red

#D51313

Success Green

#0F9F02

Warning Orange

#DE7800

Pressure Yellow

#F2C94C

Buttons

Button Primary — solid Water blue fill, white text

Get Started Request Demo Request Demo

Button Outline — Water blue border, transparent fill

Learn More View Pricing

Button Secondary Small — Slate Gray, compact

Save Changes Apply Filter

Button Ghost Small — transparent, text-only style

Cancel Skip for Now

Form Elements

Form Label — 14px / 600 / Heading Navy

Email Address

Form Input — 15px / 400 / 6px radius / focus: Water blue border

System Name

This is some text inside of a div block.

Enter the name of your water system as it appears on your TCEQ registration.

Form Row — 2-column grid layout for side-by-side fields

First Name

This is some text inside of a div block.

Last Name

This is some text inside of a div block.

Form Helper — 12px / 400 / Caption gray, beneath inputs

This field is required. Please enter a valid 10-digit phone number.