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)