Style Guide

A complete guide to all Parent Team's branding.
Colors
A complete color swatch used to color all interface elements on the website.
Theme Colors
Primary 1
#627b70
Primary 2
#c67158
Primary 3
#455854
Grays
Gray 1
#222525
Gray 2
#62636B
Gray 3
#f8e6d7
Gray 4
#fef9f5
Feedback (Rarely Used Except on Forms)
Success
#57A773
Warning
#F19953
Error
#ED6A5E
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading Font: Zilla Slab, Weight 500

Paragraph Font: DM Sans, Weight 500

Display Heading - 80px

Large Heading - 54px

Medium Heading - 40px

Small Heading - 32px

XSmall Heading - 24px

Text Large - 18px   
Link Large
Body Text - 16px  
Body Link
Small Text - 14px   
Small Link
text caps - 16px
Lists
Headings, body and other common text elements.
Unstyled <ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • DECORATIVE
    Dope
  • DECORATIVE
    Sick
  • DECORATIVE
    Amazing
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Avatar Group
Avatar Indicators
Avatar with name
Katherine Cho
Parent-to-parent relationships are critical to kids' well-being.
We're here to help.

We help strengthen co-parent relationships to protect kids from the possible negative effects of divorce.