Brand Intent

the manual is not a publication. It is a system that explains.

Most cycling media competes on volume, access, and sponsor-safe repetition. the manual occupies a different position: reference over churn, evidence over vibes, utility over noise. Structured knowledge over content sludge.

This is the place people and machines go when they want to know what something means, what matters, and what to do next. Not the loudest voice in the room. The clearest one.

Trust is not decoration. It is a product feature. Every page earns credibility through clarity, sourcing, and usefulness — not through volume or velocity. The design system exists to make that trust visible at every level of the interface.

What We Explored

Three directions were designed, built to prototype fidelity, and evaluated against the product thesis.

The Hybrid Phase

A fourth attempt combined the Index's readability with the System's classification logic and the Stele's gold accent. The result was competent but undifferentiated. It felt assembled rather than designed.

That critique redirected the entire process. The question stopped being “what looks good” and became “what structural idea is unique to this product.”

The Breakthrough — The Pennant as Grammar

The pennant is an homage to the bicycle head badge — the stamped metal mark that has identified frames for over a century. It carries the same intent: a mark of origin, quality, and identity, fixed to the thing it represents.

But it is not just a logo to place. It is a structural grammar to build from. Every distinctive design system derives its rules from a single generative idea. For the manual, that idea is the pennant — not as a decorative motif, but as the source of all spatial, typographic, and hierarchical decisions.

What the pennant geometry yields

The 5:7 proportion. The pennant's width-to-height ratio (200:300) reduces to 5:7. This becomes the content column ratio on desktop: 71.4% of the viewport for content, the rest for structure and breathing room.

The chevron angle. The V at the base of the pennant becomes a section transition element. Three weights create hierarchy: hero chevrons for major thresholds, section chevrons for content divisions, end chevrons for the quietest boundary.

The silhouette as classifier. Miniature pennant shapes replace generic dots and bullets. Each pennant is filled with a titanium tone to classify content by type: reference, FAQ, glossary, tool. The shape becomes both a navigation element and a content type signal.

Serif scarcity. The logo's bold lowercase type informed a critical rule: display serif appears only at the top of the information hierarchy. Article titles and the homepage title use DM Serif Display. Everything else is sans-serif. The rarity of serif type is what gives it authority.

The titanium palette

Color does not decorate. It classifies. The palette is modeled on a single material — titanium — with four surface finishes. No color wheel. No mood-board pastels. Just metal and light.

Design Principles

1. The pennant is grammar, not decoration. Every spatial ratio, section marker, and classification signal derives from the pennant geometry. Remove it and the system loses its logic, not just its logo.
2. Serif is scarce. It appears for titles only. Its rarity is its authority. When serif type appears, it signals the top of the information hierarchy and nothing else.
3. Color classifies. It never decorates. Four titanium tones signal four content types. No accent colors. No gradients. No mood lighting.
4. The chevron marks thresholds. Three weights create hierarchy. Hero for major transitions, section for content divisions, end for the quietest boundary. Each derived from the pennant's base angle.
5. Content first. Trust credentials at the bottom, not the top. Sources, review dates, and editorial metadata appear after the content has earned attention. Credibility follows substance.
6. Tools lead. They are the action people came for. On the homepage, tools appear first. They are not buried below editorial content.
7. Whitespace is structural. Emptiness is earned, not default. Negative space signals hierarchy: glossary definitions get generous space to breathe. Dense tool interfaces use every pixel.
8. The system transcends its subject. Remove every cycling reference and the identity still holds. The structure, palette, and type rules work for any knowledge domain.

Specifications

Page Templates

1. Homepage — composed table of contents. Tools first, then Reference, FAQ, Glossary. Limited entries per section with “view all” links.
2. Reference Article — serif title, chevron threshold between header and reading zone, sources and review metadata at bottom.
3. FAQ — direct answer as primary text at full size. Supporting context secondary, smaller, lighter.
4. Glossary — definition with 2px top rule, generous negative space. Dictionary-entry authority.
5. Calculator Tool — sans-serif title, inputs and load chips above chevron threshold, results with serif numbers below.
6. Map Tool — filter bar, map area, shop rows with status indicators.
7. Section Index — pennant marker, serif title, article count. Filtered table of contents for a single content type.
8. Document — legal and about pages. Sans-serif title, mono metadata, no type classification pennant.