StLukes Styleguide

StLukes Styleguide

This styleguide shows some of the common elements, components and stylings used on the StLukes website.

Text

Headings

Heading 1

Font
Roboto Flex
Font-size
1.875rem / 2.25rem
Font-weight
Bold 700
Line-height
2.25rem / 2.5rem

Heading 2

Font
Roboto Flex
Font-size
1.5rem / 1.875rem
Font-weight
Bold 700
Line-height
2rem / 2.25rem

Heading 3

Font
Roboto Flex
Font-size
1.25rem / 1.5rem
Font-weight
Bold 700
Line-height
1.75rem / 2rem

Heading 4

Font
Roboto Flex
Font-size
1.125rem / 1.25rem
Font-weight
Bold 700
Line-height
1.75rem / 1.75rem

Heading 5
Font
Roboto Flex
Font-size
1rem / 1.125rem
Font-weight
Bold 700
Line-height
1.5rem / 1.75rem

Heading 6
Font
Roboto Flex
Font-size
1rem / 1.125rem
Font-weight
Bold 700
Line-height
1.5rem / 1.75rem

Text Content

This is a paragraph of text. Here is an example link.

Body text style:

Font
Roboto Flex
Font-size
1rem / 1.125rem
Font-weight
light 300
Line-height
1.5rem / 1.75rem

Link Styling

Font-weight
medium 500
Color
pink - rgb(162,0,103)

Lists

Unordered List

  • First item in unordered list
  • Second item in unordered list

Ordered List

  1. First item in ordered list
  2. Second item in ordered list

Colors

Color Preview Name + Description Hex Code
primary - violet #572C5F
primary - mantis #73B564
secondary - pink #A20067
secondary - celadon #BCDDA4
success - DEFAULT #73B564
success - bg #EFF7E9
error - DEFAULT #FF4D4F
error - bg #FFF1F1
warning - DEFAULT #F4BF4F
warning - bg #FFFBF4
white #FFFFFF
black #000000
neutral - plate #F9F5FA
neutral - cool #C1C7CD

Icons

All small functional icons can be found in svg format here:
https://heroicons.com/

The "Outline" style is used throughout the site.

Example Form