Design Token

Fonts

Customizing fonts for your design system.

Default

TokenValue
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" ]
sans

Heavy boxes perform quick waltzes and jigs.

serif

Heavy boxes perform quick waltzes and jigs.

mono

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">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
</html>

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
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.