Level one

Foundation Tokens

Foundation tokens have the least amount of context.

These tokens are assigned values directly (hardcoded) or are derived from a simple math function for consistency and harmony (scales).

eg. #7670e7, Bold, [4px, 8px, 16px, 32px].

If possible avoid applying these directly to your design/Ui elements. Instead the purpose of these tokens is to provide their values to our Context tokens. Some foundation tokens (like font-size) can be generated as a scale using a simple math function.

Together with Context tokens, foundation tokens make up what we consider a “theme file”.

Examples: