Design Token


Customizing fonts for your design system.


sans[ "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" ]
serif[ "ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif" ]
mono[ "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace" ]

Heavy boxes perform quick waltzes and jigs.


Heavy boxes perform quick waltzes and jigs.


Heavy boxes perform quick waltzes and jigs.

By default, Master provides three font family variables, sans, serif, and mono, to facilitate your use as fallbacks when adding custom fonts.

Basic usage

Apply a font

Apply the defined font-family variables using the inherited syntaxes font, font-family.

<body class="font:$(font-family-sans)"></body>
<body class="font:font-family-sans"></body>
<body class="font:sans"></body>

Font faces

Google Fonts

The fastest way to declare custom font faces is through Google Fonts.

<!DOCTYPE html>
<html lang="en">
<link rel="preconnect" href="">
<link rel="preconnect" href="" crossorigin>
<link href=";500;600;700;800&display=swap" rel="stylesheet">

Self-hosted fonts

You can also self-host the fonts via native CSS, as usual.

@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/Inter-Regular.woff2") format("woff2");
Design Token

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.