Color and typography are two vital elements of your design system. They help establish the look and feel of your brand, ensuring consistency across all designs.

• Creating a color system: Start by defining your primary brand colors, which typically include a primary, secondary, and possibly tertiary color. You can then create shades and tints of these colors for use in different contexts. In Figma, you can easily create color styles. Select an element with the color you want, click the "Style" button in the right panel, then "+,” and name your color.
• Creating a typography system: Typography involves more than just selecting a font. You'll need to define font styles for different text elements, like headers, subheaders, body text, and captions. For each element, consider size, weight, and line spacing. In Figma, select your text element, click the "Style" button in the right panel, then "+,” and give your text style a name.

By setting up these styles in Figma, you ensure consistent use of colors and fonts across your designs. Just select an element and click the appropriate style from the right panel. And if you ever need to adjust a color or font, changes to the style will apply everywhere it's used, keeping everything in sync.