EXPLORE THE platform
Processes
Document training & SOPs
Policies
All your need-to-knows
People
Answer "who does what?"
Company
The perfect orientation
Helpful links
Watch Demo or Book a Tour
See Trainual in action, on your time
Use this to change the link
Free Templates
Policies & SOPs to get you started
Use this to change the link
Product Tutorials
Jump into our training center
Use this to change the link
Integrations
Tons of connections to tools you use
Use this to change the link
FAQs
All the As to your Trainual Qs
Use this to change the link
CONTENT
The Business Playbook
Learn to document & delegate what you do. Get the best-selling book
Use this to change the link
The Manual newsletter
Weekly news, trends, & tips. Trusted by 65k+ biz leaders
Use this to change the link
Organize Chaos podcast
Helping you build a better business, daily
Use this to change the link
Customer Stories
Real stories of real impact from real Trainual users
Use this to change the link
COMMUNITY
Certified Consultants
Get help from trained and trusted Trainual pros
Use this to change the link
Become a Certified Consultant
Get certified, carry the badge, help our customers, spread the word
Use this to change the link
Join Process People
A free community where biz owners, coaches & consultants talk systems stuff
Use this to change the link
Playbook 2022
Stream the epic free SMB event. Rewrite your playbook with plays from the best
Use this to change the link

The #1 source for small biz news & inspo

Style Guidelines

TypographyHeadingsListsButtonsColorSpacing

Navbars

Here are the different Navbars to use across the site. Each is a Symbol and can be found in the Symbols tab. Be sure not to copy the parent div nav-wrap found on this page — this unlinks the Sticky property so all can be displayed here.

Trainual Homepage
Sign in
Trainual Homepage
How it works
Resources
Reviews
Pricing
Log in
Trainual Homepage
Templates
Articles
Pricing
Podcasts
Newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Colors

Looking for something else? View the contents.

Colors

global
Body background color
Body text color
Headings color
Brand color
Button colors
Button color
Button Hover color
Button Text color
Button Text Hover color
Button Secondary color
Button Secondary Hover color
Button Secondary Text color
Button Secondary Text Hover color
link colors
Link color
Link Hover color
Nav Link color
Nav Link Hover color
Background colors
Background Color 1
Background Color 2
Background Color 3
Background Color 4
Background Color 5
Text Colors
Text Color 1
Text Color 2
Text Color 3
Text Color 4
other Colors
Border color
Shadow color
Input field background color
Input field placeholder color

Typography

Looking for something else? View the contents.

Body Copy

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph
18/32px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Small
15/24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Extra Small
12/150%
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Blockquote
18px

Headings

Typography
This is some text
Callout
72px

Aa Bb Cc Dd Ee

Heading 1
56/72px

Aa Bb Cc Dd Ee

Heading 2
48/64px

Aa Bb Cc Dd Ee

Heading 3
40/56px

Aa Bb Cc Dd Ee

Heading 4
32/48px
Aa Bb Cc Dd Ee
Heading 5
24/40px
1Aa Bb Cc Dd Ee
Heading 6
18/32px
1Aa Bb Cc Dd Ee
Heading 7
14/24px

Additional Elements

Typography
  • This is an unordered item.
  • This is an unordered item.
  • This is an unordered item.
List Items - Bullets
1.3em
  1. This is an ordered item.
  2. This is an ordered item.
  3. This is an ordered item.
List Items - Numbered
1.3em
  1. This is an ordered item.
  2. This is an ordered item.
  3. This is an ordered item.
List Items - Lettered
1.3em
  1. This is an ordered item.
  2. This is an ordered item.
  3. This is an ordered item.
List Items - Roman
1.3em

Buttons

Looking for something else? View the contents.

Primary Buttons

Primary, Teal, Outline, Learn More
Button TextButton Text
Learn more

Layouts

Looking for something else? View the contents.

This is a heading with some text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a heading with some text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a heading with some text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a heading with some text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a heading with some text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a heading with some text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a heading with some text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a heading with some text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

This is a purple highlight with some text.

This is a pink highlight with some text.

This is a green highlight with some text.

This is a green underline with some text.

This is a yellow highlight with some text.

This is a purple highlight with some text.

This is a pink highlight with some text.

This is a green highlight with some text.

This is a green underline with some text.

This is a yellow highlight with some text.

Interested in learning
more about Trainual?

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

See Trainual in action

Join us any Tuesday or Thursday for a live demo, and get all your questions answered before you sign up.

By clicking “Accept All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Manage all preferences
DenyAccept all

Organize the chaos
of your small business

Processes
Policies
People
Company