Skip to content

Partnership for After School Education Styleguide

The following outlines key components and styles used on the site for reference.

Colors

These are the colors set in Tailwind's config.

  • black
    #000

  • white
    #fff

  • grey-light
    #DFDFDF

  • grey-dark
    #545454

  • initiative-blue
    #538097

  • initiative-orange
    #DF745E

  • initiative-pink
    #B3446A

  • initiative-purple
    #7368A7

  • initiative-red
    #A63D2B

  • initiative-yellow
    #B98722

  • beige
    #F8EBDF

  • beige-light
    #FDF8F5

  • green
    #3A6B55

  • green-dark
    #21523C

  • green-medium
    #6B907F

  • green-medium-2
    #A8C8B9

  • green-light
    #E1E9E5

  • green-lightest
    #EFF3F1

  • orange
    #CE7418

  • orange-light
    #F0D5BB

Page Titles

Examples of the different page title layouts

Rich Text Formatting

Text sample shows our use of the `prose` class and typographic settings for rich text on the site.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed egestas egestas fringilla phasellus faucibus scelerisque. Volutpat est velit egestas dui id ornare. Id velit ut tortor pretium viverra suspendisse potenti. Sapien et ligula ullamcorper malesuada proin libero.

Header 2

Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Nunc aliquet bibendum enim facilisis. Lectus quam id leo in vitae turpis. Ut tristique et egestas quis ipsum. Amet nisl purus in mollis nunc sed id semper risus. Eget nulla facilisi etiam dignissim. Vitae ultricies leo integer malesuada nunc vel risus commodo. In ornare quam viverra orci sagittis eu volutpat odio. Cursus in hac habitasse platea dictumst quisque. Mi sit amet mauris commodo quis imperdiet massa tincidunt nunc. Varius morbi enim nunc faucibus.

Header 3

Ut pharetra sit amet aliquam id diam. Sit amet nulla facilisi morbi. Tempus urna et pharetra pharetra massa. Arcu vitae elementum curabitur vitae nunc. Magna ac placerat vestibulum lectus. Sit amet aliquam id diam maecenas ultricies mi.

  • Quisque id diam vel quam elementum pulvinar etiam non. Ut faucibus pulvinar elementum integer enim neque volutpat. 
    • Ornare lectus sit amet est placerat.
  • Ornare lectus sit amet est placerat. Commodo elit at imperdiet dui accumsan.
  • Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras.

Vitae et leo duis ut diam. Volutpat commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Eget arcu dictum varius duis at. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. 

  1. Quisque id diam vel quam elementum pulvinar etiam non. Ut faucibus pulvinar elementum integer enim neque volutpat.
    1. Platea dictumst vestibulum rhoncus est pellentesque
  2. Ornare lectus sit amet est placerat. Commodo elit at imperdiet dui accumsan.
  3. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras.

Augue eget arcu dictum varius duis at consectetur lorem donec. Amet luctus venenatis lectus magna fringilla urna. Egestas purus viverra accumsan in.

Buttons

Button options

Orange - Medium

Sample Button Example with a lot more text

Orange - Large

Sample Button Example with a lot more text

Beige - Medium

Sample Button

Beige - Large

Sample Button

Content Blocks

Content blocks can be worked with in the Styleguide single.