Design properties

Appearance

“Appearance” is a cross-layer concept referring to the colour scheme applied to an entity.

Token-level appearance

The brand scheme context defined in design tokens, typically light or dark themes.

Component-level appearance

Typically the semantic colour role expressed by a component, such as primary, secondary, error, success. It is not always a 1-to-1 relationship with colour role names, for example “inverse” and “default”.

Fit

Components use a property called “fit” to control their sizing. Most components support three fit values: “small”, “medium”, and “large”. Fit determines a number of size-related properties including height, padding, border radius and typographic scale.

Variant

Variant changes visual composition (independent of colour) and, in some components, interaction pattern. Common values include “filled”, “outlined”, “plain”, “bordered” and “borderless”.

See also