A flexible UI kit

Style Guide

Colors

Primaries and grays

Primary 1

Primary 2

Primary 3

Primary 4

Primary 5

Primary 6

Gray 1

Gray 2

Gray 3

Gray 4

White

Note: The numbers Primary 1, Primary 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Primary 1" , "BG Primary 2" etc.

Gradients

Gradients based on the primary colors

Gradient 1

Gradient 2

Gradient 3

Gradient 4

Gradient 5
‍

Gradient 6

Gradient 7

Gradient 8
‍

Gradient 9

Note: The numbers Gray 1, Gray 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Gray 1" , "BG Gray 2" etc.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Project Link.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Typography

Headings, body and other common text elements.

Display 1

Display 2

Display 3

Display 4

Heading one

Heading two

Heading three

Heading four

Heading five

Heading Six

Lead Text

Lead Link

Body Text

Text Link

Small Text

Small Link

Icons - Interface

Common interface iconography

Icons - Social

Common social network icons

Icons - General

Illustrations used throughout the template

Note: Use the class "Circle Large" in conjunction with the Color classes to achieve the above result.

Buttons

Component, text style and size variations

Text Inputs

Size and state variations for text inputs

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.

Selectables

Checkboxes, Radios and Select dropdowns

Select Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Avatars

Represent users thoughout the interface

Badges

Combine with other components to display metadata and icons

Hot

Great

New

Cool

Blam

Note: Use the class "Badge" in conjunction with the Color classes to achieve the above result.

Panels

Structural component for displaying boxed content

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button Text

Panel With Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Partner Organizations

ZeroNow is a school safety think-tank.

It's the first collective bringing advocacy groups, industry leaders, safety professionals, technology pioneers, educators, and students together to end school violence for good.

A day when schools are free from violence is possible if we continue to work together as a community to build new ideas, drive innovation, and investment. ZeroNow is committed to creating a future for campuses to once again be one of the safest places for students to thrive.

Explore the Path to Safer Schools.