Brand Guideline

BRAND COLORS

Primary Color 01
#67266d

Primary Color 02
#67266d

SECONDARY Color 01
#67266d

SECONDARY Color 02
#67266d

SECONDARY Color 03
#67266d

TERTIARY Color 01
#67266d

TERTIARY Color 02
#67266d

HEADERS AND TYPEFACES

BANNER FONT SIZES

I am the special one.

1 in 50 carry the defective SMA gene.

HEADER AND DESCRIPTION TYPE 1

OUR SOCIAL MEDIA

HEADER AND DESCRIPTION TYPE 2

FAMILY SUPPORT & EMPOWERMENT

HEADER AND DESCRIPTION TYPE 3

Protecting against illnesses

BODY TEXT

Instead of looking down into that abyss, we can look up. And by looking up, we see things.

QUOTATION

He faces difficult challenges, but his attitude makes growing up with Branden and SMA meaningful, inspiring and happy.

BUTTONS

IMAGE SIZES

BANNER SIZE

1920 X 1080 px

Note: Open this image in new tab to view real image size

BANNER SIZE (50%+50%)

950 X 1080 px

Note: Open this image in new tab to view real image size

THUMBNAIL SIZE (BEST QUALITY)

1200 X 630 px

Note: Open this image in new tab to view real image size

THUMBNAIL SIZE (OPTIMAL QUALITY)

600 X 315 px

Note: Open this image in new tab to view real image size

SCREEN WIDTHS (DESKTOP)

CARD LAYOUT: 1280px + All padding (20+10)px
ONLY TEXT: 860px + Padding left & right 50px
TEXT & GRAPHICS: 1080px

SCREEN WIDTHS (TABLET)

CARD LAYOUT: 1024px + All padding (20+10)px
ONLY TEXT: 860px + Padding left & right 50px
TEXT & GRAPHICS: 1024px

SCREEN WIDTHS (MOBILE)

CARD LAYOUT: 720px / 100% + All padding (20+10)px
ONLY TEXT: 720px / 100% + Padding left & right 16px
TEXT & GRAPHICS: 720px / 100% + Padding 30px

Need more help on XTOPIA? Please browse our Support Centre: https://xtopia.zendesk.com.