TubeSpanner Style Guide

Introduction

TubeSpanner Style Guide

A living reference for all UI components used across the TubeSpanner App and Portal.

How to use this guide

  • Docs — Design principles, tokens (colours, type, spacing), and guidelines
  • Components — Live rendered components with HTML code, variants, and notes

Status labels

  • 🔴 Prototype — exploratory, do not use in production
  • 🟠 WIP — work in progress
  • 🟢 Ready — production-ready

Coverage

This guide covers both:

  • App — app.tubespanner.com (Drupal)
  • Portal — tubespanner.com (marketing/sales)

2026-07 decisions

The palette and pattern language on this page were signed off 2026-07-23, following a full site styling review. The reasoning, contrast figures and open items live in docs/styling-review-2026-07/ (decision-doc.md, in the main TubeSpanner docs folder, not this styleguide repo).

Two things carried over from that review worth flagging while other components catch up:

  • The old button scheme (purple primary, orange secondary, light mark/skip, red remove) is deprecated in favour of a four-role palette (Primary, Go, Secondary, Danger), each with its own light and dark colour pair. See the Button atom.
  • Marydale is retired. It was documented here as the Portal decorative font but was never actually loaded anywhere live, the font in service was Comedik, which is now cleared for decorative use on both App and Portal.