Framework

Global Presets UI Style Guide

01. Color palette

In this section, you will find the carefully curated colors that will be utilized throughout your website. Ranging from primary tones that’ll dominate your site to complementary hues that enhance visual engagement, these colors reflect your brand’s ethos and ensure consistency across all web elements.

#FFFFFF

#F9F9F9

#f2f2f2

#e0e0e0

#444444

#000000

#F9F9F9

#e0e0e0

#444444

#000000

02. Text styles

Typography is more than just words on a screen; it’s an art that bridges the gap between message clarity and visual aesthetics. Here, we present various text styles that your website will employ. You’ll see primary, secondary, and tertiary versions of headings and body text, designed to establish a clear hierarchy and facilitate easy reading. Additionally, different formatting elements like bullet lists will be showcased, ensuring text is presented in the most effective manner for your audience.

Primary

Secondary

Tertiary

Heading 1

Heading 1

Heading 1

Heading 1

Heading 2

Heading 2

Heading 2

Heading 2

Heading 3

Heading 3

Heading 3

Heading 3

Heading 4

Heading 4

Heading 4

Heading 4

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

List

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum

All in one

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

Heading 1

Heading 2

Heading 3

Heading 4

Lorum ipsum dolor sit amet.

  • Lorum Ipsum

03. Modules

Every component on a website, from buttons to contact forms, plays a unique role in the user’s journey. In this section, we showcase the various modules that will be incorporated into your site. Whether it’s a call to action that prompts a visitor to take the next step or a testimonial that instills trust, these elements have been designed to seamlessly integrate with the overall aesthetic while ensuring optimal user engagement.

Primary

Secondary

Tertiary

Blurb

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Email optin

Contact form

5 + 13 =

2 + 9 =

8 + 15 =

Image

Call to action

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Divider

Person

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Name Goes Here

Position

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Toggle

Click Here To Open

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Click Here To Open

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Click Here To Open

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Testimonial

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name Goes Here

Video

Accordion

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Blog

Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort

Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort

At the recent NPO Summit, change-makers converged at the scenic Piekenierskloof Mountain Resort, sharing insights on the Bergrivier NPO sector, the integral role of NPOs in the IDP, and the alignment of NPO missions with Sustainable Development Goals. A confluence of passion and purpose, the summit underscored the power of collective action, data-driven strategies, and the relentless drive of NPOs to shape a brighter, more equitable future.

MyDorp Exhibition: Empowering Youth for a Brighter Future

MyDorp Exhibition: Empowering Youth for a Brighter Future

At a recent exhibition, the MyDorp program unveiled its transformative approach that not only fosters community engagement but champions the youth as pivotal agents of change. This initiative is more than a program; it’s a promise of a brighter future, emphasizing the collective strength of active citizenship and community collaboration. As MyDorp lights the way, it serves as a testament to the potential within our youth and the power of united action

Empowering Bergrivier’s Youth through Data and Digital Innovation

Empowering Bergrivier’s Youth through Data and Digital Innovation

In a groundbreaking workshop organized by OpenUpSA and ICA, Bergrivier’s youth dove into the world of data and digital technology, learning to harness its power for community development. Through tools like the innovative IDP Dashboard, they discovered how to access, understand, and influence their municipality’s development plans, marking a pivotal moment in promoting active civic participation and bridging the gap between local governance and its citizens.

Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort

Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort

At the recent NPO Summit, change-makers converged at the scenic Piekenierskloof Mountain Resort, sharing insights on the Bergrivier NPO sector, the integral role of NPOs in the IDP, and the alignment of NPO missions with Sustainable Development Goals. A confluence of passion and purpose, the summit underscored the power of collective action, data-driven strategies, and the relentless drive of NPOs to shape a brighter, more equitable future.

MyDorp Exhibition: Empowering Youth for a Brighter Future

MyDorp Exhibition: Empowering Youth for a Brighter Future

At a recent exhibition, the MyDorp program unveiled its transformative approach that not only fosters community engagement but champions the youth as pivotal agents of change. This initiative is more than a program; it’s a promise of a brighter future, emphasizing the collective strength of active citizenship and community collaboration. As MyDorp lights the way, it serves as a testament to the potential within our youth and the power of united action

Empowering Bergrivier’s Youth through Data and Digital Innovation

Empowering Bergrivier’s Youth through Data and Digital Innovation

In a groundbreaking workshop organized by OpenUpSA and ICA, Bergrivier’s youth dove into the world of data and digital technology, learning to harness its power for community development. Through tools like the innovative IDP Dashboard, they discovered how to access, understand, and influence their municipality’s development plans, marking a pivotal moment in promoting active civic participation and bridging the gap between local governance and its citizens.

Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort

Elevating Impact: Insights from Our NPO Summit at Piekenierskloof Mountain Resort

At the recent NPO Summit, change-makers converged at the scenic Piekenierskloof Mountain Resort, sharing insights on the Bergrivier NPO sector, the integral role of NPOs in the IDP, and the alignment of NPO missions with Sustainable Development Goals. A confluence of passion and purpose, the summit underscored the power of collective action, data-driven strategies, and the relentless drive of NPOs to shape a brighter, more equitable future.

MyDorp Exhibition: Empowering Youth for a Brighter Future

MyDorp Exhibition: Empowering Youth for a Brighter Future

At a recent exhibition, the MyDorp program unveiled its transformative approach that not only fosters community engagement but champions the youth as pivotal agents of change. This initiative is more than a program; it’s a promise of a brighter future, emphasizing the collective strength of active citizenship and community collaboration. As MyDorp lights the way, it serves as a testament to the potential within our youth and the power of united action

Empowering Bergrivier’s Youth through Data and Digital Innovation

Empowering Bergrivier’s Youth through Data and Digital Innovation

In a groundbreaking workshop organized by OpenUpSA and ICA, Bergrivier’s youth dove into the world of data and digital technology, learning to harness its power for community development. Through tools like the innovative IDP Dashboard, they discovered how to access, understand, and influence their municipality’s development plans, marking a pivotal moment in promoting active civic participation and bridging the gap between local governance and its citizens.