Design Token Logic,
Beautifully Automated

// Generate a 9-step color ramp from a brand color
variable brand: Color = #3B82F6;
variable brandHsl: Color.Hsl = brand.to.hsl();
variable ramp: List;
variable step: Number = 1;
variable stepValue: Number;
variable lightness: Number;
variable key: String;

while (step <= 9) [
  stepValue = step * 100;
  lightness = 95 - (step * 10);
  key = "blue-".concat(stepValue.to_string());
  ramp = ramp.append(hsl(brandHsl.h, brandHsl.s, lightness));
  step = step + 1;
]


return ramp;