[[TOC]]

Used to apply a font to:

• Texts
• Titles
• Links
• Icons

Variable	Description
font-family-1	Primary font
font-family-2	Secondary font
font-family-3	Tertiary font
font-family-icons	Icon font

Used in:

• Titles

Based on the title sizes identified and ordered from big to small, set them properly in these:

Variable	Description
size-title-1	h1
size-title-2	h2
size-title-3	h3
size-title-4	h4
size-title-5	h5
size-title-6	h6

Used in:

• Paragraphs

If there are fewer sizes than the specified number of variables, record the existing sizes. For the unassigned sizes, set their values to the difference between the respective values of the preceding sizes. For instance, if you have a variable with a value of 1.5 and another with a value of 2, the unassigned variable would be calculated based on the difference between the respective values of the preceding sizes. If the variable is higher, it would be set to 2.5. Conversely, if the variable is lower, it would be set to 1.5.

Variable	Description
size-text-xs	smallest size possible for text
size-text-s	-
size-text-m	-
size-text-l	-
size-text-xl	-
size-text-2xl	-
size-text-3xl	biggest size possible for text

There must be an equal number of line-height variables as there are font-size variables. If there are fewer sizes than the specified number of variables, record the existing sizes. For the unassigned sizes, set their values to the difference between the respective values of the preceding sizes. For instance, if you have a variable with a value of 1.25 and another with a value of 1.5, the unassigned variable would be calculated based on the difference between the respective values of the preceding sizes. If the variable is higher, it would be set to 1.75. Conversely, if the variable is lower, it would be set to 1.

Used in:

• Paragraphs
• Titles
• Links

Variable	Description
size-line-height-xs	smallest size possible for line-height
size-line-height-s	-
size-line-height-m	-
size-line-height-l	-
size-line-height-xl	-
size-line-height-2xl	-
size-line-height-3xl	biggest size possible for line-height

Used in:

• Paragraphs
• Titles
• Links

Variable	Description
letter-spacing-xs	smallest size possible for letter-spacing
letter-spacing-s	-
letter-spacing-m	-
letter-spacing-l	-
letter-spacing-xl	-
letter-spacing-2xl	-
letter-spacing-3xl	biggest size possible for letter-spacing

The values listed above refer to specific letter-spacing sizes. The regular/default letter-spacing(normal), commonly used in everyday styling, is not explicitly mentioned as it is assumed to be the standard spacing unless otherwise specified.

After you have Identified colors, you will end up with a distinct list of colors used. Group colors into the following categories:

• Neutral: Colors that are different tones of grey. no black or white are included here.
• Main: Main colors used for text and background in the website, as well as for links.
• Accent: Other colors being used, either for backgrounds or text.

Once these are categorized, it is useful to have them sorted from light to dark, specially in neutral and Accent categories. Use https://elektrobild.org/tools/sort-colors to help with the task.

By having each category sorted, it will be easier to then assign values to each available variable. use the following set of variables for each category and assign a color:

Variable	Description
color-main-primary	Primary color
color-main-secondary	Secondary Color
color-main-tertiary	Tertiary Color
color-main-quaternary	Quaternary color
color-main-quinary	Quinary color
color-accent-1	Accent color 1
color-accent-2	Accent color 2
color-accent-3	Accent color 3
color-accent-4	Accent color 4
color-accent-5	Accent color 5
color-neutral-20	Neutral color
color-neutral-50	Neutral color
color-neutral-100	Neutral color
color-neutral-200	Neutral color
color-neutral-300	Neutral color
color-neutral-400	Neutral color
color-neutral-500	Neutral color
color-neutral-600	Neutral color
color-neutral-700	Neutral color
color-neutral-800	Neutral color
color-neutral-900	Neutral color

More variables can be created if it needs so. follow the naming convention.

• If there are less colors than variables available, you can then remove the remaining variables

Used to apply size to an icon.

Variable	Description
size-icon-xs	Smallest icon size
size-icon-s	-
size-icon-m	-
size-icon-l	-
size-icon-xl	-
size-icon-2xl	-
size-icon-3xl	Biggest icon size

Used to apply size to a logo.

Variable	Description
size-logo-s	Smallest logo size
size-logo-m	Biggest logo size

Used to separate elements from each other. Used in:

• Wrappers

Variable	Description
size-separation-2xs	Smallest separation space
size-separation-xs	-
size-separation-s	-
size-separation-m	-
size-separation-l	-
size-separation-xl	-
size-separation-2xl	-
size-separation-3xl	Biggest separation space

Used to apply spacing to:

• flexbox
• grids
• sections
• containers.

Variable	Description
size-layout-2xs	Smallest layout space
size-layout-xs	-
size-layout-s	-
size-layout-m	-
size-layout-l	-
size-layout-xl	-
size-layout-2xl	-
size-layout-3xl	Biggest layout space