Buma UI - Documentation

Overview The primary color is our "Brand" color, and it appears on all interactive elements such as buttons, links, inputs, and so on. This color can help to define the overall mood and elicit emotions. The secondary colors are used to accent or complement the primary color. These should be used sparingly to draw attention to the UI elements. The tertiary color is a neutral color that serves as the color system's foundation. Text, form fields, backgrounds, dividers, and outline cards are almost always gray in UI design. Each color includes BUMA and BSpace colors, giving you complete flexibility with enough variations of each color for any use case. Colors can be mixed and matched to create a well-balanced set. Green is selected as the primary color. Simply apply the color styles from the design panel when creating a new component.

Primary

Primary100

Primary200

Primary300

Primary400

Primary500

Primary600

Secondary

Secondary100

Secondary200

Secondary300

Secondary400

Secondary500

Secondary600

Neutral

Neutral0

Neutral100

Neutral200

Neutral300

Neutral400

Neutral500

Neutral600

Neutral700

Roles ColorColor roles serve to convey the purpose and intention behind the use of specific colors within a design system. They provide clarity and consistency by assigning meaningful functions to colors. For instance, when applied to buttons, color roles help differentiate between various types of actions, such as primary actions that require immediate attention, secondary actions that are less critical, warning actions that alert users to potential issues, and dangerous actions that indicate potentially harmful or irreversible outcomes. By defining these roles, designers ensure that users can intuitively understand and interact with the interface.

Properties	Desc
Success	Success colors communicate positive actions, positive tendencies, or affirmative successes.
Warning	Colors that indicate that an action is potentially harmful or "on hold" can be used to communicate this. These colors are frequently used in confirmations to draw the attention of the user.
Information	Colors in the information section can communicate that an action is informative, or these colors are commonly used in awareness to draw the attention of users.
Error	Colors are used to distinguish between error states and in "destructive" actions. They convey a destructive/negative action, such as removing a team member.

Accent Color Accent Colors are used to emphasize different semantic states and to provide visual feedback and/or warnings to users as they interact with your interface.

Green

Green050

Green100

Green150

Green200

Green300

Green400

Green500

Green600

Green700

Green800

Green850

Green900

Green950

Orange

Orange050

Orange100

Orange150

Orange200

Orange300

Orange400

Orange500

Orange600

Orange700

Orange800

Orange850

Orange900

Orange950

Grey

Grey050

Grey100

Grey150

Grey200

Grey300

Grey400

Grey500

Grey600

Grey700

Grey800

Grey850

Grey900

Grey950

Blue

Blue000

Blue050

Blue100

Blue150

Blue200

Blue300

Blue400

Blue500

Blue600

Blue700

Blue800

Blue850

Blue900

Blue950

Purple

Purple000

Purple050

Purple100

Purple150

Purple200

Purple300

Purple400

Purple500

Purple600

Purple700

Purple800

Purple850

Purple900

Purple950

Tosca

Tosca000

Tosca050

Tosca100

Tosca150

Tosca200

Tosca300

Tosca400

Tosca500

Tosca600

Tosca700

Tosca800

Tosca850

Tosca900

Tosca950

Yellow

Yellow000

Yellow050

Yellow100

Yellow150

Yellow200

Yellow300

Yellow400

Yellow500

Yellow600

Yellow700

Yellow800

Yellow850

Yellow900

Yellow950

Red

Red000

Red050

Red100

Red150

Red200

Red300

Red400

Red500

Red600

Red700

Red800

Red850

Red900

Red950

Pink

Pink000

Pink050

Pink100

Pink150

Pink200

Pink300

Pink400

Pink500

Pink600

Pink700

Pink800

Pink850

Pink900

Pink950

Light Purple

LPurple000

LPurple050

LPurple100

LPurple150

LPurple200

LPurple300

LPurple400

LPurple500

LPurple600

LPurple700

LPurple800

LPurple850

LPurple900

LPurple950