Reference Themes

Last update: June 24, 2024

CREATED FOR:

  • Admin
  • User
  • Developer

Themes let you style your forms without deep knowledge of CSS. In addition to the default theme, you can get the following themes by installing the AEM Forms add-on package:

  • Beryl
  • Exec
  • Exec-Light
  • Liberty
  • Ultramarine
  • Urbane
  • U.S. Web Design Standards
  • Tranquil

Each theme contains a unique and elegant style that you can use to create delightful adaptive forms for your users. It contains unique styling for selectors such as panel, text box, numeric box, radio button, table, and switch. Stylings in these themes are based on requirement. For example, in a particular scenario you require a minimalist theme with clean fonts. Liberty theme lets you achieve that look.

Reference Themes

Themes included in this package are responsive, and styling in these themes are defined for mobile and desktop displays. Most modern browsers on a variety of devices can render forms applied with one of these themes without any hassle.

For more information on installing the package, see How to Work With Packages.

Beryl

Beryl theme is used by We.Gov adaptive form, and emphasizes use of background image, transparency, and large, flat icons. In the screenshot below, you can see how the Beryl theme looks, and how it can enhance the styling of your form.

Beryl theme

Exec

Exec theme avoids solid background fills to emphasize form components. Selecting and clicking components changes font colors. In comparison to the default Canvas theme, font color of the text in the selected tab changes to dark blue. Notice how the navigation and submit buttons are different from the Beryl theme.

Exec theme

Exec Light

Exec Light theme uses white space to create a seamless experience. The Next and Submit buttons get a solid fill and 3D shadow. Selected tabs on the left get an arrow instead of double-check marks.

Exec light theme

Liberty

Liberty theme uses a minimalist approach to highlight the important. For example, the font color of the visited tab changes to green. You can only see the bottom-outline of the text box which emulates the look of a paper-based form with lines. The active text box has a black bottom-outline while others get light gray bottom-outline.

Liberty theme

Tranquil

Tranquil theme provides light and dark shades of the Tranquil color scheme to highlight different components of a form. For example, radio buttons, panels, and tabs get a different shade of green.

Tranquil theme

Ultramarine

Ultramarine theme uses deep blue shades to highlight components such as tabs, panels, text boxes, and buttons.

Ultramarine theme

Urbane

Urbane theme emphasizes a minimalist and functional look for your form. When you apply the Urbane theme to your form, you can see that components are flat. The panels get thin outlines to create a modern look.

Urbane theme

U.S. Web Design Standards

U.S. Web Design Standards theme, as the name suggests, uses typefaces and styles described in the Draft U.S. Web Design Standards site. The web standard is used by federal organizations to create consistent web experiences across federal government websites.

U.S. Web Design Standards Theme

Experience Manager