Adding typography information

1 files changed, 13 insertions, 7 deletions

diff --git a/web-ui/app/scss/style-guide.scss b/web-ui/app/scss/style-guide.scss
index 77efdfa8..f1b31ddd 100644
--- a/web-ui/app/scss/style-guide.scss
+++ b/web-ui/app/scss/style-guide.scss
@@ -18,13 +18,16 @@ nav {
 
 ul li {
   display: inline;
+}
 
-  a {
-    color: $primary_color;
-  }
-  a:hover {
-    color: lighten($primary_color, 15%);
-  }
+ul.typography li {
+  display: inline-block;
+  text-align: center;
+  margin: 20px 10px 0 0;
+  padding: 30px;
+  min-height: 125px;
+  min-width: 130px;
+  border: 1px solid #EEE;
 }
 
 ul.left, ul.right {
@@ -43,7 +46,7 @@ section.guide-section {
   display: block;
   height: 100%;
   overflow-y: auto;
-  padding: 82px 32px;
+  padding: 66px 32px;
 }
 
 .color-swatch {
@@ -58,6 +61,9 @@ section.guide-section {
 .color-label {
   position: relative;
   top: 173px;
+}
+
+.color-label, .typeface-sample {
   background-color: white;
   border: 1px solid #eee;
   text-align: center;