Designing
Clarity provides design assets that help designers get started. These assets should be used in a design process that aligns with the Clarity Design System. To jump start your project and align with the Clarity Design System you should download the font resources below and have them installed on your computer. Set up a free tier Figma (opens new window) account to get started with the Clarity themes, icons and color libraries.
Primary Font
The default font intended for use with Clarity is Clarity City (opens new window). Download and install the font files on your computer to make sure it is available when using the assets below.
Clarity Angular uses Metropolis as the base font, which you can download below. Clarity City is an improved version of Metropolis, but has not been updated in Clarity Angular due to the potential for breaking changes.
Figma Libraries
Clarity uses the popular design tool Figma (opens new window) when designing and documenting components and foundations. Bookmark these resources to re-use Clarity assets in your design process.