Minor style additions

components/Footer.js

@@ -1,18 +1,40 @@
 import React from 'react'
+import Link from 'next/link'
 
 const Footer = (props) => (
   <div className="footer">
-    <span>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs ¬</a></span>
+    <div>
+      <Link href="/about"><a>about</a></Link>
+      <a href="#">send feedback</a>
+      <a href="#">tweet</a>
+      <a href="#">star</a>
+    </div>
+    <div>a project by <a href="https://twitter.com/dawn_labs">@dawn_labs</a> ¬</div>
     <style jsx>{`
+      .footer {
+        margin: 48px 0;
+      }
+
       div {
+        text-align: center;
         font-size: 14px;
-        margin: 32px 0;
+        margin: 16px 0;
-        color: rgba(255, 255, 255, 0.5);
+        color: #777;
       }
+
       a {
-        color: #C694E8;
+        margin-right: 16px;
+        color: #fff;
         text-decoration: none;
       }
+
+      a:last-child {
+        margin-right: 0;
+      }
+
+      a:hover {
+        border-bottom: 1px solid #fff;
+      }
     `}</style>
   </div>
 )

components/Header.js

@@ -4,13 +4,13 @@ import Logo from './svg/Logo'
 const Header = (props) => (
   <div className="header">
     <div className="header-content">
-      <Logo />
+      <a href="/"><Logo /></a>
-      <h1>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h1>
+      <h2>The easiest way to create images from source code. Start typing, or drag a file into the text area to get started.</h2>
     </div>
     <style jsx>{`
       .header {
-        margin: 40px 0 48px;
+        margin: 36px 0 72px;
-        width: 648px;
+        width: 632px;
       }
 
       .header-content {
@@ -19,11 +19,13 @@ const Header = (props) => (
         align-items: center;
       }
 
-      h1 {
+      .header-content a {
-        max-width: 472px;
+        height: 128px;
-        font-size: 20px;
+      }
-        line-height: 1.5;
+
-        color: #fff;
+      h2 {
+        margin-top: 0;
+        max-width: 456px;
       }
     `}</style>
   </div>

components/Meta.js

@@ -25,9 +25,14 @@ export default () => (
     <style jsx global>{`
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+        color: #fff;
         background: #000;
       }
 
+      h1, h2, h3, h4, h5, h6 {
+        font-weight: 500;
+      }
+
       *, *:after, *:before {
         margin: 0;
         padding: 0;

lib/constants.js

@@ -230,7 +230,7 @@ export const LANGUAGES = [
 ]
 
 export const PALETTE = {
-  EDITOR_BG: '#1A1A1A',
+  EDITOR_BG: '#000',
   SECONDARY: '#fff'
 }