How Trailwise looks, sounds and moves

Logo and wordmark

On the site the brand is set as a wordmark: Space Grotesk 500 at −0.05em, in ink, never in teal. There is no icon on any page of the current design.

Clear space and minimum size

Clear space on all sides equals the cap height of the T. The wordmark stops being legible below about 90px wide, which is the floor for a header lockup.

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.