Modifiers

Learn about text modifiers and how to use them in the Base System

Overview

Modifiers are utility classes designed for quickly applying typography styles, such as text weight, text colors, underline, and more. These classes can be applied directly to elements or used as combo-classes to enhance any typography.

If you find yourself using modifiers too often, it may be better to create a new class instead. In the next page, we provide some examples used in the Base System.

Font Weight

Use these classes to change the weight of text

Class Name	Text Weight
Text Weight Black	900
Text Weight Extra Bold	800
Text Weight Bold	700
Text Weight Semibold	600
Text Weight Medium	500
Text Weight Regular	400
Text Weight Light	300

Font Color

Use the classes to change the color of text. It is important to remember that typography should be beautiful and readable. You can whether your

Name	Color Variable
Text Color Primary	text-color-primary
Text Color Secondary	text-color-secondary
Text Color Tertiary	text-color-tertiary
Text Color Light	text-color-light
Text Color Dark	text-color-dark
Text Color Brand	text-color-brand

Font Style

Use these classes to add font styles

Class Name	Text Style
Text Underline	Underline
Text Strike	Strike
Text Italic	Italic