diff --git a/site/content/blog/2018-04-18-version-2.md b/site/content/blog/2018-04-18-version-2.md
index 1fcd6a131c..75239c1023 100644
--- a/site/content/blog/2018-04-18-version-2.md
+++ b/site/content/blog/2018-04-18-version-2.md
@@ -21,6 +21,11 @@ Each of these items is described in more depth below. If you get stuck, ask for
 		list-style: none;
 	}
 
+	li {
+		position: relative;
+		list-style: none;
+	}
+
 	li input {
 		position: absolute;
 		left: -2.5em;
diff --git a/site/src/components/top-nav.html b/site/src/components/top-nav.html
index 7e0a870f3d..2f685a1366 100644
--- a/site/src/components/top-nav.html
+++ b/site/src/components/top-nav.html
@@ -27,45 +27,6 @@
 	}
 </script>
 
-<div class='{open ? "open": "closed"} mousecatcher' on:click="{() => open = false}" />
-
-<header>
-	<a href='.' class='logo' title='Homepage'>
-		<Logo size={40} />
-		<h2 class='logotype'>Svelte</h2>
-	</a>
-
-	<div class='flex-auto' />
-
-	<span class='menu-link' on:click="{toggleOpen}">
-		{#if open}
-		<Icon name='close' />
-		{:else}
-		<Icon name='menu' />
-		{/if}
-	</span>
-
-	<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
-		<div class='flex-auto' />
-		<ul class='primary'>
-			<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li>
-			<li><a rel='prefetch' class='{segment === "repl" ? "active": ""}' href='repl'>REPL</a></li>
-			<li><a rel='prefetch' class='{segment === "blog" ? "active": ""}' href='blog'>Blog</a></li>
-			<li><a href='https://sapper-redesign.now.sh'>Sapper</a></li>
-		</ul>
-
-		<div class='flex-auto' />
-		<ul class='primary'>
-			<li><a href='https://discord.gg/yy75DKs' title='Discord Chat'>
-					<Icon name='message-square' />
-				</a></li>
-			<li><a href='https://github.com/sveltejs/svelte' title='Github Repo'>
-					<Icon name='github' />
-				</a></li>
-		</ul>
-	</nav>
-</header>
-
 <style>
 	/* Unfortunately I'm not able to  understand mousecatcher */
 	.mousecatcher {
@@ -101,7 +62,7 @@
 		padding: 0 var(--side-nav);
 		margin: 0 auto;
 		background-color: rgba(255, 255, 255, .93);
-		box-shadow: 0 .3rem .9rem -.2rem rgba(0,0,0,.5);
+		box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
 		font-family: var(--font-ui);
 		z-index: 10;
 	}
@@ -120,6 +81,12 @@
 		user-select: none;
 	}
 
+	h2 {
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		font-weight: 300;
+	}
+
 	.open {
 		transform: translate(-5rem,0);
 		transition: transform .2s var(--out-cubic);
@@ -152,22 +119,33 @@
 	.logo {
 		position: relative;
 		top: .3rem;
-		width: 16rem;
+		width: 18rem;
 		color: var(--second);
 		-webkit-tap-highlight-color: transparent;
 		-webkit-touch-callout: none;
 		z-index: 11;
+		padding: 0.5em 0;
 	}
 
 	.logotype {
 		display: none;
 		font-size: 2.8rem;
 		letter-spacing: .12em;
+		line-height: 1;
+		margin: 0;
 	}
 
-	.logo :global(svg) {
-		float: left;
-		margin-right: .6rem;
+	.home {
+		position: relative;
+		top: 0;
+		width: 18rem;
+		color: var(--second);
+		-webkit-tap-highlight-color: transparent;
+		-webkit-touch-callout: none;
+		z-index: 11;
+		padding: 0.5rem 0 0.3rem 4.2rem;
+		background: url(/logo.svg) 0 50% no-repeat;
+		background-size: auto 100%;
 	}
 
 	.active {
@@ -202,4 +180,45 @@
 
 		.logotype { display: block }
 	}
-</style>
\ No newline at end of file
+</style>
+
+<div class='{open ? "open": "closed"} mousecatcher' on:click="{() => open = false}" />
+
+<header>
+	<span class='menu-link' on:click="{toggleOpen}">
+		{#if open}
+			<Icon name='close' />
+		{:else}
+			<Icon name='menu' />
+		{/if}
+	</span>
+
+	<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
+		<a href='.' class="home" title='Homepage'>
+			<h2 class='logotype'>Svelte</h2>
+		</a>
+
+		<ul class='primary'>
+			<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li>
+			<li><a rel='prefetch' class='{segment === "repl" ? "active": ""}' href='repl'>REPL</a></li>
+			<li><a rel='prefetch' class='{segment === "blog" ? "active": ""}' href='blog'>Blog</a></li>
+			<li><a href='https://sapper-redesign.now.sh'>Sapper</a></li>
+
+			<li>
+				<a href='https://discord.gg/yy75DKs' title='Discord Chat'>
+					<Icon name='message-square' />
+				</a>
+			</li>
+
+			<li>
+				<a href='https://github.com/sveltejs/svelte' title='Github Repo'>
+					<Icon name='github' />
+				</a>
+			</li>
+		</ul>
+
+		<!-- <ul class='secondary'>
+
+		</ul> -->
+	</nav>
+</header>
\ No newline at end of file
diff --git a/site/src/routes/blog/[slug].html b/site/src/routes/blog/[slug].html
index 698ef2d7ec..e4df419cb3 100644
--- a/site/src/routes/blog/[slug].html
+++ b/site/src/routes/blog/[slug].html
@@ -14,11 +14,11 @@
 </svelte:head>
 
 <article class='post linkify listify'>
+	<p class='byline'><a href='{post.metadata.authorURL}'>{post.metadata.author}</a> <time datetime='{post.metadata.pubdate}'>{post.metadata.dateString}</time></p>
+
 	<h1>{post.metadata.title}</h1>
 	<p class='standfirst'>{post.metadata.description}</p>
 
-	<p class='byline'><a href='{post.metadata.authorURL}'>{post.metadata.author}</a> <time datetime='{post.metadata.pubdate}'>{post.metadata.dateString}</time></p>
-
 	{@html post.html}
 </article>
 
@@ -29,8 +29,8 @@
 
 	.byline {
 		font-size: 0.8em;
-		border-top: 1px solid #eee;
-		padding: 0.5em 0;
+		border-bottom: 1px solid #eee;
+		padding: 0;
 	}
 
 	.post h1 {
@@ -39,9 +39,7 @@
 	}
 
 	.post :global(h2) {
-		margin-top: 16rem;
-		padding: 4rem 1.6rem 5.6rem;
-		border-top: var(--border-w) solid var(--second);
+		margin: 2em 0 0.5em 0;
 		color: var(--second);
 	}
 
@@ -63,7 +61,9 @@
 	}
 
 	.standfirst {
-		font-size: var(--h2);
+		font-size: var(--h4);
+		color: var(--second);
+		margin: 0 0 2em 0;
 	}
 
 	.post :global(aside) {
diff --git a/site/src/routes/blog/index.html b/site/src/routes/blog/index.html
index 95d0daae4e..c21a3d823d 100644
--- a/site/src/routes/blog/index.html
+++ b/site/src/routes/blog/index.html
@@ -13,78 +13,110 @@
 	<title>Svelte • The magical disappearing UI framework</title>
 </svelte:head>
 
-<div class='posts grid stretch'>
+<div class='posts stretch'>
 	{#each posts as post}
-	<article class='post'>
-		<a rel='prefetch' href='blog/{post.slug}' title='Read the article »'>
-			<h2>{post.metadata.title}</h2>
-			<p>{post.metadata.description}</p>
-		</a>
-
-		<div class='byline'>
-			<a href='{post.metadata.authorURL}'>{post.metadata.author}</a>
-			<time datetime='{post.metadata.pubdate}'>{post.metadata.dateString}</time>
-		</div>
-	</article>
+		<article class='post' data-pubdate={post.metadata.dateString}>
+			<a rel='prefetch' href='blog/{post.slug}' title='Read the article »'>
+				<h2>{post.metadata.title}</h2>
+				<p>{post.metadata.description}</p>
+			</a>
+		</article>
 	{/each}
 </div>
 
 <style>
 	.posts {
+		/* display: grid; */
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 1em;
 		/* prevent scroll bar pop-in when navigating to post */
 		/* yes this is hacktacular */
 		min-height: calc(100vh - var(--nav-h));
 
 		padding: 10rem var(--side-page);
-		background-color: var(--back-light)
+		/* background-color: var(--back-light) */
 	}
 
 	.post {
-		display: flex;
+		/* display: flex;
 		flex-direction: column;
 		flex-wrap: wrap;
 		justify-content: space-between;
 		align-items: center;
-		padding: 4rem 3.2rem 2.4rem;
-		background-color: var(--back);
-		border-radius: var(--border-r);
-		box-shadow: .2rem .2rem .8rem .1rem rgba(58, 58, 58, .25);
-		text-align: center;
+		padding: 4rem 3.2rem 2.4rem; */
 	}
 
 	h2 {
 		display: inline-block;
-		margin: 1.6rem 0;
+		margin: 2rem 0 0.5rem 0;
 		color: var(--second);
-		max-width: 18em;
+		/* max-width: 18em; */
+		font-size: 2rem;
 	}
 
-	.post > p {
+	.post:first-child {
+		margin: 0 0 2em 0;
+		border-bottom: 1px solid #eee;
+	}
+
+	.post:first-child h2 {
+		font-size: 4rem;
+	}
+
+	.post:first-child::before {
+		content: 'Latest post • ' attr(data-pubdate);
+		font-weight: 300;
+		color: #aaa;
+		text-transform: uppercase;
+	}
+
+	.post:nth-child(2)::before {
+		content: 'Older posts';
+		font-weight: 300;
+		color: #aaa;
+		text-transform: uppercase;
+	}
+
+	/* .post:first-child .byline::after {
+		content: 'Latest post';
+		font-weight: 700;
+		color: var(--second);
+		text-transform: uppercase;
+		margin-left: 1em;
+	} */
+
+
+	.post p {
 		font-size: var(--h5);
 		max-width: 30em;
+		color: var(--second);
 	}
 
 	/* fast link-reset */
-	.posts a { all: unset; cursor: pointer }
+	/* .posts a { all: unset; cursor: pointer } */
+
+	.post > a {
+		display: block;
+	}
 
 	.posts a:hover,
 	.posts a:hover > h2 {
 		color: var(--flash)
 	}
 
-
 	.byline {
-		width: 100%;
-		margin-top: 4rem;
+		/* width: 100%; */
 		padding: 1.6rem 0 0 0;
-		border-top: var(--border-w) solid var(--second);
+		/* border-bottom: 1px solid var(--second); */
 		font: 300 var(--code-fs)/1.7 var(--font-mono);
 	}
 
+	time {
+		/* border-bottom: 1px solid var(--second); */
+	}
+
 	.byline a {
-		display: block;
 		color: var(--second);
-		font-weight: 600;
 	}
 
 	.byline a:hover { color: var(--flash) }
diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.html
index 0363f182e1..7b92baf531 100644
--- a/site/src/routes/guide/index.html
+++ b/site/src/routes/guide/index.html
@@ -128,9 +128,10 @@
 
 	.content h2 {
 		margin-top: 16rem;
-		padding: 4rem 1.6rem 5.6rem;
+		padding: 2rem 1.6rem 5.6rem 0.2rem;
 		border-top: var(--border-w) solid var(--second);
 		color: var(--second);
+		line-height: 1;
 	}
 
 	.content section:first-of-type > h2 {
@@ -140,7 +141,8 @@
 	.content :global(h3),
 	.content :global(h3 > code) {
 		pointer-events: none;
-		font: 300 var(--h3) var(--font-ui);
+		font-weight: 700;
+		font-size: var(--h3);
 		color: black;
 		padding: 6.4rem 0 1.6rem 0;
 	}
@@ -172,7 +174,7 @@
 	section :global(blockquote::before) {
 		content: ' ';
 		position: absolute;
-		top: 1.8rem;
+		top: 1.5rem;
 		left: 3.2rem;
 		width: 3rem;
 		height: 3rem;
diff --git a/site/src/routes/index.html b/site/src/routes/index.html
index c080e25c1a..8ec6287e32 100644
--- a/site/src/routes/index.html
+++ b/site/src/routes/index.html
@@ -133,7 +133,8 @@
 	.logo > h1 {
 		margin: 2rem 0;
 		font-size: 4.8rem;
-		color: var(--second);
+		color: var(--header);
+		font-weight: 300;
 	}
 
 	.logo > h2 {
diff --git a/site/src/template.html b/site/src/template.html
index 839cdeab30..2e68c15b2c 100644
--- a/site/src/template.html
+++ b/site/src/template.html
@@ -8,10 +8,11 @@
 	%sapper.base%
 
 	<link rel='stylesheet' href='global.css'>
+	<link href=prism.css rel=stylesheet>
 	<link rel='manifest' href='manifest.json'>
 	<link rel='icon' type='image/png' href='favicon.png'>
 
-	<link href="https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Overpass+Mono|Overpass:300,700" rel="stylesheet">
 
 	<!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is
diff --git a/site/static/global.css b/site/static/global.css
index 4d2117da51..ee8f1b648a 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -86,7 +86,7 @@ a:focus {
 -----------------------------------------------
 */
 :root {
-	--nav-h:      10rem;
+	--nav-h:       6rem;
 	--top-offset:  6rem;
 	--sidebar-w:  24rem;
 	--code-w:      48em;
@@ -110,7 +110,8 @@ a:focus {
 	--prime:      #ff3e00;
 	--second:     #676778;
 	--flash:       #40b3ff;
-	--text:       #a19e9b; /* hsl(36, 3%, 62%) */
+	--heading:    #333;
+	--text:       #555; /* hsl(36, 3%, 62%) */
 	--border-w:   .3rem;     /* border-width  */
 	--border-r:   .4rem;     /* border-radius */
 }
@@ -122,8 +123,8 @@ a:focus {
 	--h6:      1.4rem;
 	--h5:      1.6rem;
 	--h4:      1.8rem;
-	--h3:      1.6rem;
-	--h2:        2rem;
+	--h3:      2.4rem;
+	--h2:        3rem;
 	--h1:      3.2rem;
 	--linemax:   32em;      /* max line-length */
 	--lh:      calc(4/2.2); /* base line-height */
@@ -136,11 +137,12 @@ body {
 	color: var(--text);
 }
 
-h1, h2, h3, h4, h5, h6, p, li, blockquote {
-	margin-bottom: .8rem;
+h1, h2, h3, h4, h5, h6, li, blockquote {
+	margin: 0;
+	color: var(--heading);
 }
 
-h1, h2, h3, h4, h5, h6 { font-weight: 300 }
+h1, h2, h3, h4, h5, h6 { font-weight: 700 }
 h6 { font-size: var(--h6) }
 h5 { font-size: var(--h5) }
 h4 { font-size: var(--h4) }
@@ -148,6 +150,11 @@ h3 { font-size: var(--h3) }
 h2 { font-size: var(--h2) }
 h1 { font-size: var(--h1) }
 
+p {
+	line-height: 1.35;
+	margin: 0 0 1em 0;
+}
+
 .b, b, strong { font-weight: 500 }
 
 i, em {
@@ -181,22 +188,14 @@ tt, code, kbd, samp {
 /*	opinionated styles --------------------- */
 h1, h2 {
 	font-family: var(--font-alt);
-	letter-spacing: 0.17em;
-	text-transform: uppercase;
-	line-height: calc(4/2.5);
+	line-height: 1.2;
 	pointer-events: none;
 }
 
-h1 { letter-spacing: 0.1em }
-
 li:not(.white) > h2 {
 	color: var(--second)
 }
 
-h3 {
-	font-family: var(--font-ui);
-}
-
 blockquote {
 	position: relative;
 	margin: 1.6rem 0 2.4rem;
@@ -207,6 +206,10 @@ blockquote {
 	max-width: 38.3em;
 }
 
+blockquote :last-child {
+	margin: 0;
+}
+
 
 /*  buttons -------------------------------- */
 button {
@@ -294,7 +297,7 @@ button[outline] {
   visibility: hidden;
 	transform: scaleX(0);
 	transform-origin: left center;
-  transition: all .3s var(--out-back);
+  transition: all .15s var(--out-cubic);
   z-index: -1;
 }
 
@@ -317,8 +320,9 @@ a:hover > .icon { stroke: var(--flash) }
 
 .listify ol > li,
 .listify ul > li {
-  margin-bottom: 0.8rem;
   max-width: calc(var(--linemax) - var(--list-padding));
+  line-height: 1.35;
+  margin: 0 0 0.8em 0;
 }
 
 .listify ul > li:before {
diff --git a/site/static/logo.svg b/site/static/logo.svg
new file mode 100644
index 0000000000..19988afd96
--- /dev/null
+++ b/site/static/logo.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
+	<path style="fill:#ff3e00" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
+	<path style="fill:white" d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
+</svg>
+
+<!-- <style>
+	.logo {
+		position: relative;
+		vertical-align: middle;
+		stroke-miterlimit: 10;
+		stroke-width: 3.5;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+</style> -->
\ No newline at end of file
diff --git a/site/static/prism.css b/site/static/prism.css
new file mode 100644
index 0000000000..2cb2978996
--- /dev/null
+++ b/site/static/prism.css
@@ -0,0 +1,95 @@
+/*
+-----------------------------------------------
+	syntax-highlighting [prism]
+-----------------------------------------------
+*/
+
+/*	colors --------------------------------- */
+pre[class*='language-'] {
+	--background: var(--back-light);
+	--base:       #9b978b;
+	--comment:    #afbfcf;
+	--keyword:    #5ba3d3;
+	--function:   #db794b;
+	--string:     #b69b61;
+	--number:     #86af75;
+	--tags:       var(--function);
+	--important:  var(--string);
+}
+
+/*	type-base ------------------------------ */
+code[class*='language-'],
+pre[class*='language-'] {
+	background: none;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	font: 300 var(--code-fs)/1.7 var(--font-mono);
+	color: var(--base);
+	tab-size: 2;
+	-webkit-hyphens: none;
+	hyphens: none;
+}
+
+/*	code-blocks ---------------------------- */
+pre[class*='language-'] {
+	overflow: auto;
+	padding: 3.2rem 4rem;
+	margin: .8rem 0 2.4rem;
+	max-width: var(--code-w);
+	border-radius: var(--border-r);
+	box-shadow: 0.1rem 0.1rem 0.3rem rgba(68, 68, 68, 0.25) inset;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+	background: var(--background);
+}
+
+/*	tokens --------------------------------- */
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata       { color: var(--comment) }
+
+.token.punctuation { color: var(--base) }
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted      { color: var(--tags) }
+
+.token.boolean,
+.token.number       { color: var(--number) }
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted      { color: var(--string) }
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable       { color: var(--base) }
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name     { color: var(--function) }
+
+.token.keyword        { color: var(--keyword) }
+
+.token.regex,
+.token.important      { color: var(--important) }
+
+.token.important,
+.token.bold   { font-weight: bold }
+.token.italic { font-style: italic }
+.token.entity { cursor: help }
\ No newline at end of file