The color style defines the brand’s visual tone, ensuring consistency across all digital and print mediums. It includes primary, secondary, and accent colors, carefully selected to evoke the desired emotions and maintain a cohesive visual identity.
The main color representing the brand, ensuring consistent and recognizable visual identity.
Celtic Blue
#026AEA
100
#F3F8FF
200
#B1D4FE
300
#026AEA
400
#024495
500
#011E42
Supports the primary color, adding contrast and flexibility to enhance brand visuals.
Mikado yellow
#FFC300
100
#FFFBED
200
#FFEAA4
300
#FFC300
400
#A47E00
500
#241C00
Subtle colors that balance the primary palette, providing flexibility without overpowering.
100
#F6F8FB
200
#DCE4FF
300
#697A93
400
#213149
500
#162131
The base color used to create a clean, supportive canvas for other design elements.
Main Background
#FEFEFF
Variant Background
#F7F8FC
Outlines or frames elements, enhancing structure and separation within the design layout.
Border 1
#D1D7FF
Border 2
#F0F2F6
Basic colors that provide contrast, clarity, and simplicity in both text and backgrounds.
White
#FFFFFF
Black
#000000
Typography establishes the brand’s voice through font selection, sizes, and spacing. It enhances readability and user experience, creating a visual hierarchy that guides attention while maintaining consistency across all platforms, from web interfaces to printed materials.
Font size 64px || Line hight 74px
Font size 56px || Line hight 66px
Font size 48px || Line hight 48px
Font size 42px || Line hight 52px
Font size 40px || Line hight 50px
Font size 36px || Line hight 46px
Font size 32px || Line hight 42px
Font size 30px || Line hight 40px
Font size 25px || Line hight 35px
Font size 25px || Line hight 35px
Font size 21px || Line hight 31px
Font size 21px || Line hight 31px
Font size 20px || Line hight 30px
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you master-builder of human happiness.
Font size 16px || Line hight 26px
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you master-builder of human happiness.
Font size 14px || Line hight 24px
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you master-builder of human happiness.
Font size 16px || Line hight 26px
Font size 26px || Line hight 36px
“No one rejects, dislikes, or avoids pleasu, encounter consequences that are painful who loves or pursues.”
Font size 15px || Line hight 25px
Full Name
Font size 15px || Line hight 25px
Write your message here…
UI components consist of interactive elements like buttons, sliders, and input fields, designed to be intuitive and responsive. They ensure smooth user interactions, enhance usability, and align with the brand’s visual language to create cohesive digital experiences.
Interactive elements guiding user actions, styled for visibility, usability, and brand consistency.
Displays numerical data dynamically, helping users track quantities, progress, or statistics.
Collects user information efficiently, designed for clarity, accessibility, and ease of submission.
The overview provides a high-level summary of the style guide, outlining key design elements like color, typography, and layout. It sets the foundation for a consistent brand presentation and helps maintain visual harmony across all touchpoints.
This is an example of using a place to write a short description to explain the title above it. so that users can better understand the meaning of the title above it.
This is an example of using a place to write a short description to explain the title above it. so that users can better understand the meaning of the title above it.
