SYS-2135 Adding system font

addons/background/src/BackgroundPanel.tsx

@@ -1,11 +1,19 @@
 import * as React from "react";
 
 import Swatch from "./Swatch";
+import assign = require("object-assign");
+
+const style = {
+  font: {
+    fontFamily: "-apple-system,'.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
+    fontSize: "14px",
+  },
+};
 
 export interface BackgroundDetail {
   name?: string;
   value: string;
-}
+};
 
 export interface BackgroundPanelProps {
   channel: NodeJS.EventEmitter;
@@ -33,8 +41,25 @@ export default class BackgroundPanel extends React.Component<BackgroundPanelProp
 
     if (!backgrounds.length) {
       return (
-        <div style={{padding: "20px"}}>
-          <h5>Setup Instructions</h5>
+        <div style={assign({ padding: "20px" }, style.font)}>
+          <h5 style={{ fontSize: "16px" }}>Setup Instructions</h5>
+          <p>Please add the background decorator definition to your story.
+          The background decorate accepts an array of items, which should include a
+          name for your color (preferably the class name) and the corresponding color / image value.</p>
+          <p>Below is an example of how to add the background decorator to your story definition.</p>
+          <pre style={assign({
+            padding: "30px",
+            display: "block",
+            background: "rgba(19,19,19,0.9)",
+            color: "rgba(255,255,255,0.95)",
+            marginTop: "15px",
+            lineHeight: "1.75em",
+          })}>
+            .addDecorator(backgrounds([<br />
+              { name: "light-primary", value: "#f1f1f1" },<br />
+              { name: "light-secondary", value: "#ddd" },<br />
+            ]));
+          </pre>
         </div>
       );
     }

addons/background/src/Swatch.tsx

@@ -26,6 +26,10 @@ const style = {
   soft: { paddingLeft: "10px", paddingRight: "10px" },
   hard: { padding: "0" },
   flush: { margin: "0" },
+  font: {
+    fontFamily: "-apple-system, '.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
+    fontSize: "14px",
+  },
 };
 
 export interface BackgroundItemProps {
@@ -62,10 +66,10 @@ export default class Swatch extends React.Component<BackgroundItemProps, any> {
         >
         </div>
         <div style={assign({}, style.listStyle, style.soft)}>
-          <h4 style={{ float: "left" }}>
+          <h4 style={assign({ float: "left", fontWeight: "bold" }, style.font)}>
             {this.props.name}:
           </h4>
-          <h4 style={{ float: "right" }}>
+          <h4 style={assign({ float: "right", fontWeight: "normal" }, style.font)}>
             <em>{this.props.value}</em>
           </h4>
         </div>