diff --git a/src/stylesheets/abstracts/_variables.scss b/src/stylesheets/abstracts/_variables.scss
index ef30847..2ab88cc 100644
--- a/src/stylesheets/abstracts/_variables.scss
+++ b/src/stylesheets/abstracts/_variables.scss
@@ -5,6 +5,7 @@ $text-font-stack: 'Roboto', 'Arial', sans-serif !default;
 $text-colour: rgb(34, 34, 34) !default;
 $primary-colour:  #d71433;
 $secondary-colour:  #46b43d;
+$grey: #505050;
 
 $primary-colour-dark: darken-colour($primary-colour);
 $secondary-colour-dark: darken-colour($secondary-colour);
@@ -14,6 +15,11 @@ $button-colours: (
 	'secondary': $secondary-colour
 );
 
+$title-colours: (
+	'grey': $grey,
+	'white': white
+);
+
 // Breakpoints
 $breakpoints: (
 	'small'  : 767px,
diff --git a/src/stylesheets/components/_title.scss b/src/stylesheets/components/_title.scss
new file mode 100644
index 0000000..2e56cb9
--- /dev/null
+++ b/src/stylesheets/components/_title.scss
@@ -0,0 +1,19 @@
+.title {
+	&--spaced {
+		font: normal 300 1em Roboto;
+		letter-spacing: 0.175em;
+		text-transform: uppercase;
+		color: $text-colour;
+	}
+
+	&--center {
+		display: flex;
+		justify-content: center;
+	}
+}
+
+@each $name, $colour in $title-colours {
+	.title.title--#{$name} {
+		color: $colour;
+	}
+}
diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
index 4275ed6..d71270a 100644
--- a/src/stylesheets/main.scss
+++ b/src/stylesheets/main.scss
@@ -10,3 +10,4 @@
 @import 'components/button';
 @import 'components/feature';
 @import 'components/testimonial';
+@import 'components/title';