Design System

Elements & Classes

Base Styles

Body (All Pages)

All H1 Headings

Safer Students. Better Learning.

All H2 Headings

Powerful Alone. Better Together.

All H3 Headings

Any device, anywhere.

All H4 Headings

Backed by research, powered by learning.

All H5 Headings

Dedicated implementation and A+ support.

All H6 Headings

You’re not just buying a product, you’re joining a community.

All Paragraphs

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

All Links

Click here to learn more

All Ordered Lists

  1. Dedicated implementation team
  2. Get up and running in minutes
  3. Free online product training

All Unordered Lists

  • Dedicated implementation team
  • Get up and running in minutes
  • Free online product training

All Block Quotes

We're finding that students are more motivated to learn more, and to be self-guided learners which is really our ultimate goal, to create that level of learning in students so when they're not with us, they're desiring to learn and to grow, and to be better selves.

All Images

Placeholder
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Text Styles

H1

Paragraph as a Heading 1

H2

Paragraph as a Heading 2

H3

Paragraph as a Heading 3

H4

Paragraph as a Heading 4

H5

Paragraph as a Heading 5

H6

Paragraph as a Heading 6

P

H1 as a Paragraph

Subheading

Add to paragraph tags found below big headings

Tagline

This is a tagline

Footnote

This is a footnote

Text Limiter

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format links, headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format links, headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List

CTAs

Buttons

Button

Primary Button

Button + Secondary

Secondary Button

Button + Alt

Alternate Button

Links

CTA Link - Blue

Learn more

CTA Link - White

Learn more

Text Alignment

Set horizontal alignment for all inline and inline-block child elements within a within a parent element. Alignment can also be set or reset by adding an alignment class directly to a heading, text element, or div at any level.

Text Align - Center

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Align - Left

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Align - Right

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Align - Justified

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Sizes

Text Size - Small

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Size - Medium

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Size - Large

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Size - X Large

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Font Weights

Font Weight - Normal 400

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Font Weight - Semi Bold 600

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Font Weight - Extra Bold 800

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Colors

Text Color - Default

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Color - Secondary

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Color - Cobalt Blue

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Color - Dark Blue

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Text Color - White

Seamlessly integrate multiple device types and platforms into your 1:1 deployment. From Chromebooks and Apple devices to Windows and BYOD, GoGuardian’s suite of tools can help keep your students safe on any device.

Background Colors & Patterns

Adds a background color or pattern to an element.

Background Color - Brand Blue

Background Color - Dark Blue

Background Color - Deep Blue

Background Color - Cobalt Blue

Background Color - Sky Blue

Background Color - White

Background Gradient - Brand

Background Pattern - Graph Paper

Icons

Guidelines

General utility icons should be sourced from Google's Material Design System icon library.

All black icons can be colorized by applying a class that applies a series of CSS filters.

Icon - no class applied

Icon - Brand Blue

Icon - Cobalt Blue

Icon - Dark Blue

Icon - White nested inside of Icon Wrapper - Circle

Icon Wrapper - Square

Spacing Utilities

Padding

No Padding

Sets padding on all sides of the element to 0px.

No Padding - Top / Bottom

Sets top and bottom padding to 0px.

No Padding - Left / Right

Sets left and right padding to 0px.

Padding - Small

Sets padding to 8px on all sides of the element.

Padding - Medium

Sets padding to 16px on all sides of the element.

Padding - Large

Sets padding to 32px on all sides of the element.

Padding - X Large

Sets padding to 56px on all sides of the element.

Margin

No Margin

Sets margin on all sides of the element 0px.

No Margin - Top / Bottom

Sets top and bottom margin to 0px.

No Margin - Left / Right

Sets left and right margin to 0px.

No Margin - Top

Sets top margin to 0px.

No Margin - Bottom

Sets bottom margin to 0px.

Layout

Sections

Section - Small

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Section - Medium

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Section - Large

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Section - X Large

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Backgrounds can be set by adding a pre-defined global combo class.

Section - Medium + Background Color - Cobalt Blue

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Section - Medium + Background Pattern - Graph Paper

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Containers

Container - Small

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Container - Medium

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Default Container Element (no class added)

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Container - Large

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Grids

Grid - 2 Columns

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.

Grid - 3 Columns

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.
Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.

Grid - 4 Columns

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.
Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.

Grid - Auto Columns

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.
Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.

Any Grid Column Class + Grid Align Center

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.

Any Grid Column Class + Grid Align Top

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.

Any Grid Column Class + Grid Align Bottom

Waves paddle battle fins clamped late drop shallow left. Layback daggers tomb-stoning jumbled firing shorebreak soft whitewater pumping fish. Legend Parko swell hot glass free surf jet ski cracking it paddle out gnarley short board.
Rail grab lip line backside attack outside shacks silky smooth method face. Rythm ripping surfing send it rythm wrap psyching.

Flexbox

Flex - Center / Center

Flex Child

Flex - Center / Space Evenly

Flex Child
Flex child with more content
Flex Child
Flex Child

Flex - Center / Space Between

Flex Child
Flex Child
Flex Child
Flex child with more content

Flex Column - Center / Top

Flex child
Flex child with more content
Flex child

Flex - No Wrap

Flex child
Flex child with more content
Flex child

GoGuardian Admin

GoGuardian Beacon

GoGuardian Teacher

Pear Deck

Edulastic

Unified Learning System

Safety & Security

Classroom Management

Curriculum & Instruction