Tideglass — a coastal station icon system

01

The row test

all 18 at 24 px · one stroke · one afternoon

The family check, laid out the hard way: everything on one baseline at working size. Organic water, mechanical brass and interface marks should read as one hand — hover any glyph for its name.

SAME PASS AT 16 PX

02

Index

6 organic · 6 instruments · 6 interface

03

Construction

tg-buoy on the keylines

CANVAS: 24 × 24 units, 0.25-unit snap, coordinates carried to two decimal places at most.
LIVE AREA: 20 × 20 — a stated 2-unit padding on every side. Strokes may kiss the overshoot line but nothing crosses the 1-unit hard margin.
STROKE: 1.75, round cap, round join. The weight is never baked into the symbols — it inherits, so CSS can re-weight the whole set.
KEYLINES: Square 20, circle r 10.5, diagonals. Circular glyphs overshoot the square by 0.5, because a circle of equal diameter reads smaller than a square.
RADIUS: One corner language: enclosed corners rx 2 (export tray); open corners land on the round join.
NODES: Ceiling of 24 path commands per glyph. Circles are drawn as <circle>, not four arcs; the heaviest glyph (compare) runs 18.
OPTICS: Wave crests ride .25/.75 offsets so they never pinch; triangles and stars overshoot ±0.5; mechanical glyphs stay open so brass weighs the same as water.

04

Scale & optical cuts

honest from 16 to 96

One drawing carries a glyph most of the way; where detail collapses at text size, a second cut is shipped on purpose — never an accident of rasterisation.

16

20

24

32

48

96

TG-ANEMO · 24 PX
Full detail — three drawn cups, fine at working size and above.

TG-ANEMO · 16 PX
The cup arcs clog into the arms. This is the failure the second cut exists for.

TG-ANEMO-SM · 16 PX
Deliberate optical cut: cups become open dots, same geometry, same hand. Use below ~18 px.

05

Light, dark & re-weight

one copy, currentColor

There is no dark-mode copy of the set. The strokes inherit currentColor, so the surface chooses the ink.

ON LIGHT · #0B2430

ON DARK · #F2F6F4

STROKE 1.75 INK SET FROM CSS — NO SECOND SPRITE

06

In context

a plausible station board

STATION 04 — WREN COVE LIVE · --:--:-- UTC

Gale warning. Gusts to 34 kt expected 18:00–23:00, backing south-westerly. Small craft ashore.

WIND

18 KT · G26

SWELL

2.4 M @ 11 S

WATER

13.2 °C

PRESSURE

1004 HPA · FALLING

TIMEHEIGHTEVENT

04:123.6 m HIGH

10:381.1 m LOW

16:543.9 m HIGH · NEXT

23:070.9 m LOW

Icon discipline in place: tiles and toolbar pair glyphs with visible text, so those instances are aria-hidden; the warning glyph and the icon-only favourite button carry real names.

07

Usage

sprite once, <use> anywhere

<!-- mount the sprite once, hidden, top of body -->

<!-- meaningful instance: name it -->
<svg class="tg" role="img" aria-label="Gale warning">
  <use href="#tg-alert"></use>
</svg>

<!-- decorative instance: hide it from AT -->
<button class="toolbar-btn">
  <svg class="tg" aria-hidden="true">
    <use href="#tg-export"></use>
  </svg>
  Export
</button>

.tg{
  width: 24px; height: 24px;
  color: inherit;        /* strokes follow currentColor */
  stroke-width: 1.75;    /* inherited — re-weight from CSS */
}
/* below ~18px, swap dense glyphs for their -sm cut:
   <use href="#tg-anemo-sm"> */

Symbols ship without a baked stroke-width, so stroke-width set on any ancestor inherits straight into the glyph.
Decorative instances take aria-hidden="true"; meaningful ones take role="img" + aria-label. Each symbol also keeps a <title> as a source-level fallback.
No fill, no raster, no font glyphs — every mark is authored path, circle or stroke.
Works over any surface because the only paint is currentColor.
SPRITE SOURCE — … raw · heaviest glyph 18 / 24 commands · 19 symbols, one hand.