Foundations

Colours

Primary colours

The primary colours are #2D7F3B, #389AD9, and #4A4A4A

• Use #2D7F3B (green) for linking to other pages (or external links).
• Use #389AD9 (blue) for interactions within the same page.
• Use #4A4A4A (gray) for the body text colour.
• Use either #2D7F3B (green) or #389AD9 (blue) to highlight a component or grab attention, as long as it cannot be confused with a clickable element.

Secondary colours

The secondary colours are #679A24, #F7941D, #274E78 and the grays #000000, #7F7E7F, #D0D0D0, #EFEFEF

• Use secondary colours alongside the primary colours when a cyclical series of colours are used. See the tiles on the homepage for an example.
• Use grays for background elements and stroke. The shade should be selected according to accessibility requirements.
• Use #F7941D (orange) sparingly for an extra prominent highlight or for orientation elements such as marking the current location on a progress bar.

Iconography

Icons are published in many places throughout the website using a custom font created for FLWS. To add an icon to an element, first define the size, colour, and positioning of the icon using CSS and then attach it using a css class.

Service icons

Notes

• There are icons for each of the major sections of the website.
  • three audience categories
  • three audience categories
  • two types of divorce application
• The connection between the service or object and the icon should be an obvious, linear connection (such as a child’s hand to represent children). Reach out to subject matter experts for a review of any icons used to represent sensitive subject matter.
• These icons derive their shape from the angular style of the FLWS logo. They make use of lines and cut-out shapes to form an image.
• These icons are always styled against the #679A24 (secondary green) colour.

Get help icons

Notes

• These icons use the most prominent colours from both the primary and secondary colour palettes. They should stand out from the header content to enhance findability.

Sub-header icons

• Print
• Forms
• Glossary
• Email

Notes

• These icons are simplified due to their small size and position in the header. They should not take prominence away from the other header items.
• These icons derive their shape from the angular style of the FLWS logo. They contrast the Get Help icons in that they use a consistent stroke width, rather than filled in shapes. 

Page layouts

Page layouts use the Bootstrap grid system. More information about the system can be found in the Bootstrap documentation.

Grids

These grid structures sit within the main content column.

• The 100% grid is used within the Info Page content type.

• The 50% grid is used within the Info Page content type as well as other specialized content types.

• The 33.33% grid is used for tiles on the Landing Page content type and for the Scenarios routing links.
• This grid style isn't meant to be re-usable, but the code can be adapted for other elements.
   

Responsive

This site is coded to be mobile-first responsive. CSS is declared and then is overwritten at certain breakpoints if a css change is needed. The pixel widths below represent the minimum width at which that named breakpoint is active (e.g. the "small screen" view is active from 480px to 767px).

The breakpoints are as follows:

Extra-small screen (small phone):

$breakpoint-xs: 320px;

Small screen (phone):

$breakpoint-sm: 480px;

Medium screen (small tablet):

$breakpoint-md: 768px;

Large screen (tablet):

$breakpoint-lg: 991px;

• When the screen is larger than 991px, components begin to break into multiple columns. The left-side navigation and top navigation replace the condensed hamburger menu.

Extra large screen (desktop/laptop/large tablet):

$breakpoint-xl: 1200px;

XXL screen (large desktop screen):

$breakpoint-xxl: 1600px;

Components

Tabs

Expandables

Expandable sections

Sub-steps for Guides

CSS attributes
(CSS attributes are for the sub-step expandable, the nested expandables are the same as above)
background-color: #389AD9;
color: #ffffff;
font-size: 16px;
font-weight: 700;
border: solid 1px #389AD9;
height: 64px;
width: 100%;

Notes

• Only use this style of expandable section for sub-steps of the Guide process (within the Guides content type). Do not use them to nest expendables in a regular content page.
• The expanded state contains all content within the borders of the expanded area. It can use all rich-text attributes available in the WYSIWYG (such as headings and tip/important boxes). 
• The sub-steps can contain regular expandable sections within the sub-step container.