There are 2 main palettes heavily used on MaGIC platform.
1.1 Grayscale
1.2 Brand Color
Grey-10
#57575a
Grey-7
#8a8a8c
Grey-3
#cdcdce
Grey-1
#eee
Our grays can be used on most UI elements but should be limited to:
1.1.1 Background color
1.1.2 Text colors
1.1.3 Border color
1.1.4 SVG fill colors
Red
#d7333b
Blue
#00abc7
Green
#66aa45
Yellow
#faa61a
Orange
#f15a22
MaGIC brand colors should be used sparingly on most UI elements. Ideally, they are limited to primary actions or accents within the application.
1.3.1 Visual Messaging
Certain colors have inherent meaning for a large majority of users, although we recognize that cultural differences are plentiful. For example, we use red (crimson) to communicate an error, green (medium sea green) to indicate success, yellow to indicate warning and blue (cadet blue) for general information
1.3.2 Visual Differentiation
MaGIC uses many secondary colors in conjunction with iconography to visually differentiate between similar types of content, such as records of different object types. However, it’s important to not always rely on color to provide visual differentiation. If too many use cases employ color in this manner, the colors lose their meaning.
1.3.3 Visual Hierarchy
Color is used sparingly to draw attention to important elements and those that we want the user to take action on. Because most of the application is gray, pops of color catch a user’s eye.
1.3.4 Accessibility
It’s important that our products meet all web accessibility standards, including the minimum contrast ratios that the WCAG 2.0 specifies for text and background color combinations. This adherence helps users who are colorblind or have low vision to better interact with MaGIC website, but it also improves usability and readability for all users.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Light Grey
#f4f4f4
Green
#d7333b
Use these tokens for background colors only. Do not use these for border colors or text colors.
On April 27th 2014, MaGIC was launched by President Barack Obama and Prime Minister YAB Dato’ Sri Mohd Najib Tun Abdul Razak with 7000 aspiring entrepreneurs in attendance. As part of the launch, MaGIC signed memorandum of understandings with Stanford University and UP Global to further foster and develop a vibrant startup ecosystem in Malaysia and beyond.
On April 27th 2014, MaGIC was launched by President Barack Obama and Prime Minister YAB Dato’ Sri Mohd Najib Tun Abdul Razak with 7000 aspiring entrepreneurs in attendance. As part of the launch, MaGIC signed memorandum of understandings with Stanford University and UP Global to further foster and develop a vibrant startup ecosystem in Malaysia and beyond.
Use these tokens for background colors only. Do not use these for border colors or text colors.
On April 27th 2014, MaGIC was launched by President Barack Obama and Prime Minister YAB Dato’ Sri Mohd Najib Tun Abdul Razak with 7000 aspiring entrepreneurs in attendance. As part of the launch, MaGIC signed memorandum of understandings with Stanford University and UP Global to further foster and develop a vibrant startup ecosystem in Malaysia and beyond.
On April 27th 2014, MaGIC was launched by President Barack Obama and Prime Minister YAB Dato’ Sri Mohd Najib Tun Abdul Razak with 7000 aspiring entrepreneurs in attendance. As part of the launch, MaGIC signed memorandum of understandings with Stanford University and UP Global to further foster and develop a vibrant startup ecosystem in Malaysia and beyond.
On April 27th 2014, MaGIC was launched by President Barack Obama and Prime Minister YAB Dato’ Sri Mohd Najib Tun Abdul Razak with 7000 aspiring entrepreneurs in attendance. As part of the launch, MaGIC signed memorandum of understandings with Stanford University and UP Global to further foster and develop a vibrant startup ecosystem in Malaysia and beyond.
On April 27th 2014, MaGIC was launched by President Barack Obama and Prime Minister YAB Dato’ Sri Mohd Najib Tun Abdul Razak with 7000 aspiring entrepreneurs in attendance. As part of the launch, MaGIC signed memorandum of understandings with Stanford University and UP Global to further foster and develop a vibrant startup ecosystem in Malaysia and beyond.
On April 27th 2014, MaGIC was launched by President Barack Obama and Prime Minister YAB Dato’ Sri Mohd Najib Tun Abdul Razak with 7000 aspiring entrepreneurs in attendance. As part of the launch, MaGIC signed memorandum of understandings with Stanford University and UP Global to further foster and develop a vibrant startup ecosystem in Malaysia and beyond.
On April 27th 2014, MaGIC was launched by President Barack Obama and Prime Minister YAB Dato’ Sri Mohd Najib Tun Abdul Razak with 7000 aspiring entrepreneurs in attendance. As part of the launch, MaGIC signed memorandum of understandings with Stanford University and UP Global to further foster and develop a vibrant startup ecosystem in Malaysia and beyond.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.
Use these tokens for background colors only. Do not use these for border colors or text colors.