Getting started

Use search to find components, each component in the library has its unique name, which corresponds to the name in the code.

Drag the component you are using to your work area (product templates). Please note that there may be hidden layers inside the component to add various elements. Components can be in different states depending on your layout.

Use the Figma - Variants menu to switch states.

What makes our colour system different?

For that, we decided to give our colours unique names.

Meet the Dragon Ball Z approach.

Each colour name is assigned for a specific purpose and for each product these values are different.

How to create your custom colours based on the Moon colour convention.

• Check the guide for colours
• Duplicate Colours file
• Replace colour values one by one
• Publish Library
• Enable it from the "Asset panel"
• 🎉 Enjoy your new theme.

Grid of font sizes for web and mobile devices used in components.

Styles contain:

• font size
• font weight
• line height
• letter spacing

We also use 2 types of typography:

• Paragraph - for regular text
• UI type - for UI elements (buttons, inputs, which helps developers)

Design tokens are collections of variables that customize Moon components for your product.

• Find the tokens page in your copy of the components file
• Change the values of your product ones
• Publish Library
• Share tokens with your product front-end dev
• 🎉 Enjoy your new theme.