8 files changed, 68 insertions, 1 deletions

diff --git a/src/scss/base/_body.scss b/src/scss/base/_body.scss
new file mode 100644
index 0000000..0310cde
--- /dev/null
+++ b/src/scss/base/_body.scss
@@ -0,0 +1,4 @@
+body {
+  background-color: $color-grey-light;
+  font-family: Archivo, sans-serif;
+}
diff --git a/src/scss/base/_types.scss b/src/scss/base/_types.scss
new file mode 100644
index 0000000..6f9c9ef
--- /dev/null
+++ b/src/scss/base/_types.scss
@@ -0,0 +1,3 @@
+body {
+  @include iota-type( $type-16);
+}
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index e69de29..5bd66d9 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -0,0 +1,40 @@
+$button-padding : $baseline-x2 $baseline-x4;
+$button-bgcolor : $color-blue;
+$button-bgcolor-hover : darken($color-blue, 10%);
+$button-color : $color-white;
+$button-radius : 3px;
+
+$button-outline-padding : ( $baseline-x2 - 2 )( $baseline-x3 - 2 );
+$button-outline-bgcolor: transparent;
+$button-outline-color: $color-blue;
+$button-outline-color-hover: darken( $color-blue, 10% );
+
+.c-button {
+  padding: $button-padding;
+  display: inline-block;
+  font: inherit;
+  color: $button-color;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  background-color: $button-bgcolor;
+  border-radius: $button-radius;
+}
+
+.c-button:hover { background-color: $button-bgcolor-hover;}
+
+.c-button--outline {
+  padding: $button-outline-padding;
+  color: $button-outline-color;
+  border: 1px solid $button-outline-color;
+  background-color: $button-outline-bgcolor;
+}
+
+.c-button--outline:hover {
+  color: #1893E0;
+  border-color: $button-outline-color-hover;
+  background-color: $button-outline-bgcolor;
+}
diff --git a/src/scss/components/_card.scss b/src/scss/components/_card.scss
new file mode 100644
index 0000000..2370918
--- /dev/null
+++ b/src/scss/components/_card.scss
@@ -0,0 +1,8 @@
+.c-card {
+  padding: $baseline-x5;
+  background: rgba($color-white, 0.8);
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(28,45,157,0.28);
+}
+
+.c-card--light { background: rgba($color-white, 0.5)}
diff --git a/src/scss/components/_link.scss b/src/scss/components/_link.scss
new file mode 100644
index 0000000..ec9fa4e
--- /dev/null
+++ b/src/scss/components/_link.scss
@@ -0,0 +1,9 @@
+.c-link {
+  text-decoration: none;
+  color: $color-white;
+  font-weight: bold;
+}
+
+.c-link:hover {
+  opacity: 0.8;
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 5270a83..aaf5e9e 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -18,6 +18,8 @@
 //@import 'objects/media';
 @import 'objects/type';
 
+@import 'components/button';
+@import 'components/card';
 //@import 'utilities/align-items';
 //@import 'utilities/align';
 @import 'utilities/bgcolor';
diff --git a/src/scss/objects/_media.scss b/src/scss/objects/_media.scss
index 2c52f87..580c4ad 100644
--- a/src/scss/objects/_media.scss
+++ b/src/scss/objects/_media.scss
@@ -6,7 +6,7 @@
  * Type: Boolean
  */
 
-$iota-objs-media-aligned: false;
+$iota-objs-media-aligned: true;
 
 
 /**
diff --git a/src/scss/settings/_colors.scss b/src/scss/settings/_colors.scss
index 2a9704d..3be07a9 100644
--- a/src/scss/settings/_colors.scss
+++ b/src/scss/settings/_colors.scss
@@ -4,6 +4,7 @@ $color-red: #FC4A33;
 $color-grey: #A3ADBF;
 $color-grey-light: #F5F5F7;
 $color-white: #FFFFFF;
+$color-blue: #38B2FF;
 
 $colors: (
   'black' : $color-black,