The ROAR for Good Design Library demonstrates all the available blocks, patterns, and styles within the site. As new blocks, patterns, or styles are added to the theme, they should be documented here so all site editors can use this library as a reference.

• Color
  • Color Palette
  • Gradients
  • Duotone Filters
• Typography
  • Fonts
  • Typography Sizes
• Borders & Shadows
• Blocks
  • Each content piece in the Block Editor is a block. Think of them as building blocks. They can be assembled and combined to create rich, detailed pages. Most of the blocks in the block library are WordPress core blocks, but some are third-party plugins. Blocks have default styles from the theme, but their appearance can be changed using the block editor.
  • Resources to learn more about blocks:
    • Learn WordPress Lesson: Nesting and using blocks to create visually appealing content
    • WordPress Documentation: Work with Blocks
  • Text Blocks
  • Media Blocks
  • Design Blocks
  • Widget Blocks
  • Embed Blocks
• Patterns
  • Patterns are pre-assembled combinations of blocks. The patterns in this library are included with your theme and are based on the site’s design system. You can also create your own patterns to suit your content entry needs.
  • Resources to learn more about patterns:
    • Learn WordPress Lesson: Using Block Patterns
    • WordPress Documentation: Block Patterns
  • TKTTKTK

Color Palette

The following color palette is available for use in the Block Editor. See Color Settings overview for detailed instructions on adjusting block colors.

Accessibility: pay close attention to the contrast warning when adjusting Text and Background colors. The editor will check your selections and provide a notification if your foreground / background combination lacks sufficient contrast, but it will not automatically prevent low-contrast combinations.

Brand colors: although the color picker will allow you to select any color, it’s important to use the following brand colors on the site. Familiar branding contributes to usability and helps users feel oriented on the site. Your designer has selected this color palette as part of your site’s visual language. The color picker is pre-populated with this palette for your convenience.

* Color chips marked with asterisks are not accessible when combined with the default text color or pure white. Text on the color chips has been adjusted to meet color contrast requirements. These colors should be used as accent colors only, and not used as backgrounds for text areas.

Gradients

Typography

See Typography Settings overview for more details on how you can make typography changes if needed.

Typography Sizes

Text Extra Small. I try all things, I achieve what I can.

Text Small. It is not down on any map; true places never are.

Text Medium / Default. All men live enveloped in whale-lines. All are born with halters round their necks; but it is only when caught in the swift, sudden turn of death, that mortals realize the silent, subtle, ever-present perils of life. And if you be a philosopher, though seated in the whale-boat, you would not at heart feel one whit more of terror, than though seated before your evening fire with a poker, and not a harpoon, by your side.

Text Large. See how elastic our prejudices grow when once love comes to bend them.

Text Extra Large. I love to sail forbidden seas, and land on barbarous coasts.

Heading 6 / Display Extra Small. As for me, I am tormented with an everlasting itch for things remote. I love to sail forbidden seas, and land on barbarous coasts.

Heading 5 / Display Small. There is no folly of the beast of the earth which is not infinitely outdone by the madness of man.

Heading 4 / Display Medium. A noble craft, but somehow a most melancholy! All noble things are touched with that.

Heading 3 / Display Large. All my means are sane, my motive and my object mad.

Heading 2 / Display XL. Yes, as everyone knows, meditation and water are wedded for ever.

Display 2XL. Ignorance is the parent of fear.

Borders & Shadows

See Border & Shadow Settings Overview for details on how you can make adjustments if needed.

Border Radius

Drop Shadow

The “Combo” style combines the medium, large, and extra large drop shadows for a layered look.