Design System
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.
- Status: in-flight (living reference — versioned, not "done")
- Last update: 2026-05-30
- Blocked on: nothing
Next 3 actions
- Swap the seller-landing testimonial placeholders for real headshots + quotes, redeploy
test.rycolston.com. - Promote the
betasection components (Hero/CTASection/Testimonial/FAQ/StatBlock) tostableonce proven on a second live surface beyond the demo. - Migrate an existing surface (sell.rycolston.com or handbook) onto the new section catalog to retire page-local layout glue.
Decisions log
- ADRs 0001–0007 live in
~/rylobasic/data-platforms/design-system/docs/adr/. 0007 (semantic status colours) is the v0.2.0 addition. - Research provenance for the conversion choices:
~/rylobasic/data-platforms/design-system/docs/references.md.
Open issues
- No GitLab project label yet. Build/plan record is in-repo:
docs/plans/0004-conversion-sections-and-email.md+ theDESIGN_SYSTEM.mdchangelog. - Real testimonial headshots + quotes for the seller landing
- Promote beta sections → stable on second-surface proof
- Visual-regression check (admitted gap)
- Mobile nav drawer (
NavDrawer, not built)
References
- Machine index (read first):
~/rylobasic/data-platforms/design-system/DESIGN_SYSTEM.md - Component inventory:
data-platforms/design-system/components/README.md - New-site scaffold:
~/rylobasic/infra/scripts/new-site.py - Live demo / seller landing: https://test.rycolston.com/
- Code home:
~/rylobasic/data-platforms/design-system/ - Parent: Platform