Component library

where everything is made up and the parts don't matter

Typographic styles

Headings

Heading level 1 - 2.5rem/36px, font-weight 600

Heading level 2 - 1.75rem/28px, font-weight 600

Heading level 3 - 1.5rem/24px, font-weight 600

Heading level 4 - 1.25rem/20px, font-weight 600

Heading level 5 - 1rem/16px, font-weight 600
Heading level 6 - 1rem/16px, font-weight 400

Text

Regular paragraphs

Selfies seitan ennui, bitters art party man braid church-key coloring book gluten-free skateboard godard hammock. Bushwick iPhone small batch art party quinoa locavore cardigan blog, lyft 3 wolf moon meh. Raclette wayfarers kombucha echo park pour-over, deep v dreamcatcher normcore forage chillwave. Bitters keytar XOXO church-key trust fund pug palo santo authentic meggings asymmetrical photo booth distillery. Pabst crucifix try-hard pork belly copper mug yuccie. Lo-fi keffiyeh squid knausgaard. Next level polaroid chillwave, celiac PBR&B occupy prism kale chips. Vinyl waistcoat roof party yuccie. 8-bit affogato drinking vinegar, poke snackwave listicle street art hella kombucha keffiyeh freegan.

Fingerstache tofu pitchfork poutine, salvia offal pop-up blue bottle hashtag cray photo booth locavore forage air plant. Before they sold out thundercats tattooed meh, schlitz four loko helvetica mustache ennui twee you probably haven't heard of them kale chips scenester. Pork belly roof party salvia cray DIY. Ennui fashion axe godard, fixie gluten-free mlkshk truffaut humblebrag lumbersexual VHS shoreditch neutra iPhone typewriter prism. Raw denim chicharrones chartreuse, shabby chic four loko next level gastropub poutine actually trust fund banjo man bun health goth cloud bread. Salvia hexagon affogato man braid flannel direct trade. Before they sold out yuccie vice church-key waistcoat sriracha flannel sustainable keffiyeh brunch ennui asymmetrical bespoke thundercats vegan. Heirloom brooklyn tofu freegan blog marfa knausgaard you probably haven't heard of them. 3 wolf moon slow-carb swag blog. Slow-carb kickstarter tumblr activated charcoal. Pok pok YOLO chia, brooklyn air plant offal vegan green juice affogato kickstarter lo-fi you probably haven't heard of them squid. Flexitarian synth pinterest YOLO cardigan beard. Tacos sustainable palo santo cold-pressed fingerstache hashtag put a bird on it austin poke forage. Taiyaki cliche paleo, street art chia direct trade tbh fixie lyft austin.

Meggings bespoke affogato, gastropub letterpress PBR&B af fingerstache +1 shabby chic paleo. Pabst kinfolk quinoa adaptogen. Letterpress neutra health goth, hashtag taxidermy humblebrag coloring book. Enamel pin live-edge cray meggings bushwick hammock pop-up biodiesel freegan meh. Wayfarers chicharrones lo-fi, flannel affogato shoreditch cronut la croix chillwave tumblr. Kickstarter yr squid green juice pabst. Bitters hoodie pitchfork skateboard taiyaki glossier gochujang drinking vinegar irony ugh tumeric portland echo park. Listicle microdosing pour-over, snackwave blue bottle pug retro squid hammock gentrify fixie health goth. Pitchfork iceland deep v kitsch truffaut.

Schlitz bicycle rights polaroid banh mi waistcoat 8-bit tbh kogi vaporware godard williamsburg jean shorts man braid single-origin coffee. Artisan twee knausgaard woke butcher. Knausgaard put a bird on it celiac banjo af polaroid kickstarter banh mi letterpress intelligentsia man bun stumptown tofu. Try-hard salvia PBR&B, franzen venmo gochujang cornhole mlkshk subway tile craft beer godard. Semiotics mixtape 90's cloud bread unicorn banjo offal 8-bit distillery you probably haven't heard of them normcore gentrify etsy lyft literally. Pour-over before they sold out cold-pressed, kitsch bitters roof party selvage edison bulb photo booth flannel hexagon. Adaptogen venmo seitan raclette affogato kombucha. Cred plaid master cleanse vegan sustainable poutine viral cornhole VHS slow-carb next level kogi cliche etsy squid. Wayfarers waistcoat tousled single-origin coffee skateboard, chartreuse disrupt four loko normcore art party tacos stumptown. Forage portland slow-carb before they sold out ethical neutra etsy listicle everyday carry cardigan af. Typewriter four dollar toast readymade yuccie sustainable cliche pitchfork kogi. Franzen lo-fi tofu try-hard yr, crucifix vaporware flannel.

Bold and italic

Bold text using <b>

Bold text using <strong>

Italic text using <i>

Italic text using <em>

Lists

Unordered lists

  • List item one
  • List item two
  • List item three
  • List item four. Meggings bespoke affogato, gastropub letterpress PBR&B af fingerstache +1 shabby chic paleo. Pabst kinfolk quinoa adaptogen. Letterpress neutra health goth, hashtag taxidermy humblebrag coloring book. Enamel pin live-edge cray meggings bushwick hammock pop-up biodiesel freegan meh. Wayfarers chicharrones lo-fi, flannel affogato shoreditch cronut la croix chillwave tumblr. Kickstarter yr squid green juice pabst. Bitters hoodie pitchfork skateboard taiyaki glossier gochujang drinking vinegar irony ugh tumeric portland echo park. Listicle microdosing pour-over, snackwave blue bottle pug retro squid hammock gentrify fixie health goth. Pitchfork iceland deep v kitsch truffaut.
  • List item five. Schlitz bicycle rights polaroid banh mi waistcoat 8-bit tbh kogi vaporware godard williamsburg jean shorts man braid single-origin coffee. Artisan twee knausgaard woke butcher. Knausgaard put a bird on it celiac banjo af polaroid kickstarter banh mi letterpress intelligentsia man bun stumptown tofu. Try-hard salvia PBR&B, franzen venmo gochujang cornhole mlkshk subway tile craft beer godard. Semiotics mixtape 90's cloud bread unicorn banjo offal 8-bit distillery you probably haven't heard of them normcore gentrify etsy lyft literally. Pour-over before they sold out cold-pressed, kitsch bitters roof party selvage edison bulb photo booth flannel hexagon. Adaptogen venmo seitan raclette affogato kombucha. Cred plaid master cleanse vegan sustainable poutine viral cornhole VHS slow-carb next level kogi cliche etsy squid. Wayfarers waistcoat tousled single-origin coffee skateboard, chartreuse disrupt four loko normcore art party tacos stumptown. Forage portland slow-carb before they sold out ethical neutra etsy listicle everyday carry cardigan af. Typewriter four dollar toast readymade yuccie sustainable cliche pitchfork kogi. Franzen lo-fi tofu try-hard yr, crucifix vaporware flannel.
  • Nested unordered list
    • Nested list - item one
    • Nested list - item two
    • Nested list - item three
  • Nested ordered list
    1. Nested list - item one
    2. Nested list - item two
    3. Nested list - item three
  • Unordered list two, item one
  • Unordered list two, item two
  • Unordered list two, item three

Ordered lists

  1. List item one
  2. List item two
  3. List item three
  4. List item four. Meggings bespoke affogato, gastropub letterpress PBR&B af fingerstache +1 shabby chic paleo. Pabst kinfolk quinoa adaptogen. Letterpress neutra health goth, hashtag taxidermy humblebrag coloring book. Enamel pin live-edge cray meggings bushwick hammock pop-up biodiesel freegan meh. Wayfarers chicharrones lo-fi, flannel affogato shoreditch cronut la croix chillwave tumblr. Kickstarter yr squid green juice pabst. Bitters hoodie pitchfork skateboard taiyaki glossier gochujang drinking vinegar irony ugh tumeric portland echo park. Listicle microdosing pour-over, snackwave blue bottle pug retro squid hammock gentrify fixie health goth. Pitchfork iceland deep v kitsch truffaut.
  5. List item five. Schlitz bicycle rights polaroid banh mi waistcoat 8-bit tbh kogi vaporware godard williamsburg jean shorts man braid single-origin coffee. Artisan twee knausgaard woke butcher. Knausgaard put a bird on it celiac banjo af polaroid kickstarter banh mi letterpress intelligentsia man bun stumptown tofu. Try-hard salvia PBR&B, franzen venmo gochujang cornhole mlkshk subway tile craft beer godard. Semiotics mixtape 90's cloud bread unicorn banjo offal 8-bit distillery you probably haven't heard of them normcore gentrify etsy lyft literally. Pour-over before they sold out cold-pressed, kitsch bitters roof party selvage edison bulb photo booth flannel hexagon. Adaptogen venmo seitan raclette affogato kombucha. Cred plaid master cleanse vegan sustainable poutine viral cornhole VHS slow-carb next level kogi cliche etsy squid. Wayfarers waistcoat tousled single-origin coffee skateboard, chartreuse disrupt four loko normcore art party tacos stumptown. Forage portland slow-carb before they sold out ethical neutra etsy listicle everyday carry cardigan af. Typewriter four dollar toast readymade yuccie sustainable cliche pitchfork kogi. Franzen lo-fi tofu try-hard yr, crucifix vaporware flannel.
  6. List item six
  7. List item seven
  8. List item eight
  9. List item nine
  10. List item ten. Meggings bespoke affogato, gastropub letterpress PBR&B af fingerstache +1 shabby chic paleo. Pabst kinfolk quinoa adaptogen. Letterpress neutra health goth, hashtag taxidermy humblebrag coloring book. Enamel pin live-edge cray meggings bushwick hammock pop-up biodiesel freegan meh. Wayfarers chicharrones lo-fi, flannel affogato shoreditch cronut la croix chillwave tumblr. Kickstarter yr squid green juice pabst. Bitters hoodie pitchfork skateboard taiyaki glossier gochujang drinking vinegar irony ugh tumeric portland echo park. Listicle microdosing pour-over, snackwave blue bottle pug retro squid hammock gentrify fixie health goth. Pitchfork iceland deep v kitsch truffaut.
  11. List item eleven
  12. List item twelve
  13. Nested unordered list
    • Nested list - item one
    • Nested list - item two
    • Nested list - item three
  14. Nested ordered list
    1. Nested list - item one
    2. Nested list - item two
    3. Nested list - item three
  1. Ordered list two, list item one
  2. Ordered list two, list item two
  3. Ordered list two, list item three

Definition lists

Definition list one, title one
Definition list one, title one, description one
Definition list one, title one, description two
Definition list one, title two
Definition list one, title two, description one
Definition list one, title two, description two
Definition list one, title two, description three. Schlitz bicycle rights polaroid banh mi waistcoat 8-bit tbh kogi vaporware godard williamsburg jean shorts man braid single-origin coffee. Meggings bespoke affogato, gastropub letterpress PBR&B af fingerstache +1 shabby chic paleo.
Definition list one, title two, description four
Definition list two, title one
Definition list two, title one, description one
Definition list two, title one, description two
Definition list two, title two
Definition list two, title two, description one
Definition list two, title two, description two
Definition list two, title three
Definition list two, title three, description one
Definition list two, title three, description two

Layout

Grid

2-column grid

Grid column

Grid column

Grid column - span 2

3-column grid

Grid column

Grid column

Grid column

Grid column

Grid column - span 2

Grid column - span 2

Grid column

Grid column - span 3

4-column grid

Grid column

Grid column

Grid column

Grid column

Grid column - span 2

Grid column - span 2

Grid column

Grid column - span 3

Grid column

Grid column - span 2

Grid column

Grid column - span 3

Grid column

Grid column - span 4

Multi-row grid items

1. Grid column

2. Grid column - span 2 rows

3. Grid column - span 3 rows

4. Grid column - span 4 rows

5. Grid column

6. Grid column

7. Grid column

8. Grid column - span 2 columns, 2 rows

9. Grid column

10. Grid column

11. Grid column

12. Grid column

13. Grid column - span 2 columns, 2 rows

14. Grid column

15. Grid column

16. Grid column

Colour

Theme colour swatches

Greyscale - no background

--default-black
#050312
Contrast
Light - 18.25
Dark - 1.42
--default-grey-darkest
#2a2935
Contrast
Light - 12.79
Dark - 1
--default-grey-darker
#4f4e59
Contrast
Light - 7.31
Dark - 1.74
--default-grey-dark
#828188
Contrast
Light - 3.44
Dark - 3.71
--default-grey
#c0c0c4
Contrast
Light - 1.62
Dark - 7.89
--default-grey-light
#dad9dc
Contrast
Light - 1.25
Dark - 10.18
--default-grey-lighter
#e5e5e7
Contrast
Light - 1.12
Dark - 11.37
--default-grey-lightest
#f2f2f3
Contrast
Light - 1
Dark - 12.79
--default-white
#fcfcfc
Contrast
Light - 1.09
Dark - 13.95

Greyscale

--default-black
#050312
Contrast
19.9
--default-white
#fcfcfc
--default-black
#050312
Contrast
18.25
--default-grey-lightest
#f2f2f3
--default-black
#050312
Contrast
16.23
--default-grey-lighter
#e5e5e7
--default-white
#fcfcfc
Contrast
7.97
--default-grey-darker
#4f4e59
--default-white
#fcfcfc
Contrast
13.95
--default-grey-darkest
#2a2935
--default-white
#fcfcfc
Contrast
19.9
--default-black
#050312

Colourful - no background

--default-info
#9fe5f3
Contrast
Light - 1.25
Dark - 10.2
--default-info-85
#ade9f5
Contrast
Light - 1.19
Dark - 10.73
--default-info-a
#9fe5f3d9
Contrast
Light - 1.21
Dark - 7.8
--default-deep
#1cacc8
Contrast
Light - 2.41
Dark - 5.3
--default-deep-85
#3eb8d0
Contrast
Light - 2.09
Dark - 6.11
--default-deep-a
#1cacc8d9
Contrast
Light - 2.12
Dark - 4.23
--default-calm
#7fcc6e
Contrast
Light - 1.74
Dark - 7.33
--default-calm-85
#92d384
Contrast
Light - 1.58
Dark - 8.09
--default-calm-a
#7fcc6ed9
Contrast
Light - 1.6
Dark - 5.72
--default-success
#129f43
Contrast
Light - 3.09
Dark - 4.13
--default-success-85
#35ad5f
Contrast
Light - 2.57
Dark - 4.97
--default-success-a
#129f43d9
Contrast
Light - 2.62
Dark - 3.36
--default-caution
#f0ea50
Contrast
Light - 1.13
Dark - 11.3
--default-caution-85
#f2ed6a
Contrast
Light - 1.09
Dark - 11.65
--default-caution-a
#f0ea50d9
Contrast
Light - 1.11
Dark - 8.58
--default-warning
#f0cd50
Contrast
Light - 1.38
Dark - 9.23
--default-warning-85
#f2d46a
Contrast
Light - 1.3
Dark - 9.81
--default-warning-a
#f0cd50d9
Contrast
Light - 1.32
Dark - 7.09
--default-alert
#f09050
Contrast
Light - 2.13
Dark - 6
--default-alert-85
#f2a06a
Contrast
Light - 1.87
Dark - 6.82
--default-alert-a
#f09050d9
Contrast
Light - 1.9
Dark - 4.75
--default-danger
#e81d1d
Contrast
Light - 4.05
Dark - 3.15
--default-danger-85
#eb3f3f
Contrast
Light - 3.53
Dark - 3.62
--default-danger-a
#e81d1dd9
Contrast
Light - 3.59
Dark - 2.56
--default-passion
#e81d6f
Contrast
Light - 3.88
Dark - 3.29
--default-passion-85
#eb3f84
Contrast
Light - 3.36
Dark - 3.8
--default-passion-a
#e81d6fd9
Contrast
Light - 3.42
Dark - 2.68

Colourful - as background

--default-info
#9fe5f3
--default-info-85
#ade9f5
--default-info-a
#9fe5f3d9
--default-deep
#1cacc8
--default-deep-85
#3eb8d0
--default-deep-a
#1cacc8d9
--default-calm
#7fcc6e
--default-calm-85
#92d384
--default-calm-a
#7fcc6ed9
--default-success
#129f43
--default-success-85
#35ad5f
--default-success-a
#129f43d9
--default-caution
#f0ea50
--default-caution-85
#f2ed6a
--default-caution-a
#f0ea50d9
--default-warning
#f0cd50
--default-warning-85
#f2d46a
--default-warning-a
#f0cd50d9
--default-alert
#f09050
--default-alert-85
#f2a06a
--default-alert-a
#f09050d9
--default-danger
#e81d1d
--default-danger-85
#eb3f3f
--default-danger-a
#e81d1dd9
--default-passion
#e81d6f
--default-passion-85
#eb3f84
--default-passion-a
#e81d6fd9