Design Guideline

🎨 COLOR STYLE

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.

Primary

The main color representing the brand, ensuring consistent and recognizable visual identity.

Amethyst

#8E56E1

100

#F7F3FD

200

#BE9EEE

300

#8E56E1

400

#4C1B97

500

#1D0A39

Secondary

Supports the primary color, adding contrast and flexibility to enhance brand visuals.

Salmon

#FF9780

100

#FFF8F6

200

#FFC3B6

300

#FF9780

400

#DB2800

500

#1B0500

Neutral

Subtle colors that balance the primary palette, providing flexibility without overpowering.

100

#F8F8F8

200

#C6C4C8

300

#6A686E

400

#464549

500

#161617

Background

The base color used to create a clean, supportive canvas for other design elements.

Main Background

#FEFEFE

Variant Background

#F5F5F9

Border

Outlines or frames elements, enhancing structure and separation within the design layout.

Border 1

#E5DFEC

Basic

Basic colors that provide contrast, clarity, and simplicity in both text and backgrounds.

White

#FFFFFF

Black

#000000

✏️ TYPOGRAPHY

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.

Heading / H1

Font size 76px || Line hight 86px

[ Mobile Heading / H1 ]

Font size 50px || Line height 60px

The five boxing wizards jump quickly.

Heading / H2

Font size 48px || Line hight 58px

[ Mobile Heading / H2 ]

Font size 33px || Line height 43px

The five boxing wizards jump quickly.

Heading / H3

Font size 40px || Line hight 50px

[ Mobile Heading / H3 ]

Font size 26px || Line height 36px

The five boxing wizards jump quickly.

Heading / H4

Font size 32px || Line hight 42px

[ Mobile Heading / H4 ]

Font size 23px || Line hight 33px

The five boxing wizards jump quickly.

Heading / H5

Font size 26px || Line hight 36px

[ Mobile Heading / H5 ]

Font size 21px || Line hight 31px

The five boxing wizards jump quickly.
Heading / H6

Font size 22px || Line hight 32px

[ Mobile Heading / H6 ]

Font size 18px || Line hight 28px

The five boxing wizards jump quickly.
Body 1

Font size 18px || Line hight 28px

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.

Body 2

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.

Body 3

Font size 13px || Line hight 23px

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.

Sub Heading

Font size 14px || Line hight 24px

IAM - EXPERT
Quotes

Font size 26px || Line hight 36px

“No one rejects, dislikes, or avoids pleasu, encounter consequences that are painful who loves or pursues.”

Label

Font size 15px || Line hight 25px

Full Name

Placeholder

Font size 14px || Line hight 24px

Write your message here…

📙 COMPONENTS

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.

Button

Interactive elements guiding user actions, styled for visibility, usability, and brand consistency.

Counter

Displays numerical data dynamically, helping users track quantities, progress, or statistics.

YEARS EXPERIENCE
0 +
THREAD DETECTION
0 +
DATA ENCRYPTION
0 +
CLIENT SATISFIED
0 %
Form

Collects user information efficiently, designed for clarity, accessibility, and ease of submission.

👁️ OVERVIEW

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.

"No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not that are extremely painful."
Jane Smith
Junior Designer
THIS IS A SUBTITLE

Where Your Write The Title Read Here!

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.