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.

--lynk-color-neutral-0 and --lynk-color-neutral-1000 are the two ends of the active palette’s gray ramp (they map to --lynk-color-gray-0 / --lynk-color-gray-1000), so they carry the palette’s tint and flip with the mode. neutral-0 is the page background: near-white in light themes, near-black in dark themes. --lynk-color-black and --lynk-color-white are pure oklch(0% 0 0) and oklch(100% 0 0) in every theme, with -a10, -a25, -a50, and -a75 alpha variants. Use them for overlays and shadows, not page surfaces.

Text

Use these semantic tokens for text color instead of reaching for a raw neutral-{n} step. The role names a contrast level, so the right value is chosen for you and stays correct in both light and dark themes.

The emphasis order is text (strongest) → text-quiet → text-quieter → text-quietest (lightest), matching Lynk’s quiet/normal/loud scale used elsewhere. For colored text that carries meaning — success, warning, danger, and so on — use the matching state token (e.g. --lynk-color-danger) rather than a text token.

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.

Every palette runs from 25 (the lightest tint) through 950 (the darkest shade). The swatches below start at 50; each palette also has a 25 step one shade lighter, used for the subtlest fills and backgrounds. Gray also has 0 and 1000 endpoint stops, one step beyond 25 and 950; these back --lynk-color-neutral-0 and --lynk-color-neutral-1000.

Each palette also provides a semi-transparent alpha ramp — a10, a25, a50, a75 — for overlays, hover fills, and focus rings. For the hues these are derived from the palette’s base color with color-mix(), so they always track the base and are available for every hue. Gray’s own gray-a05 … gray-a75 ramp is the exception: it’s written as literal oklch() in each palette, from that palette’s gray-500 in light themes and gray-400 in dark themes. Gray also has a gray-200-a05 … gray-200-a75 ramp built the same way from gray-200.