YJN: Info Architecture: Style Guide

[Rabia2219]

Overview

We need to create a style guide for the YJN Info Architecture so that all the pages can be standardized and have the same look and feel.

Action Items

• create a draft style guide
• [ ]

Resources/Instructions

[Rabia2219]

Template: have content

Section Heading

• Oswald 60 all caps

Subheading

Oswald 18 All caps

Subset

Oswald 14

Text Inside

Open Sans 12

Button Text

• style: filled

Yellow section

• Open Sans 18
• red color used for the call to action #990000

2nd banner text

• Oswald 30 normal text all caps
• red color used for the call to action #990000

Notes

• do not worry about the blank space between the yellow banner and the footer (add screenshots)

[Rabia2219]

Template: no content

Section Heading

• Oswald 60 all caps

Name of drop down

Oswald 18 All caps

Name of subset drop down

Oswald 14

Text Inside

Open Sans 12

Button Text

• style: filled

Yellow section on top

• Open Sans 24

Yellow section at the bottom

• Open Sans 18
• red color used for the call to action #990000

2nd banner text

• Oswald 30 normal text all caps
• red color used for the call to action #990000

Notes

• do not worry about the blank space between the yellow banner and the footer (add screenshots)

[Rabia2219]

Exceptions to style guide in Figma

Home page

• Title for Home: Normal Text, Oswald 48pt
• Text with image place holder

Youth

• the entire page except the Title and Page Text

Parents and Guardians

• WIP

Lawyers and Educators

• WIP

Help Me

• none

Police Encounters

• none

Intake

• none

JH

• none

What Happens in Court

• none

Appearing before a Judge

• none

Post Disposition

• none

Case Closed

• none

Alternatives to Incarceration

• none

Resources

• none

Justice System Overview

• none

ALT Resources for LGBTQ+

• none

Resources for LGBTQ+

• none