General Guidelines

  • UNIFORMITY IS KEY! We want things to look the same across the entire site.

  • Lay out information in the same order with the same formatting every time.

  • Everything besides the menu, top-of-page banners, and box shadows (not the box itself; only the shadow) should fall within the dotted lines on either side of the page.

  • Whenever possible, line elements up vertically using the teal column guidelines. Each column is 67px and the gutters between them are 15px.

  • People quickly skim web pages to find what they want, so the most important information should immediately stand out. Keep crucial things like prices, times, and contact information separate and near the top. Boxes, buttons, charts, and tables are your friends!

Accessibility Guidelines


Regarding images:

  • People using screen readers and (and people with older computers) can't access images. Make sure important information (dates, contact info, etc.) is written out in text somewhere on the page.

  • Use Wix's alt text and image description functions.

  • The more image files on a page (especially large images), the more slowly it loads. If you know an image is going to be small, upload a small version of it rather than uploading the full-sized one and scaling it down.

  •  Most images don't need to be super high quality. The banner images at the top of the page should be as HQ as you can make them, but pretty much everything else can be medium or lower. Just make sure the image still looks good.

Regarding text:

  • Left-aligned text is easiest to read in large quantities. Centered is fine for short little blurbs in slideshows and stuff, but main body paragraphs should be left-aligned.

  • Dark text on a light background is easiest to read. Light text on a dark background should be used sparingly.

  • Use the color pairing guide below.



These colors (and their lighter/darker tones) are repeated throughout the site, and they're used the same way every single time. This helps users quickly identify the functions of everything on the page (e.g. blue always equals clickable link).

The color pairing guide isn't just to maintain the aesthetic of the site, it's also a list of the color combinations with the highest contrast and that are easiest to read.

Orange (#F8901F)


  • Header 1

  • Menu

  • Accent color if you've used a lot of teal on a page and need something to stand out

  • Prices on repeater 2


  • White bg & orange text

  • Orange bg & white text

  • Teal bg & orange button

Teal (#2EAAA1)


  • Header 2

  • Boxes

  • Accent color


  • Teal bg & white text

  • White bg & teal text

  • Teal bg & orange button

Blue (#25AAEC)


  • Links & buttons ONLY


  • Blue bg & white text

  • White bg & blue text

Dark Grey (#414141)


  • Header 3

  • Paragraphs


  • White bg & grey text


Text and Fonts

Heading 1: ALL CAPS; for page title only (1 on page TOTAL); Orange; Avenir 40pt

Heading 2: Mixed case; for 2nd level titles; Teal; Avenir 28pt

Heading 3: Mixed case; for 3rd-level page titles and 1st-level titles in boxes; Dark grey; Avenir 21pt

Paragraph 1: Mixed case; for body text and paragraphs; Dark grey; Avenir Light 17pt, line spacing 1.5

Paragraph 2: Mixed case; for button labels/image descriptions/other non-vital information; Dark grey; Avenir Light 14pt

Other tips

  • Headings have a specific purpose within the code: they're used to organize which text boxes go together, and using them properly makes it easier for someone using a screen reader to find what they need. If you need text to stand out but it's not a title, don't turn it into a heading. Make it bold, all-caps, or put it in a box/button/chart/etc. instead.

  • Links are blue, underlined, and in Avenir rather than Avenir Light. Links on teal backgrounds are white and underlined. To prevent confusion, never underline anything that isn't a link.

  • If you need something to be bold, change the font to Avenir rather than just bolding Avenir Light. Avenir just looks a lot nicer: BOLD (Avenir) vs. BOLD (Avenir Light bolded)

  • Paragraphs and should stretch all the way between the dotted lines unless they're inside/next to a box/image/etc.


  • Used to visually separate information from the rest of the page

  • That said, use boxes sparingly or else they won't stand out anymore.

  • Use Heading 3 for headings. If the information needs more than one level of heading, it should be on the main page instead of in a box.

  • Should span at least three columns

  • Must be teal

  • White text

  • Don't let the shadow dip into the footer, but it can go beyond the dotted lines on the left and right of the page.



Buttons are basically fancy clickable links. They're simple and attention-grabbing, so they're great navigational tools. You can have a button link to pretty much anything.


​Button 1

  • Blue bg; white Avenir 18pt

  • Use on white backgrounds


​Button 2

  • Orange bg; white Avenir 18pt

  • Use on teal 

​Button 3

  • White bg; blue Avenir 18pt

  • Use on slideshows only



Repeaters are under the "Lists and Grids" menu. They're basically lists with fancy formatting that also translate really well to mobile. You can have as many list items as you want, and it's super easy to create new ones.


The good and bad thing about repeaters is that every list item has identical formatting: change the size/position/etc. of something in one item, and your edits will automatically copy over to all the other items. This is great for when you want all of your items to be exactly the same, but if you need a button or picture in some items but not others, you're out of luck. 

I highly recommend you just copy/paste one of the repeaters listed here rather than trying to recreate it yourself. I listed the base design I used just in case though.

Repeater 1:

Heading 3

Paragraph 1

Put things like times, dates, contact info, etc. here. You can also put an image here instead.

Paragraph 1

The base for this design was the navy "Beginner's Ballet" repeater.

Use this repeater for text-heavy lists, especially if the order of the items matters. Change the length of the line on the side to fit the general size of your content. You can delete the button as well.

If some of your items need a button but others don't, this repeater style is really easy to copy/paste. Just select all the individual elements in the list item, copy them, then paste them into a white box spanning the width of the page. Then you can just copy/paste the white box with everything in it as many times as you need.

Sign up

Heading 3

Paragraph 1

Paragraph 1

Sign up

Heading 3

Paragraph 1

Paragraph 1

Sign up

Repeater 2


Header 3

Paragraph 1

The base for this design was the fitness one with orange header text.

Good for lists that need to be eye-catching, have a moderate number of items, have short descriptions, and/or where the order of the items doesn't matter too much.

This is a really image-heavy element, so just be conscious of page loading times. Use this repeater sparingly, and use smaller/lower-quality image files if there are a lot of list items.

You can also delete the price/extra stuff at the bottom if needed.

$200 2 hours | Ages 8+


Header 3

Paragraph 1

$250 Paragraph 1


Header 3

Paragraph 1

$200 2 hours. Ages 8+



Icons are found in the "Vector Art" menu. All of these besides the email icon are under the navy ones"Icons" section" teal on a circular white background. That set doesn't have an email icon for some reason, so I clicked on "More Icons" and typed "Email" into the search bar. I used the yellow one. 


For maximum visibility, only put these icons inside of teal boxes. The footer is the only place on the site that uses black icons, and that's so the footer doesn't steal attention away from the main content of the page.




Heading 6 - Written By
Directed By

Heading 4 - Show Dates

Heading 5 - Show Times

I'm a paragraph. Click here to add your own text and edit me. It's easy.


Show Description (Content can be shortened to fit... Full description on show page.

Click for more about the show - Link to show page

Heading 6 - Pricing & Location (Image should match location)
AE Letters Logo - Rounded Edge-6.png

Strip dimensions: 1794px x 550px




Music Performance

presented by


Directed by





AE Letters Logo - Rounded Edge-6.png


Avenir Light is a clean and stylish font favored by designers. It's easy on the eyes and a great go to font for titles, paragraphs & more.


Avenir Light is a clean and stylish font favored by designers. It's easy on the eyes and a great go to font for titles, paragraphs & more.