diff --git a/src/styles/components/_alerts.scss b/src/styles/components/_alerts.scss
deleted file mode 100644
index b09bcb8..0000000
--- a/src/styles/components/_alerts.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.alerts {
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    margin: 0;
-    padding: 0 .35rem 0 1rem;
-
-    height: 40px;
-    width: 100vw;
-
-    border-top-width: 1px;
-    border-top-style: solid;
-
-    z-index: 2;
-
-    .alert-info,
-    .alert-success,
-    .alert-failure {
-        position: absolute;
-        display: flex;
-        align-items: center;
-
-        height: 100%;
-        width: 100%;
-
-        font-family: "Montserrat", sans-serif;
-        font-size: .6rem;
-
-        .alert-icon {
-            margin-right: 1rem;
-
-            width: 16px;
-            height: 16px;
-        }
-    }
-
-    .alert-info .alert-icon {
-        color: $color-blue;
-        fill: $color-blue;
-    }
-
-    .alert-success .alert-icon {
-        color: $color-green;
-        fill: $color-green;
-    }
-
-    .alert-failure .alert-icon {
-        color: $color-red;
-        fill: $color-red;
-    }
-}
diff --git a/src/styles/components/_app.scss b/src/styles/components/_app.scss
index 0841b06..a2d6722 100644
--- a/src/styles/components/_app.scss
+++ b/src/styles/components/_app.scss
@@ -15,15 +15,13 @@
         height: 50px;
         width: 100vw;
 
-        border-bottom-width: 1px;
-        border-bottom-style: solid;
-
         -webkit-app-region: drag;
 
         &-controls,
         &-buttons,
         &-title {
             display: flex;
+            outline: none;
         }
 
         &-controls {
@@ -32,9 +30,6 @@
 
         &-title {
             justify-self: center;
-
-            font-family: "Montserrat", sans-serif;
-            font-size: .75rem;
         }
 
         &-buttons {
diff --git a/src/styles/components/_controls.scss b/src/styles/components/_controls.scss
index 313a9d5..a294212 100644
--- a/src/styles/components/_controls.scss
+++ b/src/styles/components/_controls.scss
@@ -13,16 +13,11 @@
         height: 14px;
 
         margin: 0 10px 0 0;
+        padding: 0;
 
-        border-width: 0;
-        border-radius: 100%;
-
+        outline: none;
         transition: all 100ms ease;
 
         -webkit-app-region: no-drag;
     }
-
-    .control-close:hover    { background-color: $color-red; }
-    .control-maximize:hover { background-color: $color-green; }
-    .control-minimize:hover { background-color: $color-yellow; }
 }
diff --git a/src/styles/components/_editor-formula.scss b/src/styles/components/_editor-formula.scss
index a4c07f4..1539f7b 100644
--- a/src/styles/components/_editor-formula.scss
+++ b/src/styles/components/_editor-formula.scss
@@ -4,7 +4,12 @@
     }
 
     &-editor {
-        &,
+        padding: 0;
+        margin: 7px;
+
+        overflow-x: auto;
+        overflow-y: auto;
+
         .CodeMirror {
             height: 105px;
 
@@ -14,14 +19,6 @@
         }
     }
 
-    &-editor {
-        padding: 0;
-        margin: 7px;
-
-        overflow-x: auto;
-        overflow-y: auto;
-    }
-
     &-help {
         &-group {
             padding: 7px;
diff --git a/src/styles/components/_editor-preview.scss b/src/styles/components/_editor-preview.scss
index 95e5690..6ee5547 100644
--- a/src/styles/components/_editor-preview.scss
+++ b/src/styles/components/_editor-preview.scss
@@ -1,112 +1,10 @@
 .editor-preview {
     width: 100%;
-    height: calc(100vh - 90px);
+    height: calc(100vh - 50px + 1rem);
 
     overflow-x: auto;
     overflow-y: auto;
 
-    font-size: 1rem;
-    line-height: 2rem;
-
-    padding: 1rem 2.5rem;
+    padding: 1rem;
     margin: 0;
-
-    p {
-        font-family: "Source Sans Pro", Helvetica, sans-serif;
-    }
-
-    ul {
-        margin-left: 2rem;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        font-family: "Montserrat", Helvetica, sans-serif;
-    }
-
-    hr {
-        border-width: 0;
-
-        height: 1px;
-        width: 100%;
-
-        margin-bottom: 3rem;
-        margin-top: 3rem;
-    }
-
-    a {
-        color: inherit;
-
-        text-transform: none;
-        text-decoration: underline;
-    }
-
-    abbr {
-        border-bottom-width: 1px;
-        border-bottom-style: dashed;
-    }
-
-    .block-embed {
-        width: 100%;
-        height: 60%;
-        max-height: 50vh;
-
-        iframe {
-            display: block;
-
-            width: 85%;
-            height: 100%;
-
-            margin: 3rem auto;
-            padding: 0;
-        }
-    }
-
-    .contains-task-list {
-        list-style: none;
-
-        margin: 0 0 1rem;
-        padding: 0;
-
-        .task-list-item {
-            line-height: 30px;
-
-            .task-list-item-checkbox {
-                -webkit-appearance: button;
-
-                position: relative;
-                display: inline-block;
-                vertical-align: middle;
-
-                padding: 0;
-                margin: 0 1rem;
-
-                width: 22px;
-                height: 22px;
-
-                border-width: 2px;
-                border-style: solid;
-                border-color: $color-green;
-                border-radius: 100%;
-
-                &[checked] {
-                    &:after {
-                        position: absolute;
-                        top: 0; left: 0;
-
-                        content: "✓";
-                        color: $color-green;
-
-                        width: 18px;
-                        height: 18px;
-
-                        line-height: 18px;
-                        text-align: center;
-
-                        font-size: 10px;
-                        font-weight: 900;
-                    }
-                }
-            }
-        }
-    }
 }
diff --git a/src/styles/components/qilin/_reset.scss b/src/styles/components/qilin/_reset.scss
index e2d46c5..53fa675 100644
--- a/src/styles/components/qilin/_reset.scss
+++ b/src/styles/components/qilin/_reset.scss
@@ -1,5 +1,6 @@
 body {
-    font-family: "Source Sans Pro", Helvetica, sans-serif;
+    font-size: $font-size;
+    font-family: $font-main;
     font-weight: 400;
     font-style: normal;
 
diff --git a/src/styles/configuration/_colors.scss b/src/styles/configuration/_colors.scss
index 81850e2..5dd57ed 100644
--- a/src/styles/configuration/_colors.scss
+++ b/src/styles/configuration/_colors.scss
@@ -1,4 +1,4 @@
-$color-red      : #d54343;
-$color-blue     : #14a2ff;
-$color-green    : #3ac748;
-$color-yellow   : #fabc40;
+$color-red: #d54343 !default;
+$color-blue: #14a2ff !default;
+$color-green: #3ac748 !default;
+$color-yellow: #fabc40 !default;
diff --git a/src/styles/configuration/_typo.scss b/src/styles/configuration/_typo.scss
new file mode 100644
index 0000000..cdcd3c4
--- /dev/null
+++ b/src/styles/configuration/_typo.scss
@@ -0,0 +1,4 @@
+$font-main: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
+$font-head: helvetica, sans-serif !default;
+$font-serif: serif !default;
+$font-size: 14px !default;
diff --git a/src/styles/fonts/montserrat/Montserrat.ttf b/src/styles/fonts/montserrat/Montserrat.ttf
deleted file mode 100644
index 626355a..0000000
Binary files a/src/styles/fonts/montserrat/Montserrat.ttf and /dev/null differ
diff --git a/src/styles/fonts/montserrat/Montserrat.woff b/src/styles/fonts/montserrat/Montserrat.woff
deleted file mode 100644
index 2601c75..0000000
Binary files a/src/styles/fonts/montserrat/Montserrat.woff and /dev/null differ
diff --git a/src/styles/fonts/montserrat/_Montserrat.scss b/src/styles/fonts/montserrat/_Montserrat.scss
deleted file mode 100644
index e85aa7b..0000000
--- a/src/styles/fonts/montserrat/_Montserrat.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@font-face {
-    font-family: "Montserrat";
-    src: url(fonts/montserrat/Montserrat.woff) format('woff'),
-    url(fonts/montserrat/Montserrat.ttf) format('truetype');
-}
diff --git a/src/styles/fonts/sourcesanspro/SourceSansPro.ttf b/src/styles/fonts/sourcesanspro/SourceSansPro.ttf
deleted file mode 100644
index 278ad8a..0000000
Binary files a/src/styles/fonts/sourcesanspro/SourceSansPro.ttf and /dev/null differ
diff --git a/src/styles/fonts/sourcesanspro/SourceSansPro.woff b/src/styles/fonts/sourcesanspro/SourceSansPro.woff
deleted file mode 100644
index 666612f..0000000
Binary files a/src/styles/fonts/sourcesanspro/SourceSansPro.woff and /dev/null differ
diff --git a/src/styles/fonts/sourcesanspro/_SourceSansPro.scss b/src/styles/fonts/sourcesanspro/_SourceSansPro.scss
deleted file mode 100644
index 3392118..0000000
--- a/src/styles/fonts/sourcesanspro/_SourceSansPro.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@font-face {
-    font-family: "Source Sans Pro";
-    src: url(fonts/sourcesanspro/SourceSansPro.woff) format('woff'),
-    url(fonts/sourcesanspro/SourceSansPro.ttf) format('truetype');
-}
diff --git a/src/styles/template.scss b/src/styles/template.scss
index 9e7dc95..10f1459 100644
--- a/src/styles/template.scss
+++ b/src/styles/template.scss
@@ -1,7 +1,5 @@
-@import "configuration/colors";
-
-@import "fonts/montserrat/Montserrat",
-        "fonts/sourcesanspro/SourceSansPro";
+@import "configuration/colors",
+        "configuration/typo";
 
 @import "~wireframe-framework/scss/content/typography",
         "~wireframe-framework/scss/content/table",
@@ -24,7 +22,6 @@
         "components/states/isHidden",
 
         "components/app",
-        "components/alerts",
         "components/controls",
         "components/editor-formula",
         "components/editor-preview";
diff --git a/src/styles/themes/dark/components/_app.scss b/src/styles/themes/dark/components/_app.scss
new file mode 100644
index 0000000..af9dbe2
--- /dev/null
+++ b/src/styles/themes/dark/components/_app.scss
@@ -0,0 +1,6 @@
+.app {
+    &-header {
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+    }
+}
diff --git a/src/styles/themes/dark/components/_controls.scss b/src/styles/themes/dark/components/_controls.scss
index c83413d..2a6bc1a 100644
--- a/src/styles/themes/dark/components/_controls.scss
+++ b/src/styles/themes/dark/components/_controls.scss
@@ -1,12 +1,21 @@
-.control-close,
-.control-maximize,
-.control-minimize {
-    background-color: darken($color-text-dark, 20%);
-    background-image: linear-gradient(darken($color-text-dark, 20%), darken($color-text-dark, 25%));
-}
+.controls-container {
+    .control-close,
+    .control-maximize,
+    .control-minimize {
+        border-width: 0;
+        border-radius: 100%;
+    }
+
+    .control-close,
+    .control-maximize,
+    .control-minimize {
+        background-color: darken($color-text-dark, 20%);
+        background-image: linear-gradient(darken($color-text-dark, 20%), darken($color-text-dark, 25%));
+    }
 
-.control-close:hover,
-.control-maximize:hover,
-.control-minimize:hover {
-    background-image: none;
+    .control-close:hover,
+    .control-maximize:hover,
+    .control-minimize:hover {
+        background-image: none;
+    }
 }
diff --git a/src/styles/themes/dark/components/markdown/_embed.scss b/src/styles/themes/dark/components/markdown/_embed.scss
new file mode 100644
index 0000000..3fede4d
--- /dev/null
+++ b/src/styles/themes/dark/components/markdown/_embed.scss
@@ -0,0 +1,15 @@
+.block-embed {
+    width: 100%;
+    height: 60%;
+    max-height: 50vh;
+
+    iframe {
+        display: block;
+
+        width: 85%;
+        height: 100%;
+
+        margin: 2rem auto;
+        padding: 0;
+    }
+}
diff --git a/src/styles/themes/dark/components/markdown/_formula.scss b/src/styles/themes/dark/components/markdown/_formula.scss
new file mode 100644
index 0000000..8706d80
--- /dev/null
+++ b/src/styles/themes/dark/components/markdown/_formula.scss
@@ -0,0 +1,3 @@
+.maths-formula {
+    padding: .5rem 0;
+}
diff --git a/src/styles/themes/dark/components/markdown/_todo.scss b/src/styles/themes/dark/components/markdown/_todo.scss
new file mode 100644
index 0000000..3b4c7ce
--- /dev/null
+++ b/src/styles/themes/dark/components/markdown/_todo.scss
@@ -0,0 +1,38 @@
+.contains-task-list {
+    list-style: none;
+
+    margin: 0 0 1rem;
+    padding: 0;
+
+    .task-list-item {
+        line-height: 30px;
+
+        .task-list-item-checkbox {
+            -webkit-appearance: none;
+
+            position: relative;
+            vertical-align: middle;
+
+            width: 20px;
+            height: 20px;
+
+            &:after {
+                line-height: 15px;
+                text-align: center;
+
+                font-size: 20px;
+                font-weight: 900;
+            }
+
+            &:not([checked]):after {
+                content: "×";
+                color: $color-red;
+            }
+
+            &[checked]:after {
+                content: "✓";
+                color: $color-green;
+            }
+        }
+    }
+}
diff --git a/src/styles/themes/dark/components/markdown/_typo.scss b/src/styles/themes/dark/components/markdown/_typo.scss
new file mode 100644
index 0000000..4cf9787
--- /dev/null
+++ b/src/styles/themes/dark/components/markdown/_typo.scss
@@ -0,0 +1,95 @@
+.typo {
+    p {
+        line-height: 2rem;
+
+        margin: 1rem 0 .5rem;
+        padding: 0;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin: 1.5rem 0 0;
+        padding: 0;
+    }
+
+    h1 {
+        font-size: 3rem;
+        line-height: 3rem;
+
+        margin-bottom: 1rem;
+    }
+
+    h2 {
+        font-size: 2.25rem;
+        line-height: 2.25rem;
+
+        margin-bottom: 1rem;
+    }
+
+    h3 {
+        font-size: 1.75rem;
+        line-height: 1.75rem;
+    }
+
+    h4 {
+        font-size: 1.35rem;
+        line-height: 1.5rem;
+    }
+
+    h5 {
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+    }
+
+    h6 {
+        font-size: 1rem;
+        line-height: 1.5rem;
+    }
+
+    ul, ol {
+        margin: 1.5rem 0;
+        padding: 0 1.5rem;
+
+        li {
+            line-height: 1.5rem;
+        }
+
+        ul, ol {
+            margin: 0;
+        }
+    }
+
+    blockquote {
+        line-height: 1.5rem;
+
+        margin-top: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    code {
+        vertical-align: bottom;
+
+        line-height: 1.25rem;
+    }
+
+    hr {
+        border-width: 0;
+
+        height: 1px;
+        width: 100%;
+
+        margin-bottom: 3rem;
+        margin-top: 3rem;
+    }
+
+    a {
+        color: inherit;
+
+        text-transform: none;
+        text-decoration: underline;
+    }
+
+    abbr {
+        border-bottom-width: 1px;
+        border-bottom-style: dashed;
+    }
+}
diff --git a/src/styles/themes/dark/index.scss b/src/styles/themes/dark/index.scss
index 95dd674..5240b3b 100644
--- a/src/styles/themes/dark/index.scss
+++ b/src/styles/themes/dark/index.scss
@@ -8,6 +8,11 @@
 
     @import "./components/qilin/button",
             "./components/qilin/popup",
+            "./components/markdown/formula",
+            "./components/markdown/embed",
+            "./components/markdown/todo",
+            "./components/markdown/typo",
+            "./components/app",
             "./components/controls",
             "./components/editor-formula",
             "./components/editor-preview";
diff --git a/src/styles/themes/light/components/_app.scss b/src/styles/themes/light/components/_app.scss
new file mode 100644
index 0000000..af9dbe2
--- /dev/null
+++ b/src/styles/themes/light/components/_app.scss
@@ -0,0 +1,6 @@
+.app {
+    &-header {
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+    }
+}
diff --git a/src/styles/themes/light/components/_controls.scss b/src/styles/themes/light/components/_controls.scss
index de6ea54..890dd83 100644
--- a/src/styles/themes/light/components/_controls.scss
+++ b/src/styles/themes/light/components/_controls.scss
@@ -1,7 +1,16 @@
-.control-close    { background-color: $color-red; }
-.control-maximize { background-color: $color-green; }
-.control-minimize { background-color: $color-yellow; }
+.controls-container {
+    .control-close,
+    .control-maximize,
+    .control-minimize {
+        border-width: 0;
+        border-radius: 100%;
+    }
 
-.control-close:hover    { background-color: darken($color-red, 10%) !important; }
-.control-maximize:hover { background-color: darken($color-green, 10%) !important; }
-.control-minimize:hover { background-color: darken($color-yellow, 10%) !important; }
+    .control-close    { background-color: $color-red; }
+    .control-maximize { background-color: $color-green; }
+    .control-minimize { background-color: $color-yellow; }
+
+    .control-close:hover    { background-color: darken($color-red, 10%) !important; }
+    .control-maximize:hover { background-color: darken($color-green, 10%) !important; }
+    .control-minimize:hover { background-color: darken($color-yellow, 10%) !important; }
+}
diff --git a/src/styles/themes/light/components/markdown/_embed.scss b/src/styles/themes/light/components/markdown/_embed.scss
new file mode 100644
index 0000000..3fede4d
--- /dev/null
+++ b/src/styles/themes/light/components/markdown/_embed.scss
@@ -0,0 +1,15 @@
+.block-embed {
+    width: 100%;
+    height: 60%;
+    max-height: 50vh;
+
+    iframe {
+        display: block;
+
+        width: 85%;
+        height: 100%;
+
+        margin: 2rem auto;
+        padding: 0;
+    }
+}
diff --git a/src/styles/themes/light/components/markdown/_formula.scss b/src/styles/themes/light/components/markdown/_formula.scss
new file mode 100644
index 0000000..8706d80
--- /dev/null
+++ b/src/styles/themes/light/components/markdown/_formula.scss
@@ -0,0 +1,3 @@
+.maths-formula {
+    padding: .5rem 0;
+}
diff --git a/src/styles/themes/light/components/markdown/_todo.scss b/src/styles/themes/light/components/markdown/_todo.scss
new file mode 100644
index 0000000..3b4c7ce
--- /dev/null
+++ b/src/styles/themes/light/components/markdown/_todo.scss
@@ -0,0 +1,38 @@
+.contains-task-list {
+    list-style: none;
+
+    margin: 0 0 1rem;
+    padding: 0;
+
+    .task-list-item {
+        line-height: 30px;
+
+        .task-list-item-checkbox {
+            -webkit-appearance: none;
+
+            position: relative;
+            vertical-align: middle;
+
+            width: 20px;
+            height: 20px;
+
+            &:after {
+                line-height: 15px;
+                text-align: center;
+
+                font-size: 20px;
+                font-weight: 900;
+            }
+
+            &:not([checked]):after {
+                content: "×";
+                color: $color-red;
+            }
+
+            &[checked]:after {
+                content: "✓";
+                color: $color-green;
+            }
+        }
+    }
+}
diff --git a/src/styles/themes/light/components/markdown/_typo.scss b/src/styles/themes/light/components/markdown/_typo.scss
new file mode 100644
index 0000000..4cf9787
--- /dev/null
+++ b/src/styles/themes/light/components/markdown/_typo.scss
@@ -0,0 +1,95 @@
+.typo {
+    p {
+        line-height: 2rem;
+
+        margin: 1rem 0 .5rem;
+        padding: 0;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin: 1.5rem 0 0;
+        padding: 0;
+    }
+
+    h1 {
+        font-size: 3rem;
+        line-height: 3rem;
+
+        margin-bottom: 1rem;
+    }
+
+    h2 {
+        font-size: 2.25rem;
+        line-height: 2.25rem;
+
+        margin-bottom: 1rem;
+    }
+
+    h3 {
+        font-size: 1.75rem;
+        line-height: 1.75rem;
+    }
+
+    h4 {
+        font-size: 1.35rem;
+        line-height: 1.5rem;
+    }
+
+    h5 {
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+    }
+
+    h6 {
+        font-size: 1rem;
+        line-height: 1.5rem;
+    }
+
+    ul, ol {
+        margin: 1.5rem 0;
+        padding: 0 1.5rem;
+
+        li {
+            line-height: 1.5rem;
+        }
+
+        ul, ol {
+            margin: 0;
+        }
+    }
+
+    blockquote {
+        line-height: 1.5rem;
+
+        margin-top: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    code {
+        vertical-align: bottom;
+
+        line-height: 1.25rem;
+    }
+
+    hr {
+        border-width: 0;
+
+        height: 1px;
+        width: 100%;
+
+        margin-bottom: 3rem;
+        margin-top: 3rem;
+    }
+
+    a {
+        color: inherit;
+
+        text-transform: none;
+        text-decoration: underline;
+    }
+
+    abbr {
+        border-bottom-width: 1px;
+        border-bottom-style: dashed;
+    }
+}
diff --git a/src/styles/themes/light/index.scss b/src/styles/themes/light/index.scss
index a210a69..631a07c 100644
--- a/src/styles/themes/light/index.scss
+++ b/src/styles/themes/light/index.scss
@@ -8,6 +8,11 @@
 
     @import "./components/qilin/button",
             "./components/qilin/popup",
+            "./components/markdown/formula",
+            "./components/markdown/embed",
+            "./components/markdown/todo",
+            "./components/markdown/typo",
+            "./components/app",
             "./components/controls",
             "./components/editor-formula",
             "./components/editor-preview";