Web Style Guide
Typography
In this design, we're using rem units which are relative to the root element (html in this case). So, if we set the font-size of the html element to 20px, 1rem will be equal to 20px. The advantage of using rem is that it scales the typography based on the user's default browser settings, improving accessibility.
Heading Level 1 (4.209rem)
Heading Level 2 (3.157rem)
Heading Level 3 (2.369 rem)
Heading Level 4 (1.777 rem)
Heading Level 5 (1.333 rem)
Paragraph (1rem)
Typography In Action
The subsequent illustration showcases the scalable typography system in operation, adhering to the SEO best practices of content creation: Heading Level 1 (H1), Heading Level 2 (H2), Paragraph (P), Heading Level 2 (H2), Paragraph (P)
Lorem ipsum dolor sit amet
Ut pharetra a nisi eu bibendum
Curabitur dolor erat, accumsan vitae rutrum et, egestas ac ex. Duis risus leo, fermentum nec eleifend in, hendrerit vehicula augue. Sed interdum magna non arcu egestas accumsan. Donec ligula ipsum, pharetra eget finibus vitae, commodo quis nisl. Maecenas non sem ipsum. Sed commodo gravida nibh, in egestas diam pretium sit amet. Pellentesque malesuada mattis ornare. Curabitur id risus eleifend, sollicitudin nulla ac, vestibulum enim. Cras nisl est, maximus sit amet bibendum at, dignissim eget dolor. Sed hendrerit posuere nisi, laoreet hendrerit nisl dignissim ut.
Ut pharetra a nisi eu bibendum
Curabitur dolor erat, accumsan vitae rutrum et, egestas ac ex. Duis risus leo, fermentum nec eleifend in, hendrerit vehicula augue. Sed interdum magna non arcu egestas accumsan. Donec ligula ipsum, pharetra eget finibus vitae, commodo quis nisl. Maecenas non sem ipsum. Sed commodo gravida nibh, in egestas diam pretium sit amet. Pellentesque malesuada mattis ornare. Curabitur id risus eleifend, sollicitudin nulla ac, vestibulum enim. Cras nisl est, maximus sit amet bibendum at, dignissim eget dolor. Sed hendrerit posuere nisi, laoreet hendrerit nisl dignissim ut.
Color Palette
This color palette helps to ensure a consistent look and feel across our entire application. To make it easier to apply these colors, we've recreated the color palette as global CSS styles. This means that instead of having to remember and type in the exact color codes, you can use descriptive color names that are defined in our CSS.
Possibility Blue (#1B00CC)
Electric Green (#D0F518)
Bright Cyan (#19DCFA)
Roarange (#FB5705)
Blue 1 (#668AFF)
Green 1 (#F2FFB2)
Cyan 1 (#AFF0FA)
Roarange 1 (#FEC9B2)
Blue 2 (#F2FFB2)
Black (#1A1919)
Color Useage
The grid illustrated below signifies the accessible brand color pairings available at NewSchools, each graded for its accessibility. The 'AAA' grade stands as the most comprehensive standard, catering to the broadest spectrum of individuals.