Instruments
Configure once. Drop it anywhere.
Twenty-two instruments — wind, depth, battery, fuel, anchor — share one theming contract. Pick what each one shows. Pick how it looks. Then place it on the helm, the phone, a share link, the chartplotter overlay. Same instrument. Same theme. No reconfiguring per screen.
The catalogue · sub-project C
Twenty-two instruments. Three base themes. One contract.
Each tile is the same component family — readings, dials, fills, state — themed by the same fourteen tokens. Switch the theme to see what 32°N gives you out of the box: saturated helm-station colour for the dark hours, a single-hue amber that preserves night vision, and a reflective daylight setting that gets crisper the brighter it is.
Anatomy
Fourteen tokens. The whole theming contract.
A theme is not a colour scheme. It is a small declarative file: fourteen named tokens that map to every paintable part of every instrument. Users set tokens. The system maps tokens to dials, readings, labels, fills, alarm states. Inherit a base theme, override only what you change. The full set is small enough to memorise.
The model
Three concepts. Code, data, position.
The instrument abstraction has exactly three pieces. Components are code I write. Catalog rows are data you own per boat. Panels are where you place them. Change a catalog row and every panel that references it updates. That is the whole contract.
01 · Components
The code I ship
Twenty-two React components — Compass, Numeric,
LinearGauge, AnchorAlarm, and the rest.
Stateless. They take data and theme via context. They render the
same on web, mobile, and (later) inside the chartplotter overlay.
02 · Catalog rows
The configuration you own
A catalog row is a named, configured instrument: "My Wind Speed" — a Compass, in sci-fi, bound to true wind, showing knots. One row. Many surfaces. Change the row and every surface picks it up. Stored in your boat's database.
03 · Panel layouts
Where you place them
A panel layout is one surface for one boat — the helm, the phone, a share link. It references catalog rows by id and positions them on a grid. A catalog row can appear on many panels. It cannot appear twice on the same one.
Themes are open-source like everything else.
The three base themes ship with 32°N. Beyond them, full customisation arrives post-1.0 — a small declarative file, contrast-checked on save, shared on GitHub, verified themes earn a badge.