基礎系統

色彩

A guide to creating color tokens with variables for your design system.

Using colors

Master CSS provides a vibrant and precisely designed P3-compatible color palette that works seamlessly across brands or can be tailored to your unique identity.

Default color palette

0
5
10
20
30
40
50
60
70
80
90
95
100
stone
0
5
10
20
30
40
50
60
70
80
90
95
100
gray
0
5
10
20
30
40
50
60
70
80
90
95
100
grey
0
5
10
20
30
40
50
60
70
80
90
95
100
slate
0
5
10
20
30
40
50
60
70
80
90
95
100
brown
0
5
10
20
30
40
50
60
70
80
90
95
100
orange
0
5
10
20
30
40
50
60
70
80
90
95
100
amber
0
5
10
20
30
40
50
60
70
80
90
95
100
yellow
0
5
10
20
30
40
50
60
70
80
90
95
100
lime
0
5
10
20
30
40
50
60
70
80
90
95
100
green
0
5
10
20
30
40
50
60
70
80
90
95
100
beryl
0
5
10
20
30
40
50
60
70
80
90
95
100
teal
0
5
10
20
30
40
50
60
70
80
90
95
100
cyan
0
5
10
20
30
40
50
60
70
80
90
95
100
sky
0
5
10
20
30
40
50
60
70
80
90
95
100
blue
0
5
10
20
30
40
50
60
70
80
90
95
100
indigo
0
5
10
20
30
40
50
60
70
80
90
95
100
violet
0
5
10
20
30
40
50
60
70
80
90
95
100
purple
0
5
10
20
30
40
50
60
70
80
90
95
100
fuchsia
0
5
10
20
30
40
50
60
70
80
90
95
100
pink
0
5
10
20
30
40
50
60
70
80
90
95
100
crimson
0
5
10
20
30
40
50
60
70
80
90
95
100
red
0
5
10
20
30
40
50
60
70
80
90
95
100

The hues of each color in the preset palette range from 0, 5, ..., to 100, and you can choose a color as the main color of your brand or use them directly in the template.

<div class="bg:blue-5 fg:blue-60">…</div>

Adapting default colors

You can adapt the default color palette to your brand's primary color by using the variables object in your master.css.js file. For example, inherit from indigo:

import { variables } from '@master/css'export default {    variables: {        color: {            primary: variables.indigo         }    }}

Apply them using the color-realted syntax:

<div class="bg:primary-5 fg:primary-60">…</div>

See the color variables for more details on how to add custom colors.

With variable modes

You can also use variable modes to define colors for different themes, such as light and dark modes.

<div class="fg:white@dark fg:black@light"><div class="fg:neutral">

As your styles grow, arbitrarily applying @dark or @light in template markup can make it difficult to maintain consistency in your design system's color tokens.

Primitive colors

NormalActiveText on Color
stone
stone-active		Aastone-text
gray
gray-active		Aagray-text
grey
grey-active		Aagrey-text
slate
slate-active		Aaslate-text
brown
brown-active		Aabrown-text
orange
orange-active		Aaorange-text
amber
amber-active		Aaamber-text
yellow
yellow-active		Aayellow-text
lime
lime-active		Aalime-text
green
green-active		Aagreen-text
beryl
beryl-active		Aaberyl-text
teal
teal-active		Aateal-text
cyan
cyan-active		Aacyan-text
sky
sky-active		Aasky-text
blue
blue-active		Aablue-text
indigo
indigo-active		Aaindigo-text
violet
violet-active		Aaviolet-text
purple
purple-active		Aapurple-text
fuchsia
fuchsia-active		Aafuchsia-text
pink
pink-active		Aapink-text
crimson
crimson-active		Aacrimson-text
red
red-active		Aared-text
TokenKeywords
white
black
base		background for page, modal
invert		inverted color of the background

By default, theme modes drive base color variables meticulously adjusted in light and dark modes.

<div class="light">    <div class="bg:yellow"></div></div><div class="dark">    <div class="bg:yellow"></div></div>

Add a primitive color to the base variables group.

export default {    variables: {        color: {            primary: '#000'         }    }}

Apply the custom color:

<p class="bg:primary"></p>

Text colors

TokenDescriptions
Aatext-strongpage titles, subheadings, emphasized fields
Aatext-neutralbody text, descriptions, and general content
Aatext-lightlight color, icons
Aatext-lighterlighter color, icons
Aatext-lightestdim color, placeholder, disabled text
Aatext-invertinverted color of the foreground
Aatext-stoneearthy, soft contrast, organic tone
Aatext-grayneutral, subtle, muted
Aatext-greyneutral, subtle, muted
Aatext-slatecool, calm, sophisticated
Aatext-brownearthy, warm, rustic
Aatext-orangevibrant, energetic, lively
Aatext-amberwarm, glowing, radiant
Aatext-yellowcheerful, sunny, bright
Aatext-limefresh, lively, zesty
Aatext-greennature, growth, harmony
Aatext-berylcalm, soothing, tranquil
Aatext-tealsophisticated, elegant, refined
Aatext-cyanmodern, futuristic, technological
Aatext-skypeaceful, serene, tranquil
Aatext-bluecalm, trustworthy, reliable
Aatext-indigomysterious, deep, spiritual
Aatext-violetcreative, imaginative, magical
Aatext-purpleroyal, luxurious, majestic
Aatext-fuchsiavibrant, bold, playful
Aatext-pinkfeminine, romantic, delicate
Aatext-crimsonpassionate, intense, powerful
Aatext-redbold, energetic, attention-grabbing

By default, theme modes drive text variables are meticulously adjusted in light and dark modes.

M
M
<div class="light">    <span class="fg:yellow">M</span></div><div class="dark">    <span class="fg:yellow">M</span></div>

See the color reference for more details on how to add custom text colors.

Line colors

TokenDescriptions
line-neutral
line-light		alpha, divider
line-lighter		alpha, dotted, td
line-lightest		alpha, layout, navbar, sidebar

By default, theme modes drive line variables are meticulously adjusted in light and dark modes.

<div class="light">    <div class="b:3x|neutral size:96"></div></div><div class="dark">    <div class="b:3x|neutral size:96"></div></div>

See the border color reference for more details on how to add custom border colors.

基礎原理
Compatibility with third-party styles

Learn how to ensure compatibility with third-party and legacy styles in your projects.

基礎系統
Corner Radius

Corner radius defines the roundness of UI elements' corners.

  • Master UI

© 2025 Aoyue Design LLC.MIT License
Trademark Policy