trolley.ai × design system by crescō
Trolley · Design System · v0

Tokens first.
System next.

Everything here is extracted from withtrolley.ai — the theme's colors, its type stack, the wordmark and the rules the site already keeps. While Trolley's own system consolidates, the working methodology reference is the crescō brand manual, and the living application of these tokens is the AI Operation Packages prototype.

01Colorfrom the Squarespace theme variables + the home banner
accent
Green
#34b15d · hsl(140, 55%, 45%)

Headings, selected states, success, ops that ran. Never the primary button.

darkAccent
Navy
#003a6c · hsl(210, 100%, 21%)

Primary CTAs (“WORK WITH US”) and sub-headings on white.

black
Charcoal
#2b2c29 · hsl(80, 4%, 17%)

Dark surfaces and body ink — warm, never pure black.

banner
Periwinkle
#b2bcdf · sampled

The banner's soft blue: gradients, glows, decorative chevrons. Accent, never text.

Hero gradient#4d9476 → #007474 → #01576f

The site's hero sweep — used as ambient light on dark shells.

02Typographythe theme's own stack — site.css font variables
Founder-led execution.
Montserrat 700–800
headings · tight tracking
Trolley unites creative vision and operational rigor in one integrated platform — chaos into culture, instinct into infrastructure.
Roboto Condensed 400–700
body copy
Meta, labels and small print read in Roboto — quiet and neutral.
Roboto 400–500
meta · captions
6:02 · 34 mentions scanned · #442
Roboto Mono 400–500
product data · timestamps (extension)
03Wordmarkwhite slab lowercase + script “.ai”
trolley.ai wordmark on darkon dark · preferred
trolley.ai wordmark on gradienton brand gradient

The wordmark is white and lives on dark or gradient surfaces. Keep clear space of half the wordmark height on every side; never recolor, outline or set it on white without an enclosing dark shape.

04Componentsas applied in the AI Operation Packages prototype
Buttons
Selection
Growth
Essentials plus the busywork nobody misses.
Chips & status
media watchcontent calendarinvestor updates
✓ ran⚠ parked · a human has it
Navy commands the actions, green accents the selections.

Amber is reserved for the escalation path — attended, never broken. Periwinkle decorates, it never speaks.

05Referenceswhat this system leans on today