How Trailwise looks, sounds and moves

Logo and wordmark

The mark is settled. Ascent, adopted 31 August 2026: three slabs cut at 17.5 degrees, the same angle as the button chamfer. The two behind are strides already run and carry the ink, the one ahead carries the teal. Two values, and nothing in the drawing smaller than a slab, which is why it holds at 16px where the drawing it replaces did not. It supersedes the Field Guide mountain, which never got past “proposal” on this page.

The wordmark, and the one teal word

Space Grotesk 500 at −0.05em, lowercase. “trail” is ink and “wise” is teal, on light and dark alike. That is the single exception to the rule that teal is a fill and never a word, and it does not travel: a heading set in teal is still wrong. WCAG exempts logotype text from contrast, but the ratio is 2.5:1 on white and 2.0:1 on the sky band, which is why the wordmark has a floor. 24px cap height on white, 28px on sky. Below that, use the mark on its own. The wordmark and both lockups ship as outlines rather than live text, so they render correctly with no fonts installed: email, PDF, print.

Clear space and minimum size

Clear space on all sides equals the width of one slab, 12 units on the 72 grid. Below 24px on a plain background, use the favicon drawing: two slabs redrawn thicker, not the mark scaled down. On the ink tile the three slabs stay apart all the way to 16px, which is what the browser tab and the app icon use.

Colour

Ink and paper do the work. Teal is the one accent and it is a fill, never a word: at 2.5 against white it fails as text at every size. Where teal has to be read it becomes teal deep. Sky separates one section from the next and is never a full page.

Chart series · assign in this order, never cycled

Validated against white for lightness, chroma, colour-vision separation and contrast. All eight are safe where series sit next to each other, as in lines and bars. In a scatter or a small multiple, where any pair can meet, only the first three hold; past three, fold into Other or facet.

Sequential and diverging

Typography

Two families, and the split is strict. Space Grotesk at −0.05em is for anything that speaks. Noto Sans at +0.02em is for anything that explains. Hierarchy comes from size and weight, never from a third face. Emphasis is weight or colour, never italic.

The highlighter

Tokens

Containers are round, controls are square, and the contrast between the two is the look. Do not soften the controls and do not sharpen the cards.

Buttons

A chamfer at the top left running the full height, so the control leans in the direction everything else travels. One primary action per view. Hover deepens the notch rather than swapping a colour, which is the only place on the site where a hover is a gesture instead of a state change.

Badges and status

Uppercase, tracked, square. Four reserved status colours that never become a chart series. A status colour never carries meaning alone: it always arrives with a dot or a word.

Forms

Labels are always visible, set in uppercase micro type above the field. Hints are persistent rather than appearing on error. Fields are square, 54px tall, and focus is a 3px teal ring at 1px offset.

Data and telemetry

Numbers are set in the display face with tabular figures, so a column compares down rather than shifting. Every computed signal carries its confidence, and a signal running on thin data says so instead of producing a plausible number. That last part is the one piece of this system no other brand has.

Motion

One easing curve and two durations. Scroll-driven motion writes a single custom property per frame to a stage element and lets CSS do the rest, never a listener per item. The signatures are the card stack riding up into the band, the staircase that reveals a step at a time and then exits left, and the fan that opens on a scroll fraction.

Photography

Real trail and real weather, never stock athleticism. Hero imagery prints in a single blue: the photograph supplies luminance and --ws-duo supplies the hue, so a misty forest and an athletics track end up in the same world. Everywhere else, evidence imagery keeps its own colour, because a chart of your own data should not be styled.

Voice

Expert and plain-spoken. Direct second person, short sentences mixed with longer ones, concrete over abstract. We explain the reasoning behind every call and we state the limit rather than hiding it. Where we do not know, we say so, because a signal you have quietly learned to distrust will not change what you do on the day it matters.

Do and do not

Downloads

The system as a page you can read, a stylesheet you can link, and the tokens as data. The brand book is the reference; the stylesheet is what an internal tool should use rather than reimplementing any of this.