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

Screenshot of a list in light mode featuring three items with separators between them. Each item has a title and paragraph-length description. There are no borders.

Lists should have no borders. They can use separators.

Example code to make a list:

<q-list
  class="full-width"
  separator
  data-cy="my_list"
>
  <q-item-section>
    <q-item-label>
      Item Name
    </q-item-label>
  </q-item-section>
</q-list>

See Quasar documentation for more info.

User Lists

User lists should not use borders or separators. Avatars within user list items should appear on the left-side of the item and the text content should appear to the right of the avatars.

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"
/>

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	Sample
primary	`#2f5496`
secondary	`#032C73`
active	`#77beed`
med-blue	`#2ea3f2`
accent	`#520bbd`
positive	`#537b3d`
negative	`#ad347c`
highlight	`#F8DB8B`
blu-highlight	`#C9E5F8`
xlight-grey	`#F3F4F7`
light-grey	`#ccd3e0`
dark-grey	`#F2C037`
warning	`#23394E`
dark-warning	`#D39E0D`
dark	`#0A111F`
dark-primary	`#537FCA`
dark-secondary	`#537FCA`
accent-dark	`#873EF4`
dark-accent-text	`#9F65F6`
accent-link	`#D8C0FB`
dark-1	`#0F192E`
dark-2	`#19294D`
dark-3	`#0E476C`
dark-4	`#37586D`
dark-5	`#3D3D3D`
dark-6	`#666666`
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