Arboretum Component Style Guide Test Page

This styleguide outlines the core patterns, components, and conventions that keep our digital experience consistent and intentional. It serves as a practical reference for designers and developers—capturing how we structure content, apply visual language, and build interactions so our work stays cohesive, scalable, and easy to maintain.

1. Buttons

1.1 Standard Folwell Buttons

ℹ️ We've improved the default Folwell button animation effect on hover to reduce lag.

Small Button Maroon Button Maroon Arrow Button Outline Button Give Button

1.2 Custom Arboretum Buttons

ℹ️ In addition to the standard Folwell button styles, new Arboretum Accent colors have been added.

Chrysanthemum Green Gold Lilac Daisy Rose Leaf

1.3 Full Width Buttons

Maroon Full Width Button

Full Width Outline Button

Full Width Give Button

Gold Full Width Button

Green Full Width Button

Chrysanthemum Full Width Button

Lilac Full Width Button

Daisy Full Width Button

Rose Full Width Button

Leaf Full Width Button

1.4 Half Width Buttons

Maroon Half Width Button

Half Width Outline Button

Half Width Give Button

Gold Half Width Button

Green Half Width Button

Chrysanthemum Half Width Button

Lilac Half Width Button

Daisy Half Width Button

Rose Half Width Button

Leaf Half Width Button

1.5 Buttons on alternate background colors

ℹ️ No changes were made to the default outline buttons aside from tweaking the animation speed on hover. Accent colors should not be used on alternate background colors.

2. Dividing Lines

We've added several additional accent colors for dividing lines. These are available for use in the WYSIWYG Editor using the popup context editor toolbar to select a color variant.

Default:

Maroon:

Gold:

Arboretum Green:

Chrysanthemum:

Rose:

Leaf:

Lilac:

Daisy:

3. CKeditor Callouts

ℹ️ Folwell standard color and border callouts have been tweaked to standardize foreground colors on link and buttons. These simple callouts can be used in the Wysiwyg via the custom "Callout" toolbar item.

3.1 Folwell color callouts

3.2 Folwell gold line callouts

ℹ️ We have not added custom color variants for line callouts.

4. CKEditor Custom Callouts (Arboretum Accent Colors)

⚠️ Custom Arboretum accent colors may be used in WYSIWYG, however due to limitations with Folwell's custom CKEditor integration, users must switch into the "Source" mode to add the appropriate custom class to the <aside class="callout">

5. Paragraphs Callouts

The following color options are available when using Folwell Component entities, placed either via Paragraphs or Layout Builder.