Designing for Multi-Tenant: A Component Design System

Designing components for a multi-tenant platform means solving a paradox: every component must look like it belongs on every site, while every site must look distinct. After eighteen months of iteration, here is the design system that emerged.

Token-First Design

Every visual decision in a SpiderPublish component flows from design tokens implemented as CSS custom properties. We maintain a whitelist of exactly 14 tokens that every component can rely on: --primary, --surface, --surface-elevated, --subtle, --body-text, --heading, plus their RGB variants for alpha compositing.

Authors are explicitly prohibited from hardcoding hex values, using Tailwind utility classes, or importing external font stacks. This constraint is enforced at the component validation layer — the system rejects components that contain hardcoded color values outside of alpha modifications of token-derived colors.

The Four Tiers of Components

Tier 1: Structural

Headers, footers, navigation bars. These components define the site chrome and must adapt to every tenant brand. They are the most constrained — no decorative elements, no background images, no animations beyond hover states.

Tier 2: Content

Blog layouts, pricing tables, feature grids. These components present structured content and can include moderate visual flourish — subtle gradients derived from tokens, icon systems, card layouts with glow effects.

Tier 3: Interactive

Form wrappers, booking calendars, search interfaces. These components handle user input and must maintain accessibility across all tenant themes. Focus states, error states, and loading states are mandatory.

Tier 4: Decorative

Hero sections, testimonial carousels, background video wrappers. These components prioritize visual impact and have the most creative freedom — but must still derive their palette from tokens.

Visual QA at Scale

We run automated visual regression tests against every component using ten different tenant themes. Each theme represents an extreme point in our design space: pure white minimalism, deep black editorial, saturated brand colors, low-contrast accessibility-first. If a component looks broken on any of these ten themes, it fails validation and cannot be published to the marketplace.