diff --git a/web-frontend/public/index.html b/web-frontend/public/index.html
index dca1ac55b..af8e57354 100755
--- a/web-frontend/public/index.html
+++ b/web-frontend/public/index.html
@@ -5,9 +5,65 @@
<title>Baserow</title>
</head>
<body>
- <h1>
- Baserow components
- <i class="fas fa-igloo"></i>
- </h1>
+ <h1>Baserow</h1>
+ <h2>Links</h2>
+ <p style="padding: 20px;">
+ Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
+ </p>
+ <h2>Buttons</h2>
+ <div style="padding: 20px">
+ <a href="#" class="button">Sign in</a>
+ <a href="#" class="button disabled">Sign in</a>
+ <a href="#" class="button button-success">Sign in</a>
+ <a href="#" class="button button-warning">Sign in</a>
+ <a href="#" class="button button-error">Sign in</a>
+ <a href="#" class="button">
+ Sign in
+ <i class="button-icon fas fa-lock-open"></i>
+ </a>
+ <a href="#" class="button">
+ <i class="button-icon fas fa-arrow-left"></i>
+ Go back
+ </a>
+ <a href="#" class="button button-ghost">Go back</a>
+ <a href="#" class="button">
+ <i class="fas fa-user-check"></i>
+ </a>
+ <a href="#" class="button button-ghost">
+ <i class="fas fa-user-check"></i>
+ </a>
+ </div>
+ <div style="padding: 20px">
+ <button class="button">Sign in</button>
+ <button class="button" disabled>Sign in</button>
+ <button class="button button-success">Sign in</button>
+ <button class="button button-warning">Sign in</button>
+ <button class="button button-error">Sign in</button>
+ <button class="button">
+ Sign in
+ <i class="button-icon fas fa-lock-open"></i>
+ </button>
+ <button class="button">
+ <i class="button-icon fas fa-arrow-left"></i>
+ Go back
+ </button>
+ <button class="button button-ghost">Go back</button>
+ </div>
+ <div style="padding: 20px">
+ <a href="#" class="button button-large">Sign in</a>
+ <a href="#" class="button button-large disabled">Sign in</a>
+ <a href="#" class="button button-large button-success">Sign in</a>
+ <a href="#" class="button button-large button-warning">Sign in</a>
+ <a href="#" class="button button-large button-error">Sign in</a>
+ <a href="#" class="button button-large">
+ Sign in
+ <i class="button-icon fas fa-lock-open"></i>
+ </a>
+ <a href="#" class="button button-large">
+ <i class="button-icon fas fa-arrow-left"></i>
+ Go back
+ </a>
+ <a href="#" class="button button-large button-ghost">Go back</a>
+ </div>
</body>
</html>
diff --git a/web-frontend/src/scss/_vendors.scss b/web-frontend/src/scss/_vendors.scss
index 8a78aacf3..69e940569 100644
--- a/web-frontend/src/scss/_vendors.scss
+++ b/web-frontend/src/scss/_vendors.scss
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i");
+
@import "~normalize.css/normalize.css";
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
diff --git a/web-frontend/src/scss/abstracts/_mixins.scss b/web-frontend/src/scss/abstracts/_mixins.scss
new file mode 100644
index 000000000..bf264f539
--- /dev/null
+++ b/web-frontend/src/scss/abstracts/_mixins.scss
@@ -0,0 +1,20 @@
+@mixin button-style($background, $active-background, $color: #ffffff) {
+ background-color: $background;
+ color: $color;
+
+ &:active {
+ background-color: $active-background;
+ }
+
+ &.disabled,
+ &[disabled] {
+ background-color: $background;
+ }
+}
+
+@mixin button-size($font-size, $height, $left-right-space) {
+ font-size: $font-size;
+ height: $height;
+ line-height: $height;
+ padding: 0 $left-right-space;
+}
diff --git a/web-frontend/src/scss/abstracts/_variables.scss b/web-frontend/src/scss/abstracts/_variables.scss
index 55f269cd2..2633487a1 100644
--- a/web-frontend/src/scss/abstracts/_variables.scss
+++ b/web-frontend/src/scss/abstracts/_variables.scss
@@ -1,3 +1,5 @@
+$text-font-stack: 'Open Sans', sans-serif;
+
// primary colors
$color-primary-100: #ebf7ff !default;
$color-primary-200: #b5dbf5 !default;
diff --git a/web-frontend/src/scss/base/_base.scss b/web-frontend/src/scss/base/_base.scss
new file mode 100644
index 000000000..96d988502
--- /dev/null
+++ b/web-frontend/src/scss/base/_base.scss
@@ -0,0 +1,17 @@
+html,
+body{
+ height: 100%;
+}
+
+html {
+ box-sizing: border-box;
+}
+
+*, *::before,
+*::after {
+ box-sizing: inherit;
+}
+
+:focus {
+ outline: 0;
+}
diff --git a/web-frontend/src/scss/base/_typography.scss b/web-frontend/src/scss/base/_typography.scss
new file mode 100644
index 000000000..ea8511b6e
--- /dev/null
+++ b/web-frontend/src/scss/base/_typography.scss
@@ -0,0 +1,23 @@
+html{
+ font-size: 62.5%;
+}
+
+body {
+ color: $color-primary-900;
+ font-family: $text-font-stack;
+ font-size: 13px;
+}
+
+a {
+ color: $color-primary-500;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+p {
+ color: $color-neutral-500;
+ line-height: 170%;
+}
diff --git a/web-frontend/src/scss/components/_button.scss b/web-frontend/src/scss/components/_button.scss
new file mode 100644
index 000000000..9afb0e081
--- /dev/null
+++ b/web-frontend/src/scss/components/_button.scss
@@ -0,0 +1,57 @@
+.button {
+ cursor:pointer;
+ display: inline-block;
+ margin-bottom: 0;
+ color: #ffffff;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ text-align: center;
+ vertical-align: middle;
+ text-decoration: none;
+ border-radius: 3px;
+
+ @include button-size(14px, 32px, 12px);
+ @include button-style($color-primary-500, $color-primary-600);
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4)
+ }
+
+ &.disabled,
+ &[disabled] {
+ cursor: not-allowed;
+ opacity: 0.65;
+ box-shadow: none;
+ }
+}
+
+.button-large {
+ @include button-size(15px, 44px, 28px);
+}
+
+.button-success {
+ @include button-style($color-success-500, $color-success-600);
+}
+
+.button-warning {
+ @include button-style($color-warning-500, $color-warning-600);
+}
+
+.button-error {
+ @include button-style($color-error-500, $color-error-600);
+}
+
+.button-ghost {
+ @include button-style(#ffffff, $color-neutral-100, $color-primary-900);
+ border-color: $color-neutral-400;
+}
+
+.button-icon {
+ margin: 0 2px;
+
+ &.button-large {
+ margin: 0 3px;
+ }
+}
diff --git a/web-frontend/src/scss/default.scss b/web-frontend/src/scss/default.scss
index 2e84f3f77..157419f8b 100755
--- a/web-frontend/src/scss/default.scss
+++ b/web-frontend/src/scss/default.scss
@@ -1,3 +1,9 @@
@import "abstracts/variables";
+@import "abstracts/mixins";
@import "vendors";
+
+@import "base/base";
+@import "base/typography";
+
+@import "components/button";