01 — SPACE
A shared 24-unit grid
Nominal live area: 16 × 16, from (4,4) to (20,20). Four units of nominal padding; optical overshoot up to 0.5 units leaves at least 2.5 units of painted inset at a 2-unit stroke.
Field notes / Coastal iconography
Measured lines.
Moving water.
Eighteen hand-drawn symbols for the meeting of land and sea. A small, steady visual language for tides, instruments and the interfaces that connect them.
DRAWING BOARD1 UNIT = 8 PX
01 / The family
One hand. Eighteen ways to read the coast.
Conditions · Instruments · Actions
THE ROW TEST — all 18, at exactly 24 pxNo individual scale adjustments. No alternate theme assets.
Select a symbol to inspect its scale, construction and source below.18 / 18 symbols
02 / Optical proof
Buoy, from small to spacious.
01 — DAYLIGHTcurrentColor / ink
02 — NIGHT WATCHcurrentColor / lime
16 / 24 / 32 / 48 / 96 px. Identical geometry at every size; no small-size substitutions.Buoy / 13 commands
03 / In the field
Quiet enough to let the data speak.
Interactive specimen · illustrative observations, not a live feed
North Head
STATION 014 / BRISTOL CHANNEL
Water level · 12:00 UTC
2.4 m
Falling tide
Low water at 16:20
Low water at 16:20
12:0014:0016:0018:00 UTC
Today / solid line
04 / Built to travel
The rules behind the marks.
02 — LINE
Soft edges, precise intent
Default stroke: 1.75 units. Round caps and joins throughout. Structural corners use a 1.5-unit radius; directional vertices use round joins. No fixed stroke widths inside symbols.
03 — BALANCE
Optical, not merely equal
The compass spans 17 units, slightly beyond the 16-unit rectilinear frame. The star’s tips and crescent overshoot too. Open instruments lose minor hardware, not line weight.
04 — ECONOMY
Keep the important parts
At most 24 commands per icon. Curves are deliberate Béziers and arcs, never traced fragments. Circles count as four equivalent commands in the audit. Every coordinate has at most two decimals.
INLINE USAGE#coast-buoy
A single source of truth.
Place the sprite once in your document, then reference its symbol IDs. Colour follows currentColor; stroke width inherits from the instance. Let strokes scale with the icon—do not apply non-scaling-stroke.
Label icon-only controls on the button. Hide redundant icons beside text. For a standalone meaningful image, name the outer SVG; symbol titles remain a source-level fallback.
Symbols18 / 18
Largest command budget20 / 24
Sprite transfer sizeUnder 12 KB gzip
Small-size variantsNone needed
Inspect selected symbol — Buoy