IoT Mart ATW
Design Guidelines


See what to make a webpage design that's well defined and reflects its branding.

 

Widget Page Guidelines

  • Content Block Width : 1200px (Include background color / background image)
  • Text-only Block : Text-only block widths should be set to 820px and aligned center
  • H3 Title : Topic titles are defined as H3
  • H4 Title : Subtitle titles in the small block are defined as H4
  • Content Alignment : All block content alignment should be consistent

References

guideline references
guideline references

Font Size

HTML Tags Desktop/Tablet
H3 18px
H4 16px
H5,P 14px

Font Family

Language Font
English Arial
Traditional Chinese Microsoft JhengHei
Simplified Chinese Microsoft YaHei
Japanese Meiryo
Korean Malgun Gothinc

Primary Colors

Advantech Blue

#004280

IoT Mart Orange

#F39800

Secondary Colors

Advantech Blue - 80%

#336899

Dark Orange

#E57B03

Responsive Breakpoints

Please refer to the below responsive breakpoints, and add other break points if necessary

PC-breakpoint

Desktop:
max-device-width 1200px

Tablet-breakpoint

Tablet:
max-device-width 768px

Mobile-breakpoint

Mobile:
max-device-width 580px or 480px

 

Download Templates