Style Guide

This style guide provides a central location to make stylistic changes to your site.
New to webflow? Check out our getting started guide.

Colors

Neutral
This is our neutral color palette and forms the foundation of many UI elements. Gray is most commonly used across typography, dividers and backgrounds. We use 10 weights to cover various scenarios, you can customise these below.
#f7f7f8
#e4e4e7
#9e9ea9
#3a3a41
#000000
Primary Colors
The primary color is typically the color associated with your "brand", and is used across many UI elements. Primarily we use the brand color to call user attention, for example buttons, links, inputs, etc. This color defines overall feel and can elicit emotion.
#05668d
#028090
##00a896
#02c39a
#ffe45e

Typography

H1 Heading
Medium
Size: 80px
Line Height: 88px
Letter Spacing: -4%

The quick brown fox jumps over the lazy dog

H2 Heading
Medium
Size: 64px
Line - Height: 72px
Letter - Spacing: -3%

The quick brown fox jumps over the lazy dog

H3 Heading
Medium
Size: 56px
Line - Height: 64px
Letter - Spacing: -3%

The quick brown fox jumps over the lazy dog

H4 Heading
Medium
Size: 40px
Line Height: 56px
Letter - Spacing: -3%

The quick brown fox jumps over the lazy dog

H5 Heading
Medium
Size: 32px
Line Height: 48px
Letter - Spacing: -3%
The quick brown fox jumps over the lazy dog
H6 Heading
Medium
Size: 24px
Line Height: 32px
Letter - Spacing: -3%
The quick brown fox jumps over the lazy dog
Typography - Sub Headings
Sub Heading / Large
Medium
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

Sub Heading / Regular
Medium
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

Sub Heading / Small
Medium
Size: X px
Line - Height: X px
Letter - Spacing: X px

The quick brown fox jumps over the lazy dog

Typography - Label
Label / XLarge
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Label / Large
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Label / Regular
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Label / Small
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Typography - Paragraph
Paragraph / XLarge
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph / Large
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph / Regular
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Paragraph / Small
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Typography - Heading Detail
Detail / Large
Medium
Size: 18px
Line - Height: 32px
Letter - Spacing: 8%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Detail / Regular
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Detail / Small
Normal
Size: X px
Line - Height: X px
Letter - Spacing: X px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Buttons

Note: You can change the hover and on pressed styles using the class selector

Rich Text Field

Note: Make sure you are changing styles when nested inside the rich text class. Otherwise your changes will apply globally.

Rich Text by Flowbase

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Static and dynamic content editing

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
  • Example List
  • Example List
  • Example List
  • Example List
  • Example List
  • Example List
  • Example List
How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Rich Text by Flowbase

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Static and dynamic content editing

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
  • Example List
  • Example List
  • Example List
  • Example List
  • Example List
  • Example List
  • Example List
How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system. Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Containers

Note: Containers are used to give your website a consistent width
Container / X Large
1440px Container
Container / Large
1280px Container
Container / Regular
1140px Container
Container / Small
960px Container
Container / X Small
740px Container

Sections

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website. You can learn more about global swatches on the Webflow University.
Section / X Large
144px Vertical Padding
Section / Large
120px Vertical Padding
Section / Regular
92px Vertical Padding
Section / Small
64px Vertical Padding
Section / XSmall
48px Vertical Padding

Text Weights

Note: Note: Text Weights are typically used as a combo class on text elements

Text Weight Black

Text Weight Bold

Text Weight Semi Bold

Text Weight Medium

Text Weight Normal

Text Weight Light

Text Weight Thin

Spacing

Note: These classes allow us to give elements different spacing without creating a new class
Margin Bottom / 4
4px on Bottom
Margin Bottom / 8
8px on Bottom
Margin Bottom / 12
12px on Bottom
Margin Bottom / 16
16px on Bottom
Margin Bottom / 20
20px on Bottom
Margin Bottom / 24
24px on Bottom
Margin Bottom / 28
28px on Bottom
Margin Bottom / 32
32px on Bottom
Margin Bottom / 36
36px on Bottom
Margin Bottom / 40
40px on Bottom
Margin Bottom / 44
44px on Bottom
Margin Bottom / 48
48px on Bottom
Margin Bottom / 56
56px on Bottom
Margin Bottom / 64
64px on Bottom
Margin Bottom / 72
72px on Bottom
Margin Bottom / 80
80px on Bottom
Margin Bottom / 88
88px on Bottom
Margin Bottom / 96
96px on Bottom

Interactions

Note: Change the colors through the swatches panel. This will change all locations where the color is used on the website. You can learn more about global swatches on the Webflow University.
Interaction - Scroll View -> 01
Interaction - Scroll View -> 02
Interaction - Scroll View -> 03
Interaction - Scroll View -> 04
Interaction - Scroll View -> 05

Forms

form_input
Form Input
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Special Scores is fiercely dedicated to helping individuals discover and solve the hidden issues holding them back on their credit reports.

Yes, we have to include some legalese down here. View a larger version here: Special Scores Disclaimer.
Disclaimer: All trademarks, product names, logos, service marks, trade names, trade dress, and copyrighted material appearing on this Website and/or Service is the property of its respective owner(s). All trademarks, product names, logos, service marks, trade names, trade dress, and copyrighted material described or published on this Website and/or Service are for identification and educational purposes only. SpecialScores.com is not affiliated with, or endorsed by, any credit reporting agency, furnisher of information, or data broker. SpecialScores.com is not a credit repair organization. You acknowledge and agree that this website, SpecialScores.com, is for educational purposes and is not providing any kind of advice, explanation, opinion, or recommendation about possible legal rights, remedies, defenses, options, selection of forms or strategies. You further acknowledge and agree that your continued access to, and use of, this Website is subject to this Disclaimer, our Privacy Policy and our Terms of Use.
Copyright © Special Scores 2025