Elanor

Design tokens

Named values for color, type, space, shape, and motion. Use semantic tokens in components; primitives are the raw values behind them.

Use

Import one brand stylesheet: radius, pi, earendil, lefos, or elanor.

@import '@earendil-works/design-tokens/radius.css';

.note {
  color: var(--semantic-color-text-secondary);
}

Colors follow the system’s light or dark setting. To fix one, set data-color-scheme to light or dark on the root element. With reduced motion, movement is instant.

The Stylelint plugin flags raw values and unknown tokens.

For tools: JSON API and llms.txt.

Browse

↑↓to select↵to openEscto close