Style Guide Fundation
In the Foundation section, you will find the core elements that define the visual and functional identity of our design system. This section is dedicated to establishing the fundamental guidelines that ensure consistency, coherence, and aesthetic harmony across all our digital products. Here, we cover the essential building blocks such as fonts, colors, and basic layouts, which form the backbone of our design language.
Colour Palete
Here goes your text … Select any part of your text to access the formatting toolbar.
Brand Colours
Primary
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
Secondary
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
Tertiary
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
Contextual Colours
Info
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
Success
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
Warning
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
Danger
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
variant
#
Buttons
Here goes your text … Select any part of your text to access the formatting toolbar.
Brand Buttons
default
hover
active
disabled
focus
Contextual Buttons
default
hover
active
disabled
focus
Typeography
Use typography to create clear hierarchies to guide users through the product, services and experience. It is the core structure of any well designed interface.
Fonts
ACME Co uses {acpt_option_brand-details_brand-font-family_font-1-name} as its primary font family and {acpt_option_brand-details_brand-font-family_font-2-name} as it’s secondary font family.
{acpt_option_brand-details_brand-font-family_font-1-name} {acpt_option_brand-details_brand-font-family_font-1-description}
{acpt_option_brand-details_brand-font-family_font-2-name} {acpt_option_brand-details_brand-font-family_font-2-description}
Body Text
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalised copy isn’t ready yet. Once we have your content finalised, we’ll replace this placeholder text with your real content.
Sometimes it’s nice to put in text just to get an idea of how text will fill in a space on your website.
Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!
There are other placeholder text alternatives like Hipster Ipsum, Zombie Ipsum, Bacon Ipsum, and many more. While often hilarious, these placeholder passages can also lead to much of the same confusion.
If you’re curious, this is Website Ipsum. It was specifically developed for the use on development websites. Other than being less confusing than other Ipsum’s, Website Ipsum is also formatted in patterns more similar to how real copy is formatted on the web today.
Heading Text
Heading 1 - h1
Hero/Page title size - These should only ever be used once on a page for the main title.
Heading 2 - h2
Larger title size
Heading 3 - h3
Default title size - Used on page for section titles
Heading 4 - h4
Default subtitle size - Can be used on page for section sub titles
Heading 5 - h5
Default subsection
Heading 6 - h6
Further Subdivision
Font Weights
Use font weights to emphasize or differentiate content hierarchy.
300 — Light/
Light Serif
400 — Light/
Normal Serif
600 — SemiBold /
Semibold Serif
700 — Bold/
Bold Serif
Message Boxes
Use font weights to emphasize or differentiate content hierarchy.