Color Tokens

Color tokens help maintain consistent use of color throughout your app. Lynk’s color language functions around having one primary color that is used for positive actions and major affordances, while themed state colors and neutrals help create a clean minimalist hierarchy. Primitives should only be used to expand the color language hierarchy when necessary.

Color tokens are referenced using the --lynk-color-{name}-{n} CSS custom property, where {name} is the name of the palette and {n} is the numeric value of the desired swatch.

Theme Tokens

Theme tokens give you a semantic way to reference colors in your app. The primary palette is typically based on a brand color, whereas success, neutral, warning, and danger are used to visualize actions that correspond to their respective meanings.

Primitives

Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don’t have semantic meaning. Color primitives are derived from the fantastic Tailwind color palette.