Style Guide

This is an area where we are capturing decisions made for the Pilcrow interface to enable consistency of look and to save time from revisiting the same questions. It is being built as we go and is a work in progress. There may be another style guide created to act as a code repository for certain items, such as buttons.

Interface Items

Buttons

Text in a button will not be all caps, because the screen reader will read out each letter like an abbreviation. Instead, we'll use Title Case.

Dropdown Menus

Fonts

Sans-Serif: Atkinson Hyperlegible
Serif: Georgia

Font Sizes

Regular text: 16px
Large text: 20px

Search Fields

Lists

List items should have a thin border without any rounded corners.

User Lists

Example user list component

Example code to generate a user list:

<user-list
  ref="reference-for-jest-attributes"
  data-cy="reference-for-cypress-attributes"
  :users="array-of-users"
  :actions="[
    {
      ariaLabel: 'value-for-aria-label',
      icon: 'name-of-qicon',
      action: 'reference-for-action',
      help: 'help-text',
      cyAttr: 'reference-for-list-item-cypress-attributes',
    },
  ]"
  @actionClick="reference-to-function-name"
/>

Border color used for the user list: rgba(0, 0, 0, 0.12).
User information is positioned to the right in the list item.
When the list contains icons they are positioned to the left in the list item.

Tables

There will be a thin line outlining all rows within a table.

Terminology

Color

Any used color combinations should pass the WebAim Color Contrast Checker at AA level.

Color Palette Hex Codes

Class Name	Hex Code
primary	`#2f5496`
secondary	`#032C73`
med-blue	`#2ea3f2`
active	`#77beed`
accent	`#520bbd`
positive	`#537b3d`
dark-grey	`#525252`
negative	`#ad347c`
su-light-grey	`#F3F4F7`
light-grey	`#ccd3e0`
blu-highlight	`#C9E5F8`
highlight	`#F8DB8B`
white	`#ffffff`
black	`#000000`

Color Accessibility Charts

Light Mode Color Palette Accessibility Guides

000000-Guide 032C73-Guide 23394E-Guide 520BBD-Guide 2F5496-Guide AD347C-Guide 537B3D-Guide 2EA3F2-Guide D39E0D-Guide 77BEED-Guide F2C037-Guide CCD3E0-Guide F8DB8B-Guide C9E5F8-Guide F3F4F7-Guide FFFFFF-Guide

Dark Mode Color Palette Accessibility Guides

000000-Guide 0A111F-Guide 02173B-Guide 0F192E-Guide 19294D-Guide 23394E-Guide 3D3D3D-Guide 0E476C-Guide 37586D-Guide AD347C-Guide 666666-Guide 873EF4-Guide 537B3D-Guide 537FCA-Guide 9F65F6-Guide D39E0D-Guide 8FBC76-Guide E4A0C6-Guide 77BEED-Guide F2C037-Guide D8C0FB-Guide F8DB8B-Guide C9E5F8-Guide F3F4F7-Guide FFFFFF-Guide