Web Style Guide
The Butler Community College Brand
As the second largest community college in Kansas, Butler is proud of its reputation and long history of serving south
central Kansas’ higher education needs. A strong, positive reputation and image within the marketplace takes years
to build and constant protection and nurturing. A variety of experiences, images and personal interaction, seemingly
unrelated, do in fact work together to create an image and an impression with those who come into contact with Butler
Community College, and those who represent it.
This page is a guide dedicated to keeping our brand consistent and ensuring accessibility throughout our entire website.
Any questions regarding the page building process, accessibility standards, web design, or college branding can be directed to the College Relations & Marketing department at marketing@butlercc.edu
Typography
Primary Font: Nimbus Sans
Regular | Italic | Bold
This font is great for heads, subheads and body copy due to its clean appearance and superb readability. Nimbus Sans should be the only font family used across the website.
Type Hierarchy
Establishing a visual hierarchy through formatted text elements is helpful not only for content organization, but for accessibility standards. Headings and subheadings are vital in breaking up sections of text and maximizing readability. Headings default to our purple color, and should remain purple in most situations, but this color may be changed depending on the background and surrounding content (ex: White Heading on Purple Background, Black Heading on Light Gray Background).
Heading 1 is almost always to be used as the main page title/header. It will not usually be used below the Hero section of the page.
Heading 1
Heading 2 is the primary heading used to separate sections below Heading 1.
Heading 2
Heading 3 is used to split up paragraphs within the same section, essentially acting as a subheading.
Heading 3
Body text comprises all the other text throughout our site.
Body Text
Web Color Palette
The official colors of Butler Community College are PMS 2627 (Purple) and PMS 871 (Gold). These hues are a permanent fixture of Butler’s ongoing brand and were decided upon at the same time of the original logo redesign.
The ratio between the amount of Purple and the amount of Gold on our pages is important as well. Purple, being our foremost color, should comprise roughly 70% of the color on the page, while Gold should make up only 30%. For the website, this means that Purple is the go-to option for large color-block backgrounds, and Gold is excellent for accents or decorative elements.
Our secondary colors, however, are included to fill in the interactive and design gaps created by such a minimal color scheme. While these colors are not meant to be used for important/large elements, they have their own uses. The darker purple and darker gold colors are used to indicate a hover state (like on a button, for example). Meanwhile, the light gray is used to breakup long stretches of white backgrounds, which can separate sections in a subtle way. Additionally, a light gray background helps to focus the eye on white elements like the Type Hierarchy section above.
Primary Colors
PURPLE
PANTONE: 2627
CMYK: 77 / 0 / 100 / 31
RGB: 73 / 23 / 109
HEX: #49176D
GOLD
PANTONE: 871
CMYK: 20 / 25 / 60 / 25
RGB: 163 / 145 / 97
HEX: #A39161
Secondary Colors
DARK PURPLE
CMYK: 89 / 100 / 26 / 39
RGB: 49 / 1 / 83
HEX: #310153
DARK GOLD
CMYK: 45 / 45 / 78 / 18
RGB: 132 / 116 / 73
HEX: #847449
LIGHT GRAY
CMYK: 4 / 2 / 2 / 0
RGB: 242 / 242 / 242
HEX: #F2F2F2
Contrast and Accessibility
An imperative aspect of web design is accessibility. We want everyone to be able to use our website, so any content on the site must adhere to the Web Content Accessibility Guidelines (WCAG). The online world can be difficult to navigate for people with visual, hearing, mobility, cognitive, or other impairments, so we must do our best to improve their experience as much as we can.
A key part of accessibility for visually impaired users is contrast between elements, especially text. Using the WebAIM Contrast Checker tool, we can see what color combinations are acceptable according to WCAG standards. There are two levels to meeting these standards: AA, which is the minimum requirement, and AAA, a stricter level with much more contrast. In short, if a text and background combination meets the minimum contrast ratio requirements, it meets the AA criterion. Ideally, we would like to meet the stricter AAA criterion as much as we can, but the AA level is acceptable.
Accessible Color Pairings
The combinations below are considered accessible for web use. You may notice, we ran into issues combining our Butler Gold (#a39161) with other colors. It is too similar in light value to use on top of our Butler Purple, so the majority of the Gold across our site is used for decorative elements, such as the accent line below the "Contrast and Accessibility" heading (pure decorative elements that provide no context for information or interactivity are not subject to the same contrast guidelines).
PURPLE AND WHITE
RECOMMENDED
Normal Text
WCAG AA: Pass
WCAG AAA: Pass
Large Text
WCAG AA: Pass
WCAG AAA: Pass
This combination meets all WCAG contrast criterion.
This is our most used combination throughout the site, because it has a high contrast and reinforces our primary Purple color. The secondary Dark Purple passes all checks as well, but the primary Purple should be used in most circumstances to stay consistent with our branding.
PURPLE AND LIGHT GRAY
RECOMMENDED
Normal Text
WCAG AA: Pass
WCAG AAA: Pass
Large Text
WCAG AA: Pass
WCAG AAA: Pass
This combination meets all WCAG contrast criterion.
While not quite as common, this combination is still used frequently throughout the site. Generally, the foreground color is Purple, like in a heading, while the background is light gray. The secondary Dark Purple passes all checks as well, but the primary Purple should be used in most circumstances to stay consistent with our branding.
BLACK AND WHITE/LIGHT GRAY
RECOMMENDED
Normal Text
WCAG AA: Pass
WCAG AAA: Pass
Large Text
WCAG AA: Pass
WCAG AAA: Pass
This combination meets all WCAG contrast criterion.
This is our other most used combination throughout the site. The majority of our body text is Black on a White or Light Gray background. We do not recommend using Black for backgrounds because it goes against our site's light theming.
GOLD AND WHITE
LIMITED
Normal Text
WCAG AA: Fail
WCAG AAA: Fail
Large Text
WCAG AA: Pass
WCAG AAA: Fail
This combination only meets AA criterion for large text.
Generally, this combination is not recommended. The one use case for Gold and White is for subheadings. When using a Purple heading on a White background, we can use a Gold subheading in between the heading and body text. Large text requires less contrast to be compliant, so Gold text in this instance must be Heading 3 size or above.
DARK GOLD AND WHITE
LIMITED
Normal Text
WCAG AA: Pass
WCAG AAA: Fail
Large Text
WCAG AA: Pass
WCAG AAA: Pass
This combination meets all WCAG contrast criterion except for AAA on normal text.
We can technically use this color combination, as it passes all minimum contrast requirements. It can be used in a pinch, but we still do not recommend using these two colors together. Using the secondary Dark Gold in place of our primary Gold can cause confusion in our branding. Dark Gold and Dark Purple should never be used without a primary color alongside it.
GOLD AND DARK PURPLE
LIMITED
Normal Text
WCAG AA: Pass
WCAG AAA: Fail
Large Text
WCAG AA: Pass
WCAG AAA: Pass
This combination meets all WCAG contrast criterion except for AAA on normal text.
We can technically use this color combination, as it passes all minimum contrast requirements. It can be used in a pinch, but we still do not recommend using these two colors together as it goes against our site's light theming.
Photography
Images are what the viewer sees first. It’s what invites the reader into the message. Butler’s photographic style is built on a sense of authenticity and welcome. It reflects what it’s like to learn, live, and work here. Most importantly, it makes people want to visit, and learn more about the college.
When taking photos, always also be mindful of appropriate representation. Butler is comprised of individuals from many cultures and backgrounds; our photography should reflect and celebrate that.
Quality
Bright, crisp, authentic, high-resolution
Mood
Reflective, determined, active, optimistic
Believable
The photography should have an editorial feel, with subjects looking off camera to aid in authenticity and ensure a genuine feel. Shallow depth of focus allows the subject to remain the focal point. Photos of Butler students, faculty, and staff should be used over stock photos whenever possible.
Background Images
We utilize image backgrounds with a color overlay to bring more of our Purple into the site's theming and break up large stretches of white. This is created by darkening the original image and setting the blend mode to Luminosity at 25% opacity. Finally, place a color solid with our Purple (#49176d) as the bottom layer. This image is edited using Photoshop, and the template file is available here.
The template is very tall in order to account for how the image is framed on mobile. Ideally, the subject should be framed in the very center or slightly off-center of the full image, so the subject is visible on all device layouts.
Since these images are never the main focus, the photography guidelines above do not need to be followed one-hundred percent. Photos of our students, faculty, campuses, etc. are preferred, but stock images are acceptable in this use case.
Accessibility in Images
The majority of the images across our site are purely decorative, meaning they do not need any changes to be accessible. However, if an image contains any text or provides important context to the content surrounding it, then the image needs to have alt text, which is descriptive text that conveys the meaning of an image in digital content. People with vision impairments typically use screen readers, devices that read on-screen text out loud. When a screen reader comes across an image, it will either skip it (if it is purely decorative), or read its alt text.
Additional information on alt text and how to use it correctly can be found on Section508's website.
Images with Text
Helpful alt text: "Card with text: More classes starting February & March"
Unhelpful alt text: "Image with text" or "Student standing in front of student union with text that says 'More classes starting February & March'"
It is important to be descriptive and concise with alt text. Only type what is absolutely necessary to add context. As long as the relevant content is described, it will suffice.
In addition, text that is decorative does not need to be included in the alt text either. In this image, the student's hoodie with the words "Butler Community College Grizzlies" should not be described, because it is not necessary to understand the message.
Images that Provide Context
Helpful alt text: "Redler Institute of Culinary Arts building"
Unhelpful alt text: "Photo of the East side of the Redler Institute of Culinary Arts building during the day with clear blue skies"
Our goal with alt text is not to describe exactly how the image looks, but to provide only the necessary context. Keep in mind that the longer the alt text is, the more time it takes for a screen reader to get through a page. To avoid extending the time required to get the desired information, ensure there is no filler or fluff in an image's alt text.
In this example, alt text may not be required at all. If the image is accompanied by a Link that says "Tour the Redler Institute of Culinary Arts Building", then the alt text becomes redundant, and the image could be considered decorative.
Page Layouts
When designing a new page, it must be consistent with the rest of the website. Consistency across all our pages will improve the user experience, increase trust, and reinforce brand recognition. Variations between pages can cause confusion on where to find certain information. For example, if our English & Literature page has a form near the top section, then our Mathematics page should not have the same type of form all the way at the bottom. This set of general guidelines will assist in making our website a cohesive experience.
Additionally, it is important to consider how the page looks on mobile. This graph from Statcounter illustrates how mobile devices accounted for 47.36% of web traffic market share in the U.S. from January 2024 to January 2025. We need to ensure a smooth experience for all of our users, no matter their preferred device.
Spacing
There are two instances of spacing to consider when building a page: element spacing and section spacing.
Space Between Elements
Each element (text, images, buttons, accent lines, etc.) in the same section should have a consistent amount of visual space between them, usually around 24 pixels. This number does not need to be exact, but elements should not have more than 50 pixels of space between them in most situations. Many components have an option in their settings called "Add space below" which is set to none by default. If an element looks like it needs that extra space, change this option from "none" to "Add space below". This is the easiest way to set spacing between elements, but if you want more control over the amount of spacing on desktop, tablet, and mobile, you can use the Spacer component instead.
Using "Add space below"
Using Spacer component
Space Between Sections
"Section" is an interchangeable term that can describe very different things, but for the purpose of this guide, a section is defined as a group of elements contained in a full-width 1- 2- or 3-Column Layout component. Typically, you can tell when you get to a new section because it has a different background color than the previous section. As an example, the white area with the "Photography" heading is a section, and the purple area below it with the "Background Images" heading is a separate section.
Determining the spacing between each section is actually very simple. In the parent Column Layout component, simply make sure the "Padding top and bottom" option is set to "Top", "Bottom", or "Top and bottom" depending on the section's placement. For the most part, all sections will use the "Top and bottom" default option. If a section appears to have too much spacing, check and see if a component inside of it is providing unnecessary padding.
Columns and Alignment
The website's theming works better with left-aligned text, buttons, and other components. A major recurring design element is the Gold accent line which appears in the footer and hero of almost every page, so left-alignment emphasizes that motif. Center-alignment can be used sparingly to draw the eye to important content, but large body sections with paragraphs of text should be aligned to the left.
Additionally, most content is contained within 1-, 2-, or 3-column layout sections. A common section layout is a 2-column layout with text on one side and an image on the other, especially on our Primary pages. A 4-column layout can be utilized in special cases, but each column becomes too skinny for most situations. Section layouts on mobile should nearly always be a single column, which is the default option in each column layout component.
Page Types
There are four main categories our pages fall under: Primary, Secondary, Tertiary, and Program pages. We initially used this to determine a hierarchy in our sitemap, but they are also useful for keeping similar pages consistent with each other. Below is the definition of each page category and details on what should stay the same on every page.
Primary Pages
Primary pages include the top-level page for each content subject, or in simple terms, the pages within the main header navigation bar. With the exception of Athletics, all these pages present high level information with links to pages lower in the hierarchy.
The hero section for this type of page is a full-width image with an overlapped purple card. This card includes the name of the page and a gold accent line. The "Primary Page Hero" helper can be used to place this exact section on a new page.
A common text section used in Primary Pages is the "Checker box" helper. This includes a large image on one side and a heading, subheading, body text, and button on the other side. If multiple checker boxes are used, the left and right order between the image and text is alternated. The subheading is one of the few instances we use the Gold and White color scheme for text. If multiple buttons are needed in one checker box, then use one "Button(s)" component and add multiple links within it. The most important link should be placed first and use the default "Purple button" style, while any other button should use the "Border button" style.
Overall, the hero should be the same across all primary pages, and while the layout should be similar through the rest of the page, there is some flexibility in what components can be used.
Secondary Pages
Secondary pages are the next level in the hierarchy and are usually linked to directly from a primary page. These pages are focused more on information than eye-catching visuals. This Style Guide, for example, is a secondary page.
The hero section for this type of page is a full-width purple background with our college seal in the corner. On top of the background is the main Heading of the page in white with a gold accent line. Use the "Color block hero" helper to place this exact hero on a new page.
The layout of secondary pages below the hero vary heavily depending on the page content. Since it contains more information, strong Type Hierarchy is imperative in breaking up long sections of text.
Tertiary Pages
Tertiary pages encompass everything below secondary pages in the hierarchy. While similar to secondary pages in design, tertiary pages are even more informational.
This type of page uses the same hero section as secondary pages. Use the "Color block hero" helper to place this exact hero on a new page.
The layout of tertiary pages also vary heavily. Since it contains more information, strong Type Hierarchy is imperative in breaking up long sections of text. Images can be used, but are not necessary. Huge amounts of information can be divided into a Tabs Container for ease of browsing.
Program Pages
Pages for our academic programs have their own layout. This layout should not be deviated from, even past the hero section. For ease of use, similar types of information should be placed in the same spot across all program pages.
The hero section is comprised of a program-related image on the left, and a heading with an accent line and brief introduction of the program on the right. This intro text should be roughly two or three sentences long.
The following section with a purple image background has either another image or a program highlight video on the left, with an inquiry form on the right. Videos take time to produce and can become outdated when faculty members leave, so the majority of programs will have an image in its place.
This section is the longer program description, where the bulk of the information about the program is contained. On the left side is a gray box with examples of courses that are taken during the program. Above the gray box is a space that is usually left empty, but can be filled with an award, third-party certification, or other call-out (ex: a small card linking to the Box Office on the Theatre page). This section is restricted in the amount of copy that can be placed in the description; the taller the right column is, the more empty space there is on the left. The two columns do not have to be the same height by any means, but more balance in this section will look better and be easier to digest. The right column height can be reduced by placing some of the subheading topics within a horizontal tab container.
Below the description is a light gray section containing information on the type of degrees and certifications that can be achieved by completing the program. The area beneath the horizontal boxes can be utilized for additional certifications and transfer opportunities.
Some program pages have an additional white section after the degrees and certifications. This is the most flexible section for one-off program information. Things like internships, student organizations, annual events, and more can be placed in this section.
Next is another purple image background, only this time, it simply contains a widget from Career Coach, a career services application we use to display industry data and career options, along with a "Career Information" heading card.
Finally, the light gray section at the bottom is meant for additional information. Typically, this includes informational cards about the Kansas Promise Act, Career Coach assessments, and a link to the Enrollment page. Following the additional information is three hover cards linking to similar/related programs.
Questions?
Any questions regarding the page building process, accessibility standards, web design, or college branding can be directed to the College Relations & Marketing department at marketing@butlercc.edu