diff --git a/README.md b/README.md
index 7c14cdf..5fafa71 100644
--- a/README.md
+++ b/README.md
@@ -7,20 +7,20 @@ Creates a video player and attaches analytics. Also supports pre roll ads.
 Create an element of the format e.g.
 
 ```html
-    <div data-o-component="o-video o-video--large"></div>
+<div data-o-component="o-video o-video--large"></div>
 ```
 
 In JS
 
 ```js
-    const OVideo = require('o-video');
-    const opts = {
-        id: 4165329773001,
-        optimumwidth: 710,
-        placeholder: true,
-        classes: ['video']
-    };
-    const video = new OVideo(document.body, opts);
+const OVideo = require('o-video');
+const opts = {
+	id: 4165329773001,
+	optimumwidth: 710,
+	placeholder: true,
+	classes: ['video']
+};
+const video = new OVideo(document.body, opts);
 ```
 
 ### Config
@@ -33,16 +33,17 @@ Where `opts` is an optional object with properties
  * `optimumvideowidth` [`Number`] The optimum width of the video itself, used when there are multiple video renditions available to
  decide which to display (the smallest one that's at least as large as this width, if it exists)
  * `placeholder` [`Boolean`] Show just the poster image, load (and play) video on click
- * `placeholderInfo` [`Array`] A list of extra information to display on the placeholder (Available: title, description, brand, duration)
+ * `placeholderInfo` [`Array`] A list of extra information to display on the placeholder (Available: title, description, brand)
  * `playsinline` [`Boolean`] Whether to play the [video inline](https://webkit.org/blog/6784/new-video-policies-for-ios/) on iOS smallscreen (defaults to fullscreen)
  * `classes` [`Array`] Classes to add to the video (and placeholder) element
 
 The config options can also be set as data attribute to instantiate the module declaratively:
 
 ```html
-    <div data-o-component="o-video o-video--large"
-            data-o-video-id="4165329773001"
-            data-o-video-optimumwidth="710"></div>
+<div data-o-component="o-video o-video--large"
+	data-o-video-id="4165329773001"
+	data-o-video-optimumwidth="710">
+</div>
 ```
 
 ### With a playlist
@@ -53,9 +54,9 @@ Playlists may take a queue of videos and play them one after another.
 const Video = require('o-video');
 
 const queue = [
-    '4165329773001',
-    '4907997821001',
-    '4165329773001'
+	'4165329773001',
+	'4907997821001',
+	'4165329773001'
 ];
 
 const player = new Video(document.body, { autorender: false });
@@ -68,9 +69,9 @@ document.querySelector('.prev-btn').onclick = () => playlist.prev();
 The queue is an `array` containing Brightcove video ID strings.
 
 ## Testing
-
-    $ npm test
-
+```
+$ npm test
+```
 (Requires Firefox)
 
 
@@ -81,19 +82,19 @@ Migrating from 1.0 to 2.0
 
 ### Configuration
 
-The `placeholdertitle` property no longer exists, it has been replaced by `placeholder-info` which accepts an array containing one or more of `'title'`, `'description'`, `'brand'`, `'duration'`.
+The `placeholdertitle` property no longer exists, it has been replaced by `placeholder-info` which accepts an array containing one or more of `'title'`, `'description'`, `'brand'`.
 
 ```diff
 <div class="video-container">
-    <div class="o-video" data-o-component="o-video"
-        data-o-video-source="Brightcove"
-        data-o-component="o-video"
-        data-o-video-id="4165329773001"
-        data-o-video-advertising="true"
-        data-o-video-placeholder="true"
--        data-o-video-placeholdertitle="true"
-+        data-o-video-placeholder-info="['title']"
-    ></div>
+	<div class="o-video" data-o-component="o-video"
+		data-o-video-source="Brightcove"
+		data-o-component="o-video"
+		data-o-video-id="4165329773001"
+		data-o-video-advertising="true"
+		data-o-video-placeholder="true"
+- 		data-o-video-placeholdertitle="true"
++ 		data-o-video-placeholder-info="['title']"
+	></div>
 </div>
 ```
 
@@ -102,16 +103,16 @@ The `optimumwidth` property is no longer used for the video width, it is now onl
 
 ```diff
 <div class="video-container">
-    <div class="o-video" data-o-component="o-video"
-        data-o-video-source="Brightcove"
-        data-o-component="o-video"
-        data-o-video-id="4165329773001"
-        data-o-video-advertising="true"
-        data-o-video-placeholder="true"
-        data-o-video-placeholder-info="['title']"
-        data-o-video-optimumwidth="400"
-+        data-o-video-optimumvideowidth="400"
-    ></div>
+	<div class="o-video" data-o-component="o-video"
+		data-o-video-source="Brightcove"
+		data-o-component="o-video"
+		data-o-video-id="4165329773001"
+		data-o-video-advertising="true"
+		data-o-video-placeholder="true"
+		data-o-video-placeholder-info="['title']"
+		data-o-video-optimumwidth="400"
++ 		data-o-video-optimumvideowidth="400"
+	></div>
 </div>
 ```
 
diff --git a/bower.json b/bower.json
index c8b3f88..db96efe 100644
--- a/bower.json
+++ b/bower.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "o-icons": "^4.4.2",
     "o-colors": "^3.3.0",
-    "o-fetch-jsonp": "^2.0.0"
+    "o-fetch-jsonp": "^2.0.0",
+    "o-typography": "^4.3.1"
   }
 }
diff --git a/demos/src/placeholder.mustache b/demos/src/placeholder.mustache
index 2fdeaab..2ce3987 100644
--- a/demos/src/placeholder.mustache
+++ b/demos/src/placeholder.mustache
@@ -4,7 +4,7 @@
 		data-o-video-id="4165329773001"
 		data-o-video-advertising="true"
 		data-o-video-placeholder="true"
-		data-o-video-placeholder-info="['title','description','brand','duration']"></div>
+		data-o-video-placeholder-info="['title','description','brand']"></div>
 </div>
 <label>
 	Select video:
@@ -13,4 +13,4 @@
 		<option value="4907997821001">Austrian far-right candidate narrowly defeated</option>
 		<option value="4165329773001">Teaching real-world economics to undergraduates</option>
 	</select>
-</label>
\ No newline at end of file
+</label>
diff --git a/demos/src/sizes.mustache b/demos/src/sizes.mustache
index 6baaa64..11bf4a1 100644
--- a/demos/src/sizes.mustache
+++ b/demos/src/sizes.mustache
@@ -3,7 +3,7 @@
 		data-o-component="o-video"
 		data-o-video-id="4165329773001"
 		data-o-video-placeholder="true"
-		data-o-video-placeholder-info="['title','description','brand','duration']"></div>
+		data-o-video-placeholder-info="['title','description','brand']"></div>
 </div>
 
 <div class="demo-video-container demo-video-container--medium">
@@ -11,7 +11,7 @@
 		data-o-component="o-video"
 		data-o-video-id="4165329773001"
 		data-o-video-placeholder="true"
-		data-o-video-placeholder-info="['title','description','brand','duration']"></div>
+		data-o-video-placeholder-info="['title','description','brand']"></div>
 </div>
 
 <div class="demo-video-container demo-video-container--small">
@@ -19,5 +19,5 @@
 		data-o-component="o-video"
 		data-o-video-id="4165329773001"
 		data-o-video-placeholder="true"
-		data-o-video-placeholder-info="['title','description','brand','duration']"></div>
-</div>
\ No newline at end of file
+		data-o-video-placeholder-info="['title','description','brand']"></div>
+</div>
diff --git a/main.scss b/main.scss
index 49da40a..fe2e15c 100644
--- a/main.scss
+++ b/main.scss
@@ -2,6 +2,7 @@ $o-video-is-silent: true !default;
 
 @import "o-icons/main";
 @import "o-colors/main";
+@import "o-typography/main";
 
 @import "src/scss/placeholder";
 @import "src/scss/info";
diff --git a/src/js/info.js b/src/js/info.js
index 946b66e..ca31417 100644
--- a/src/js/info.js
+++ b/src/js/info.js
@@ -5,14 +5,6 @@ function formatBrand (tags) {
 	return tag && tag.replace(regex, '');
 }
 
-function formatDuration (lengthInMs) {
-	const lengthInSeconds = Math.ceil(lengthInMs / 1000);
-	const minutes = '' + Math.floor(lengthInSeconds / 60);
-	const seconds = '' + (lengthInSeconds % 60);
-
-	return `${minutes}:${seconds.length === 1 ? '0' + seconds : seconds}`;
-}
-
 class VideoInfo {
 	constructor (video) {
 		this.video = video;
@@ -31,12 +23,6 @@ class VideoInfo {
 			this.infoEl.appendChild(this.brandEl);
 		}
 
-		if (this.opts.duration) {
-			this.durationEl = document.createElement('span');
-			this.durationEl.className = 'o-video__info-duration';
-			this.infoEl.appendChild(this.durationEl);
-		}
-
 		if (this.opts.title) {
 			this.titleEl = document.createElement('h4');
 			this.titleEl.className = 'o-video__info-title';
@@ -59,10 +45,6 @@ class VideoInfo {
 			this.brandEl.textContent = formatBrand(this.video.videoData.tags);
 		}
 
-		if (this.durationEl) {
-			this.durationEl.textContent = formatDuration(this.video.videoData.length);
-		}
-
 		if (this.titleEl) {
 			this.titleEl.textContent = this.video.videoData.name;
 		}
@@ -78,7 +60,6 @@ class VideoInfo {
 		delete this.infoEl;
 		delete this.brandEl;
 		delete this.titleEl;
-		delete this.durationEl;
 		delete this.descriptionEl;
 	}
 }
diff --git a/src/scss/_info.scss b/src/scss/_info.scss
index 59f678c..9e41742 100644
--- a/src/scss/_info.scss
+++ b/src/scss/_info.scss
@@ -1,14 +1,15 @@
 @mixin oVideoInfoSmall {
-	.o-video__info-brand,
-	.o-video__info-duration,
 	.o-video__info-description {
 		display: none;
 	}
+	.o-video__info-title {
+		@include oTypographySansBold(s);
+		margin: 6px 0;
+	}
 }
 
 @mixin oVideoInfoMedium {
-	.o-video__info-brand,
-	.o-video__info-duration {
+	.o-video__info-brand {
 		display: inline-block;
 	}
 
@@ -24,13 +25,21 @@
 	}
 
 	.o-video__info-title {
-		font-size: 24px;
-		line-height: 26px;
+		@include oTypographySansBold(l);
+		font-size: 28px;
+		line-height: 30px;
 	}
 
 	.o-video__info-description {
+		@include oTypographySans(m);
+		line-height: 20px;
 		display: block;
 	}
+
+	.o-video__play-button-icon {
+		width: 60px;
+		height: 60px;
+	}
 }
 
 @if $o-video-is-silent == false {
@@ -47,24 +56,19 @@
 		color: oColorsGetPaletteColor('white');
 	}
 
-	.o-video__info-brand,
-	.o-video__info-duration {
+	.o-video__info-brand {
+		@include oTypographyLinkTopic;
 		display: inline-block;
 		padding: 3px 10px;
-	}
-
-	.o-video__info-brand {
 		background-color: oColorsGetPaletteColor('claret-1');
-		font-weight: 600;
-
+		color: white;
 		&:empty {
 			display: none !important;
 		}
 	}
 
 	.o-video__info-title {
-		font-weight: 600;
-		font-size: 16px;
+		@include oTypographySansBold(m);
 		line-height: 18px;
 	}
 
diff --git a/src/scss/_placeholder.scss b/src/scss/_placeholder.scss
index c739bca..22f9161 100644
--- a/src/scss/_placeholder.scss
+++ b/src/scss/_placeholder.scss
@@ -10,19 +10,19 @@
 	}
 
 	.o-video__placeholder {
-        background: oColorsGetPaletteColor('claret');
+		background: oColorsGetPaletteColor('claret');
 		color: oColorsGetPaletteColor('white');
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 	}
 
 	.o-video__placeholder-image {
-        transition: opacity 0.25s;
+		transition: opacity 0.25s;
 
-        // saves messing with z-indexes!
-        :hover > & {
-            opacity: 0.35;
-        }
+		// saves messing with z-indexes!
+		:hover > & {
+			opacity: 0.35;
+		}
 	}
 
 	.o-video__play-button {
@@ -47,16 +47,13 @@
 	}
 
 	.o-video__play-button-icon {
-		@include oIconsGetIcon('play', oColorsGetPaletteColor('white'), 60, $iconset-version: 1);
+		@include oIconsGetIcon('play', oColorsGetPaletteColor('white'), 40, $iconset-version: 1);
 		@include oIconsBaseStyles;
 		position: absolute;
-		top: 0;
-		right: 0;
 		bottom: 0;
 		left: 0;
 		margin: auto;
-		border-radius: 100%;
-		background-color: rgba(oColorsGetPaletteColor('black'), 0.5);
+		background-color: oColorsGetPaletteColor('black');
 	}
 
 }
diff --git a/test/video.test.js b/test/video.test.js
index 9a41033..5be0bc1 100644
--- a/test/video.test.js
+++ b/test/video.test.js
@@ -207,9 +207,6 @@ describe('Video', () => {
 			video.infoPanel.brandEl.textContent.should.equal('Authers Note');
 			video.infoPanel.brandEl.parentElement.should.equal(video.infoPanel.infoEl);
 
-			// can format video duration (ms) in m:ss
-			video.infoPanel.durationEl.textContent.should.equal('4:59');
-			video.infoPanel.durationEl.parentElement.should.equal(video.infoPanel.infoEl);
 		});
 
 		it('should be able to create a placeholder with a play button', () => {