Style Guide

Use this template a reference to your brand styles

Colors

Primary

Secondary

Tertiary

Custom Color

Typography

H1 - Prefacing Title - Lorem ipsum dolor sit amet

H2 - Title - Header - Lorem ipsum dolor sit amet, consectetur adipisicing elit

H3 - Subtitle - Secondary Text - Lorem ipsum dolor sit amet, consectetur adipisicing elit

H4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

H5 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
H6 - Lorem ipsum dolor sit amet, consectetur adipisicing elit
body - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

p - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

  • li - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • li - Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis.
  • li - Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.
  1. li - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. li - Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis.
  3. li - Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

p.small - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

p.large - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

p.blog - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.

“Blockquote - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl a ipsum convallis consequat. Integer id felis a libero finibus convallis. Aenean consequat quam blandit luctus rhoncus. Curabitur in lobortis turpis.”

This is a link lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien magna. Morbi ac arcu eu tortor condimentum pellentesque.

Buttons

Form Styles

Form Title

Custom Section

Add in your own sections

SR Hero 01

Light Years Ahead

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect of the design to fit brand standards.

SR Offer One Col 01

HubSpot CMS Design Tool

This CMS design tool helps you get the most from the HubSpot CMS

Download a Free Trial Today

SR One Col 01

Easy-To-Use Tools

Collaborate seamlessly across devices from wherever you may be - whether you're in office, on the go, or making last-minute changes before your next meeting.

From start-to-finish, the design and strategy team provide all of the guidance and expertise necessary to build a high-conversion website.

Without rigid templates, you can build the exact type of website necessary to hit your website performance goals.

SR Offer Bar 03
Sprocket Rocket Template
The easiest and fastest way to build on HubSpot.
SR Nav Min 01
SR Hero Form 01

Light Years Ahead

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect of the design to fit brand standards.

Download a Free Trial Today

SR Hero Card 01

Build a High-Conversion Website on HubSpot

Access beautiful design tools and intuitive, flexible modules and build the website of your dreams

SR Testimonial Grid 01

Sprocket Rocket Testimonials

left-quote Created with Sketch.

The template is really nice and offers quite a large set of options. Its beautiful and the coding is done quickly and seamlessly. Thank you!

Chris Sanford

Product Designer,
Google

left-quote Created with Sketch.

Ive had the pleasure of working with Sprocket Rocket since its inception and find it to be an invaluable tool in helping modernize our HubSpot build process.

Gabrielle Francis

Product Designer, Google

left-quote Created with Sketch.

I am using Sprocket Rocket for my new project and love every bit of it. While the great design convinced me in the first place, it is also a professional template to work with in the long run.

Denisse Atkinson

Product Designer, Google

left-quote Created with Sketch.

I think of this as a design resource that really helps you find the vision on sections and pages that often can seem boring to design. It does a great job of providing you alternative options that you can easily extend.

Justin Galloway

Product Designer, Google

left-quote Created with Sketch.

I had a great experience working with the team. I quickly learned how to use the tool on my own and if I ever got stuck, they were there to answer my questions. Would definitely recommend!

Kaila Terrell

Product Designer, Google

SR Cards Logos 01
SR Clients 01
airbnb
fitbit
spotify
slack
alphabet
qualio
hirevibe
precision-hawk
smartmail
SR Two Col 03

Enhanced User Experience

Collaborate seamlessly across devices from wherever you may be - whether you're in the office, on the go, or making last-minute changes before your next meeting.
SR Bling Graphic 02

Built for Everyone

SR Cards Categories 01

HubSpot CMS Design Tool

We already have HubSpot, but struggled building website pages
using their modules. With SprocketRocket, we can finally build the
pages we need for a high converting site.
SR Cards Grid 02

Meet all of your inbound
goals and objectives

Quickly and efficiently build the materials you need to support your
inbound marketing strategy. Drag and drop building blocks including
testimonials, forms, calls-to-action, and more.
Professional Design

Professional Design

Easy and fast adjustments of elements is possible with Core template.
Superior Inbound Material

Superior Inbound Material

Quickly and efficiently build the materials you need to support your inbound marketing strategy.
Light Years Ahead

Light Years Ahead

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect to fit brand standards.
Enhanced User Experience

Enhanced User Experience

Collaborate seamlessly across devices from wherever you may be – whether you’re in the office, on the go, or making last-minute changes before your next meeting.
Exceptional Customer Support

Exceptional Customer Support

From start-to-finish, the design and strategy team provide all of the guidance and expertise necessary to build a high-conversion website.
Prototype With Robust Modules

Prototype With Robust Modules

Select from a collection of modules and quickly populate and draft website and landing pages right to HubSpot.
SR Two Col 01

Easy-of-use ensures new users learn to use prototyping tools.

Collaborate seamlesly across devices from wherever you may be - whether you're in the office, on the go, or making last-minute changes before your next meeting.

I think of this as a design resource that really helps you find the vision on section and pages that often can seem boring to design. It does a great job of providing you alternative options that you can easily extend.

SR Cards Timeline 01

Meet all of your inbound
goals and objectives

Quickly and efficiently build the materials you need to support your
inbound marketing strategy. Drag and drop building blocks including
testimonials, forms, calls-to-action, and more.

brooke

In the Beginning

Easy and fast adjustments of elements is possible with Core template. Find our more about our all-in-one programmatic template.

2018
matthews

Sprocket Rocket v1.0

Easy and fast adjustments of elements is possible with Core template. Find our more about our all-in-one programmatic template.

2019
disruptivo

Sprocket Rocket v2.0

Easy and fast adjustments of elements is possible with Core template. Find our more about our all-in-one programmatic template.

2020
alex

HubSpot Themes

Easy and fast adjustments of elements is possible with Core template. Find our more about our all-in-one programmatic template.

2021
SR Three Col 01

Professional Design

Achieve virtually any look and layout from within the one template.

Flexible Tools

Build as many pages as you need for your high-conversion website.

Unlimited Power

The design sprints are a white glove service
SR Hero 03

Flexible Templates for Massive Results

Templates in the HubSpot Marketplace can cost up to $1,000, but websites rarely fail because of the template.

SR One Col Media 01

Built for Everyone

Optimize landing and website pages or start from scratch.

SR Two Col 03

Flexible Tools

From start-to-finish, the design and strategy team provide all the guidance and expertise necessary to build a high-conversion website.
SR Stats 04
Descended from Astronomers

10,001

Descended from Astronomers
Realm of the Galaxies

3,600,000,000

Realm of the Galaxies
Cosmic Fugue

18,821

Cosmic Fugue
Cosmic fugue paroxysm

78,392,746

Cosmic fugue paroxysm
Extraordinary claims

388,291

Extraordinary claims
SR Cards Flip 01

Meet all of your inbound
goals and objectives

Quickly and efficiently build the materials you need to support your
inbound marketing strategy. Drag and drop building blocks including
testimonials, forms, calls-to-action, and more.

bulb

Professional Design

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect to fit brand standards.

sprout

Superior Inbound Material

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect to fit brand standards.

bulb

Light Years Ahead

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect to fit brand standards.

presentation

Enhanced User Experience

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect to fit brand standards.

plant

Exceptional Customer Support

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect to fit brand standards.

cloud

Prototype With
Robust Modules

Sprocket Rocket lets you transform your rapid prototype into a beautiful design by adjusting every aspect to fit brand standards.

SR Cards Conversational Form 01

Modular Design Tool Free Trial

Sign-up for the free trial to give our platform a spin.
Step
SR Clients 01
airbnb
fitbit
spotify
slack
alphabet
qualio
hirevibe
precision-hawk
smartmail
SR Hero Parallax 01

Superior Inbound Material

Quickly and efficiently build the materials you need to support your inbound marketing strategy. Drag and drop building blocks including testimonials, forms, call-to-action, and more.

SR Three Col 03
Built for Everyone

Enhanced User
Experience

Easy-of-use ensures new users learn to
use prototyping tools.
Flexible Tools

Easy-To-Use Tools

Optimize landing and website pages or
start from scratch.
Modular Design

Modular Design Tool

Leaner, more streamlined websites
for a better UX.
SR Articles 02
SR Tabs Testimonials 01
I've had the pleasure of working with Sprocket Rocket since its inception and find it to be an invaluable tool in helping modernize our HubSpot build process.
I had a great experience working with the team. I quickly learned how to use the tool on my own and if I ever got stuck, they were there to answer my questions. Would definitely recommend!
The tool was intuitive and the entire team learned how to use it quickly. We drafted all of the key pages and templates we need for our new site.
Our existing site is clunky and all of our website pages have way too much copy, photos, and elements. It makes it confusing for our visitors to know where they should go next. We love the types of pages we're able to create using SprocketRocket.
Jovani Tate, Interaction Designer @ Apple
Denisse Atkinson, Inbound Marketer @ HubSpot
Reuben Cowan, Front-End Developer @ Twitter
Teagan Marquez, Marketing Manager @ YooHoo