u3a styleguide

Last updated:

Styles for APT to use when designing content for u3a

• Branding
• Colors
• Text
• Accessibility
• Header / Footer
• Buttons
• Table
• Examples

Branding

Logos

u3a Colors

Main Colors

Primary: u3a Yellow

■ #ffc700

Secondary: u3a Dark

■ #005ab8

Tertiary: u3a Light

■ #2886e6

Supporting Colors

u3a Orange:

■ #ffaa31

u3a Light Green:

■ #63c369

u3a Forest Green:

■ #10695a

u3a Purple:

■ #b49fdc

u3a Red:

■ #ee695a

Grays

White:

■ #fff

Dark Gray:

■ #333333

Dark:

■ #1a1a1a

Variations

Lighter Blue:

■ #EBF0F9

Acceptable color matrix

Colors provided by the u3a brand guidelines are often not suited for web usage, this matrix shows which combinations are contrasting enough to match web accessibility guidelines

Text

Font

Font stack:

Header and Body:

'DM Sans', sans-serif

Icons:

Fontawesome 4

Text types

Navbars:

Main Header:

Sub Header / Breadcrumbs:

Home > Subpage > Current Location

Inline:

Heading:

Top Level Heading: 3rem

Second Level Heading: 2rem

Third Level Heading: 1.75rem

Fourth Level Heading: 1.5rem

Headings must be used in rank order

Text Styles:

Paragraph "Make the most of life once you're no longer in full time work by exploring new ideas, skills and interests with your local u3a" 1rem

Link

Alerts:

A simple success alert!

A simple danger alert!

A simple warning alert!

A simple info alert!

Form Label:

Username

Form Helper text:

You username is the same as your email address.

Lists:

• Unordered list item 1
• Unordered list item 2

1. Ordered list item 1
2. Ordered list item 2

Form Elements

Web Elements

Fragments elements

Accessibility

The whole styleguide is written and coded to be accessible (except where demonstrating what fails accessibility guidance). This section simply provides notes about requirements and links to external resources on accessibility.

Requirements

Focus indicator

The CSS for any u3a product must include a line ensuring focus is indicated by a black outline or box shadow.

Skip Nav

Each page must have the Skip navigation link included as the first piece of HTML content, including a working link to the main content and the supporting javascript

Targets

Clickable targets must be at least 44 pixels in width and height 44px high unless used inline

Menu options that are less than 44 pixels in width and height should include alternative routes that meet the target size criteria

Page Titles

All pages need a relevant page title

Headings

Headings should be used in rank order at all times

Forms

Form helper text needs to be actually helpful, not just a repetition of the field title

Tables

The first data cell of each row needs a scope attribute of “row”. This allows screen readers to specifically announce a cell

Tables should be striped & hover indicated to improve usability

Terminology

Terminology reference on Confluence

Accessibility Guidelines

WCAG 2.1 to AA standard

Header / Footer

Header

Footer

Buttons

Web Buttons

Primary Disabled Secondary Disabled Tertiary Disabled Inactive

• Buttons should be Sentence case
• btn-secondary is the main button style to be used for navigation
• btn-primary is to be used to indicate active areas, or for on page actions such as 'Add another'
• btn-white is to be used for inactive buttons such as 'Previous' on the first page and 'Next' on the last page

Web Tabs

Fragment Tabs

Table

Groups table

Example of a web table with a heading

Fragments (Image Examples)

Fragments Wireframe Examples

Examples

Image Examples

Microsite

Mypage

HTML Examples

News item

Accordion