Colors
Last updated
Last updated
Mindtrix colors have four color systems: Primary, Secondary, Basic, and Notice. We split the color into nine levels and used RGB and Hex color codes to display, which is convenient for designers and engineers to communicate in development.
Mindtrix chooses Pantone Color of the Year 2022- Very Peri purple style, divided into nine color levels. The purple combines blue and purple, which symbolizes the integration of physical and virtual life in a new way. It expands your definition of life, welcomes the dynamic web3 world, and explores new possibilities. Mindtrix believes that such a concept aligns with the spirit of our products.
The best way to catch the user's eyes is to use contrast to present. For the secondary color system, we recommend using the contrasting color of the primary color to communicate. Mindtrix chooses sunflower yellow tones so that users can identify and use web3 products.
Black, gray and white tones are the basis of the product, allowing users to read and browse information comfortably.
Functional colors correspond to the status of interface: links, success, reminder, error. Mindtrix design system focuses on the reminder and error, because the product should allow users to know exactly when to be particularly vigilan, and it should be easy to troubleshoot problems. We use red tones, red has the effect of reminding and making mistakes in daily life experience, and can deepen the user's impression when used in products. Statuses such as success and links will be used with reference to primary and secondary colors.
Primary #100
rgba(230, 230, 250, 1)
#E6E6FA
Primary #200
rgba(206, 207, 246, 1)
#CECFF6
Primary #300
rgba(174, 175, 229, 1)
#AEAFE5
Primary #400
rgba(142, 143, 204, 1)
#8E8FCC
Primary #500
rgba(102, 103, 171, 1)
#6667AB
Primary #600
rgba(74, 75, 147, 1)
#4A4B93
Primary #700
rgba(51, 52, 123, 1)
#33347B
Primary #800
rgba(32, 33, 99, 1)
#202163
Primary #900
rgba(19, 20, 82, 1)
#131452
Secondary #100
rgba(254, 251, 206, 1)
#FEFBCE
Secondary #200
rgba(254, 246, 158, 1)
#FEF69E
Secondary #300
rgba(254, 240, 110, 1)
#FEF06E
Secondary #400
rgba(253, 234, 74, 1)
#FDEA4A
Secondary #500
rgba(252, 224, 15, 1)
#FCE00F
Secondary #600
rgba(216, 189, 10, 1)
#D8BD0A
Secondary #700
rgba(181, 156, 7, 1)
#B59C07
Secondary #800
rgba(146, 124, 4, 1)
#927C04
Secondary #900
rgba(120, 101, 2, 1)
#786502
Basic #100
rgba(255, 255, 255, 1)
#FFFFFF
Basic #200
rgba(247, 249, 252, 1)
#F7F9FC
Basic #300
rgba(237, 241, 247, 1)
#EDF1F7
Basic #400
rgba(228, 233, 242, 1)
#E4E9F2
Basic #500
rgba(197, 206, 224, 1)
#C5CEE0
Basic #600
rgba(143, 155, 179, 1)
#8F9BB3
Basic #700
rgba(46, 58, 89, 1)
#2E3A59
Basic #800
rgba(34, 43, 69, 1)
#222B45
Basic #900
rgba(12, 12, 12, 1)
#0C0C0C
Danger #100
rgba(255, 228, 212, 1)
#FFE4D4
Danger #200
rgba(255, 195, 170, 1)
#FFC3AA
Danger #300
rgba(255, 155, 127, 1)
#FF9B7F
Danger #400
rgba(255, 116, 96, 1)
#FF7460
Danger #500
rgba(255, 53, 43, 1)
#FF352B
Danger #600
rgba(219, 31, 38, 1)
#DB1F26
Danger #700
rgba(183, 21, 41, 1)
#B71529
Danger #800
rgba(147, 13, 41, 1)
#930D29
Danger #900
rgba(122, 8, 41, 1)
#7A0829