03 — Library

Components

Reference React implementations. Each one ships with the same opinion the rest of the system has: editorial first, one orange, restraint over decoration.

Button

Button

One primary per view. Secondary for outlined neutrals. Ghost for toolbars. Link for inline text actions.

Variants

Sizes

Disabled

Tag

Tag

Pill chips. Use uppercase + 3px tracking for category labels (SECTOR, VERTICAL). Normal case for descriptive tags (e.g. Hoka, Trail running).

Tones

HokaFeaturedQuietPremium

Editorial eyebrows

SectorTrail RunningField Report
Card

Card

The editorial container. editorial sits on parchment. default is for product surfaces. inverted is for hero blocks and dark footers.

Sector · Running

Hoka’s next chapter is paved

The trail brand that taught the running world what max cushion meant is quietly recalibrating around road.

By Dan Coe · Apr 27, 2026
Brand

On Running

CloudTec, retail rebuild, the LightSpray bet — everything we’re tracking on the Swiss footwear maker.

42 stories · Updated weekly
Vertical

Trail running, briefly

UTMB acquisition fallout, the Salomon S/Lab repositioning, and three brands quietly winning at the trailhead.

Last updated 2h ago
Premium

The Operator Briefing

The weekly memo for founders, marketing leads, and buyers. One read, fifteen minutes, no fluff.

Wednesdays · 6am ET
Input

Input

Labeled text field with hint and error states. Errors use brand/60, never red.

We’ll never share it.
Enter a valid domain (e.g. example.com)

Sizes

Divider

Divider

Editorial rule. Hairline within cards, regular between sections, strong for major breaks.

Hairline
Regular
Strong
ArticleHeader

Article Header

The signature editorial block. Eyebrow → headline → dek → byline + date.

Field Report

The retail rebuild reaches Sun Valley

A small operator’s brand store outsold its biggest wholesale account this winter. We went to Idaho to find out why.

Dan Coe