Web Style Guide
The Digital Experience team has created this Web Style Guide specifically for web content contributors. It outlines exceptions to the organization’s brand style guides and highlights best practices and conventions.
Checklist
Follow this quick checklist as you build your pages. More information can be found in each section below.
- Text: avoid using all caps in content
- Headings: follow heading heirarchy and only use H1 for the page title
- Bullets and lists: use where appropriate (e.g.; related items)
- Links: use descriptive links (avoid click here, learn more, etc.).
- Images: add alternative text to all images and avoid text heavy images
- Mobile: check the mobile view and make needed adjustments
Content
Capitalization
Avoid all caps in body text.
Exceptions: KUVO JAZZ, THE DROP 104.7, RMPBS KIDS (and other established logos per branding style guides).
Why
Accessibility:
Some screen readers may interpret short all-caps words as acronyms.
Uppercase text can reduce readability for users with dyslexia or cognitive disabilities.
Best Practice
- Instead of using uppercase to emphasize text, use bold or colored text.
- You can use CSS styles to change headings to uppercase (if desired). Note: this is only recommended for headings or a short amount of text (1-3 words) and must be in a separate text block or button.
CSS Directions
- Create a Text block and add heading text.
- Click on Style options.
- Scroll down to CSS Properties > click + New.
- Type "textTransform" in the first field, and "uppercase" in the second field.
Examples
Uppercase Heading
- See KUVO's 40th Anniversary pages for examples of uppercase usage.
Headings & Styles
Headings (H1, H2, H3, etc.) should follow a logical, nested order to reflect the structure of the content—not just to style text.
Why
Navigation
Helps users with screen readers understand the page and navigate by heading level.
SEO
Improves SEO by clarifying content hierarchy to search engines.
Best Practice
- H1 is used as the page title and should only use once per page.
- H2 is used for main, top level headings. Main subheadings under H2 should be H3, main headings under H3 should be H4, and so on.
- Follow a sequential order and don't skip levels
- Don’t use headings to style text. Use text styles for visual design instead.
Recommended Heading Length
- H1 (main title): 50-70 characters. Should be concise, keyword-rich, and clearly state the page topic.
- H2 (subheadings): 40-60 characters. Breaks content into sections; still important for SEO
- H3–H6: < 50 characters. Used for finer structure within sections, readable and scannable.
Examples
Heading Structure:
- Heading 1: 40th Anniversary
- Heading 2: Our Story
- Heading 3: 1980s
- Heading 3: 1990s
- Heading 2: Our Music
- Heading 3: Theme Songs
- Heading 2: Our Programs
- Heading 3: Current Shows
- Heading 3: Legacy Programs
Text Styles:
- Supersize text: font size 60px, weight 800. Largest style and best for very short amount of text. Could be used for banners at the top of the page.
- Hero text: font size 40px, line height 48px, weight 600. Smaller style option for banners, or subheading under Supersize text. Use short amount of text.
- Lead text: font size 22-24px, weight 400. Ideal as intro paragraph for news/posts or pages.
Supersize: 60px/800
Hero: 40px/48px700
Lead: 24px/400
Lists
Lists help users scan and understand structured content faster.
Why
Accessibility
Allows screen readers to announce that it's a list, the number of items, and lets users navigate by list item.
Improves keyboard navigation and assistive technology compatibility.
SEO
Enhances SEO and content parsing by search engines and other tools.
Best Practice
Use a list when:
- You are presenting three or more related items.
- Items share a common theme, purpose, or function.
- You want to break up text for scannability and improve readability.
- You are describing steps, options, features, requirements, or choices.
Examples of:
Appropriate ordered (numbered) list use:
- Step-by-step instructions
- Ranked lists
- Historical or chronological events
- Registration process
Appropriate unordered (bulleted) list use:
- Checklist or requirements
- Product features
- Resources
- Services
Link Text
Clear, descriptive link text helps users understand where a link leads and why they should click it.
Why
Accessibility
Screen readers may read a list of links independently from the content which allows users to navigate by tabbing through links or by pulling up a list of all links on a page. If link text is too generic, users won't know where it leads.
Best Practice
- Use clear, descriptive link text. Avoid vague phrases like “Click here”, “Learn more”, or “Read more.” Instead, use text that describes the destination or action.
- Don't repeat the same link text when linking to different locations.
- URLs: Don't include the URL in the link text unless necessary (e.g., when printed). Use descriptive words instead.
- Email: use all lowercase for email addresses. If space is limited, link the word "Email" instead of displaying the full address.
Examples
Link text: instead of "Learn more" (for an event):
- "View event schedule" (better option) or "View Jazz Odyssey event schedule" (best option)
URLs: Instead of the including the full url as a link https://www.rmpbs.org/, use descriptive text as a link Rocky Mountain PBS.
Linking
To ensure a smooth, accessible, and user-friendly experience, it’s important to follow best practices when adding links to content.
Why
Same Site / Same Tab
Aligns with user expectations, reduces unnecessary tab clutter, and allows users to navigate back easily with the browser’s back button.
Different Site / New Tab
Allows users to explore outside resources without losing their place, encourages return visits, keeps your site open for continued engagement, and provides a clear visual cue that they’re leaving your domain.
File Context
File type tells users what application they'll need to open the file. File size helps users anticipate download time and data usage.
Best Practice
- Internal content: open links in the same tab for internal content.
- External content: use a new tab for external websites, PDFs and other downloadable documents, or links where users may lose progress (e.g., forms).
Link Style
Links in content should be underlined and blue (over white and light backgrounds) or underlined and white (over black and dark backgrounds). Don't underline text unless it's a link, use bold for emphasis instead.
Exceptions: buttons and large headings. Buttons have their own colors and don't need to be underlined. Large headings don't need to be underlined as long as there are other obvious links on the page linking to the same content.
Steps:
- Highlight the link text
- Select the Underline icon
- Select the Text color icon
- Use the bright blue from the color palette
Note: if you make text edits to the text block after adding these changes, it may revert and won't keep your changes. You may have to redo the changes.
Linking to Files
When linking to a file (especially for downloads or non-HTML documents), it’s best practice to provide clear and immediate context about the file. Indicate file type and size when linking to documents and open in a new tab.
Example:
RMPBS
In the color palette, use the 5th color #116EDB
Light background example:
5th palette color #116EDB
Dark background example:
5th color #116EDB
KUVO JAZZ
In the color palette, use the custom color #0070b9
Light background example:
Custom color #0070b9
Light background example:
Custom color #0070b9
THE DROP 104.7
In the color palette, use the custom color #17b2b4
Light background example:
Custom color #17b2b4
Light background example:
Custom color #17b2b4
Anchor Links
A type of hyperlink that takes you to a specific section within the same webpage or to a specific spot on another page.
Why
Improves usability, accessibility, and overall user experience — especially on long or complex pages.
Link destination:
- Select the section or block to link to
- Go to Options > under HTML Attributes, click + New
- Under Property Name, select id
- Under Value, type in one word that represents that section or block (Example: colors)
Anchor link:
Add an anchor link that links to content on the same page:
- Select the text/button to add a link
- Click the Link icon and type # and the word that you added as the link destination (Example: #colors)
Add an anchor link that links to content on another page:
- Select the text/button to add a link
- Click the Link icon and add the page url (everything after the homepage url) and then # and the word that you added as the link destination (Example: /about#colors)
Images
Alternative Text • Text in Images • Guidelines
Alternative Text
Alt text offers a textual alternative to images, playing a crucial role in digital accessibility. All images—except those that are purely decorative or functional—should include descriptive alt text.
Why
Describes visual content:
Screen readers read alt text aloud, allowing users who are blind or have low vision to understand the meaning and purpose of an image.
Accessible interactive elements:
If an image is a button or link, the alt text describes its functionality, so screen reader users can know what action to take.
Fulfills legal requirements:
Using alt text is a requirement for many digital accessibility standards and laws, like Section 508 and the Web Content Accessibility Guidelines (WCAG).
Improves SEO:
Search engines can't "see" images, but they can read alt text. Well-written alt text helps search engines index and rank your images and web pages more effectively.
Improved user experience:
If an image doesn't load (due to slow internet, a broken link, or other issues), the alt text will display in its place, ensuring users still have access to the information.
Best Practice
- Be concise but descriptive: aim for 1–2 sentences maximum and describe the essential information the image conveys.
- Avoid saying “image of” or “picture of”. Screen readers already announce it’s an image.
- Functional images (links/buttons): describe the function of the image, not its visual appearance.
- If the image is purely for visual decoration (such as background textures/gradients, dividers/separators), use empty alt text (alt=""). This tells screen readers to skip it.
- For complex visuals (charts, infographics, etc.), see Text in Images section below.
- Images of text: Include the exact text from the image in the alt text (see Text in Images section below).
Alt text: Jeff Campbell and Erica Brown in the KUVO JAZZ Studio
Alt text: La Molly announcing KUVOLE performance of 2MX2
Image with Caption
To add an image with a caption, use the Custom Component "Image with Caption" (instead of an Image block):
- Click on Insert tab
- Under Custom Components, select Image with caption and drag it into the page
- In the window, Choose Photo and add a Caption
Dos
✔ Alt text summarizes or replicates the key message (however, avoid duplicating large bodies of text and instead include that content on the page, or link to it)
✔ Use high contrast between text and background
✔ Choose legible fonts and avoid decorative styles
✔ Ensure text is not too small (at least 16px is
recommended for body text)
✔ Don’t rely on color alone to convey meaning. Always use color plus text, icons.
Dont's
✘ Alt text duplicates large bodies of textsummarizes or replicates the key message (however, avoid duplicating large bodies of text and instead include that content on the page, or link to it)
✘ Use high contrast between text and background
✘ Choose legible fonts and avoid decorative styles
✘ Ensure text is not too small (at least 16px is recommended for body text)
✘ Don’t rely on color alone to convey meaning. Always use color plus text, icons.
Text in Images
Avoid text in images when possible.
The Web Content Accessibility Guidelines (WCAG) recommend against using text in images unless it is "essential" to the content. When using text in an image is unavoidable (such as a logo, infographic, diagram or chart), you must provide the text in an alternative format.
The golden rule: use HTML text instead of image text.
Why
Accessibility:
Screen readers can't interpret text embedded in images, preventing users with visual impairments from accessing the information.
Readability:
Text in images doesn't scale or resize well. When magnified, text can become blurry and difficult for low-vision users to read.
Adaptability:
HTML text is more responsive and can be customized by users (e.g., changing font size or color) to suit their needs.
Logos
Best Practice:
- For images with a small amount of text (such as a logo), repeat the exact text from the image in the alt attribute.
- Keep the alt text concise, ideally under 100–125 characters, to ensure screen readers don't cut off the description.
Example:
For an image of a logo that says "KUVO JAZZ" the alt text should be "KUVO JAZZ logo".
Infographics, Diagrams, Charts
Best Practice:
- For complex images with a significant amount of text, alt text isn't enough. You must provide a full-text equivalent of the image's information.
- Create concise alt text that briefly summarizes the image and directs users to the full description. For example: alt="Donation data for 2025. See the following paragraph for details.".
- Provide the complete text from the image in a visible caption, expandable element, or on a separate page and provide a link to it. in the paragraph directly following the image, or on a separate page and provide a link to it. This makes the information available to all users, not just those with screen readers.
Contrast & Readability
If you must place text over an image, prioritize readability with sufficient contrast.
- Contrast ratio: Ensure the contrast ratio is at least 4.5:1 for normal-sized text and 3:1 for large text. Use a contrast checker tool to verify.
- Use overlays: Place a semi-transparent layer (dark or light) between the image and the text to make it stand out and improve legibility.
- Font choice: Use large, readable fonts and ensure the design is responsive so the text remains legible on all screen sizes.
- Provide alt text: Always provide alt text that includes the exact text superimposed on the image.
Size & Selection
Guidelines for image sizes for page type and layout.
Related
Related:
- Backgrounds
- Borders
Image Size
- News Featured Image: 1200 x 675px. No text on image.
Image Selection
- f
Colors
Color Palettes
Brand style guide colors may not always translate well to the web. When designing for the web, use the designated web color palettes for each brand site.
In addition, see background and button color options tailored for digital use listed below.
Why
Print vs Web
Print and web use different color systems. Print uses CMYK (cyan, magenta, yellow, black) which produces some colors that are hard to replicate on screens. Web uses RGB (red, green, blue) which displays colors using light, which can appear brighter and more saturated.
Best Practice
- Use the following color palettes for each brand.
- Design in RGB for web, CMYK for print. Avoid direct color matching between print and web—use approximations. Always test visually.
RMPBS
Branding colors:
PBS Blue: #2638c4
Backgrounds, buttons, links
Text color:
White
Navy Blue: #0a145a
Backgrounds
Text colors:
White
Light Blue
Medium Blue: #0f1e8c
Backgrounds, headings
Text colors:
White
Light Blue
Teal: #48d3cd
Text color:
Black
Yellow: #ffcf00
Buttons, small backgrounds, alert banner background
Text color:
Black
Coral: #fe704e
To only be used for Donate/ Support buttons
Text color:
Black
Additional for web:
Palette Blue: #116edb
Backgrounds, buttons, links, slide button
Text color:
White
Additional Blue: #4a90e2
In mega menu
Text color:
Black
Palette Blue: #59a5ff
In palette
LATEST text for events
Text color:
Black
Palette Blue: #c4dfff
Backgrounds, headings
Text color:
Black
Light Blue text
Palette Blue: #c4dfff
Backgrounds
Text color:
Black
Blsck: #000000
Backgrounds, text, headings, buttons, icons
Text color:
White
White: #ffffff
Backgrounds, text, headings, buttons, icons
Text colors:
Black
PBS Blue
PBS KIDS Color Palette:
Branding:
PBS Blue: #2638c4
Blue: #2fc0eb
Teal: #2ae8d1
Green: #00ab4e
Dark Green: #1a8549
Yellow: #f7e03b
Sunshine: #f5b338
Magenta: #e5296b
Red: #fb4241
Purple: #a220df
Additional for web:
KUVO JAZZ
Branding colors:
Azure: #0070b9
Backgrounds
Text colors:
White
Black
Cornflower: #6096de
Backgrounds
Text colors:
White
Black
Cielo: #00b1e9
Salsa Verde (web): #7ed321
Donate button. Backgrounds (use sparingly)
Text colors:
Black
Indigo: #40b66
Gris: #393636
Backgrounds, buttons
Text colors:
White
Cornflower (web)
Plata Gray: #b7b7b8
Additional for web:
Light Gray: #f0f0ee
Backgrounds
Text colors:
Black
Black: #000000
Backgrounds, text, headings, buttons
Text colors:
White
Cornflower
White: #ffffff
Backgrounds, text, headings, buttons
Text colors:
Black
Cornflower
THE DROP 104.7
Branding colors:
Asphalt Gray: #343333
Backgrounds
Text colors:
White text
Flamingo: #e01778
To only be used for Donate/ Support buttons
Text color:
Black
Electric Green: #c1cf33
Play icon, Show link
Text colors:
Black text
White icon
Golden Vibes: #f8bc1c
OG Orange: #ec7426
Teal Skies: #17b2b4
Backgrounds, slide button
Text colors:
Black text
White icon
Violet: #933388
Concrete: #c3c2b4
Additional for web:
Dark Green: #0d5858
Backgrounds, buttons
Text colors:
White text
? Color Palette Gray: #393636?
Backgrounds - on shows page. Differs from palette? Schedule buttons
Text colors:
White text
Black: #000000
Backgrounds, text, headings
Text colors:
White text
White: #ffffff
Backgrounds, text, headings, buttons, icons
Text colors:
Black text
? Medium Gray: #434142?
In mega menu
Text colors:
White text
? Light Gray: #434142?
Background (Contact Us page, in color palette)
Text color:
Black text
Backgrounds
When using background colors (or background images) it's important to balance accessibility, legibility and visual heirarchy.
Why
Accessibility
To ensure text is readable by those with visual impairments.
Readability
Too many colors can be visually overwhelming and reduce the overall coherence of the design. Overlays and shadows help text remain visible and accessible when placed over background images. Clean, low-noise backgrounds make long-form content easier to read and less tiring on the eyes.
Related
Related:
Best Practice
- Ensure sufficient contrast: for dark backgrounds use white or light text, for light backgrounds, use black or dark text. (At least 4.5:1 for normal text; 3:1 for large text. Use tools like this color contrast checker).
- Avoid color alone for meaning: don't rely solely on color to convey important info (e.g., red = error). Always use text, icons, or patterns in combination with color.
- Avoid using too many background colors per page.
- Minimize visual noise: avoid overly saturated or high-contrast backgrounds behind large bodies of text. Stick to neutral or subtle background tones for better readability.
- Use text shadow or overlays when needed: if placing text over images or vivid backgrounds, use semi-transparent overlays (e.g., dark overlay with white text) or text shadows to improve legibility.
Examples
White text over dark background.
Black text over light background.
Our Music
Buttons & Icons
Using consistent button colors for specific call-to-actions (CTAs) and other button types is a key part of effective user interface design.
Why
Recognition & Predictability
When users see the same color used consistently for a specific action they quickly learn to associate that color with that function. This speeds up decision-making and helps users navigate your site more intuitively.
Visual Hierarchy
Color can be used to signal importance. For example, using a bold, primary color for your main CTA (like Donate) and a more neutral color for secondary actions (like "Learn More") helps guide the user’s attention and prioritizes the intended path.
Accessibility & Usability
Supports users with cognitive or visual impairments by reducing the need to re-learn or guess what each button does on different pages. It creates a more predictable and user-friendly experience.
Branding
Using a defined set of button colors that align with your brand palette contributes to a cohesive visual identity. It subtly reinforces your brand while ensuring a polished, professional look.
Reduces Mistakes
When button colors are used consistently, users are less likely to click the wrong button or misunderstand the action it performs. This is especially important for actions that are irreversible, like "Delete" or "Submit Payment".
Related
Related:
Buttons
Best Practice
- Use premade button templates for most cases.
- Use the same color consistently for each specific action ("Submit", "Donate", "Download", etc.)
Examples
RMPBS
KUVO JAZZ
THE DROP 104.7
Icons
Icons can enhance clarity but should not replace text. They work well in combination with the file info, especially for visual cues.
- An external arrow icon suggests a link will open in a new tab or lead outside the current site.
- A download icon can suggest that clicking will start a file download.
Mobile
Guidelines
A large percentage of users access content via mobile devices. Optimize your content accordingly.
Why
Mobile screens are small. Headings may get cut off if too long, and layout for desktop may not always work for mobile.
Best Practice
- Headings: short focused headings are easier to scan and don't push content out of view.
- Copy: mobile users prefer brief, scannable text. Highlight key points early. Use legible font sizes. Use short paragraphs, bullet points, subheadings, and numbered lists.
- Images: reduce large files that slow load times and complicate navigation (infographics, high-res images).
- Layout: always check the tablet and mobile layouts and make changes as needed (note: changes will be the same in table/mobile and will not affect the desktop version). Most common changes include image or video width and updates to margins and padding.
Settings
- Text blocks: for mobile, if needed, adjust the width of the block. Under Options > Layout, change Width to 90% and Align to Center horizontally.
Borders
Rounded corners on images or blocks.
Steps:
- Select an image or block and go to Options > Border
- Change the Border Radius (we typically use 16px)
Example
16 px border
Outlines
Colored outlines around images or blocks.
Steps:
- Select an image or block and go to Options > Border
- Select from the Style drop-down (we typically use Solid)
- Select the Color
- Adjust the pixel Size
- For rounded corners, adjust the Border Radius
Example
16 px border, solid black outline of 2 px
Scrolling Images
Scrolling images (with or without text overlay) are background images that scroll at a different speed than the rest of the page content.
Note: this requires CSS updates. Reach out to the Digital Experience team for help.
Best Practice
- Best for full page-width hero images or sections.
- Use short amount of text and large text size with enough contrast from the image for readability.
- Use logos as pngs (to have invisible background).
Borders
For created rounded corners and outlines on boxes and images.
Steps
- margins, padding for various use cases (see Bejamas Figma files for info)
- Naming of images
- Shadow styling for text over images
- Borders
- Content formats for date/time/phone
- Image sizes for different areas of site (such as featured image, logos, etc.)
- URL length
- Sentence case vs title case for headings, posts, buttons?
- Image curved corners