There are some very particular rules that govern the look and feel of ASU websites. Compliance with these standards is not optional. The rules are the result of extensive study on what is easy to read, what works to make sites accessible to all, and what communicates ASU's brand the best. See ASU's Brand and Marketing Guide and Unity Digital Design System for more information.
The requirements listed below are from the Unity Digital Design System.
Left-aligned is preferred. Centered text is frowned upon because it negatively affects accessibility.
Use fonts Arial and Awesome only: Arial for text, Awesome for icons.
Use normal and bold font weights only. Do not use light font weight or italic. Underlines are reserved for hyperlinks.
You can highlight text in two combinations. To do this, edit the source as shown below. Don't forget to click on the source button when done, or you will lose the changes.
<span style="color: #191919; background-color: #FFC627;">>text to highlight</span>
<span style="color: white; background-color: #191919;">text to highlight</span>
Use headings in order.
The title of the page, in the hero, is Heading 1. Therefore the first-level headings on your page should be Heading 2, the next lower should be Heading 3, and so on. This is important for accessibility.
Since you cannot control the size of tab or accordion headings, sometimes this rule is impossible to apply.
Menu items may not wrap.
Menu items must be in title case, i.e., first letter of each word (excluding minor words such as "of") is capitalized.
Menu items (and all links) must open in the same tab or window.
Menu items may not link to a non-ASU site.
Menu items must be title case, i.e., first letter of each word capitalized. This includes labels on tabs, since they are a form of navigation. It does not include headers on accordions, since those are not a form of navigation.
Non-menu text, including page titles and headings, must be sentence case, i.e., first word capitalized and all others lower case. Obviously, proper names should be capitalized wherever they appear.
You can go to a new line without creating a new paragraph or bullet with shift-return.
This retains any indentation you have.
There is not currently a way to use the highlight pull-down in Webspark.
To highlight text, therefore, you must work in the Source:
Lists should have formatting between items and at the end. If your list doesn't have that, you probably pasted it in. To correct the problem:
One your list has the correct class, you can use the increase and decrease indent icons to change levels.
Pasted text can have a lot of formatting information that you don't want, as it may cause standards violations or just look bad. To avoid these problems:
Pasted in lists will not have correct formatting, no matter the source. See "List formatting" in this section for how to restore the formatting.
Use the text editor's omega icon to enter special characters such as รถ or @.
Use the text editor's flag icon to enter Font awesome icons.
Do not use any special characters in headings for tabs or accordions. If you do, the tab or accordion will not open.
Some formatting may not work correctly within tabs or accordions, especially formatting that has highlighted text, such as buttons. Find a work-around until the problem is fixed by the Webspark2 team.
Updated 6 May 2025 by Connie McNeill
