Global Presets UI Style Guide
This website style guide acts like a rulebook for your website’s design. It outlines the visual elements and written content that create your brand’s online presence. By having a style guide in place, you ensure consistency across your webpages, making your site not only visually appealing but also user-friendly and trustworthy. Given the nature of our audience, accessibility is also an important requirement – in this style-guide we aim to ensure consistency with good accessibility standards. This guide will evolve as new elements are incorporated into the site. We use this section to set global site standards for each element – ie when we make a change here, it will update on all site elements that have been created using the templates outlined here.
01. Color palette
In the first part of the style guide, you can find the color palette that’s been used for new site. We have endeavoured to incorporate the main colours in the existing RYALT site.
#ffffff
#000000
#f18f01
#e8e1ef
#99cc01
#6b6d76
02. Visuals
The second section of this style guide provides examples of the types of images that will be used throughout the site. Key features of these images will be:
- Flat illustrations as opposed to photos.
- Designed to depict the content to which they relate.
- Will be used in addition to (and for prospective students, sometimes instead of, text).
Team, coach and student profiles
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
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
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.
Video
03. Text styles
For text throughout the site the following fonts will be used which are designed to support the accessibility needs of our users. Both font-faces have been selected as they are recognised as good practice standards when it comes to accessibility.
- Headings – Arial
- Body – Arial
There’s a separate preset for each heading style and a global preset with all text styles in one.
Heading 1
Heading 1
Heading 2
Heading 2
Heading 3
Heading 3
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.
Phone number
(255) 352-6258
Price
$7.00
All in one
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
04. Buttons
Three button styles will be used throughout the site as follows:
Button 1
Button 2
Button 3
05. Modules
These provide examples of some of the modules that will be used on the site.
Form Layout
Slider 1
Blog 1
How did I learn to read?
How did I learn to read? I have long since forgotten. I would love to know how I learned to read. In some ways, I want to be transported back to my childhood to find out. What was the defining fact that brought me to where I am today? I went to St Mary’s Primary...
Social media follow