Theme Best Practices
How to get the most out of UW Theme 2.0
By building with UW Theme 2.0, your site taps into the strength of the UW–Madison brand — helping you build trust, strengthen connections with your audiences, and create a presence that feels distinctly UW. Below you will find simple best practices for using theme styles and features to accomplish your goals.
Visit the UW–Madison Brand and Visual Identity site for official brand guidance
Start with patterns
Patterns combine blocks and design best practices into ready-to-use layouts. They’re the fastest way to build pages that are consistent.
Full-page patterns
Ready-made page layouts you can use as a starting point.
Section patterns
Reusable sections for building pages quickly and consistently.
Apply color in the theme
UW Theme 2.0 provides built-in text and background color palettes that are designed to work together and meet accessibility contrast requirements.
Background palette
For core WordPress design blocks (like Group, Columns, and Cover), a limited set of colors is available. These are core WordPress blocks, not UW Theme 2.0 blocks. The color options are aligned with UW–Madison brand standards and ensure good contrast with text.
Text palette
For core WordPress text blocks (like Paragraph, Heading, and List), a limited set of text colors is available. Use color changes sparingly—links and headings should carry the most emphasis. For best practices, review how color is applied in theme patterns.
Auto color switching
The theme has functions in place to automatically change colors when backgrounds change to meet contrast requirements. However, in some cases you can manually change colors to improve accessibility. One example is choosing a white button on a dark background color.
UW Theme 2.0 customizes the core WordPress Button block to reflect UW–Madison branding. Because of these enhancements, it’s documented separately on our Button block page.
If you see a bug or color mismatch, please use the feedback form to report it.
Text on a dark background color
Text on a light background color
Cover block for gradients and overlays
In UW Theme 2.0, the core WordPress Cover block is the only block that lets you add background images, gradients, or opacity overlays.
Cover block with image and black gradient overlay
Use text over images sparingly. Pick images that don’t interfere with the text, and always apply an overlay or gradient to increase contrast.
Cover block with no image and red gradient overlay
The Cover block isn’t just for text over background images. You can use it as a full-width section with a solid color or gradient.
Color with opacity adjustments
The Cover block includes colors you can use as overlays on images or as solid backgrounds. Use the Overlay Opacity slider to keep text readable. In most cases, use white or black as an image overlay color. Reserve other colors for solid backgrounds without images.
Image with Text gradients
The Cover block includes two preset gradients you can place over images that have been optimized to improve text readability:
- Image with Text – Black Gradient
- Image with Text – White Gradient
Use these on top of images, adjusting the opacity and gradient start/stop points as needed to create enough contrast for your text.
Badger Red Gradient
The Badger Red Gradient is available in the Cover block as an overlay color. Avoid using it on top of images — it’s intended to be used without an image so it appears as a solid background color, keeping text clear and readable.
Custom gradient colors
While the editor gives you the option to enter custom hex values, do not use custom hex values. Changing gradient colors can break accessibility and create designs that don’t align with the UW–Madison brand.
Instead, use the preset gradients in UW Theme 2.0. These are already designed to meet accessibility requirements. If you need to tweak for readability, only adjust the start/stop gradient points and opacity.
Position text for clarity
Change the content position in the Cover block to move text onto a simpler part of the image where it’s easier to read. Test your designs on mobile to ensure your text can be read when repositioned on the image.
Cover block with top
aligned text
Headings and page titles
Headings give your page structure and help readers and screen readers navigate your content. In UW Theme 2.0, you can also style headings with options like the red Mini Bar or by adjusting font size — but it’s important to keep the correct heading level in place for accessibility.
Learn more about accessible titles and headings from the Make it Accessible guide.
Heading hierarchy
Use one H1 (your page title), then organize content with H2s and H3s in order. Don’t skip levels. To check your heading structure, open the Outline tab in the Document Overview — it shows your headings in order so you can spot gaps or mistakes quickly.
Title block vs Heading block
Headings can be added with either the Title block or the Heading block.
- Title block: This is the default H1 that comes with every new page. Use it for your page title.
- Heading block: Use this for all other headings (H2–H6).
If you need an H1 that’s different from your page title, delete the Title block and insert a Heading block set to H1. You can still change the title of your page:
- Open Page settings
- Click the Action icon (three-dot menu)
- Select Rename
- Update your page title
Adjust heading levels
With the Title or Heading block selected, use the block toolbar to select the appropriate heading level for your page structure.
Change font size, not heading level
If you want a heading to look bigger or smaller, use the Size dropdown under Typography in the styles panel for a block. This lets you pick different font sizes without changing the actual heading level.
Red Mini Bar for headings
The red Mini Bar is a style accent option for headings. You can hide or show the red Mini Bar in the Title or Heading block styles panel. It works best on H1s and H2s — avoid using it on smaller headings so it doesn’t feel overdone.
Links in headings
In UW Theme 2.0, heading links can be styled so the underline appears only on hover and the blue color is removed. Do this only when it’s obvious the heading is a link — never rely on color alone.
This works best in familiar layouts like news, events, or post feeds, where readers typically expect headings to link to a full article or details.
In most other cases, keep the underline and blue link color. It’s a universal, accessible cue.
Typography settings
UW Theme 2.0 uses Red Hat Display for headings and Red Hat Text for most other content. These fonts are built into the theme and cannot be changed, which keeps your site aligned with the UW–Madison brand.
Typography settings
The Typography panel in most block settings gives you options to adjust text appearance, including font size, letter spacing, and weight. Learn more about these Typography Settings in WordPress.
Keep text styles simple. Use the theme’s default styles and the ones built into patterns — they’re already set up for consistency and readability.
Resources
- Digital fundamentals guide from Center for User Experience
- Text spacing guidance (WCAG Level AA)
- All-caps headings: Are they bad for accessibility?
Jumbo font sizes
UW Theme 2.0 includes three Jumbo font sizes in addition to the normal type scale. These larger sizes give you more flexibility for expressive headings. You can use them to highlight a key message at the top of a page or break up long sections with a bold statement.
Use Jumbo headings sparingly so they keep their impact. They work best for short, clear phrases rather than long titles or full sentences.
Intro paragraph style
The theme also includes an Intro Text style for the Paragraph block. This is slightly larger than normal body copy and is designed to sit right below a page title or heading to introduce the content or highlight a key idea.
Drop shadows
Drop shadows add emphasis. They create separation from the background so content and elements stand out more from surrounding content.
Drop shadows
In UW Theme 2.0, shadows can be applied to core WordPress design blocks and buttons. They work best in card-style layouts or when you want to highlight specific content.
Use shadows carefully to add depth or highlight important elements. Overuse creates clutter and makes it difficult for users to know what matters most on the page.
Example card style
Here’s an example of a card style. This was made by applying a gray background color to the Group block, top and bottom padding, and a drop shadow.
How to apply drop shadows
You can add a shadow in the block settings panel:
- In the Border & Shadow section, open the options menu (three vertical dots).
- Turn on Shadow. This will reveal the drop shadow style.
- Select Drop shadow, then choose a shadow style to apply it.
Visit our Buttons block documentation to learn how to apply a drop shadow to a button.
Find patterns with drop shadows
For the most consistent results, look for patterns that already use shadows in a balanced way. Patterns with card layouts often include drop shadows.
Spacing
In WordPress, spacing controls appear under Dimensions in block settings (padding, margin, and block spacing). In UW Theme 2.0, patterns already apply these settings, keeping layouts consistent without extra work.
See WordPress Dimension Settings documentation to learn more about spacing controls.
Start with patterns
Patterns carry spacing decisions by default. They’re the easiest way to keep your site consistent. Start with patterns first, then adjust spacing as needed to suit your layout and content needs.
Be consistent
If you build pages without patterns, be intentional about spacing. Use similar padding between sections so your site feels consistent — too little space makes content feel crowded, while too much creates awkward gaps.
Break up content with background colors
Another way to separate content without adding extra spacing is to apply alternating background colors. This creates a natural break between sections and helps long pages feel easier to scan.
The easiest way to do this is by starting with a pattern that already has a background color applied, and then add your own content inside.
Avoid the Spacer block
While the Spacer block may seem like a quick fix, it often leads to inconsistent layouts and doesn’t adapt well across screen sizes. Keep your spacing consistent by relying on patterns and spacing controls (padding, margins, block spacing) instead.
