Global Presets UI Style Guide

This global presets style guide forms the foundation of FestivalsKelowna.com and the website styling.

While the key purpose of this page is to provide inspiration and styling guidelines for the website and brand, the elements also serve an additional function. Modules on this page are replicated throughout the website for brand consistency. Changing the styling of a preset will automatically update all instances of that element across the website.

01. Color palette

This is the colour palette used throughout the website. Colours used in the top row are the primary palette while the bottom row is the secondary palette and should be used sparingly.

#ffffff

#1e1e1e

#565a5c

#fdc82f

#FF760E

#02afd7

#d7f070

#99ca3d

#ea098d

#ec3527

#e17a00

#fdc82f

#fdc82f

rgba(253,200,47,0.3)

02. Visuals

Graphical elements and images are an important part of the FestivalsKelowna.com brand experience. The following elements form an overview of the visual look of the website.

03. Text styles

A singular font has been selected for use throughout the website. The font is called Lexend and it is utilized in varying weights and sizes for increased readability and variation.

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.

List

  • Lorem ipsum dolor sit amet
  • Ut enim ad minim veniam
  • 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.

Quote body 1

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.

All in one

Heading 1

Heading 2

Heading 3

Heading 4

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
  • Ut enim ad minim veniam
  • 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.

Ordered list

  1. Item 1
  2. Item 2
  3. Item Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.

04. Buttons

Buttons are an important part of the website and help us communicate clearly. 

Button 1

Button 2

Button 3

Button 4

Button 5

Button 6

05. Blurbs

Blurb modules are a handy way to format bite-sized content, particularly when icons or images are required.

Blurb 1

u

Are you an artist?

We welcome artists from all art disciplines. Through a juried selection process, we seek to ensure a diverse reflection of the artistic excellence within our community. Acceptance into Arts on the Avenue is based on quality, originality and craftsmanship.

For more detailed information on applying refer to the application pdf (stay tuned for 2021 info).

Blurb 2

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend nulla orci, at bibendum nisl semper eu. Mauris ultrices efficitur mi quis auctor. Nulla facilisi. Maecenas eleifend, nunc in fringilla dapibus, orci velit dictum leo, nec tempus nisl turpis ac.

Blurb 3

u

How can I apply to perform at an upcoming event?

Blurb 4

Renata Mills

Executive Director

06. Other modules

Additional module designs provide inspiration for website design and brand consistency.

Image 1

Image 2

Image 3

Image 4

Image 5

Image 6

Post Slider 1

Canada Day performance line-up announced

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper varius orci sit amet venenatis. Etiam cursus velit est, non blandit nisi pharetra nec. Praesent dictum, ante eu eleifend tristique, augue turpis maximus nunc, vitae pellentesque arcu dolor ultrices...

Festivals Kelowna announces new Pink Glitter Parade

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper varius orci sit amet venenatis. Etiam cursus velit est, non blandit nisi pharetra nec. Praesent dictum, ante eu eleifend tristique, augue turpis maximus nunc, vitae pellentesque arcu dolor ultrices...

Hey! I’m a cool news title that’s super interesting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper varius orci sit amet venenatis. Etiam cursus velit est, non blandit nisi pharetra nec. Praesent dictum, ante eu eleifend tristique, augue turpis maximus nunc, vitae pellentesque arcu dolor ultrices...

Contact form 1

11 + 1 =

Toggle 1

How can artists participate?

  • To be considered for the event, please complete the Application. 
  • There are a limited number of spaces available, so it is greatly encouraged to apply by the deadline.
  • Additional applications will be considered if spots are still available after the first selection round. 
Accordion 1

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. 

Nulla quis lorem ut libero malesuada feugiat

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Nulla porttitor accumsan tincidunt donec rutrum congue

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Accordion 2

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. 

Nulla quis lorem ut libero malesuada feugiat

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Nulla porttitor accumsan tincidunt donec rutrum congue

Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.

Social media follow 1

Social media follow 2

Toggle 1

Are you a musician or artist?

If you are interested in being considered for our events, please fill out the online application on our “Perform With Us” page!

Testimonial 1

“Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Mauris bl”

Freddie Mercury

Executive Director, Queen

Slider 1

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada efficitur consequat. Duis arcu diam, malesuada ac viverra sed, auctor ac urna. Nulla posuere mollis mi, vitae elementum nibh vulputate porttitor. Vestibulum hendrerit nunc eu nisl dictum tempor."

Lady Gaga

What a wonderful world

I see trees of green, Red roses too. I see them bloom for me and you. And I think to myself, “What a wonderful world?”

Divider 1

Video 1

Blog 1
Canada Day performance line-up announced

Canada Day performance line-up announced

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper varius orci sit amet venenatis. Etiam cursus velit est, non blandit nisi pharetra nec. Praesent dictum, ante eu eleifend tristique,...

read more