---
title: SP Style Guide
---

# SpecPath Style Guide

This is the Style Guide for SpecPath Colors and Fonts.

- [Logo](https://www.autospec.org/sp-style-guide#logo)
- [Colors](https://www.autospec.org/sp-style-guide#colors)
- [Typography](https://www.autospec.org/sp-style-guide#typography)
- [Buttons](https://www.autospec.org/sp-style-guide#buttons)
- [Forms](https://www.autospec.org/sp-style-guide#forms)
- [Custom Section](https://www.autospec.org/sp-style-guide#custom-section)

### Logo

![SpecPath Logo](https://www.autospec.org/hubfs/SpecPath%20Webpage/SpecPath%20Logos/specpath%20registered%202019.png)

![SpecPath Logo White](https://www.autospec.org/hubfs/SpecPath%20Webpage/SpecPath%20Logos/specpath%20registered%20-%20white%20lettering.png)

![SpecPath Icon](https://www.autospec.org/hubfs/SpecPath%20Webpage/SpecPath%20Logos/specpath%20icon.png)

[Download Logo Files](https://www.autospec.org/sp-style-guide#)

### Colors

Primary

Secondary

Tertiary

Custom Color

#9FC5E8

### Typography

 Show Display Headings

##### When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.

×

```
<h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1>
```

 

# Display-1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

 

# Display-2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

 

# Display-3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

 

# Display-4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit

# 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](https://www.autospec.org/sp-style-guide#) lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed sapien magna. Morbi ac arcu eu tortor condimentum pellentesque.

### Buttons

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Primary

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Secondary

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Tertiary

[Learn More](https://www.autospec.org/sp-style-guide#)

Button White

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Black

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Outline Primary

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Outline Secondary

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Outline Tertiary

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Outline White

[Learn More](https://www.autospec.org/sp-style-guide#)

Button Outline Black

### Form Styles

### Form Title

### Custom Section

Add in your own sections