Brand system

The mark is the protocol.

A loxodrome - a course of constant bearing - spirals across every meridian at the same angle until it converges on the pole. For five centuries, navigators followed rhumb lines because they were predictable: pick a heading, hold it, and you arrive. The Rhumb Protocol mark is that course rendered as a glyph: the spiral is the rhumb line itself, the meridian fan is the chart, the brass dot is the goal.

These assets are part of the Rhumb Workflow Protocol™ and are released under the same open license (Apache-2.0). They are intended to be carried forward by whatever steward succeeds the original authors - download, fork, vendor, redistribute.

Loxodrome α = 67.5° One turn to the pole Apache-2.0 RWP 0.31.0

The mark

Constant bearing, rendered.

A rhumb line is a curve on a sphere that crosses every meridian at the same angle - a single steady compass bearing taking you from any point toward the pole. It is a property of the sphere, not of any flat picture of it. The shape it takes on paper depends on which projection you use. On a Mercator projection it is a straight diagonal - that is why Mercator was invented. On a stereographic projection from the pole - the top-down conformal view depicted by the mark - a rhumb line becomes a logarithmic spiral converging on the pole.

The mark depicts the second view. The curve is the log spiral r(θ) = r₀ · e^−bθ with b = cot(α) at α = 67.5°; at this α it completes exactly one turn before reaching the pole, departing and arriving along the same bearing. Both descriptions - "rhumb line viewed from the pole" and "logarithmic spiral with constant α" - refer to the same curve.

SVG has no transcendental curve primitive, so the rendered path is a piecewise cubic Bézier approximation of that log spiral. Sample points are placed every 30° on the true curve and connected using the standard arc-fit identity k = (4/3) · tan(Δθ/4) · ρ. The deviation between Bézier and pure log spiral at this step is on the order of 10⁻⁶ of the stroke width - sub-pixel at any rendering size. The mark is a logarithmic spiral by design and a Bézier curve by implementation; the two coincide at the sample points and differ by a sub-pixel amount everywhere else. The generator script is open (loxodrome.py, Apache-2.0) and reproduces every shipped path bit-for-bit.

Concept · loxodrome on polar projection
Construction · 18 cubic Bézier segments, 30° sampling, stroke 4.5
Color · linear gradient sea → sea-bright → bearing along the diagonal
Frame · 124×124 rounded square, rx = 28 with paper inner border
Departure · cream port at (110, 64) - outer ring, east bearing
Arrival · brass pole at (64, 64), r = 3.4 - entered from the right

Asset library

Eight files. Every surface.

Each asset is a hand-tuned SVG - no rasterized fallbacks, no font dependencies for the mark itself. Drop the URLs directly into <img>, background-image, or inline SVG.

Primary mark

Default mark for product surfaces, headers, app icons.

rhumb-mark.svg

Single-color mark

Inherits currentColor. Use on busy backgrounds, in body text, or where the bearing palette would collide.

rhumb-mark-mono.svg

Horizontal wordmark

Full lockup with mark + wordmark. Use in document headers, slide title cards, README banners.

rhumb-logo.svg

Glyph (tunable)

Frame-less glyph with chart context. Inline-only - chart inherits currentColor, exposes CSS variables for per-layer opacity tuning.

rhumb-glyph.svg

Glyph on light

Frame-less glyph for <img> use on pale surfaces. Chart strokes baked to ink at controlled opacity.

rhumb-glyph-on-light.svg

Glyph on dark

Frame-less glyph for <img> use on dark surfaces. Chart strokes baked to paper at controlled opacity.

rhumb-glyph-on-dark.svg

96

48

32

16

Favicon

Browser-tab mark scaled to 96-viewBox. Same loxodrome geometry as the primary mark.

favicon.svg

Glyph · transparent surfaces

The chart carries the message.

On a transparent surface the spiral alone reads as “a curl between two dots.” The compass rose and outer ring make it a chart - they're the rhumb context and they need to render visibly on whatever the glyph sits on. Three glyph variants ship for that:

on light surfaces

Chart strokes hard-coded to #0d1b2a at controlled opacity. Drop into any pale UI as <img>.

rhumb-glyph-on-light.svg

on dark surfaces

Chart strokes hard-coded to #f7f1e4 at controlled opacity. Drop into headers, dark cards, terminal UIs.

rhumb-glyph-on-dark.svg

tunable (currentColor)

Chart inherits currentColor. Inline the SVG, set color - or override with CSS variables.

rhumb-glyph.svg

When the glyph is loaded via <img src="...">, the parent's CSS does not reach it - that is a web-platform limitation. For <img> use, pick the -on-light or -on-dark variant. For inline SVG (Svelte/React component, server-side template), use rhumb-glyph.svg: chart elements inherit currentColor, and per-layer opacity is tunable via the CSS variables defined inside the SVG (read the file's <style> block for the full list).

Favicon

Browser-tab scale.

Same loxodrome geometry as the primary mark, scaled to a 96 viewBox with a slightly bolder spiral stroke so it survives 16 px rasterization. The chart frame is preserved - at small sizes it reads as the recognizable rounded-square silhouette.

favicon.svg

Color tokens

A chart palette.

Seven tokens carry the system. Ink and paper anchor the plane; sea, sea-bright, and bearing form the loxodrome gradient; brass marks convergence.

Ink #0d1b2a --ink

Deep nautical chart navy. Frame, primary text on paper.

Ink 2 #172a3a --ink-2

Secondary frame tone for layered surfaces.

Paper #f7f1e4 --paper

Parchment cream. Body background, mark stroke on dark.

Sea #0f6b73 --sea

Outer bearing tone. Eyebrows, accents, secondary CTAs.

Sea bright #23a7a6 --sea-bright

Mid bearing tone. Hover states, transition stops.

Bearing #d04f2f --bearing

Inner bearing tone. Convergence accent, alert tone.

Brass #c89b3c --brass

Compass brass. Pole dot, premium accent.

Typography

Two voices.

Display & serifs

Rhumb Protocol

Georgia, Times New Roman, serif. Used for headlines, the wordmark, and quoted statements. Letter-spacing tightens at large sizes (−0.06em to −0.09em) to feel chiseled rather than literary.

Body & signal

OPEN WORKFLOW PROTOCOL

Avenir Next, Segoe UI, sans-serif. Body copy, navigation, eyebrows, taglines. Eyebrows and taglines use heavy weight + tight letter-spacing in uppercase to read as ship-marker labels.

Usage

Hold the bearing.

Do

Pair the mark with the wordmark on the first impression of any surface.
Let the bearing gradient run sea → sea-bright → bearing in that direction; the convergence reading depends on it.
Use the mono variant inside body text, on saturated photography, or in single-ink print.
Keep clear-space equal to the height of one meridian ray (about 12% of mark width) on every side.

Don't

Reverse the gradient direction or recolor individual stops.
Reintroduce a letterform inside the mark; the wordmark carries the name.
Animate the spiral in product chrome - it implies a state change and confuses the workflow metaphor.
Render the mark below 24px without switching to the favicon variant.

Construction

The geometry, briefly.

// design curve  (transcendental - what the mark depicts)
r(θ) = r₀ · e^−bθ          // logarithmic spiral
b      = cot(α)                  // α = constant bearing from radial
α      = 67.5°                    // chosen so r = pole_edge at θ = 2π
r₀     = 46                       // viewBox 128, anchored at outer ring
θ_max  = 540°                     // 360° visible + 180° clipped under pole

// rendered curve  (polynomial - what the SVG path actually contains)
sample = every 30°                 // 18 sample points on the design curve
Pₐ     = (cx + rₐ·cos(θₐ), cy + rₐ·sin(θₐ))
Tₐ     = unit forward tangent     // exact rhumb tangent at sample
segment = cubic Bézier           // C Pₐ+k·Tₐ ; Pₐ₊₁-k·Tₐ₊₁ ; Pₐ₊₁
k      = (4/3) · tan(Δθ/4) · ρ   // control distance, arc-fit identity
ρ      = ((rₐ+rₐ₊₁)/2) · √(1+b²)   // local osculating radius

// approximation error at Δθ=30°: ~10⁻⁶ of the stroke width.

On a Mercator projection a rhumb line is a straight diagonal. On a stereographic projection from the pole - which is what the mark depicts - the same path becomes a logarithmic spiral. The two views describe the same curve. SVG has no transcendental primitive, so the path is rendered as cubic Bézier segments fitted to samples on the true log spiral. The mark is a logarithmic spiral by design and a Bézier curve by implementation; the two coincide at the sample points and differ by a sub-pixel amount everywhere else.

Bundle

Take it offline.

All five SVGs are committed to the repository. Use the links below to download originals or point your build pipeline at the static path.

Primary mark /brand/rhumb-mark.svgSingle-color mark /brand/rhumb-mark-mono.svgHorizontal wordmark /brand/rhumb-logo.svgGlyph (tunable) /brand/rhumb-glyph.svgGlyph on light /brand/rhumb-glyph-on-light.svgGlyph on dark /brand/rhumb-glyph-on-dark.svgFavicon /favicon.svgSocial / org banner /brand/rhumbprotocol-org-banner.svg