VISUAL AND FUNCTIONAL ELEMENTS

VISUAL AND FUNCTIONAL ELEMENTS

Style Guide

Style Guide

Style Guide

This Style Guide serves as a blueprint for the visual and functional elements that define the creative work for this site. Inside, you’ll discover everything from the typography and color schemes used for this site, to the guidelines that ensure a consistent user experience across all platforms. This guide isn’t just for designers — it’s a window into the standards followed to maintain clarity, style, and cohesion in every project.

This Style Guide serves as a blueprint for the visual and functional elements that define the creative work for this site. Inside, you’ll discover everything from the typography and color schemes used for this site, to the guidelines that ensure a consistent user experience across all platforms.

This guide isn’t just for designers — it’s a window into the standards followed to maintain clarity, style, and cohesion in every project.

TYPOGRAPHY

TYPOGRAPHY

TYPOGRAPHY

H1

weight: Bold

font-family: Inter

font-size:100px

line-height: 1Em

letter-spacing: 0.01Em

H1

Bold

H2

weight: Bold

font-family: Inter

font-size: 60px

line-height: 1Em

letter-spacing: -0.05Em

H2

Bold

H3

weight: Bold

font-family: Inter

font-size: 26

line-height: 1.2Em

letter-spacing: -0.05Em

H3

Semi Bold

H4

weight: medium

font-family: Inter

font-size: 20px

line-height: 1.5Em

letter-spacing: normal

H4

Medium

Body 1

weight: regular

font-family: Inter

font-size: 18px

line-height: 1.5Em

letter-spacing: normal

Body 1

Regular

Body 2

weight: light

font-family: Inter

font-size: 20px

line-height: 1.5Em

letter-spacing: normal

Body 2

Light

Body 3

weight: extra-light

font-family: Inter

font-size: 16px

line-height: 1.5Em

letter-spacing: normal

Body 3

Extra Light

3D Button

weight: regular

font-family: Inter

font-size: 15px

line-height: 1.2Em

letter-spacing: normal

3D Button

Regular

BUTTON STYLES

BUTTON STYLES

BUTTON STYLES

COLOR PALETTE

COLOR PALETTE

COLOR PALETTE

Neutral

Neutral tones used for the majority of the UI.

Primary

Primary tones used as the main hue for the UI. Base Color = 400.

Accent

Accent colors and tones to convey a semantic purpose such as success, error, warning, and info.

WHITE

FFFFFF

GREY

E9ECEF

BLACK

333333

DARK BLACK

000000

50

#EFF5FF

#EFF5FF

100

#DBE9FE

200

BED8FF

300

#92C1FE

BASE

61A0FC

500

3979F8

600

235AED

700

1B45DA

800

1C39B1

900

1D348B

Primary

61A0FC

Gradient

Accent

F32BBB

Neutral

Neutral tones used for the majority of the UI.

Primary

Primary tones used as the main hue for the UI. Base Color = 400.

Accent

Accent colors and tones to convey a semantic purpose such as success, error, warning, and info.

WHITE

FFFFFF

GREY

E9ECEF

BLACK

333333

DARK BLACK

000000

50

#EFF5FF

100

#DBE9FE

200

BED8FF

300

#92C1FE

BASE

61A0FC

500

3979F8

600

235AED

700

1B45DA

800

1C39B1

900

1D348B

Primary

61A0FC

Gradient

Accent

F32BBB

EFFECTS

EFFECTS

EFFECTS

Drop Shadows

Image Thumbnails

Image Thumbnails

Image Thumbnails

Nav - Drop Down Menus

Nav - Drop Down Menus

Nav - Drop Down Menus

3D Buttons

3D Buttons

3D Buttons

Color Palette

Color Palette

Color Palette

'Tools I Use' Slideshow

'Tools I Use' Slideshow

'Tools I Use' Slideshow

Blur

None

None

BG Blur 8

Mobile Closed Menu

Gallery Image PopUp BG

BG Blur 8

Mobile Closed Menu

Gallery Image PopUp BG

SUB HEADINGS

SUB HEADINGS

SUB HEADINGS

©2025 by Mind2Canvas. All rights reserved.

© 2025 by Mind2Canvas. All rights reserved.

Become a Member

Consider joining a community of fellow enthusiasts who are passionate about pushing the boundaries of creativity with AI.