Custom Syntax


Customizing variables for your design tokens.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

import { variables } from '@master/css'
export default {
variables: {
'font-family': {
sans: 'Inter'
sizing: { md: 1024 },
spacing: { x1: 2 },
primary: '#000000'

Apply custom variables using ambiguous shorthand:

<div class="font:sans max-w:md m:x1 bg:primary"></div>

Master CSS provides useful variable groups for various inheritance behaviors such as colors, spacings, fonts, and box sizes by default. You can start implementing your design tokens from these topics.

This guide primarily explains the functionality of variables.

Basic usage

Add a variable

Add rule-specific variables

Add a variable alias

Group variables


Customizing abstract styles for your design system.

Class Variant

Create reusable, extensible, and customizable style class variants.

MIT License © Aoyue Design LLC.