designtokens.fyi

© Design Systems House

Local

A scope that is bound to a smaller region of a larger ecosystem. Activities that occur within a local scope do not affect entities in other scopes outside of it.

Example

CSS custom properties defined at a specific selector are considered locally scoped to that element and its descendants, accessible at any lower scope.

button {
    --background-color: blue;
}

In this example, the --background-color CSS custom property is accessible only to <button/> elements and their children. This invented property can be used to inform the button’s properties as well as the properties of child elements within but not affect elements outside of the button’s scope.