Style /about page

components/Footer.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import Link from 'next/link'
+import { PALETTE } from '../lib/constants'
 
 const Footer = (props) => (
   <div className="footer">
@@ -19,7 +20,7 @@ const Footer = (props) => (
         text-align: center;
         font-size: 14px;
         margin: 16px 0;
-        color: #777;
+        color: ${PALETTE.GRAY};
       }
 
       a {

components/Meta.js

@@ -26,7 +26,7 @@ export default () => (
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
         color: #fff;
-        background: #000;
+        background: #121212;
       }
 
       h1, h2, h3, h4, h5, h6 {
@@ -43,7 +43,8 @@ export default () => (
       }
 
       ::selection {
-          background-color: rgba(256, 256, 256, 0.165);
+        background: rgba(255,255,255,.99);
+        color: #121212;
       }
 
       #toolbar > div {

components/svg/Logo.js

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export default () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 280 280">
+  <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 280 280">
     <g fill="#F8E81C" fillRule="evenodd">
       <path fillRule="nonzero" d="M140,280 C62.680135,280 0,217.319865 0,140 C0,62.680135 62.680135,0 140,0 C217.319865,0 280,62.680135 280,140 C280,217.319865 217.319865,280 140,280 Z M140,272 C212.901587,272 272,212.901587 272,140 C272,67.098413 212.901587,8 140,8 C67.098413,8 8,67.098413 8,140 C8,212.901587 67.098413,272 140,272 Z M140.501845,259.926199 C74.5455954,259.926199 21.0774908,206.458095 21.0774908,140.501845 C21.0774908,74.5455954 74.5455954,21.0774908 140.501845,21.0774908 C206.458095,21.0774908 259.926199,74.5455954 259.926199,140.501845 C259.926199,206.458095 206.458095,259.926199 140.501845,259.926199 Z M140.501845,251.926199 C202.039817,251.926199 251.926199,202.039817 251.926199,140.501845 C251.926199,78.9638734 202.039817,29.0774908 140.501845,29.0774908 C78.9638734,29.0774908 29.0774908,78.9638734 29.0774908,140.501845 C29.0774908,202.039817 78.9638734,251.926199 140.501845,251.926199 Z"/>
       <g transform="translate(49 118)">

lib/constants.js

@@ -230,8 +230,9 @@ export const LANGUAGES = [
 ]
 
 export const PALETTE = {
-  EDITOR_BG: '#000',
+  EDITOR_BG: '#121212',
-  SECONDARY: '#fff'
+  SECONDARY: '#fff',
+  GRAY: '#646464'
 }
 
 export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)

pages/about.js

@@ -2,7 +2,7 @@ import Page from '../components/Page'
 import Meta from '../components/Meta'
 import Header from '../components/Header'
 import Footer from '../components/Footer'
-
+import { PALETTE } from '../lib/constants'
 
 export default () => (
   <Page>
@@ -14,16 +14,16 @@ export default () => (
       <div className="mb4">
         <h2>How do I use it?</h2>
         <h4 className="mb0">Import</h4>
-        <p className="mt2 mb1">There are a few different ways to import code into Carbon:</p>
+        <p className="mb1 mt2">There are a few different ways to import code into Carbon:</p>
-        <ul className="mt0">
+        <ul className="mt0 mb3">
           <li>Drag a file into the editor</li>
           <li>Append a GitHub Gist id to the url</li>
           <li>Paste your code directly</li>
         </ul>
-        <h4>Customization</h4>
+        <h4 className="mb0">Customization</h4>
-        <p>Once you've got all of your code into Carbon, you can customize your image by changing the syntax theme, background color, window theme, or padding.</p>
+        <p className="mt2 mb3">Once you've got all of your code into Carbon, you can customize your image by changing the syntax theme, background color, window theme, or padding.</p>
-        <h4>Export/Sharing</h4>
+        <h4 className="mb0">Export/Sharing</h4>
-        <p>After you've customized your image, you can copy a link to the image, save it, or share it on Twitter.</p>
+        <p className="mt2">After you've customized your image, you can copy a link to the image, save it, or share it on Twitter.</p>
       </div>
       <div className="mb4">
         <h2>I want to make this better.</h2>
@@ -31,8 +31,8 @@ export default () => (
       </div>
     </div>
     <style jsx>{`
-      p, li {
+      h4 {
-        color: #777;
+        color: ${PALETTE.GRAY};
       }
 
       ul {