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 Stats 02

3M

3 Million daily active Users

7K

Over 7K open job positions

10M

Over 10 Million Stories

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 Cards Slider 01

Flexible Tools

Get started on website and landing pages right away with little to no learning curve.

  • Created with Lunacy
  • Created with Lunacy
inbound-strategy-blue
Modular Design

You can use modular design to get the exact building blocks you need to build beautiful website and landing pages.

inbound-strategy-blue
No Templates

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

inbound-strategy-blue
Easy-To-Use Tools

Get started on website and landing pages right away with little to no learning curve.

inbound-strategy-blue
Prototype With Robust Modules

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

inbound-strategy-blue
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.

inbound-strategy-blue
Light Years Ahead

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

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
SR Pricing 02

Our pro pricing includes all of the bells and whistles

Flexible Tools

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

Premium Plan

$60k/mo

  • Sprocket Rocket App Access

  • Sprocket Rocket App Access

  • Sprocket Rocket App Access

  • Sprocket Rocket App Access

Standard Plan

$5k/yr

  • Sprocket Rocket App Access

  • Sprocket Rocket App Access

  • Sprocket Rocket App Access

  • Sprocket Rocket App Access

SR Offer Bar 05

Strategy Kit

Every Great Growth-Driven Design Project Starts With Strategy. Base your websites strategy on your target audiences needs, problems, questions, and desires, and you will have solid foundation for success.

Image
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 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 One Col Media 02

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, calls-to-action, and more.

SR One Col 02
SR Cards Steps 01

Sign-up for the free trial to give our platform a spin

The template is really nice and offers a quite large set of options. It's
beautiful and the coding is done quickly and seamlessly. Thank you!
1
Quick Prototyping

The easiest and fastest way to build on HubSpot.

2
Enhanced User
Experience

All of the tips you needs to meet you marketing goals this year.

3
No Templates

Lean how to improve your teams productivity with this guide.

SR Hero 02

HubSpot CMS Design Tool

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

Describe your image
head

Modular Design

You can use modular design to get the exact building blocks you need to build beautiful website and landing pages.

head

Easy-To-Use Tools

Get started on website and landing pages right away with little to no learning curve.

head

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 One Col Media 01

Built for Everyone

Optimize landing and website pages or start from scratch.

SR Offer Bar 04

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 Video CTA 01
Case Study

How We Got A 1000% Conversion Rate In 7 Days