In an effort to avoid using hard coded hex values, we will be using variables instead.

The naming convention for semantic color variables is:

element + name

Element is best thought of in terms of what it is. A border. An icon. This is the most specific part of the variable name.

ex: background

Name is what the variable does. Most often, it could be a state or action.

ex: hovered

Note, you would never have a semantic variable with both foreground and background elements at once. Bad ex: background-text

These examples are reflected on a 1 to 1 basis in both Figma and code.

In Kitt Storybook it will look like "kt-text-default"

In Kitt Figma it will look like Text/default

Try it out in codepen with CSS variables.