BrandBook
Colors
Brand → Primary & Secondary
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 secondary 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
Accent dark
#EB001D
Accent dark hover
#B40016
Primary light
#ECF3FD
Primary light hover
#DAE7FB
Primary dark
#2371E6
Primary dark hover
#1454B4
Learning Lemur / WirisQuizzes
Accent light
#FFEFE3
Accent light hover
#FFE0C9
Accent dark
#C25400
Accent dark hover
#933F00
Primary light
#E3F6F6
Primary light hover
#C8EDEE
Primary dark
#288184
Primary dark hover
#1E6164
Wiris
Accent light
#F0F2F5
Accent light hover
#E2E6EC
Accent dark
#394658
Accent dark hover
#1E242E
Primary light
#ECF3FD
Primary light hover
#DAE7FB
Primary dark
#2371E6
Primary dark hover
#1454B4
Global
Neutral
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
Neutral dark
#394658
Neutral dark hover
#1E242E
Neutral inverse
#FFFFFF
Neutral inverse hover
#FFFFFFCC
Neutral inverse light
##FFFFFFCC
Neutral inverse light hover
#FFFFFF
Semantic
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
Error dark
#D83939
Error dark hover
#AA2121
Success light
#E2F7EA
Success light hover
#C6F0D5
Success dark
#248647
Success dark hover
#1B6536
Info light
#ECF3FD
Info light hover
#DAE7FB
Info dark
#2371E6
Info dark hover
#1454B4
Warning light
#FCF2D2
Warning light hover
#F9E5A7
Warning dark
#92710A
Warning dark hover
#6E5507
Artificial Intelligence (AI)
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
AI dark
#9154E0
AI dark hover
#7226D5
Usage & Misuse
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.
Primary
Accent
Neutral dark
Neutral light
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.
MathType
Wiris
Learning Lemur / WirisQuizzes
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.
Misuse
Bla bla bla
Colors
Brand → Primary & Secondary
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 secondary 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
Accent dark
#EB001D
Accent dark hover
#B40016
Primary light
#ECF3FD
Primary light hover
#DAE7FB
Primary dark
#2371E6
Primary dark hover
#1454B4
Learning Lemur / WirisQuizzes
Accent light
#FFEFE3
Accent light hover
#FFE0C9
Accent dark
#C25400
Accent dark hover
#933F00
Primary light
#E3F6F6
Primary light hover
#C8EDEE
Primary dark
#288184
Primary dark hover
#1E6164
Wiris
Accent light
#F0F2F5
Accent light hover
#E2E6EC
Accent dark
#394658
Accent dark hover
#1E242E
Primary light
#ECF3FD
Primary light hover
#DAE7FB
Primary dark
#2371E6
Primary dark hover
#1454B4
Global
Neutral
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
Neutral dark
#394658
Neutral dark hover
#1E242E
Neutral inverse
#FFFFFF
Neutral inverse hover
#FFFFFFCC
Neutral inverse light
##FFFFFFCC
Neutral inverse light hover
#FFFFFF
Semantic
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
Error dark
#D83939
Error dark hover
#AA2121
Success light
#E2F7EA
Success light hover
#C6F0D5
Success dark
#248647
Success dark hover
#1B6536
Info light
#ECF3FD
Info light hover
#DAE7FB
Info dark
#2371E6
Info dark hover
#1454B4
Warning light
#FCF2D2
Warning light hover
#F9E5A7
Warning dark
#92710A
Warning dark hover
#6E5507
Artificial Intelligence (AI)
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
AI dark
#9154E0
AI dark hover
#7226D5
Usage & Misuse
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
Accent
Neutral dark
Neutral light
Learning Lemur / WirisQuizzes
Neutral dark
Primary
Neutral light
Accent
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.
Accent / Neutral Dark
Neutral light
LL Acccent
LL Primary
MT Accent
MT Primary
Misuse
Bla bla bla