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 2

Heading 3

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