NAVIGATOR UI
gooru STYLE GUIDE 3.0
Typography
Heading 1 Heading 2
all of Gooru’s products and marke&ng material. When
Heading 3
working with web products, all components are based off a theme of Bootstrap 3.0 called Paper you can download at hYps://bootswatch.com/paper/.
Success
Warning
Info
Danger
LINK
Primary Brand Colors
line-height: 61px;
Default
Primary
Default
Success
Primary
Warning
Info
Success
Info
Danger
font-size: 34px; line-height: 37px;
Warning!
Default States
LINK
Paper panels are used to recreate this effect. Panels have white background-color,
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
while .body should have #F1F3F7 background-color.
Collec&on Title
Modal &tle
5 Resources
!
Warning
One fine body… Basic panel
Small BuYon
Default BuYon
All headlines are: font-family: Lato-Regular; color: black;
Extra Small BuYon
Oh snap! Change a few things up and try submipng again.
Close
Panel heading
Block Level BuYon
Save Changes
Collec&on Title
7 Ques&ons
5 Resources
!
in Math 4
Taxonomy Tagging
Taxonomy Tagging
Remixed by
Remixed by
James L +2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Remix
Collec&on Title
7 Ques&ons
5 Resources
7 Ques&ons
font-size: 22px;
Default
line-height: 22px;
Primary
Success
Info
Warning
Danger
Hover State Colors
LINK
This is body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heads up! This alert needs your aYen&on, but it's not super important. Panel content
James L +2
January 10, 2016
Labels
line-height: 22px;
Form Elements
line-height: 30px;
Iconography
List Groups
Gooru uses propietery icons and Google’s Material Design open
Focused Input
source library of icons. Gooru
|
Emphasis Classes
42
Cras justo odio
Idle Input
8
Dapibus ac facilisis in
This is primary emphasis text This is warning text
1
Morbi leo risus
Input Warning
This is info text
Cras justo odio
This is muted text
Dapibus ac facilisis in
Blockquotes
Interac&ve
- Ernest Hemingway
Donec id elit non mi porta gravida at eget metus.Maecenas sed diam eget risus varius blandit.
Op&on 2
+
Op&on 3
; " 7
Details
Dropdown Cure Cancer
Other Emojis available from emojione library.
World Peace
Pagina&on 1 1
2 2
Pagers
3 3
1
4
5
Hover State Colors
On Home
42
Profile
Messages
1
Primary
Success
Info
Warning
Basic
Resource Cards
Overview
Resource Title
Resource Title
Resource Title
Website
Image
Mul&ple Choice
2
3
4
5
Previous Older
9 ,
Sugges&ons
Fullscreen
Sort 123 4 Close 2 Back 0 3 Search
Taxonomy Tagging
Off
Taxonomy Tagging
Publisher Name
Panel content
g
Panel content
Panel info
Next
Publisher Name
Newer
Share
Sugges&ons
Publisher Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Add to
Add to
Add to
Supplementary Angles
Supplementary angles
Common
Which of these angles
Website
in sports.
Supplementary Angles
are supplementary?
Video
Website
Ques&on
Supplementary Angles
Supplementary angles
Website
in sports.
Wells
Class Overview
5 Resources
panels in cases where you’d like to demonstrate less importance or granularity.
!
Striped
Stacked
7 Ques&ons
in Math 4
Course Cards Course Title
James L +2
5 Units
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Remix Look, i am in a large well!
User Cards
Taxonomy Tagging Remixed by
Look, i am in a small well!
Skipped
Collec&on Title
Wells are containers for parts of the user interface that fall bellow panels in visual hierarchy. They can be used alongside
Look, i am in well!
/
3h 42m
Remixed by Remix
Add to
Loca&on Menu
Taxonomy Tagging
Website
NAVIGATOR UI
Explana&on
Sort ABC
Analy&cs
Tool&p on right
Panel success
Contextual alternatives
Edit
Welcome students! In this class we will be taking a look into Pre-Algebra, exploring the number system, expressions, ra&os and other fun concepts!
Panel warning
Progress Bars
Trophy
Analy&cs
Overview
Badges
Off
Panel danger
Website
:
Op&on 4
Gooru Player Emo&ons
Based off Bootstrap plugin www.bootstraptoggle.com
On
Video
Download
Op&on 1
emojione.com. Whenever posible, always use .SVG for both web and print projects.
Panel primary Panel content
Material Design
Donec id elit non mi porta gravida at eget metus.Maecenas sed diam eget risus varius blandit.
Gooru uses a free library of emo&cons and colored icons called EmojiOne. You can download them at
Warning
Text
On Air .gif anima&on
List group item heading
Emo&cons
Info
Info
Course Title 5 Units
Math 6 | Science 7 James L +2
My Content
Descrip&on goes here ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Add to
Panel content
List group item heading
Mul&select Input
Danger
Success
Panel content
The best way to find out if you can trust somebody is to trust them."
Warning
Gooru Icons
Image
Morbi leo risus
Input Success
Success
design.google.com/icons.
Ques&on
Input Error
Primary
Primary
Sed posuere consectetur est at lobor&s. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venena&s ves&bulum.
be downloaded as a webfont at
Video
This is success text
Default
Toggles
Icons can be exported with Sketch. Material Design Icons can
This is danger text
Popover right
Libraries
Class Informa&on
June 15, 2016
Add to
Popovers and tool&ps
Panel footer
Body font is: font-family: Lato-Regular; font-size: 13px; color: #666666;
Lead font is: font-family: Lato-Light; font-size: 19.5px; color: #666666;
Remix
Search…
My Classes
Chris&e
Math 8 Block 2
Gree&ngs
font-size: 14px; line-height: 15px;
.
23 Members
Panel content
Hover State Colors
gooru
in Math 4
Well done! You successfully read this important alert message.
line-height: 26px;
paragraph stand out.
Modals
containers that have depth and contrast with the underlying background. Bootstrap
line-height: 49px;
components are available as symbols for quickness and ease of use.
Primary
Panels
Naviga&on
Gooru’s User Interface is based on “cards”, meaning most components live in
font-size: 56px;
font-size: 45px;
This is Lead text. It makes a
When designing or prototyping with Sketch, all these
Default
Alerts
font-size: 24px;
Heading 5 Heading 6
BuYons
Large BuYon
Heading 4 The following style guide is designed to be used across
Color
Collec&on Cards
James
Laura
Tom
Web
Nun
Whitehall
" n f + o r , m a t i o n
Subject: Mathema&cs
Teachers (3)
Grade: K5
XZ1290 Class Code
Typography
Heading 1 Heading 2
all of Gooru’s products and marke&ng material. When
Heading 3
working with web products, all components are based off a theme of Bootstrap 3.0 called Paper you can download at hYps://bootswatch.com/paper/.
Success
Warning
Info
Danger
LINK
Primary Brand Colors
line-height: 61px;
Default
Primary
Default
Success
Primary
Warning
Info
Success
Info
Danger
font-size: 34px; line-height: 37px;
Warning!
Default States
LINK
Paper panels are used to recreate this effect. Panels have white background-color,
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
while .body should have #F1F3F7 background-color.
Collec&on Title
Modal &tle
5 Resources
!
Warning
One fine body… Basic panel
Small BuYon
Default BuYon
All headlines are: font-family: Lato-Regular; color: black;
Extra Small BuYon
Oh snap! Change a few things up and try submipng again.
Close
Panel heading
Block Level BuYon
Save Changes
Collec&on Title
7 Ques&ons
5 Resources
!
in Math 4
Taxonomy Tagging
Taxonomy Tagging
Remixed by
Remixed by
James L +2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Remix
Collec&on Title
7 Ques&ons
5 Resources
7 Ques&ons
font-size: 22px;
Default
line-height: 22px;
Primary
Success
Info
Warning
Danger
Hover State Colors
LINK
This is body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Heads up! This alert needs your aYen&on, but it's not super important. Panel content
James L +2
January 10, 2016
Labels
line-height: 22px;
Form Elements
line-height: 30px;
Iconography
List Groups
Gooru uses propietery icons and Google’s Material Design open
Focused Input
source library of icons. Gooru
|
Emphasis Classes
42
Cras justo odio
Idle Input
8
Dapibus ac facilisis in
This is primary emphasis text This is warning text
1
Morbi leo risus
Input Warning
This is info text
Cras justo odio
This is muted text
Dapibus ac facilisis in
Blockquotes
Interac&ve
- Ernest Hemingway
Donec id elit non mi porta gravida at eget metus.Maecenas sed diam eget risus varius blandit.
Op&on 2
+
Op&on 3
; " 7
Details
Dropdown Cure Cancer
Other Emojis available from emojione library.
World Peace
Pagina&on 1 1
2 2
Pagers
3 3
1
4
5
Hover State Colors
On Home
42
Profile
Messages
1
Primary
Success
Info
Warning
Basic
Resource Cards
Overview
Resource Title
Resource Title
Resource Title
Website
Image
Mul&ple Choice
2
3
4
5
Previous Older
9 ,
Sugges&ons
Fullscreen
Sort 123 4 Close 2 Back 0 3 Search
Taxonomy Tagging
Off
Taxonomy Tagging
Publisher Name
Panel content
g
Panel content
Panel info
Next
Publisher Name
Newer
Share
Sugges&ons
Publisher Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Add to
Add to
Add to
Supplementary Angles
Supplementary angles
Common
Which of these angles
Website
in sports.
Supplementary Angles
are supplementary?
Video
Website
Ques&on
Supplementary Angles
Supplementary angles
Website
in sports.
Wells
Class Overview
5 Resources
panels in cases where you’d like to demonstrate less importance or granularity.
!
Striped
Stacked
7 Ques&ons
in Math 4
Course Cards Course Title
James L +2
5 Units
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna…
Remix Look, i am in a large well!
User Cards
Taxonomy Tagging Remixed by
Look, i am in a small well!
Skipped
Collec&on Title
Wells are containers for parts of the user interface that fall bellow panels in visual hierarchy. They can be used alongside
Look, i am in well!
/
3h 42m
Remixed by Remix
Add to
Loca&on Menu
Taxonomy Tagging
Website
NAVIGATOR UI
Explana&on
Sort ABC
Analy&cs
Tool&p on right
Panel success
Contextual alternatives
Edit
Welcome students! In this class we will be taking a look into Pre-Algebra, exploring the number system, expressions, ra&os and other fun concepts!
Panel warning
Progress Bars
Trophy
Analy&cs
Overview
Badges
Off
Panel danger
Website
:
Op&on 4
Gooru Player Emo&ons
Based off Bootstrap plugin www.bootstraptoggle.com
On
Video
Download
Op&on 1
emojione.com. Whenever posible, always use .SVG for both web and print projects.
Panel primary Panel content
Material Design
Donec id elit non mi porta gravida at eget metus.Maecenas sed diam eget risus varius blandit.
Gooru uses a free library of emo&cons and colored icons called EmojiOne. You can download them at
Warning
Text
On Air .gif anima&on
List group item heading
Emo&cons
Info
Info
Course Title 5 Units
Math 6 | Science 7 James L +2
My Content
Descrip&on goes here ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Add to
Panel content
List group item heading
Mul&select Input
Danger
Success
Panel content
The best way to find out if you can trust somebody is to trust them."
Warning
Gooru Icons
Image
Morbi leo risus
Input Success
Success
design.google.com/icons.
Ques&on
Input Error
Primary
Primary
Sed posuere consectetur est at lobor&s. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venena&s ves&bulum.
be downloaded as a webfont at
Video
This is success text
Default
Toggles
Icons can be exported with Sketch. Material Design Icons can
This is danger text
Popover right
Libraries
Class Informa&on
June 15, 2016
Add to
Popovers and tool&ps
Panel footer
Body font is: font-family: Lato-Regular; font-size: 13px; color: #666666;
Lead font is: font-family: Lato-Light; font-size: 19.5px; color: #666666;
Remix
Search…
My Classes
Chris&e
Math 8 Block 2
Gree&ngs
font-size: 14px; line-height: 15px;
.
23 Members
Panel content
Hover State Colors
gooru
in Math 4
Well done! You successfully read this important alert message.
line-height: 26px;
paragraph stand out.
Modals
containers that have depth and contrast with the underlying background. Bootstrap
line-height: 49px;
components are available as symbols for quickness and ease of use.
Primary
Panels
Naviga&on
Gooru’s User Interface is based on “cards”, meaning most components live in
font-size: 56px;
font-size: 45px;
This is Lead text. It makes a
When designing or prototyping with Sketch, all these
Default
Alerts
font-size: 24px;
Heading 5 Heading 6
BuYons
Large BuYon
Heading 4 The following style guide is designed to be used across
Color
Collec&on Cards
James
Laura
Tom
Web
Nun
Whitehall
" n f + o r , m a t i o n
Subject: Mathema&cs
Teachers (3)
Grade: K5
XZ1290 Class Code
