Colors

The following colors are used in the Sprint Pro UI kit.

It also represents the global classes to apply the background color to any element.
For example, set "Background Gray Dark" class to any Div element to apply Gray Dark color as a background color.

You can create more such classes of your own, and use them throughout your Webflow project.

Primary Color
‍#2962FF

Class:
Background Primary
Primary Dark Color
#1C44B2

Class:
Background Primary Dark
Primary Light Color
#BBDEFB

Class:
Background Primary Light
Secondary Color
#FF7800

Class:
Background Secondary
Black Default
#212121

Class:
Background Black
Gray Dark Color
#40434B

Class:
Background Gray Dark
Gray Medium Color
#B5B8C0

Class:
Background Gray Medium
Gray Light Color
#EFF2FA

Class:
Background Gray Light

Typography

Headings

These are the default heading styles. You don't have to set any class to apply this style.

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Display headings

These are the display heading styles. When you want a heading to look stand out, consider using a display heading.

Display 1

Display 2

Display 3

Subtitle

This is a subtitle for the light background. Use class "Subtitle" to a paragraph or text block element to apply this style.

This is a subtitle for the dark background. Use class "Subtitle Dark" to a paragraph or text block element to apply this style.

Paragraph

This is the default paragraph style for the light background. You don't have to set any class to apply this style. – 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.

This is the paragraph style for the dark background. Set "Paragraph Dark" class to a paragraph element to apply this style. – 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.

Blockquote

This is the default style for the blockquote. You don't have to set any class to apply this style.

A well designed site should be easy to use, with clear and simple cues to guide the eye towards whats possible.

Text styles

Text alignment
Set the "Text Center" class to any element to make text center-aligned.
Set the "Text Right" class to any element to make text right-aligned.
Text color
Set the "Text Primary Color" class to any element to apply the primary color to the text.
Set the "Text Primary Dark Color" class to any element to apply the primary dark color to the text.
Set the "Text Primary Light Color" class to any element to apply the primary light color to the text.
Set the "Text Secondary Color" class to any element to apply the secondary color to the text.
Set the "Text Gray Dark Color" class to any element to apply the Gray Dark color to the text.
Set the "Text Gray Light Color" class to any element to apply the Gray Light color to the text.
Set the "Text White Color" class to any element to apply the White color to the text.
Text weight
Set the "Text Bold" class to any element to make the text Bold.
Text capitalize
Set the "Uppercase" class to any element to make the text uppercase.
Here's an example of uppercase text.
Set the "Capitalize" class to any element to capitalize every word.
Here's an example of the capitalized text.
Set the "Lowercase" class to any element to make the text lowercase.
Here's an example of the lowercase text.
Text size
Set the "Text Large" class to any element to make the text large.
Set the "Text Small" class to any element to make the text small.
Text highlight
Set the "Text Highlight" class to any text to highlight it.

Links

Default Link
This is the default link style. You don't have to set any class to apply this style.
Link Light
This is the link style for the light background. Set "Link Light" class to a text link element to apply this link style.
Link Gray
This is a link with the Gray Dark color. Set "Link Gray" class to a text link element to apply this link style.
Link Black
This is a link with the Black Default color. Set "Link Black" class to a text link element to apply this link style.
Link Dark
This is the link style for the dark background. Set "Link Dark" class to a text link element to apply this link style.
Link White
This is a link with the White color. It can be used with dark backgrounds. Set "Link White" class to a text link element to apply this link style.

Icons

The "Font Awesome" class allows you to add icons from Font Awesome website (https://fontawesome.com).
Here's how to use this class.
1. Set "Font Awesome" class to elements like link, button, heading, paragraph, text block, block quote, span, etc.
2. Go to Font Awesome Cheatsheet (https://fontawesome.com/cheatsheet).
3. Click on any Font Awesome icon that you want to use. It will automatically copy that icon to the clipboard.
4. In the Webflow Designer, click the HTML element with the"Font Awesome" class. Hit Enter/Return. Paste (Cmd/Ctrl + v) the copied icon.
That's it. You just added an icon.

For example, the "Font Awesome" class is applied to the following Text Block. It shows a few icons from Font Awesome.

         

Lists

This is the default unordered list. You don't have to set any class to apply this style.
  • List item
  • List item
  • List item
This is the default ordered list. You don't have to set any class to apply this style.
  1. List item
  2. List item
  3. List item
This is a sample social icons list. You can copy/paste to your Webflow page and customize it as per your needs.

Buttons

Light background

This is the Webflow's default style for the button. Set "Large" or "Small" class to it to increase or decrease the button size respectively.

Button Default
Button Default Large
Classes: Large
Button Default Small
Classes: Small

These are the Sprint Pro's button styles for the light background. Set the combo class "Large" or "Small" to increase or decrease the button size respectively.

Button
Class: Button
Button Large
Classes: Button, Large
Button Small
Classes: Button, Small
Button Outline
Class: Button Outline
Button Outline Large
Classes: Button Outline, Large
Button Outline Small
Classes: Button Outline, Small
Button Ghost
Class: Button Ghost
Button Ghost Large
Classes: Button Ghost, Large
Button Ghost Small
Classes: Button Ghost, Small

Dark background

These are the Sprint Pro's button styles for the dark background. Set the combo class "Large" or "Small" to increase or decrease the button size respectively.

Button
Class: Button Dark
Button Large
Classes: Button Dark, Large
Button Small
Classes: Button Dark, Small
Button Outline
Class: Button Outline Dark
Button Outline Large
Classes: Button Outline Dark, Large
Button Outline Small
Classes: Button Outline Dark, Small
Button Ghost
Class: Button Ghost Dark
Button Ghost Large
Classes: Button Ghost Dark, Large
Button Ghost Small
Classes: Button Ghost Dark, Small

Download app buttons

These are the buttons to present "Download App" badges/links.

Button Text
Class: Button Google Play
Button Text
Class: Button App Store
Button Text
Class: Button Mac App Store
Button Text
Class: Button Microsoft Store

Social buttons

These are the button styles to present social media profiles. Set the combo class "Large" or "Small" to increase or decrease the button size respectively.

Twitter
Class: Button Twitter
Facebook
Class: Button Facebook
Instagram
Class: Button Instagram
YouTube
Class: Button Youtube
Medium
Class: Button Medium
Product Hunt
Class: Button Producthunt
LinkedIn
Class: Button Linkedin
Pinterest
Class: Button Pinterest
Dribbble
Class: Button Dribbble
Behance
Class: Button Behance
Class: Button Twitter
Class: Button Facebook
Class: Button Instagram
Class: Button Youtube
Class: Button Medium
Class: Button Producthunt
Class: Button Linkedin
Class: Button Pinterest
Class: Button Dribbble
Class: Button Behance

Rounded rectangle buttons

Set class "Rounded" to any button to make corners rounded. Check the following buttons for examples.

Button Primary
Class: Button Primary, Rounded
Button Primary Large
Combo class: Button Primary, Large, Rounded
Instagram
Class: Button Instagram, Rounded
Class: Button Instagram Icon, Rounded

Circular buttons

Set class "Circular" to any button to make buttons circular. Check the following buttons for examples.

Button Primary
Class: Button Primary, Circular
Button Primary Large
Combo class: Button Primary, Large, Circular
Instagram
Class: Button Instagram, Circular
Class: Button Instagram Icon, Circular

Form elements

This section presents Sprint Pro's styles for the form elements.

How to use them?
Each form element has its class within or above it. Apply it to the form elements in your Webflow pages.
Or copy elements from this page and paste them in your Webflow pages.

Form elements also have different sizes in Sprint Pro template. Set the combo class "Large" or "Small" to increase or decrease the size of the form element respectively.

Text field

Textarea

Select box

Class: Select Field
Classes: Select Field, Large
Classes: Select Field, Small

Input group

Input group is a custom form element created in the Sprint Pro template. It consists of a text field and a button mainly.
‍
How to use it?
Copy the Div element with the "Input Group" class, and paste it to your Webflow page. It's a group of three elements; Input Group Text, Input Group Append, Input Group Submit.

To use the large or small size of the input group, copy and paste the Div element with the "Input Group Large" or "Input Group Small" class respectively.

Input Group
Input Group Large
Input Group Small

Checkbox, Radio button

The following are the Sprint Pro styles for the Checkbox and Radio Button form elements.

How to use them?
1. To use the checkbox field, copy the Div element with the "Checkbox Field" class, and paste it to your Webflow page. It consists of a checkbox and a label.
2. To use the radio button field, copy the Div element with the "Radio Button Field" class, and paste it to your Webflow page. It consists of a radio button and a label.

Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try later.

Form elements (Dark background)

This section presents Sprint Pro's styles for the form elements for the dark background.

Text field

Textarea

Select box

Class: Select Field
Class: Select Field, Large
Class: Select Field, Small

Input group

Input Group
Input Group Large
Input Group Small

Checkbox, Radio button

Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try later.

Images

This section presents image styles.

An image with the default style.
The following is an image with the rounded corners. Set "Rounded" class to an image to apply rounded corners style.
The following is an image with a circular shape. Set "Circular" class to an image to apply a circular shape style.
The following is a default image with a caption wrapper.
A caption for the above image.

Badges

A badge can be used to present a small count or labeling.

How to use?
Copy a badge from the following section, and paste it to your Webflow page where you want to use it.
Or take a Text Block element and set any of the badge classes to it.

You can create more such classes with different colors here based on your design needs.

Badge Primary
Set class "Badge Primary" to the text block to create a primary badge.
Badge Primary Dark
Set class "Badge Primary Dark" to the text block to create a primary dark badge.
Badge Secondary
Set class "Badge Secondary" to the text block to create a secondary badge.
Badge Gray Dark
Set class "Badge Gray Dark" to the text block to create a Gray Dark badge.
Badge Gray Medium
Set class "Badge Gray Medium" to the text block to create a Gray Medium badge.
Badge Gray Light
Set class "Badge Gray Light" to the text block to create a Gray Light badge.
Badge Black
Set class "Badge Black" to the text block to create a Black badge.
Badge White
Set class "Badge White" to the text block to create a White badge.

Shadows

The shadow classes presents different shadows. Use them to apply shadow effect to any element in your website design.

Shadows can be used with buttons, images, navbars, cards, etc.

Class:
Shadow 1
Class:
Shadow 2
Class:
Shadow 3
Class:
Shadow 4
Class:
Shadow 5

Borders

These classes can be used to set a border to any element.

Set class "Border Top" to any element to apply a border with the default style on the top side.
Set class "Border Right" to any element to apply a border with the default style on the right side.
Set class "Border Bottom" to any element to apply a border with the default style on the bottom side.
Set class "Border Left" to any element to apply a border with the default style on the left side.