Buma UI - DocumentationBuma UI - Documentation
Get Started
Foundations
Components
Resources
Patterns
Data Visualization
Back to BSpace
Get Started
Foundations
Components
Resources
Patterns
Data Visualization
  • stacksFoundations
    • 💡 Overview
    • Color
    • Principle
    • Typography
  • brickComponents
    • 💡 Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Bottom Sheet
    • Bread Crumb
    • Button
    • Button Link
    • Button Navigation
    • Calendar
    • Card
    • Chat
    • Checkbox
    • Chips
    • Choice Tile
    • Comment
    • Date Picker
    • Divider
    • Download
    • Drawer
    • Dropdown
    • Empty State
    • Floating Button
    • Form Input
    • Header
    • Hint
    • Icon
    • List Choice
    • Loading
    • Modal
    • Navigation Bar
    • Notification
    • Pagination
    • Progress Bar
    • Radio Button
    • Search
    • Scrolling Bar
    • Segmented Switch
    • Side Menu
    • Side Tab
    • Slider
    • Switch
    • Tab
    • Table
    • Text Area
    • Text Input
    • Time Picker
    • Title
    • Toast
    • Tooltip
    • Wizzard
  • splitscreenPattern
    • 💡 Overview
    • Filter
      upcoming
    • Form
      upcoming
    • Notification
    • PWA
      upcoming
    • table
      upcoming
    • Upload Download
      upcoming
  • insert_chartData Visualization
    • 💡 Overview
    • Tiering
    • Pattern
    • Chart and Graph
      • Chart Selection Guide
      • Map Selector
      • Donut Chart
      • Donut Progress Bar Chart
      • Spider Chart
      • Line Chart
      • Chart Area
      • Speedometer
      • Heat Map
      • Scatter Plot
      • Pie Chart
      • Bar Chart
      • Waterfall Chart
      • Sunburst Chart
      • Tree Decomposition Chart
      • Scorecards
      • Table
      • Micro Visualization
    • Typography
    • Color Palette
  • data_objectTokens
    upcoming
  • inventory_2Resources
    • 💡 Overview
    • Mobile
      new
      • 💡 Introduction
      • Installation
      • General
        • Important Rules
        • Naming Convention
        • Clean Architecture
    • Web
      upcoming
foundationsColorColor is a fundamental aspect of designing products that deliver intuitive interfaces and seamless user experiences
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
Hex content_copy
Primary200
Hex content_copy
Primary300
Hex content_copy
Primary400
Hex content_copy
Primary500
Hex content_copy
Primary600
Hex content_copy
Secondary
Secondary100
Hex content_copy
Secondary200
Hex content_copy
Secondary300
Hex content_copy
Secondary400
Hex content_copy
Secondary500
Hex content_copy
Secondary600
Hex content_copy
Neutral
Neutral0
Hex content_copy
Neutral100
Hex content_copy
Neutral200
Hex content_copy
Neutral300
Hex content_copy
Neutral400
Hex content_copy
Neutral500
Hex content_copy
Neutral600
Hex content_copy
Neutral700
Hex content_copy
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.
PropertiesDesc
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
Hex content_copy
Green100
Hex content_copy
Green150
Hex content_copy
Green200
Hex content_copy
Green300
Hex content_copy
Green400
Hex content_copy
Green500
Hex content_copy
Green600
Hex content_copy
Green700
Hex content_copy
Green800
Hex content_copy
Green850
Hex content_copy
Green900
Hex content_copy
Green950
Hex content_copy
Orange
Orange050
Hex content_copy
Orange100
Hex content_copy
Orange150
Hex content_copy
Orange200
Hex content_copy
Orange300
Hex content_copy
Orange400
Hex content_copy
Orange500
Hex content_copy
Orange600
Hex content_copy
Orange700
Hex content_copy
Orange800
Hex content_copy
Orange850
Hex content_copy
Orange900
Hex content_copy
Orange950
Hex content_copy
Grey
Grey050
Hex content_copy
Grey100
Hex content_copy
Grey150
Hex content_copy
Grey200
Hex content_copy
Grey300
Hex content_copy
Grey400
Hex content_copy
Grey500
Hex content_copy
Grey600
Hex content_copy
Grey700
Hex content_copy
Grey800
Hex content_copy
Grey850
Hex content_copy
Grey900
Hex content_copy
Grey950
Hex content_copy
Blue
Blue000
Hex content_copy
Blue050
Hex content_copy
Blue100
Hex content_copy
Blue150
Hex content_copy
Blue200
Hex content_copy
Blue300
Hex content_copy
Blue400
Hex content_copy
Blue500
Hex content_copy
Blue600
Hex content_copy
Blue700
Hex content_copy
Blue800
Hex content_copy
Blue850
Hex content_copy
Blue900
Hex content_copy
Blue950
Hex content_copy
Purple
Purple000
Hex content_copy
Purple050
Hex content_copy
Purple100
Hex content_copy
Purple150
Hex content_copy
Purple200
Hex content_copy
Purple300
Hex content_copy
Purple400
Hex content_copy
Purple500
Hex content_copy
Purple600
Hex content_copy
Purple700
Hex content_copy
Purple800
Hex content_copy
Purple850
Hex content_copy
Purple900
Hex content_copy
Purple950
Hex content_copy
Tosca
Tosca000
Hex content_copy
Tosca050
Hex content_copy
Tosca100
Hex content_copy
Tosca150
Hex content_copy
Tosca200
Hex content_copy
Tosca300
Hex content_copy
Tosca400
Hex content_copy
Tosca500
Hex content_copy
Tosca600
Hex content_copy
Tosca700
Hex content_copy
Tosca800
Hex content_copy
Tosca850
Hex content_copy
Tosca900
Hex content_copy
Tosca950
Hex content_copy
Yellow
Yellow000
Hex content_copy
Yellow050
Hex content_copy
Yellow100
Hex content_copy
Yellow150
Hex content_copy
Yellow200
Hex content_copy
Yellow300
Hex content_copy
Yellow400
Hex content_copy
Yellow500
Hex content_copy
Yellow600
Hex content_copy
Yellow700
Hex content_copy
Yellow800
Hex content_copy
Yellow850
Hex content_copy
Yellow900
Hex content_copy
Yellow950
Hex content_copy
Red
Red000
Hex content_copy
Red050
Hex content_copy
Red100
Hex content_copy
Red150
Hex content_copy
Red200
Hex content_copy
Red300
Hex content_copy
Red400
Hex content_copy
Red500
Hex content_copy
Red600
Hex content_copy
Red700
Hex content_copy
Red800
Hex content_copy
Red850
Hex content_copy
Red900
Hex content_copy
Red950
Hex content_copy
Pink
Pink000
Hex content_copy
Pink050
Hex content_copy
Pink100
Hex content_copy
Pink150
Hex content_copy
Pink200
Hex content_copy
Pink300
Hex content_copy
Pink400
Hex content_copy
Pink500
Hex content_copy
Pink600
Hex content_copy
Pink700
Hex content_copy
Pink800
Hex content_copy
Pink850
Hex content_copy
Pink900
Hex content_copy
Pink950
Hex content_copy
Light Purple
LPurple000
Hex content_copy
LPurple050
Hex content_copy
LPurple100
Hex content_copy
LPurple150
Hex content_copy
LPurple200
Hex content_copy
LPurple300
Hex content_copy
LPurple400
Hex content_copy
LPurple500
Hex content_copy
LPurple600
Hex content_copy
LPurple700
Hex content_copy
LPurple800
Hex content_copy
LPurple850
Hex content_copy
LPurple900
Hex content_copy
LPurple950
Hex content_copy
arrow_back
Previous 💡 Overview
Next Principle
arrow_forward