Establish base unit and tint variables to control UI
— #css
Whether through CSS Custom Properties or a pre-processor like Less or Sass, establishing base variables at the top of the document and referencing them whenever colour or layout values are defined influences aesthetic harmony. Great numbers to select from are 12 or 16 due to their ability to be cleanly divided into halves or quarters.
It is possible to do the same with colour. Defining the RGB values in a Custom Property allows one to later drop those into the rgba() functional notation and set the alpha channel in context.
An an entire layout and colour system can feasibly be controlled in this way; completely avoiding absolute values within components. The values may never change, but the method forces consistency and the option to re-tint or scale UI improves the robustness of the design.
:root {
--unit: 12px;
--tint: 255, 79, 0;
}
button {
background: rgba(var(--tint), 0.25);
border-radius: calc(var(--unit) / 4);
line-height: calc(var(--unit) * 2);
color: rgba(var(--tint));
padding: calc(var(--unit) / 2) var(--unit);
}