Using Styles

Aggie UX uses section styles to incorporate some visual variety. These predefined styles ensure all websites are brand compliant while providing ways to give individual sites their own personality and ways to emphasize different pieces of content. Different style families typically consist of different fonts for headings and design elements.

Combining Styles

It is best to limit use of styles to one or two styles on a given site. We recommend these site-wide pairings:

• Default only
• Default + Bold
• Default + Elegant

Using Styles on Components

Most (but not all) components have variations in each of the three Aggie UX styles: default, bold and elegant.

A given component instance must use the same style throughout. When using our CMS implementations, this is default enforced behavior. However, when building mockups in Figma, you will have to manually ensure a component is using the same styles throughout by setting the style at the top level of the component.

Aggie UX Figma components are typically made of multiple Figma components nested inside one another. You can see the nested nature of the Figma components in the Layers panel on the left-hand side of the screen. Typically, each nested component has a Style control. You should only need to change the style at the top-most layer of a given component, which should apply your selected style to the entire component.