Style Guide - Technology Webflow Template | MegaTech

Colors

Primary colors

Primary 100

#2370ff

Secondary colors

Secondary 100

#F4F8FF

Secondary 200

#E9F1FF

Secondary 300

#D5E4FF

Secondary 400

#B2CDFF

Secondary 500

#82AEFF

Secondary 600

#679CFF

Secondary 700

#2370FF

Secondary 800

#024BD2

Secondary 900

#003598

Secondary 1000

#002A79

Neutral colors

Neutral 100

#FFFFFF

Neutral 200

#F8FAFF

Neutral 300

#F1F3F7

Neutral 400

#E1E4ED

Neutral 500

#B4B9C9

Neutral 600

#6D758F

Neutral 700

#353E5C

Neutral 800

#19213D

Typography

Inter

Regular

Medium

Semi Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Kk Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Display 10

Display 10

Display 10

72px

1.1em

Default

Medium

Semibold

Display 9

Display 9

Display 9

60px

1.15em

Default

Medium

Semibold

Display 8

Display 8

Display 8

48px

1.25em

Default

Medium

Semibold

Display 7

Display 7

Display 7

36px

1.25em

Default

Medium

Semibold

Display 6

Display 6

Display 6

30px

1.25em

Default

Medium

Semibold

Display 5

Display 5

Display 5

24px

1.25em

Default

Medium

Semibold

Display 4

Display 4

Display 4

22px

1.25em

Default

Medium

Semibold

Display 3

Display 3

Display 3

20px

1.25em

Default

Medium

Semibold

Display 2

Display 2

Display 2

18px

1.25em

Default

Medium

Semibold

Display 1

Display 1

Display 1

16px

1.25em

Default

Medium

Semibold

Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

24px

1.5em

Default

Medium

Semibold

Paragraph Default - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

18px

1.5em

Default

Medium

Semibold

Paragraph Small - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

14px

1.5em

Default

Medium

Semibold

Logos

Logo icon

Logo text

Buttons

Primary button

Text

Icon

Number

Secondary button

Text

Icon

Number

Tertiary button

Text

Icon

Number

Primary circle button

Secondary circle button

Links

Links

List

List



List item



List item



List item



List item

List item
List item
List item
List item

List item
List item
List item
List item



List item



List item



List item



List item

List item
List item
List item
List item

List item
List item
List item
List item

Badge

Badge

Default

Badge blue

Blue

Blue

Badge light

Light

Light

Light

Badge white

White

Inputs

Inputs

Small

Default

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Text Area

Small

Default

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Select

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Checkboxes

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Radio Buttons

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Toggle Button

Placeholder

Placeholder

Upload

Select a file to upload

Or drag and drop it here

Select a file to upload

Or drag and drop it here

Tabs

Tabs V1

Tabs V2

1. Initial consultation

Understand your needs and objectives

Pellentesque ornare nibh metus metus placerat pharetra at cursus est dui suspendisse magna morbi netus eget ultricies vitae mus pharetra libbero viverra tellus morbi mauris pellentesque odio donec nulla urna amet.

Initial Consultation - Mega Webflow Template

2. Strategy

Define the best approach for you

Pellentesque ornare nibh metus metus placerat pharetra at cursus est dui suspendisse magna morbi netus eget ultricies vitae mus pharetra libbero viverra tellus morbi mauris pellentesque odio donec nulla urna amet.

Strategy - Mega Webflow Template

3. Development

Develop a custom solution for your needs

Pellentesque ornare nibh metus metus placerat pharetra at cursus est dui suspendisse magna morbi netus eget ultricies vitae mus pharetra libbero viverra tellus morbi mauris pellentesque odio donec nulla urna amet.

Development - Mega Webflow Template

Dropdowns

Simple Dropdown

Simple Dropdown Example

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Avatars

Circle avatars

24px

32px

40px

64px

100px

Icons

Square Gradient Icons

Social media square Icons

Icon font

Line icons rounded







































































































































































































































































































































































































































































Social media icons

Custom icons













Tooltips

Tooltips

Breadcrumbs

Breadcrumbs

Breadcrumb linkBreadcrumb linkBreadcrumb link

Breadcrumb link

Breadcrumb linkBreadcrumb link

Breadcrumb link

Breadcrumb linkBreadcrumb linkBreadcrumb link

Breadcrumb link

Pagination

Pagination

Animations

👻 Fade In

0.2s

0.3s

0.4s

0.5s

0.6s

0.7s

0.8s

0.9s

1s

1.2s

1.4s

☝️ Slide To Top

0.2s

0.3s

0.4s

0.5s

0.6s

0.7s

0.8s

0.9s

1s

1.2s

1.4s

👈 Slide To Left

0.2s

0.3s

0.4s

0.5s

0.6s

0.7s

0.8s

0.9s

1s

1.2s

1.4s

👉 Slide To Right

0.2s

0.3s

0.4s

0.5s

0.6s

0.7s

0.8s

0.9s

1s

1.2s

1.4s

🔍 Zoom In

0.2s

0.3s

0.4s

0.5s

0.6s

0.7s

0.8s

0.9s

1s

1.2s

1.4s

Notification Bar - Reveal

Get 20% OFF with the annual plan

Check out our plans



Others

Pricing Table

Voice assistant

Basic voice assistant

Reports

Message archiving



Custom prompt templates



Voice assistant

Basic voice assistant

Reports

Message archiving



Custom prompt templates

