Design System

Status
in-flight
Tier
Tier 2 — Platform
Owner
Ryan Colston
Started
2026-05-20

One-line description. The canonical brand, tokens, and components for every employee- and customer-facing surface — marketing pages, seller funnels, the handbook, the Ghost theme, and newsletter email. Read it before building or restyling any such surface.

Why

Every rycolston-operated surface used to be styled ad hoc, so "make a page" meant re-deciding colour, type, spacing, and components from scratch — slow, and visually inconsistent across properties. The design system makes the brand a single source of truth: change a token, every surface follows. It also encodes intent (ADRs) so future work — human or AI — doesn't accidentally "improve" away a deliberate choice.

It's platform-level: Listing Legends, Capri, and The 50OS all consume it, the same way they consume BigQuery and the monorepo. That's why it lives under Platform.

Current state

v0.2.0 (2026-05-30). Four-layer architecture (tokens → components → ADRs → machine index), plain HTML/CSS, light-mode only, anchored on olive #3f4a28 + Fraunces/DM Sans. v0.2.0 added the conversion layer from a designer-builder gap-analysis: section components (Hero, CTASection, Testimonial, FAQ, StatBlock), Button loading + Input error states, image-scrim tokens, ADR-0007 (semantic error role), and an email subset. test.rycolston.com was rebuilt as a focused seller landing and deployed live. A one-command site scaffold (new-site.py) now spins up new conversion-optimized sites.

Next 3 actions

  1. Swap the seller-landing testimonial placeholders for real headshots + quotes, redeploy test.rycolston.com.
  2. Promote the beta section components (Hero/CTASection/Testimonial/FAQ/StatBlock) to stable once proven on a second live surface beyond the demo.
  3. Migrate an existing surface (sell.rycolston.com or handbook) onto the new section catalog to retire page-local layout glue.

Decisions log

Open issues

References