← Back to the article: Writing the colors into a design system

Color role worksheet

One sheet per color role. Name the role on the left, then fill in its family's sixteen codes and one row per part. Everything is editable, and your work stays in this browser until you clear it.

family
meaning
Color role (optional)The partMeaningDark (optional)Sits on

Meaning takes the loudness name of the part's green: subtlest, subtler, subtle, default, or strong. Sits on is what the part sits on, which is what its contrast was checked against. The meaning row says which shade number each name takes; the five names are this series' set, and you can rename them, add more, or delete them. The Dark column is optional: the family shade the part takes on a dark screen. Suggest dark fills the empty Dark cells of rows that have a meaning with the family shade that keeps the part's contrast on a dark page, marked suggested until you pick one. It is a starting point, not a decision. Copy as text gives this role; the CSV, the token file, and the PDF cover every role. The token file is written in three tiers, family, meaning, and place.

© 2026 Suzanne Sallaj