Marcelo Paiva

All illustrations

Drawing for CCDS: a design system that ships itself.

Draws this one again — same subject and the same people, a new palette and a new angle on it, described afresh. It replaces the drawing on this page for everyone, until somebody draws another. Costs the site about eight cents, and a few seconds.

Or press the left arrow and the right arrow.

CCDS: a design system that ships itself

Work — read the piece

Meant to show
A designer with low vision at the size she needs, making the change herself in the product's real material instead of handing over a picture of it.
Asked for
A South Asian woman and an older colleague at one desk, the screen between them magnified to twice the size of everything around it, her hands already typing the change
Drawn with (split)
#b9aa3c#3f7db4#763cb2

Why these three

The opposition backed off by 30 degrees either side, which keeps the contrast without the vibration.

  1. SeedSHA-256 of ccds, which is the same every time and different for every piece.
  2. Base hueThe first two bytes as a fraction of 65,535, times 360 = 64°.
  3. GeometryThe third byte modulo 4 picks split, which adds 0°, 150°, 210°.
  4. WobbleThree more bytes shift each by up to ±12° — −11.9°, −6.3°, −5.1° — so two pieces that draw the same geometry are still not the same shape on the wheel.
  5. Result#b9aa3c53° at 68% saturation, 73% value#3f7db4208° at 65% saturation, 71% value#763cb2269° at 66% saturation, 70% value

Saturation never drops below 72% and value never below 78%, which is what keeps a hue reading as the color it was chosen to be rather than as a dark. More on how these are made.