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 trackingtiny.7rem · 10.5px / 9.1px500Snake Riversmall labels and timestamps
uppercase as field label (NOW, DATA TYPE) · mixed case as contentcaption.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
Color-Ramp Mapped to Current Data Types
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
Dissolved oxygen
Stressful#FFCAA4 · 3–5 mg/L
Sub-optimal#7DD4EC · 5–7 mg/L
pH
Too Alkaline#FE9A79 · >9.5
Slightly Alkaline#FFF5E8 · 9.0–9.5
Slightly Acidic#FFF5E8 · 6.0–7.0
Discharge
Well Below Normal#FE9A79 · <P10
Below Normal#FFF5E8 · P10–P25
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
Lake elevation
Very Low Pool#FE9A79 · <P10
Low Pool#FFF5E8 · P10–P25
High Pool#68A6CF · P75–P90
Data Variable Colors
Color blind preview
True
#5216A0#006AA5#CA5012#E05CA5#73601B#38A67E
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.