Introduction

Backbone Design System

The colours, type, surfaces and components behind Backbone, and when to use each. Everything here is rendered from the code itself, so it always matches what ships. It starts with the website and grows to cover the product.

Principles

  • Do:Use tokens, not raw values: bg-brand, not bg-[#f9eb2d]. If a value is missing, add a token.
  • Do:Keep one shared implementation of each component and extend it with variants. Never copy one for a page.
  • Do:Describe every token and variant where it's defined: those comments become these docs.
  • Do:Remove what stops being used, whether components, tokens or dependencies.

How tokens become classes

Tokens live in the @theme block of src/app/globals.css. Tailwind turns each one into utilities named after it.
--color-brand: #f9eb2d;       →  bg-brand, text-brand, border-brand
--text-heading-3: 1.375rem;   →  text-heading-3 (size, line height and tracking)
--radius-panel: 1.25rem;      →  rounded-panel
--shadow-card: …;             →  shadow-card

Contents

FoundationsColorsFoundationsTypographyFoundationsSurfacesComponentsButtonComponentsBadgeComponentsChipComponentsTag