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: --primary, --surface, --surface-elevated, --subtle, --body-text, --heading, plus their RGB variants.
Authors are explicitly prohibited from hardcoding hex values or importing external font stacks. This constraint is enforced at the component validation layer.
The Four Tiers of Components
Tier 1: Structural
Headers, footers, navigation bars. These define the site chrome and must adapt to every tenant brand. No decorative elements, no animations beyond hover states.
Tier 2: Content
Blog layouts, pricing tables, feature grids. Moderate visual flourish allowed — subtle gradients, card layouts with glow effects.
Tier 3: Interactive
Form wrappers, booking calendars, search interfaces. Must maintain accessibility across all themes. Focus, error, and loading states are mandatory.
Tier 4: Decorative
Hero sections, testimonial carousels, background video wrappers. Most creative freedom, but palette must derive from tokens.
Visual QA at Scale
We run automated visual regression tests against every component using ten different tenant themes. Each represents an extreme: pure white minimalism, deep black editorial, saturated brand colors, low-contrast accessibility-first. A component that breaks on any theme fails validation.