Design tokens
Design tokens keep the overall design of your website or app consistent, ensuring the parts work together and look good.
Design tokens in SmoothCSS are implemented with CSS custom properties (also called CSS variables). As these design tokens are used in every level of SmoothCSS you can change the look of your entire site by tweaking or changing a small set of variables.
All design tokens have a default value so you have a good base to build on. As a result you may not need to change all of the tokens to implement your design.
See the customisation section for information on how to implement your design and customise SmoothCSS.
Typography
There are a number of typography tokens that you will likely not need to change.
--font-sans-system(sans-serif system font)--font-mono-system(mono system font)--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extra-bold: 800;--font-weight-black: 900;
The following design tokens may need to be customised based on your font selection:
--font-family-heading--font-family-body--font-family-mono--line-height-micro--line-height-flat--line-height-fine--line-height-standard--line-height-loose--font-weight-heading--font-weight-body-emphasis--heading-letter-spacing--button-letter-spacing--max-main-heading-inline-size--max-sub-heading-inline-size--max-content-inline-size
Font sizes are implemented in steps.
--step-1--step-2--step-3--step-4--step-5--step-6--step-7--step-8--font-size-base(body font size – default is step 3)
Spacing
As SmoothCSS uses fluid spacing, which increases in size with the viewport width, in addition to discrete space tokens there are tokens for spaces that transition between two values.
Discrete space tokens
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8--space-9
Transition space tokens
--space-1-2--space-2-3--space-3-4--space-4-5--space-5-6--space-6-7--space-7-8--space-8-9
Containers
A set of containers for consistent layouts.
--container-1--container-2--container-3--container-4--container-5--container-6--container-7--container-8--container-9--container-10--container-11--container-12--site-max-inline-size--gutter(default value for gap and layout spacing)
Borders
A combination of generic tokens, and tokens to ensure form elements look the same.
--outline--outline-variant--outline-width--border-radius-1--border-radius-2--border-radius-3--border-radius-4--border-radius-full--border-form-input--border-radius-form-input
Colors
Neutral colors:
--color-light-surface-lowest--color-light-surface-mid--color-light-surface-highest--color-light-on-surface--color-light-on-surface-variant--color-light-outline--color-light-outline-variant--color-dark-surface-lowest--color-dark-surface-mid--color-dark-surface-highest--color-dark-on-surface--color-dark-on-surface-variant--color-dark-outline--color-dark-outline-variant
Primary colors:
--color-light-primary--color-light-on-primary--color-light-primary-container--color-light-on-primary-container--color-light-on-primary-container-variant--color-light-primary-outline--color-dark-primary--color-dark-on-primary--color-dark-primary-container--color-dark-on-primary-container--color-dark-on-primary-container-variant--color-dark-primary-outline
Error colors:
--color-light-error--color-light-on-error--color-light-error-container--color-light-on-error-container--color-light-on-error-container-variant--color-light-error-outline--color-dark-error--color-dark-on-error--color-dark-error-container--color-dark-on-error-container--color-dark-on-error-container-variant--color-dark-error-outline
Forms:
--color-form-input--color-form-input-background
Hover states:
--hover-light-color-mix-percentage--hover-dark-color-mix-percentage