Ready for the Adventure of Inventing? Sign up here to receive full access!

Style Guide

A guide to common components and styles in Guru.

Colors

Primaries and grays controlled by the Global Swatch feature.
Primary 1
Primary 2
Primary 3
Gray 1
Gray 2 (Text)
Gray 3
Success
Warning
Error
Border - Dark
Border - White
Input Border
Faded Button BG
White

Typography

Headings, body and other common text elements.
Display 1
Display 2

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Large Text    Large Link
Body Text    Body Link
Small Text    Small Link
uppercase text

Buttons

Component, text style and size variations

Icons - Interface

Common interface iconography
Document iconDocument icon

Icons - Social

Common social network icons

Form Inputs

General style and state variations for text inputs.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form Selectables

Styling for checkboxes, selects and radios.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Avatars

Represent users throughout the interface

Badges

Combine with other components to display metadata
Badge Text
Featured course
by Andrew Fisher