A design system inspired by USGS survey maps, contour lines, and the art of cartography
Colors derived from the natural elevation spectrum of cartographic maps, from deep waterways through lowland forests to snow-capped peaks.
Three type families modeled after cartographic conventions: a serif display face for map titles, a clean sans-serif for labels, and a monospace for coordinates and technical data.
A consistent spacing system based on a 4px base unit, like the measured grid intervals on a USGS quadrangle map.
Control elements styled after map legend entries and survey tool interfaces, with contour-line inner borders.
Data entry elements for survey coordinates, feature names, and elevation measurements.
Content panels styled as map legend entries and terrain survey data sheets, each with a terrain-type header.
Dense old-growth forest along the river corridor. Moderate canopy cover with Douglas fir and western red cedar dominant species.
Exposed ridgeline above treeline with panoramic views. Alpine wildflower meadows surround the maintained trail system.
Glacially carved alpine lake at the base of the Tatoosh Range. Fed by snowmelt and seasonal streams.
The true summit of Mount Rainier and highest point in Washington state. Permanent snow and ice cover with active volcanic fumaroles.
Status and notification messages styled after map margin notes and survey warnings.
Contour interval is 40 feet. Supplementary contours shown at 20-foot intervals in areas of gentle terrain. Datum is NAVD 88.
Steep terrain warning: contour lines are closely spaced in this area indicating slopes exceeding 35 degrees. Exercise caution when navigating off-trail.
Active volcanic hazard area. Lahars, pyroclastic flows, and toxic gas emissions possible without warning. Consult NPS ranger station before entry.
Survey benchmark BM 5425 confirmed at coordinates N 46 47 32, W 121 44 18. Elevation verified to within 0.1 ft of published value.
Classification markers for terrain types, feature categories, and survey statuses.
An interactive-style topographic display showing contour lines, peak markers, and elevation labels rendered entirely in CSS.
Standard USGS-style map symbols and their representations, demonstrating the full cartographic vocabulary of the design system.
Tabular display of geographic features and their survey coordinates, modeled after GNIS (Geographic Names Information System) records.
| Feature | Type | Latitude | Longitude | Elevation | Quadrangle | Status |
|---|---|---|---|---|---|---|
| Columbia Crest | Summit | N 46 51 10 | W 121 45 37 | 14,411 ft | Mt Rainier East | Verified |
| Reflection Lake | Lake | N 46 46 06 | W 121 43 42 | 4,929 ft | Paradise | Hydro |
| Panorama Point | Ridge | N 46 47 18 | W 121 44 02 | 6,450 ft | Paradise | Verified |
| Nisqually Glacier | Glacier | N 46 48 24 | W 121 45 12 | 6,000 ft | Mt Rainier West | Hazard |
| Longmire Springs | Spring | N 46 45 00 | W 121 48 48 | 2,761 ft | Mt Rainier West | Active |
Essential map marginalia elements: compass rose orientation, scale bars, and magnetic declination data.
The cartographic philosophy underlying this design system, from the paper texture to the elevation palette.
Just as topographic maps encode altitude through color gradients, use the elevation palette to create visual hierarchy. The most important elements sit at the highest elevation; background content stays in the lowlands.
Contour lines create natural rhythm and visual texture. Multiple nested borders, dashed separators, and concentric shapes echo this cartographic vocabulary. Spacing between lines indicates steepness of information density.
The warm, aged paper background is not just aesthetic but functional. It reduces eye strain, conveys authority and permanence, and references the physical medium of traditional cartography. The subtle grid overlay reinforces measurement precision.
Monospaced typography for all numeric data ensures precise alignment and instant readability. Coordinates, elevations, and measurements demand the same clarity that a surveyor needs in the field.
Colors are drawn directly from the natural world: forest greens, earth browns, water blues. Each color carries inherent meaning. Never use a color that contradicts its cartographic convention.
Like a map's transparent overlays, information should be layered clearly. Grid lines sit beneath features, which sit beneath labels. Each layer is visually distinct but harmonizes with the whole to create a readable composite.