Colors
Classification
Colors are organized by function, so each group has a clear and specific purpose. This classification helps build a consistent visual system, makes interfaces easier to understand, and ensures color is used in a more intentional way across brand and product experiences.
- Primary → The main brand colors. They represent the core identity of each brand and should be used for the most recognizable and important visual elements.
- Accent → Supporting brand colors used to add emphasis, contrast, and variety. They should be applied selectively to highlight specific elements without competing with the primary colors.
- Neutrals → The foundation of the visual system. Neutrals are used for backgrounds, text, dividers, and layout structure, helping create balance, readability, and clarity.
- Semantic → Colors with a functional meaning in the interface. They are used to communicate status and feedback, such as success, error, warning, and information.
- AI → A dedicated color used to identify artificial intelligence features, tools, and experiences. It helps make AI-related elements easy to recognize and visually distinct.
Color balance
Color balance means using colors in a thoughtful way so that a design looks clear, organized, and easy to follow. Not all colors should appear in the same amount: neutral colors (like white, black, or gray) are usually used the most, while primary or accent colors are used more sparingly to highlight important elements such as buttons, links, or key messages.
When colors are well balanced, the design feels calmer, information is easier to understand, and the most important parts naturally draw attention. It also helps keep the brand consistent across different materials and channels.
MathType
The MathType color balance is clearly weighted toward neutral tones, which take up the majority of the space and create a calm, stable visual foundation. The dark and light neutrals dominate the layout, ensuring readability and reducing visual noise.
The primary color is used more selectively to structure key areas and guide the eye, while the accent color appears in a very small proportion, acting as a strong focal point for specific actions or highlights.
This distribution helps maintain clarity, emphasizes important elements, and keeps the overall experience visually balanced and easy to follow.
Primary
Neutral dark
Accent
Neutral inverse
Neutral light
Nubric
Primary
Accent
Neutral light
Neutral inverse
Neutral dark
WirisQuizzes
Primary
Accent
Neutral light
Neutral inverse
Neutral dark
Wiris
In the Wiris color balance, neutral tones still dominate most of the interface, providing a solid and consistent base that keeps the design clear and easy to read.
However, compared to MathType, there is a more noticeable presence of multiple brand colors grouped on one side. These colors are used in small but distinct proportions, allowing different products or features to be visually differentiated without overwhelming the layout.
Neutral Dark
Neutral light
Neutral inverse
LL Acccent
NB Primary
MT Primary
MT Accent
LL Primary
Brand colors
Brand colors are the core colors that define the visual identity of the brand. They are used to express personality, create recognition, and ensure visual consistency across all communications.
This group includes the primary and accent colors of the brands, which are used in key brand elements such as backgrounds, highlights, graphic elements, and other distinctive components.
MathType
Accent light
#FFEEF0
Accent light hover
#FFDEE2
Base color
Accent dark
#EB001D
Accent dark hover
#B40016
Primary light
#ECF3FD
Primary light hover
#DAE7FB
Base color
Primary dark
#2371E6
Primary dark hover
#1454B4
Nubric
Accent light
#FFEFE3
Accent light hover
#FFE0C9
Base color
Accent dark
#C25400
Accent dark hover
#933F00
Primary light
#E6F4FC
Primary light hover
#CDE9F9
Base color
Primary dark
#007BBE
Primary dark hover
#006095
WirisQuizzes
Accent light
#FFEFE3
Accent light hover
#FFE0C9
Base color
Accent dark
#C25400
Accent dark hover
#933F00
Primary light
#E3F6F6
Primary light hover
#C8EDEE
Base color
Primary dark
#288184
Primary dark hover
#1E6164
Wiris
Primary light
#ECF3FD
Primary light hover
#DAE7FB
Base color
Primary dark
#2371E6
Primary dark hover
#1454B4
Global
Neutral colors
Neutral colors are used to structure layouts and support the brand colors. They include grays and whites, which are typically used for backgrounds, text, dividers, and other interface elements to ensure readability and visual balance.
Neutral light
#F0F2F5
Neutral light hover
#E2E6EC
Neutral medium
#627696
Neutral medium hover
#495971
Base color
Neutral dark
#394658
Neutral dark hover
#1E242E
Base color
Neutral inverse
#FFFFFF
Neutral inverse light
##FFFFFFCC
Neutral inverse light hover
#FFFFFF
Neutral inverse hover
#FFFFFFCC
Semantic colors
Semantic colors convey status and meaning in the interface. They are used to indicate states such as success, error, warning, and information, helping users quickly interpret feedback and system messages.
Error light
#FCEFEF
Error light hover
#F9E0E0
Base color
Error dark
#D83939
Error dark hover
#AA2121
Success light
#E2F7EA
Success light hover
#C6F0D5
Base color
Success dark
#248647
Success dark hover
#1B6536
Info light
#ECF3FD
Info light hover
#DAE7FB
Base color
Info dark
#2371E6
Info dark hover
#1454B4
Warning light
#FCF2D2
Warning light hover
#F9E5A7
Base color
Warning dark
#92710A
Warning dark hover
#6E5507
Artificial Intelligence (AI) colors
Artificial Intelligence (AI) color is used to represent features, tools, and experiences powered by artificial intelligence. It helps users quickly identify AI-related functionality and distinguishes these capabilities within the product interface.
AI light
#F5F0FC
AI light hover
#ECE2FA
Base color
AI dark
#9154E0
AI dark hover
#7226D5