diff --git a/assets/scss/_admonition.scss b/assets/scss/_admonition.scss
index 6c0743b..5949187 100644
--- a/assets/scss/_admonition.scss
+++ b/assets/scss/_admonition.scss
@@ -1,3 +1,27 @@
+//Admonition colors
+$admonition-background: (
+  'note': rgba(68, 138, 255, 0.1),
+  'info': rgba(0, 184, 212, 0.1),
+  'tip': rgba(0, 191, 165, 0.1),
+  'success': rgba(0, 200, 83, 0.1),
+  'warning': rgba(255, 145, 0, 0.1),
+  'failure': rgba(255, 82, 82, 0.1),
+  'danger': rgba(255, 23, 68, 0.1),
+  'bug': rgba(245, 0, 87, 0.1),
+  ) !default;
+
+$admonition-color: (
+  'note': #448aff,
+  'info': #00b8d4,
+  'tip': #00bfa5,
+  'success': #00c853,
+  'warning': #ff9100,
+  'failure': #ff5252,
+  'danger': #ff1744,
+  'bug': #f50057,
+  ) !default;
+
+// Admonition styling
 .admonition{
     position: relative;
     margin: 1rem 0 1.5rem 0;
diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
new file mode 100644
index 0000000..0cbe62b
--- /dev/null
+++ b/assets/scss/_colors.scss
@@ -0,0 +1,8 @@
+// Default Colors
+$theme: hsl(172, 99%, 26%);
+$text: hsl(204, 28%, 93%);
+$light-grey: #494f5c;
+$dark-grey: #3B3E48;
+$highlight-grey: #7d828a;
+$midnightblue: #2c3e50;
+$typewriter: hsl(172, 100%, 36%);
\ No newline at end of file
diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss
new file mode 100644
index 0000000..a382984
--- /dev/null
+++ b/assets/scss/_fonts.scss
@@ -0,0 +1,3 @@
+// Default Fonts
+$fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
+$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
diff --git a/assets/scss/_predefined.scss b/assets/scss/_predefined.scss
index 2defe61..0866d69 100644
--- a/assets/scss/_predefined.scss
+++ b/assets/scss/_predefined.scss
@@ -1,39 +1,3 @@
-// Colors
-$theme: hsl(172, 99%, 26%);
-$text: hsl(204, 28%, 93%);
-$light-grey: #494f5c;
-$dark-grey: #3B3E48;
-$highlight-grey: #7d828a;
-$midnightblue: #2c3e50;
-$typewriter: hsl(172, 100%, 36%);
-
-// Fonts
-$fonts: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
-$code-fonts: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
-
-//Admonition
-$admonition-background: (
-  'note': rgba(68, 138, 255, 0.1),
-  'info': rgba(0, 184, 212, 0.1),
-  'tip': rgba(0, 191, 165, 0.1),
-  'success': rgba(0, 200, 83, 0.1),
-  'warning': rgba(255, 145, 0, 0.1),
-  'failure': rgba(255, 82, 82, 0.1),
-  'danger': rgba(255, 23, 68, 0.1),
-  'bug': rgba(245, 0, 87, 0.1),
-  ) !default;
-
-$admonition-color: (
-  'note': #448aff,
-  'info': #00b8d4,
-  'tip': #00bfa5,
-  'success': #00c853,
-  'warning': #ff9100,
-  'failure': #ff5252,
-  'danger': #ff1744,
-  'bug': #f50057,
-  ) !default;
-
 // Mixins
 @mixin dimmed {
   opacity: .6;
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index b472c35..ce3024e 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,4 +1,6 @@
 @import "predefined.scss";
+@import "colors.scss";
+@import "fonts.scss";
 @import "normalize.scss";
 @import "syntax.scss";
 @import "animate.scss";