the manual is not a cycling publication. It is a structured knowledge system built for both human readers and machine retrieval. Its purpose is to become the most trustworthy, most useful source for the questions cyclists ask repeatedly.
The strategic position is deliberate: reference over churn. Evidence over vibes. Utility over noise. Structured knowledge over content sludge. Every design decision serves this position.
The visual system must feel authoritative, unmistakable, calm but strong. It should convey premium taste without luxury gloss. It must never feel sporty, macho, startup-derivative, or dependent on cycling imagery to communicate what it is.
Great design transcends its industry. If you removed every cycling reference from this brand, the design system should still feel strong, clear, and worth trusting. The identity lives in structure and restraint, not in subject-matter decoration.
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.
It is also the foundation of the entire design system. Its geometry generates the grid, the section transitions, and the content classification markers. Every visual element in the system traces back to this shape.
SVG Path
Maintain minimum padding equal to the chevron's height on all sides of the pennant. This preserves the mark's authority and prevents visual crowding.
16px width for digital applications. Below this threshold, the chevron geometry loses legibility.
Never redraw, stretch, rotate, skew, or add effects (shadows, glows, gradients) to the pennant. The mark is used exactly as specified.
Typography in the manual follows a strict hierarchy. The restraint is the point. DM Serif Display appears in exactly two contexts: the homepage title and article page titles. Nowhere else. This scarcity is what gives the serif its authority. When it appears, it signals editorial importance.
Homepage title, article page titles. The only two places serif appears.
Body text, navigation, section labels, tool titles, UI elements.
Tool titles use Inter, not serif. Tools are functional, not editorial. They do not earn the serif.
Labels, metadata, formulas, technical content.
| Element | Mobile | Desktop |
|---|---|---|
| Homepage title | 3.2rem | clamp(4rem, 5.5vw, 5.5rem) |
| Article title | 2.8rem | clamp(3rem, 4.5vw, 4.2rem) |
| FAQ title | 2rem | |
| Section heading (h2) | 1rem / 600 weight | |
| Body | 0.92rem / 1.75 line-height | |
| Type label | 0.55rem mono / 0.15em tracking / uppercase | |
| Metadata | 0.45rem mono | |
Each content type is classified by a tone from the titanium material palette. These are not decorative accent colors. They are structural identifiers.
Color classifies content type. It never decorates. No accent colors. No bright hues. No gradients.
All text colors must pass WCAG AA (4.5:1 minimum contrast) against the field.
Content types are classified by pennant-shaped markers filled with their titanium tone. The markers appear at two sizes: standard (14 × 20px) in section headers, and small (10 × 14px) in related links and footer navigation.
Group header text is colorized to match its type. The word "Reference" appears in #656260, "FAQ" in #72633a, and so on. The section header (pennant marker + label) functions as a link to the section index page.
The chevron is derived from the pennant's bottom geometry, a symmetrical V at approximately 140 degrees. It serves as the sole section divider throughout the system. Three hierarchy levels distinguish structural importance.
Chevron weight always decreases down the page. Never use hero weight below a section weight. The visual hierarchy must be monotonically decreasing.
Links in body text use type-colored underlines. The underline color indicates the target page type, so readers develop an intuition for where a link leads before clicking.
| Class | Underline | Target |
|---|---|---|
| .link--ref | #656260 | Reference article |
| .link--faq | #72633a | FAQ |
| .link--glo | #5a5650 | Glossary term |
| .link--tool | #2a2825 | Tool |
Underline offset: 3px · Thickness: 1px, thickens to 2px on hover
Eight page templates cover the full product surface. Each has specific typographic and structural rules.
| Mobile padding | 1.25rem |
| Desktop padding | 3rem |
| Content max-width (desktop) | 72% (5/7 from pennant geometry) |
| Article sidebar (desktop) | 220px |
| Body max-width | 58ch |
| h2 padding-top | 1.75rem+ |
| Paragraph margin-bottom | 0.6rem |
Vertical rhythm favors generosity between sections and tightness within paragraphs. Let the structure breathe. Do not compress sections to save space.
The design system is defined as much by what it excludes as what it includes. These are not oversights. They are deliberate rejections.