Snake River Headwaters Watershed GroupData Dashboard Style Guide
Snake River Headwaters Data Dashboard - proposed design system · Draft 2 · September 20 2026 · Maddy Grubb Maps

Typography

The dashboard will use Poppins — the same typeface the Snake River Headwaters Watershed Group uses on its website, so the dashboard and the site will have one continuous feel.
Type Size
Steprem · phone / desktopWeightSampleUsed for
micro.62rem · 9.3px / 8.06px600Snake Riverbadges and HIGH/LOW tags
always uppercase · 1px tracking
tiny.7rem · 10.5px / 9.1px500Snake Riversmall labels and timestamps
uppercase as field label (NOW, DATA TYPE) · mixed case as content
caption.78rem · 11.7px / 10.14px500Snake Riverchart captions and navigation labels
small.85rem · 12.75px / 11.05px600Snake Riversection titles and buttons
body-s.9rem · 13.5px / 11.7px400Snake Riverdetail-panel text and messages
body1rem · 15px / 13px400Snake Riverregular text and subtitles
lead1.1rem · 16.5px / 14.3px700Snake Riverhighlighted readings
title1.4rem · 21px / 18.2px600Snake Riversummary numbers and panel titles
heading1.75rem · 26.25px / 22.75px600Snake Riverstation names
Type Color
Primary Text
Secondary Text: supporting detail and explanations
Faint Text: timestamps, footnotes, and hints
Primary Text
Secondary Text: supporting detail and explanations
Faint Text: timestamps, footnotes, and hints
All text will fit into one of three categories: Primary, Secondary, or Faint. Text should be classified based on importance, and this will naturally be reflected in a high contrast tn lower contrast theme, that immediately draws viewers to the important text first, and then reveals further details upon closer inspection. This already matches the theme of the dashboard, but will consolidate many colors and variations into three simple bins.

Interface colors

#231F51
Header / nav navyheaders, bottom nav
#65C197
Active greenactive / selected
#e8e8e8
Data-type bar48px, tablet+desktop
#ffffff
Surface whitepopups, cards, pills text plates
#659AD2
Hover accentinteractive hover

Data Read Colors

Every reading on the dashboard will use one consolidated color-ramp: colorblind, and contrast friendly. This color-ramp is applied across all data sources using standard principles of high-low, or ideal to poor conditions based on a fish-based system, to get a visually consistent and quick read on any data source independently or comparatively.
True
#750012#A23400#B55F00#C88800#0E768C#024D71#002144
Color blind preview
Protanopia
Deuteranopia
Tritanopia
Color-Ramp Mapped to Current Data Types
Water temperature
Dangerous Exposure
73+ °F
Mortality Risk
70–73 °F
Stressful
68–70 °F
Semi-stressful
66–68 °F
Sub-optimal
62–66 °F
Optimal Habitat
50–62 °F
Cold
<50 °F
Dissolved oxygen
Lethal
<3 mg/L
Stressful
3–5 mg/L
Sub-optimal
5–7 mg/L
Optimal
>7 mg/L
pH
Too Alkaline
>9.5
Slightly Alkaline
9.0–9.5
Healthy
7.0–9.0
Slightly Acidic
6.0–7.0
Too Acidic
<6.0
Discharge
Well Below Normal
<P10
Below Normal
P10–P25
Normal
P25–P75
Above Normal
P75–P90
Well Above Normal
>P90
Turbidity
Very Turbid
50+ FNU
Turbid
25–50 FNU
Slightly Turbid
5–25 FNU
Clear
<5 FNU
Lake elevation
Very Low Pool
<P10
Low Pool
P10–P25
Typical
P25–P75
High Pool
P75–P90
Near Full
>P90
Color-Ramp Alternate Symbol Tier
For map symbology, the same colors are brightened slightly so the dots stand out against the terrain, and every dot gets a thin white ring. Stations that aren’t reporting show as a neutral grey.
#9a0018
#d64500
#e37700
#C88800
#129cb9
#036695
#002c5a
#6b6b6b no data
Color-Ramp Alternate Chart Tier
For chart fills and band backgrounds, the same ramp lifted +0.30 OKLCH lightness (chroma pulled in where the lift leaves gamut), so plotted lines and black ink stay readable on top while each band keeps its condition hue.
Chart
#DA6965#FE9A79#FFCAA4#FFF5E8#7DD4EC#68A6CF#5F82AC
Alternate Chart Tier Mapped to Current Data Types
Water temperature
Dangerous Exposure
#DA6965 · 73+ °F
Mortality Risk
#FE9A79 · 70–73 °F
Stressful
#FFCAA4 · 68–70 °F
Semi-stressful
#FFF5E8 · 66–68 °F
Sub-optimal
#7DD4EC · 62–66 °F
Optimal Habitat
#68A6CF · 50–62 °F
Cold
#5F82AC · <50 °F
Dissolved oxygen
Lethal
#DA6965 · <3 mg/L
Stressful
#FFCAA4 · 3–5 mg/L
Sub-optimal
#7DD4EC · 5–7 mg/L
Optimal
#68A6CF · >7 mg/L
pH
Too Alkaline
#FE9A79 · >9.5
Slightly Alkaline
#FFF5E8 · 9.0–9.5
Healthy
#68A6CF · 7.0–9.0
Slightly Acidic
#FFF5E8 · 6.0–7.0
Too Acidic
#FE9A79 · <6.0
Discharge
Well Below Normal
#FE9A79 · <P10
Below Normal
#FFF5E8 · P10–P25
Normal
#7DD4EC · P25–P75
Above Normal
#68A6CF · P75–P90
Well Above Normal
#5F82AC · >P90
Turbidity
Very Turbid
#FE9A79 · 50+ FNU
Turbid
#FFCAA4 · 25–50 FNU
Slightly Turbid
#FFF5E8 · 5–25 FNU
Clear
#7DD4EC · <5 FNU
Lake elevation
Very Low Pool
#FE9A79 · <P10
Low Pool
#FFF5E8 · P10–P25
Typical
#7DD4EC · P25–P75
High Pool
#68A6CF · P75–P90
Near Full
#5F82AC · >P90

Data Variable Colors

#5216A0
Discharge
#006AA5
Water temp
#CA5012
pH
#E05CA5
Dissolved oxygen
#73601B
Turbidity
#38A67E
Lake elevation
Color blind preview
True
#5216A0#006AA5#CA5012#E05CA5#73601B#38A67E
Protanopia
Deuteranopia
Tritanopia

Custom Basemap

This shows a draft of what the basemap will look like when live. The map will highlight the hydrologic network of the Snake River Headwaters, with varying line widths for each reach based on gage-adjusted annual flow estimates provided by NHDPlus. The basemap will also give context to watershed topography and boundaries, and create a clearer understanding of the watershed for viewers at a glance, while allowing live site data to be the most prominent thing on the page. The basemap could optionally show the road network, town names, and public land boundaries, or eventually incorporate recreation sites.
Snake River Headwaters dashboard basemap