Observed tide
3.84 m
Rising 0.31 m/h
Weather, water and station controls
One visual current, from swell to system.
A compact outline family for environmental readings, marine hardware and dashboard actions. Drawn on one 24-unit grid for calm rhythm at operational sizes.
Family check
The 24px row
Organic, mechanical and interface forms shown together at their primary dashboard size.
Sprite inventory
Full set
Names map directly to symbol IDs. Every specimen below is decorative; the adjacent label carries its name.
Rendering
Scale and theme
The same authored geometry remains legible from dense tables to large status displays.
Size ramp · swell
Light and dark surfaces
Day station
Night station
Applied example
In a station dashboard
Controls use hidden decorative instances; the forecast status demonstrates a named, meaningful SVG.
Construction
Grid rules
24-unit canvas
Live area is x/y 2–22, giving two units of nominal padding on every side.
1.75-unit stroke
Round caps and joins soften organic curves and keep hardware from feeling heavier.
Shared radii
Two-unit corners lead containers; circles receive slight optical oversizing where needed.
Optical placement
Curves and open forms may enter the padding more than boxes to preserve apparent scale.
Implementation
Accessible usage
Hide redundant marks. Give standalone, meaningful icons a local accessible name.
<!-- Decorative: the button already has a name --> <button aria-label="Export station data"> <svg class="icon" aria-hidden="true"> <use href="#icon-export"></use> </svg> </button> <!-- Meaningful: name the SVG itself --> <svg class="icon" role="img" aria-labelledby="rain-title"> <title id="rain-title">Moderate rainfall forecast</title> <use href="#icon-rain"></use> </svg> <style> .icon { width: 24px; height: 24px; color: currentColor; --icon-stroke: 1.75; } </style>