diff --git a/revitron_sphinx_theme/breadcrumbs.html b/revitron_sphinx_theme/breadcrumbs.html
index 1218a6bc5..d0055ae53 100644
--- a/revitron_sphinx_theme/breadcrumbs.html
+++ b/revitron_sphinx_theme/breadcrumbs.html
@@ -15,7 +15,7 @@
 		{% block breadcrumbs_aside %}
 			<li class="wy-breadcrumbs-aside">
 			{% if theme_github_url %}
-				<a href="{{ theme_github_url }}" class="fa fa-github-alt"></a>
+				<a href="{{ theme_github_url }}" class="fa fa-github"></a>
 			{% endif %}
 			</li>
 		{% endblock %}
diff --git a/revitron_sphinx_theme/landing.html b/revitron_sphinx_theme/landing.html
index acd3a8d21..15a03e8bb 100644
--- a/revitron_sphinx_theme/landing.html
+++ b/revitron_sphinx_theme/landing.html
@@ -18,8 +18,8 @@
 	<div class="container">
 		<div class="rst-content">
 			{% block body %}{% endblock %}
+			{% include "footer.html" %}
 		</div>
-		{% include "footer.html" %}
 	</div>
 	
 {% endblock %}
\ No newline at end of file
diff --git a/src/sass/_colors.sass b/src/sass/_colors.sass
new file mode 100644
index 000000000..47363f11e
--- /dev/null
+++ b/src/sass/_colors.sass
@@ -0,0 +1,38 @@
+\:root
+		
+	--hue: 212
+	--sat: 6%
+	
+	--bg: hsl(var(--hue), var(--sat), 95%)
+	--bg-nav: var(--bg)
+	--bg-nav-current: hsl(var(--hue), var(--sat), 20%)
+	--bg-nav-current-list: hsl(var(--hue), var(--sat), 91.3%)
+	--bg-nav-hover: hsl(var(--hue), var(--sat), 87%)
+	--bg-code: hsl(var(--hue), var(--sat), 91.6%)
+	--bg-code-highlight: hsl(var(--hue), var(--sat), 88.5%)
+	--bg-panel: var(--bg-code)
+
+	--text: hsl(var(--hue), var(--sat), 18%)
+	--link: inherit 
+	--nav: hsl(var(--hue), var(--sat), 18%)
+	--nav-current: var(--bg)
+	--code: hsl(var(--hue), var(--sat), 18%)
+	--headline: var(--text)
+	
+	--border: hsl(var(--hue), var(--sat), 85%)
+	--muted: hsl(var(--hue), var(--sat), 72%)
+	--info-text: var(--bg)
+	--info-bg: hsl(var(--hue), var(--sat), 20%)
+	--danger-text: hsl(10, 70%, 92%)
+	--danger-bg: hsl(10, 72%, 56%)
+	--warning-text: hsl(59, 70%, 18%)
+	--warning-bg: hsl(59, 76%, 65%)
+	
+	--bg-highlight: #fff9a3
+
+	--font-weight-factor: 1.05
+
+	* 
+		-webkit-font-smoothing: antialiased !important
+		-moz-osx-font-smoothing: grayscale !important
+
diff --git a/src/sass/_theme_breadcrumbs.sass b/src/sass/_theme_breadcrumbs.sass
index af073a315..f63ae78a4 100644
--- a/src/sass/_theme_breadcrumbs.sass
+++ b/src/sass/_theme_breadcrumbs.sass
@@ -4,12 +4,13 @@
 .wy-breadcrumbs li
 	display: inline-block
 	line-height: 2.3rem
+	color: $nav-color
 	&.wy-breadcrumbs-aside
 		float: right
 	> a
 		display: inline-block
 		padding: 5px
-		color: $text
+		color: $nav-color
 		text-decoration: none !important
 		&:hover, &:active
 			color: $muted !important
diff --git a/src/sass/_theme_code.sass b/src/sass/_theme_code.sass
index 4e22c5f16..2445101d4 100644
--- a/src/sass/_theme_code.sass
+++ b/src/sass/_theme_code.sass
@@ -5,13 +5,13 @@
 .highlight-python,
 pre, code
 	font-weight: 400
-	font-size: 0.94rem !important
+	font-size: 1rem !important
 	line-height: 1.6 !important
 	border: none !important
 	background-color: $bg-code !important
 
 pre
-	padding: $space-s !important
+	padding: ($space-s * 0.85) $space-s !important
 	code 
 		padding: 0
 
@@ -21,7 +21,7 @@ pre
 	padding-left: $space-s !important
 	padding-right: $space-s !important
 	font-weight: 500
-	background-color: darken($bg-code, 3%) !important
+	background-color: $bg-code-highlight !important
 
 .linenos pre
 	padding-right: 0.4rem !important
diff --git a/src/sass/_theme_container.sass b/src/sass/_theme_container.sass
index 335616819..57dffeb20 100644
--- a/src/sass/_theme_container.sass
+++ b/src/sass/_theme_container.sass
@@ -4,19 +4,21 @@
 		margin: $margin-rst 0
 
 	.large p
-		font-size: 150%
+		font-size: 160%
 		line-height: 1.5
-		font-weight: 500
+		font-weight: calc(450 * var(--font-weight-factor))
 	.buttons
 		a 
 			display: inline-block
-			font-size: 1.25rem
+			font-size: 1.35rem
 			line-height: 2.5
-			margin-right: 0.5rem
-			padding: 0 1.75rem
+			margin-right: 0.5em
+			padding: 0 1.5em
 			border: 2px solid $border 
 			text-decoration: none
-			font-weight: 700
+			font-weight: calc(620 * var(--font-weight-factor))
+			border-radius: 100px
+			color: $text
 			+transition(all .2s)
 			&:hover 
 				border-color: $text
diff --git a/src/sass/_theme_landing.sass b/src/sass/_theme_landing.sass
index 6d8ef7fec..e6a48af4b 100644
--- a/src/sass/_theme_landing.sass
+++ b/src/sass/_theme_landing.sass
@@ -14,6 +14,7 @@
 					padding: 0 0.75em !important
 					font-size: 1em
 					line-height: 3.5rem
+					color: $nav-color
 					+transition(all .2s)
 					&:hover 
 						color: $muted
@@ -31,10 +32,11 @@
 
 	.rst-content
 		h1 
-			margin-top: 3.6rem
+			margin-top: 3.65rem
 			margin-bottom: 1.8rem 
-			font-size: 3rem
-			font-weight: 720
+			font-size: 3.1rem
+			font-weight: calc(700 * var(--font-weight-factor))
+			letter-spacing: -0.02em
 
 			.headerlink
 				display: none !important
@@ -49,10 +51,10 @@
 @media screen and (max-width: $nav-media-query)
 	.landing 
 		.navbar ul 
-			padding: 0 (($gutter / 2) - 0.75em)
+			padding: 0 (($gutter / 1.5) - 0.75em)
 		body > .container 
 			margin: 4.5rem auto
-			padding: 0 $gutter / 2
+			padding: 0 $gutter / 1.5
 
 +media(new-breakpoint(min-width $nav-media-query 12))
 	.landing .navbar
diff --git a/src/sass/_theme_layout.sass b/src/sass/_theme_layout.sass
index 47f492c19..c52a4b234 100644
--- a/src/sass/_theme_layout.sass
+++ b/src/sass/_theme_layout.sass
@@ -2,22 +2,22 @@
 html
 	font-size: 14px
 	background-color: $bg
-+media(new-breakpoint(min-width 410px 12))
++media(new-breakpoint(min-width 480px 12))
 	html
 		font-size: 15px
 +media(new-breakpoint(min-width 1400px 12))
 	html
 		font-size: 16px
-+media(new-breakpoint(min-width 1600px 12))
++media(new-breakpoint(min-width 1700px 12))
 	html
 		font-size: 17px
-+media(new-breakpoint(min-width 1800px 12))
++media(new-breakpoint(min-width 1900px 12))
 	html
 		font-size: 18px
 
 body
 	background-color: $bg
-	font-weight: 450
+	font-weight: calc(450 * var(--font-weight-factor))
 
 .wy-affix
 	position: fixed
@@ -93,7 +93,7 @@ body
 .wy-nav-top
 	display: none
 	background: $nav-search-background-color
-	color: $nav-search-color
+	color: $nav-color
 	padding: 0 $gutter / 2
 	border-bottom: $hairline
 	position: relative
@@ -103,7 +103,7 @@ body
 	+clearfix
 	a
 		color: inherit
-		font-weight: bold
+		font-weight: calc(700 * var(--font-weight-factor))
 		+font-smooth
 		margin: 1rem $gutter / 2
 	img
@@ -168,7 +168,7 @@ footer
 		line-height: 2.5rem
 		box-shadow: none
 		border: none
-		font-weight: 700
+		font-weight: calc(700 * var(--font-weight-factor))
 		&:hover 
 			color: $muted !important
 			background-color: $bg !important
diff --git a/src/sass/_theme_nav.sass b/src/sass/_theme_nav.sass
index 12e3cd995..aa4ad3936 100644
--- a/src/sass/_theme_nav.sass
+++ b/src/sass/_theme_nav.sass
@@ -14,17 +14,17 @@
 		padding: $space-nav $gutter
 		margin: $space-s 0 0 0
 		display: block
-		font-weight: 700
+		font-weight: calc(700 * var(--font-weight-factor))
 	& > :first-child
 		margin-top: 0 !important
 		
 	li.current 
-		background-color: $bg-panel !important
+		background-color: $bg-nav-current-list !important
 
 	li
-		
 		a
 			color: $nav-color
+			+transition(background-color 0.2s)
 			&:hover
 				background: $bg-nav-hover !important
 		code
@@ -116,7 +116,7 @@
 	li ul li a
 		margin-bottom: 0
 		color: $nav-color
-		font-weight: normal
+		font-weight: calc(450 * var(--font-weight-factor))
 	a
 		line-height: 18px
 		padding: $space-nav $gutter
@@ -150,15 +150,16 @@
 		border: 2px solid $border-search
 		background-color: transparent !important
 		-webkit-appearance: none !important
-		padding: 0 1rem
-		margin: 0 calc(-1rem - 2px)
+		padding: 0 1.1rem
+		margin: 0 calc(-1.1rem - 2px)
 		line-height: 2.6rem
-		font-weight: 700
+		font-weight: calc(450 * var(--font-weight-factor))
 		box-shadow: none
 		font-size: inherit
-		color: $nav-search-color
+		color: $text
+		border-radius: 100px
 		&:focus
-			border-color: $nav-search-color
+			border-color: $text
 			&::placeholder 
 				color: transparent;
 			&:-ms-input-placeholder  
@@ -167,22 +168,22 @@
 				color: transparent;
 
 	::placeholder 
-		color: $text;
+		color: $nav-search-color;
 	
 	:-ms-input-placeholder  
-		color: $text;
+		color: $nav-search-color;
 	
 	::-ms-input-placeholder 
-		color: $text;
+		color: $nav-search-color;
 
 	.brand
 		min-height: 9.5rem
 		height: 9.5rem
 		max-height: 9.5rem
 		> a	
-			color: $nav-search-color
+			color: $text
 			font-size: 100%
-			font-weight: bold
+			font-weight: calc(700 * var(--font-weight-factor))
 			display: inline-block
 			padding: 0
 			padding-top: 5px
@@ -200,9 +201,9 @@
 
 .wy-nav .wy-menu-vertical
 	header
-		color: $link-color
+		color: $text
 	a
-		color: $text-light
+		color: $text
 		&:hover
 			background-color: $link-color
 			color: $bg
diff --git a/src/sass/_theme_rst.sass b/src/sass/_theme_rst.sass
index 277eb9703..9926ab40d 100644
--- a/src/sass/_theme_rst.sass
+++ b/src/sass/_theme_rst.sass
@@ -20,23 +20,27 @@
 		letter-spacing: -0.02em
 		margin-top: 6.4rem
 		margin-bottom: $space-m + 0.18rem
-		font-weight: 720
+		font-weight: calc(700 * var(--font-weight-factor))
+		color: $headline
 
 	h2
 		font-size: 1.8rem
 		line-height: 1.25
-		letter-spacing: -0.02em
+		letter-spacing: -0.01em
 		margin-top: $space-m * 1.25
 		margin-bottom: $margin-rst !important
-		font-weight: 680
+		font-weight: calc(680 * var(--font-weight-factor))
 
 	h3, ul.search a
 		font-size: 1.5rem
 		line-height: 1.3
-		letter-spacing: -0.02em
+		letter-spacing: -0.01em
 		margin-top: $space-m
 		margin-bottom: $margin-rst !important
-		font-weight: 620
+		font-weight: calc(620 * var(--font-weight-factor))
+		color: $headline
+		&:after 
+			border: none !important
 
 	ul.search li a 
 		display: inline-block
@@ -44,30 +48,47 @@
 	h4
 		font-size: 1.3rem
 		line-height: 1.4
-		letter-spacing: -0.02em
+		letter-spacing: -0.01em
 		margin-top: $margin-rst
 		margin-bottom: $margin-rst !important
-		font-weight: 450
+		font-weight: calc(450 * var(--font-weight-factor))
+		color: $headline
 
 	h5
 		font-size: 1.15rem
 		line-height: 1.5
 		margin-top: $margin-rst
 		margin-bottom: $margin-rst !important
-		font-weight: 460
+		font-weight: calc(450 * var(--font-weight-factor))
+		color: $headline
 
 	hr
 		margin: $space-m 0
 		border-top: $hairline
 
-	li a, p a, dt a 
-		color: inherit
-		text-decoration: underline
+	a
 		+transition(color 0.2s)
+
+	.document li a, .document p a, .document dt a, footer a:not([class])
+		position: relative
+		color: $link-color	
+		font-weight: calc(580 * var(--font-weight-factor))
+		text-decoration: none
 		&:visited
-			color: inherit
+			color: $link-color-visited
 		&:hover
 			text-decoration: none
+			&:after
+				opacity: 0.8
+		&:after 
+			content: ''
+			position: absolute
+			left: 0
+			right: 0
+			bottom: -3px
+			border-bottom: 1px solid
+			opacity: 0.3
+			+transition(opacity 0.2s)
 
 	p
 		margin-bottom: $margin-rst
@@ -99,7 +120,7 @@
 	&.style-external-links a.reference.external:after
 		font-family: FontAwesome
 		content: '\f08e'
-		color: $text-light
+		color: $link
 		vertical-align: super
 		font-size: 60%
 		margin: 0 0.2em
@@ -131,7 +152,7 @@
 	div[class^='highlight'] td.code
 		width: 100%
 	.linenodiv pre
-		border-right: solid 1px lighten($table-border-color, 2%)
+		border-right: solid 1px $table-border-color
 		margin: 0
 		padding: 1rem
 		font-family: $code-font-family
@@ -176,47 +197,46 @@
 		margin: $margin-rst 0
 		padding: $space-s
 		clear: both
-		background-color: $text
-		color: $bg
-		font-weight: 520
+		background-color: $info-bg
+		color: $info-text
+		font-weight: calc(450 * var(--font-weight-factor))
 		> *
 			margin: 0
-		*
-			color: inherit !important
-			background-color: inherit !important
 
 	.admonition-title
 		display: block
 		margin: 0 0 $space-s 0
-		color: inherit
+		color: $info-text
 		@extend .fa
-		@extend .fa-bolt
+		@extend .fa-fire
 		&:before
 			margin-right: 1rem
 			font-size: 120%
 
-	@mixin alert($icon: '.fa-bell', $color: $bg, $bg: $text)
+	@mixin alert($icon: '.fa-fire', $color: $info-text, $bg: $info-bg)
 		color: $color
 		background-color: $bg
 		.admonition-title
 			@extend #{$icon}
-			font-weight: 620
+			color: inherit
+			background-color: transparent
+			font-weight: calc(450 * var(--font-weight-factor))
 
 	.note, .seealso, .important, .hint, .tip
 		@include alert()
 
 	.error, .danger
-		@include alert('.fa-fire', $bg, #ff4234)
+		@include alert('.fa-fire', $danger-text, $danger-bg)
 
 	.warning, .caution, .attention, .admonition-todo
-		@include alert('.fa-bolt', $text, #fffc52)
+		@include alert('.fa-bolt', $warning-text, $warning-bg)
 
 	// Some people put tables in notes. Let's give them very basic support.
 	.admonition table
-		border-color: rgba(0,0,0,.1)
+		border-color: $border
 		td, th
 			background: transparent !important
-			border-color: rgba(0,0,0,.1) !important
+			border-color: $border !important
 	.section ul, .toctree-wrapper ul
 		@extend .wy-plain-list-disc
 	.section ol.loweralpha, .section ol.loweralpha > li
@@ -265,7 +285,7 @@
 		font-weight: bold
 		margin-bottom: 1rem
 	.toc-backref
-		color: $text-color
+		color: $text
 	.align-right
 		float: right
 		margin: 0px 0px $margin-rst $margin-rst
@@ -318,7 +338,7 @@
 		.sidebar-title
 			display: block
 			font-family: $custom-font-family
-			font-weight: bold
+			font-weight: calc(700 * var(--font-weight-factor))
 			background: $bg-panel
 			padding: 0.5rem 1rem
 			margin: -$margin-rst
@@ -330,7 +350,7 @@
 		background: $highlight-color !important
 		box-shadow: 0 0 0 1px $highlight-color
 		display: inline
-		font-weight: bold
+		font-weight: calc(700 * var(--font-weight-factor))
 
 	// These are the little citation links [1] that show up within paragraphs.
 	.footnote-reference, .citation-reference
@@ -393,7 +413,7 @@
 				margin: 0rem .5rem .5rem 0rem
 				line-height: 1.2rem
 				word-break: break-all
-				font-weight: normal
+				font-weight: calc(450 * var(--font-weight-factor))
 				> span.brackets
 					margin-right: .5rem
 					&:before
@@ -415,9 +435,9 @@
 	// Both
 	html.writer-html4 & table.docutils.citation, table.docutils.footnote,
 	html.writer-html5 & dl.footnote
-		color: $text-medium
+		color: $muted
 		code
-			color: $gray
+			color: $muted
 
 	// Remove the large vertical space between citations and footnotes
 	.wy-table-responsive.citation, .wy-table-responsive.footnote
@@ -473,7 +493,7 @@
 	// These are the "literals" that get spit out when you mark stuff as ``code`` as your write.
 	tt, code
 		@extend code
-		color: $black
+		color: $code
 		font-family: $code-font-family
 		padding: 2px 5px
 		big, em
@@ -483,7 +503,7 @@
 		&.literal
 			color: $text-code-color
 		&.xref, a &
-			font-weight: bold
+			font-weight: calc(700 * var(--font-weight-factor))
 			color: $text-codexref-color
 	pre, kbd, samp
 		font-family: $code-font-family
@@ -493,7 +513,7 @@
 	dl
 		margin-bottom: $margin-rst
 		dt
-			font-weight: bold
+			font-weight: calc(500 * var(--font-weight-factor))
 			margin-bottom: 1rem
 		// Most of the content within these dls are one liners, so I halve the normal margins.
 		p, table, ul, ol, > dd > [class*="highlight"]
@@ -511,7 +531,7 @@
 			font-size: 1rem
 			line-height: 1.6
 			background: $bg-code
-			color: $text
+			color: $code
 			padding: 0.4rem 0.8rem
 			position: relative
 			em.property
@@ -524,8 +544,10 @@
 			padding: 0.6rem 1.2rem
 			font-size: 1rem
 			line-height: 1.6
-			background: $text
-			color: $bg 	
+			background: $info-bg
+			color: $info-text
+			& * 
+				color: inherit
 	
 		// In the html4 writer, parameters is a table. In html5 writer, parameters
 		// is a nested dl.field-list
@@ -537,7 +559,7 @@
 			margin-top: 0
 		// Since dts get the callout style, we treat this less as callouts.
 		tt, code
-			font-weight: bold
+			font-weight: calc(500 * var(--font-weight-factor))
 			&.descname, &.descclassname
 				color: inherit
 				background-color: inherit !important
@@ -545,13 +567,13 @@
 				padding: 0
 				font-size: 100% !important
 			&.descname
-				font-weight: bold
+				font-weight: calc(500 * var(--font-weight-factor))
 		// This is for more advanced parameter control
 		.optional
 			display: inline-block
 			padding: 0 4px
-			color: $black
-			font-weight: bold
+			color: $text
+			font-weight: calc(500 * var(--font-weight-factor))
 		.property
 			display: inline-block
 			padding-right: 8px
@@ -561,13 +583,12 @@
 		color: inherit
 		font-size: 80%
 		opacity: 0.6;
-		padding-left: 0.65rem
 	.viewcode-back
 		display: block
 		float: right
 	p.rubric
 		margin-bottom: $margin-rst
-		font-weight: bold
+		font-weight: calc(500 * var(--font-weight-factor))
 	//Download link
 	code.download
 		background: inherit
@@ -588,7 +609,7 @@
 		border: $hairline
 		background: $bg-panel
 		font-size: 80%
-		font-weight: 700
+		font-weight: calc(500 * var(--font-weight-factor))
 		padding: 0.2rem 0.3rem
 		margin: auto $margin-rst / 10
 	.versionmodified
diff --git a/src/sass/_theme_variables.sass b/src/sass/_theme_variables.sass
index aeee57882..3c1539655 100644
--- a/src/sass/_theme_variables.sass
+++ b/src/sass/_theme_variables.sass
@@ -2,17 +2,29 @@
 // that are set in wyrm_core/wy_variables.sass. You'll find wyrm in bower_components if you're looking
 // for a reference.
 
-$bg:							#ffffff
-$text:							#181818
-$bg-code:						#f8f8f8
-$bg-panel:						$bg-code
-
-$border:						#dfdfdf
-$muted:							#b6b6b6
-$link:							$muted
+$bg:							var(--bg)
+$text:							var(--text)
+$code:							var(--code)
+$headline:						var(--headline)
+$bg-code:						var(--bg-code)
+$bg-code-highlight:				var(--bg-code-highlight)
+$bg-panel:						var(--bg-panel)
+
+$border:						var(--border)
+$muted:							var(--muted)
+$link:							var(--link)
 						
 $border-search: 				$border
 
+$info-text:						var(--info-text)
+$info-bg:						var(--info-bg)
+$danger-text:					var(--danger-text)
+$danger-bg:						var(--danger-bg)
+$warning-text:					var(--warning-text)
+$warning-bg:					var(--warning-bg)
+
+$font-weight-factor:			var(--font-weight-factor)
+
 $radius: 0
 
 $space: 1.25rem
@@ -37,29 +49,30 @@ $text-code-color:               $text
 $text-code-background-color:    $bg
 $text-code-border-color:        $bg
 
-$link-color:					$text
-$link-color-hover:				$muted
-$link-color-visited:			inherit
+$link-color:					$link
+$link-color-hover:				$text
+$link-color-visited:			$link
 
 $table-border-color: $border
 $table-stripe-color: $bg-panel
 
-$button-neutral-background-color: $bg
+$button-neutral-background-color: 	  $bg
 
 $fa-font-path:                        "~font-awesome/fonts"
 $static-img:                          "../img/"
 
 $nav-desktop-width:					  23rem
-$nav-content-width:                   58rem
+$nav-content-width:                   52rem
 $nav-media-query:             		  ($nav-desktop-width + $nav-content-width) * 0.85
 
-$mathjax-color:                       $text-color
+$mathjax-color:                       $text
 
-$headerlink-color:                    $text-color
+$headerlink-color:                    $text
 
 // Code colors
-$text-viewcode-color:                 $text
-$text-codexref-color:                 $text-color
+$text-code-color:					  $code
+$text-viewcode-color:                 $code
+$text-codexref-color:                 $code
 
 // Definition list colors
 $class-color:                         $text
@@ -69,17 +82,18 @@ $method-color:                        $text
 $footer-color:                        $muted
 
 // Menu colors
-$menu-vertical-background-color:      $bg
+$menu-vertical-background-color:      var(--bg-nav)
 
 // Navigation colors
-$nav-background-color:           	  $bg
-$bg-nav-hover:					 	  #f2f2f2
-$bg-nav-current:					  $text
-$nav-color:							  $text
-$nav-current:						  $bg
-$nav-caption:						  $text
+$nav-background-color:           	  var(--bg-nav)
+$bg-nav-hover:					 	  var(--bg-nav-hover)
+$bg-nav-current:					  var(--bg-nav-current)
+$bg-nav-current-list:				  var(--bg-nav-current-list)
+$nav-color:							  var(--nav)
+$nav-current:						  var(--nav-current)
+$nav-caption:						  $nav-color
 $nav-search-background-color:         $nav-background-color
-$nav-search-color:                    $text
+$nav-search-color:                    $nav-color
 
 // Sidebar colors
 $sidebar-background-color:            $bg
@@ -87,7 +101,7 @@ $sidebar-border-color:                $table-border-color
 $sidebar-title-background-color:      $bg
 
 // Sphinx highlight color
-$highlight-color:                     #fff9a3
+$highlight-color:                     var(--bg-highlight)
 
 $base-font-family:                    'Inter', sans-serif
 $custom-font-family:                  'Inter', sans-serif
diff --git a/src/sass/theme.sass b/src/sass/theme.sass
index 78f3927d0..910ebecd2 100644
--- a/src/sass/theme.sass
+++ b/src/sass/theme.sass
@@ -33,12 +33,13 @@
 
 // Wyrm core styles used in this theme
 @import wyrm_core/alert
-@import wyrm_core/button
 @import wyrm_core/dropdown
-@import wyrm_core/form
 @import wyrm_core/generic
 @import wyrm_core/table
-@import wyrm_core/type
+
+@import ./wyrm_core/button
+@import ./wyrm_core/form
+@import ./wyrm_core/type
 
 // Theme specific styles. These are likely the files you want to edit.
 @import theme_breadcrumbs
@@ -52,3 +53,5 @@
 @import theme_nav
 @import theme_landing
 @import theme_container
+
+@import colors
diff --git a/src/sass/wyrm_core/_button.sass b/src/sass/wyrm_core/_button.sass
new file mode 100644
index 000000000..2c4f816f7
--- /dev/null
+++ b/src/sass/wyrm_core/_button.sass
@@ -0,0 +1,117 @@
+// Buttons
+//
+// Located in `wyrm_core/_button.sass`. You can also add font icons to any
+// button as shown in the third example. Wyrm by default uses the FontAwesome
+// library, but any icon set can be substituted.
+//
+// Markup:
+// <a href="#" class="btn {$modifiers}"> Link</a>
+// <button class="btn {$modifiers}"> Button</button>
+// <input type="submit" class="btn {$modifiers}">
+// <button class="btn fa fa-check-circle {$modifiers}"> With icon</button>
+//
+// :hover               - Highlight the button when hovered.
+// :visited             - Visited link
+// :disabled            - For disabled buttons.
+// .btn-disabled        - Class version of disabled.
+// :active              - Press the button down.
+// :focus               - Focus
+// .btn-neutral         - Neutral looking button.
+// .btn-info            - For imformative, or alternate actions.
+// .btn-success         - For positive actions.
+// .btn-danger          - Usually used for delete actions.
+// .btn-warning         - Beware, you might not want to click me.
+// .btn-invert          - Dark button to contrast the background.
+// .btn-link            - Unstyled, link looking button. Useful for secondary actions next to another button.
+// .btn-small           - Smaller button.
+//
+// Styleguide 1
+
+button
+  font-size: 100%
+  margin: 0
+  vertical-align: baseline
+  *vertical-align: middle
+  cursor: pointer
+  line-height: normal
+  -webkit-appearance: button
+  *overflow: visible
+button::-moz-focus-inner, input::-moz-focus-inner
+  border: 0
+  padding: 0
+button[disabled]
+  cursor: default
+
+.btn
+  /* Structure
+  display: inline-block
+  border-radius: 2px
+  line-height: normal
+  white-space: nowrap
+  text-align: center
+  cursor: pointer
+  font-size: 100%
+  padding: $base-line-height / 4 $base-line-height / 2 ($base-line-height / 4 + 2) $base-line-height / 2
+  color: $white
+  border: 1px solid rgba(0,0,0,0.1)
+  background-color: $button-background-color
+  text-decoration: none
+  font-weight: normal
+  font-family: $base-font-family
+  box-shadow: 0px 1px 2px -1px rgba(255, 255, 255, .5) inset, 0px -2px 0px 0px rgba(0,0,0,.1) inset
+  outline-none: false
+  vertical-align: middle
+  *display: inline
+  zoom: 1
+  -webkit-user-drag: none
+  +user-select(none)
+  +font-smooth
+  +transition(all 0.1s linear)
+
+.btn-hover
+  //background: lighten($link-color, 5%)
+  color: $white
+
+.btn
+  &:hover
+    //background: lighten($button-background-color, 5%)
+    color: $white
+  &:focus
+    //background: lighten($button-background-color, 5%)
+    outline: 0
+  &:active
+    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, .05) inset, 0px 2px 0px 0px rgba(0,0,0,.1) inset
+    padding: ($base-line-height / 4 + 2) $base-line-height / 2 $base-line-height / 4 $base-line-height / 2
+  &:visited
+    color: $white
+  &:disabled
+    background-image: none
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false)
+    filter: alpha(opacity = 40)
+    opacity: 0.4
+    cursor: not-allowed
+    box-shadow: none
+
+// Firefox: Get rid of the inner focus border
+.btn::-moz-focus-inner
+  padding: 0
+  border: 0
+
+.btn-small
+  font-size: 80%
+
+.btn-neutral
+  background-color: $button-neutral-background-color !important
+  color: $text-color !important
+  &:hover
+    background-color: $button-neutral-background-color !important
+    color: $text-color
+  &:visited
+    color: $text-color !important
+
+.wy-btn-group .btn, .wy-control .btn
+  vertical-align: middle
+
+.wy-btn-group
+  margin-bottom: $base-line-height
+  +clearfix
diff --git a/src/sass/wyrm_core/_form.sass b/src/sass/wyrm_core/_form.sass
new file mode 100644
index 000000000..d6c242849
--- /dev/null
+++ b/src/sass/wyrm_core/_form.sass
@@ -0,0 +1,534 @@
+// Form structure
+//
+// Files located in `wyrm_core/_form.sass`.
+//
+// Forms follow the following basic struture. `.wy-control-group`
+// wraps the label and a `.wy-control`, which itself warps your actual
+// form elements. You can decide either to stack or align your forms.
+// A help message can be provided in a couple different styles, but
+// the most common is `.wy-form-message` as shown below.
+//
+// Markup:
+// <form class="{$modifiers}">
+//   <legend>A simple form</legend>
+//   <fieldset>
+//     <div class="wy-control-group">
+//       <label>Field name</label>
+//       <div class="wy-control">
+//         <input type="text" placeholder="placeholder"/>
+//       </div>
+//       <span class="wy-form-message">Help text goes here!</span>
+//     </div>
+//     <input type="submit" class="btn" />
+//   </fieldset>
+// </form>
+//
+// Styleguide 6
+
+
+.wy-form-stacked
+  select
+    display: block
+.wy-form-aligned
+  input, textarea, select, .wy-help-inline, label
+    display: inline-block
+    *display: inline
+    *zoom: 1
+    vertical-align: middle
+
+.wy-form-aligned
+  .wy-control-group
+    > label
+      display: inline-block
+      vertical-align: middle
+      width: 10em
+      margin: $base-line-height / 4 $base-line-height / 2 0 0
+      float: left
+  .wy-control
+    float: left
+    label
+      display: block
+    select
+      margin-top: $base-line-height / 4
+
+fieldset
+  border: 0
+  margin: 0
+  padding: 0
+legend
+  display: block
+  width: 100%
+  border: 0
+  padding: 0
+  white-space: normal
+  margin-bottom: $base-line-height
+  font-size: 150%
+  *margin-left: -7px
+label
+  display: block
+  margin: 0 0 em(5px) 0
+  color: $gray-dark
+  font-size: 90%
+
+input, select, textarea
+  font-size: 100%
+  margin: 0
+  vertical-align: baseline
+  *vertical-align: middle
+
+
+.wy-control-group
+  margin-bottom: $base-line-height
+  +outer-container
+  +clearfix
+
+.wy-control-group.wy-control-group-required > label:after
+  content: " *"
+  color: $red
+
+// For doing multi part, aligned form blocks within a single label
+
+.wy-control-group
+  .wy-form-full, .wy-form-halves, .wy-form-thirds
+    padding-bottom: $base-line-height / 2
+    select
+      width: 100%
+    input
+      &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
+        width: 100%
+.wy-control-group .wy-form-full
+  +span-columns(12)
+  +omega-type
+
+.wy-control-group .wy-form-halves
+  +span-columns(6)
+  +omega-type(2n)
+
+.wy-control-group .wy-form-thirds
+  +span-columns(4)
+  +omega-type(3n)
+
+// Sometimes you just output text in a form, not an actual input
+.wy-control-group.wy-control-group-no-input .wy-control
+  margin: $base-line-height / 4 0 0 0
+  font-size: 90%
+
+.wy-control-no-input
+  display: inline-block
+  margin: $base-line-height / 4 0 0 0
+  font-size: 90%
+
+
+// Fluid inputs when needed
+
+.wy-control-group.fluid-input
+  input
+    &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
+      width: 100%
+
+// Inline help for forms
+
+.wy-form-message-inline
+  display: inline-block
+  padding-left: 0.3em
+  color: #666
+  vertical-align: middle
+  font-size: 90%
+
+.wy-form-message
+  display: block
+  color: $gray-light
+  font-size: 70%
+  margin-top: em(5px)
+  font-style: italic
+  p
+    font-size: inherit
+    font-style: italic
+    margin-bottom: $base-line-height / 4
+  p:last-child
+    margin-bottom: 0
+
+// Generic form elements
+//
+// Here's the output of common form inputs. The sass itself covers more types
+// like email, password, url, date...etc, but I've left them out for brevity.
+//
+// Markup:
+// <div class="wy-control-group">
+//   <label>Text field</label>
+//   <div class="wy-control">
+//     <input type="text" placeholder="placeholder"/>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Textarea</label>
+//   <div class="wy-control">
+//     <textarea></textarea>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Dropdown</label>
+//   <div class="wy-control">
+//     <select>
+//       <option></option>
+//       <option>Option 1</option>
+//       <option>Option 2</option>
+//     </select>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Radio</label>
+//   <div class="wy-control">
+//     <label class="wy-radio">
+//       <input type="radio">
+//       Option 1
+//     </label>
+//     <label class="wy-radio">
+//       <input type="radio">
+//       Option 2
+//     </label>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Checkbox</label>
+//   <div class="wy-control">
+//     <label class="wy-checkbox">
+//       <input type="checkbox">
+//       Option 1
+//     </label>
+//     <label class="wy-checkbox">
+//       <input type="checkbox">
+//       Option 2
+//     </label>
+//   </div>
+// </div>
+//
+// Styleguide 6.1
+
+
+input
+  line-height: normal
+
+input
+  &[type="button"], &[type="reset"], &[type="submit"]
+    -webkit-appearance: button
+    cursor: pointer
+    font-family: $base-font-family
+    *overflow: visible
+  &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
+    -webkit-appearance: none
+    padding: $base-line-height / 4
+    display: inline-block
+    border: 1px solid $input-border-color
+    font-size: 80%
+    font-family: $base-font-family
+    box-shadow: inset 0 1px 3px $input-shadow-color
+    border-radius: 0
+    +transition(border .3s linear)
+    +font-smooth
+  &[type="datetime-local"]
+    padding: em(5.5px) em(10px)
+  &[disabled]
+    cursor: default
+  &[type="checkbox"], &[type="radio"]
+    +box-sizing(border-box)
+    padding: 0
+    margin-right: em(5px)
+    *height: 13px
+    *width: 13px
+  &[type="search"]
+    +box-sizing(border-box)
+    &::-webkit-search-cancel-button, &::-webkit-search-decoration
+      -webkit-appearance: none
+  &[type="text"]:focus, &[type="password"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus
+    outline: 0
+    outline: thin dotted \9
+    border-color: $input-focus-color
+  &.no-focus:focus
+    border-color: $input-border-color !important
+  &[type="file"]:focus, &[type="radio"]:focus, &[type="checkbox"]:focus
+    outline: thin dotted $gray-dark
+    outline: 1px auto #129FEA
+  &[type="text"][disabled], &[type="password"][disabled], &[type="email"][disabled], &[type="url"][disabled], &[type="date"][disabled], &[type="month"][disabled], &[type="time"][disabled], &[type="datetime"][disabled], &[type="datetime-local"][disabled], &[type="week"][disabled], &[type="number"][disabled], &[type="search"][disabled], &[type="tel"][disabled], &[type="color"][disabled]
+    cursor: not-allowed
+    background-color: $input-background-color
+
+input:focus:invalid, textarea:focus:invalid, select:focus:invalid
+  color: $red
+  border: 1px solid $red
+input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus
+  border-color: $red
+input
+  &[type="file"]:focus:invalid:focus, &[type="radio"]:focus:invalid:focus, &[type="checkbox"]:focus:invalid:focus
+    outline-color: $red
+
+input.wy-input-large
+  padding: $base-line-height / 2
+  font-size: 100%
+
+
+// Textareas and selects
+
+textarea
+  overflow: auto
+  vertical-align: top
+  width: 100%
+  font-family: $base-font-family
+select, textarea
+  padding: em(8px) em(10px)
+  display: inline-block
+  border: 1px solid $input-border-color
+  font-size: 80%
+  box-shadow: inset 0 1px 3px $input-shadow-color
+  +transition(border .3s linear)
+  +font-smooth
+select
+  border: 1px solid $input-border-color
+  background-color: $input-background-color
+  &[multiple]
+    height: auto
+select:focus, textarea:focus
+  outline: 0
+select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly]
+  cursor: not-allowed
+  background-color: $input-background-color
+
+// Checkboxes and radios
+
+input
+  &[type="radio"][disabled], &[type="checkbox"][disabled]
+    cursor: not-allowed
+.wy-checkbox, .wy-radio
+  margin: $base-line-height / 4 0
+  // Important because we don't want it overwritten in the case of errors
+  color: $text-color
+  display: block
+  input
+    vertical-align: baseline
+
+// Messages and input context
+
+.wy-form-message-inline
+  display: inline-block
+  *display: inline
+  *zoom: 1
+  vertical-align: middle
+
+// Prefix and suffix for inputs
+//
+// Wyrm allows some basic prefix and suffic styling for text inputs.
+//
+// Markup:
+// <div class="wy-control-group">
+//   <label>Prefix</label>
+//   <div class="wy-control wy-input-prefix">
+//     <span class="wy-input-context">@</span><input type="text" placeholder="placeholder"/>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Suffix</label>
+//   <div class="wy-control wy-input-suffix">
+//     <input type="text" placeholder="placeholder"/><span class="wy-input-context">@gmail.com</span>
+//   </div>
+// </div>
+//
+// Styleguide 6.2
+
+
+.wy-input-prefix, .wy-input-suffix
+  white-space: nowrap
+  padding: $base-line-height / 4
+  .wy-input-context
+    line-height: 27px // Hack for the moment.
+    padding: 0 8px
+    display: inline-block
+    font-size: 80%
+    background-color: $table-stripe-color
+    border: solid 1px $input-border-color
+    color: $gray-light
+
+.wy-input-suffix .wy-input-context
+  border-left: 0
+.wy-input-prefix .wy-input-context
+  border-right: 0
+
+// Switches
+//
+// True / false, boolean style switches.
+//
+// Markup:
+// <div class="wy-switch {$modifiers}"><span>Here is some really long text.</span></div>
+//
+// .active          - active state.
+// .disabled          - disabled.
+//
+// Styleguide 6.3
+
+.wy-switch
+  position: relative
+  display: block
+  height: $base-line-height
+  margin-top: $base-line-height / 2
+  cursor: pointer
+  &:before
+    position: absolute
+    content: ""
+    display: block
+    left: 0
+    top: 0
+    width: $base-line-height * 1.5
+    height: $base-line-height / 2
+    border-radius: 4px
+    background: $gray-lighter
+    +transition(all .2s ease-in-out)
+  &:after
+    position: absolute
+    content: ""
+    display: block
+    width: 18px
+    height: 18px
+    border-radius: 4px
+    background: $gray-light
+    left: -3px
+    top: -3px
+    +transition(all .2s ease-in-out)
+  span
+    position: absolute
+    left: $base-line-height * 2
+    display: block
+    font-size: 12px
+    color: $gray-lighter
+    line-height: 1
+.wy-switch.active
+  &:before
+    background: darken($green, 10%)
+  &:after
+    left: $base-line-height
+    background: $green
+
+.wy-switch.disabled
+  cursor: not-allowed
+  opacity: .8
+
+
+// Error handling and inline validation
+//
+// Wyrm has both block and inline level validation depending upon your needs. You can also
+// pair these with the global alerts mentioned in the alerts section of this styleguide.
+//
+// Markup:
+// <div class="wy-control-group wy-control-group-error">
+//   <label>After the fact error</label>
+//   <div class="wy-control">
+//     <input type="text" placeholder="placeholder"/>
+//     <span class="wy-form-message">Error text goes here.</span>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Inline success</label>
+//   <div class="wy-control wy-inline-validate wy-inline-validate-info">
+//     <input type="text" placeholder="placeholder"/>
+//     <span class="wy-input-context"> You may want to do this.</span>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Inline success</label>
+//   <div class="wy-control wy-inline-validate wy-inline-validate-success">
+//     <input type="text" placeholder="placeholder"/>
+//     <span class="wy-input-context"> Woot, way to go.</span>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Inline error</label>
+//   <div class="wy-control wy-inline-validate wy-inline-validate-warning">
+//     <input type="text" placeholder="placeholder"/>
+//     <span class="wy-input-context"> Hold on cowboy.</span>
+//   </div>
+// </div>
+// <div class="wy-control-group">
+//   <label>Inline error</label>
+//   <div class="wy-control wy-inline-validate wy-inline-validate-danger">
+//     <input type="text" placeholder="placeholder"/>
+//     <span class="wy-input-context"> Damnit, you messed up.</span>
+//   </div>
+// </div>
+//
+// Styleguide 6.4
+
+.wy-control-group.wy-control-group-error
+  .wy-form-message, > label
+    color: $red
+  input
+    &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
+      border: solid 1px $red
+  textarea
+    border: solid 1px $red
+
+.wy-inline-validate
+  white-space: nowrap
+  .wy-input-context
+    padding: em(8px) em(10px)
+    display: inline-block
+    font-size: 80%
+.wy-inline-validate.wy-inline-validate-success .wy-input-context
+  color: $green
+  @extend %icon
+  @extend .#{$icon-prefix}-#{$icon-ok}
+.wy-inline-validate.wy-inline-validate-danger .wy-input-context
+  color: $red
+  @extend %icon
+  @extend .#{$icon-prefix}-#{$icon-remove}
+.wy-inline-validate.wy-inline-validate-warning .wy-input-context
+  color: $orange
+  @extend %icon
+  @extend .#{$icon-prefix}-#{$icon-alert}
+.wy-inline-validate.wy-inline-validate-info .wy-input-context
+  color: $blue
+  @extend %icon
+  @extend .#{$icon-prefix}-#{$icon-alert}
+
+// Some generic rotation classes for reading user images
+
+.rotate-90
+  @include transform(rotate(90deg))
+.rotate-180
+  @include transform(rotate(180deg))
+.rotate-270
+  @include transform(rotate(270deg))
+.mirror
+  @include transform(scaleX(-1))
+  &.rotate-90
+    @include transform(scaleX(-1) rotate(90deg))
+  &.rotate-180
+    @include transform(scaleX(-1) rotate(180deg))
+  &.rotate-270
+    @include transform(scaleX(-1) rotate(270deg))
+
+@media only screen and (max-width: 480px)
+  .wy-form
+    button[type="submit"]
+      margin: 0.7em 0 0
+    input
+      &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
+        margin-bottom: 0.3em
+        display: block
+    label
+      margin-bottom: 0.3em
+      display: block
+  .wy-form input
+    &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
+      margin-bottom: 0
+  .wy-form-aligned
+    .wy-control-group label
+      margin-bottom: 0.3em
+      text-align: left
+      display: block
+      width: 100%
+    .wy-control
+      margin: 1.5em 0 0 0
+  .wy-form .wy-help-inline, .wy-form-message-inline, .wy-form-message
+    display: block
+    font-size: 80%
+    padding: $base-line-height / 4 0
+
+
diff --git a/src/sass/wyrm_core/_type.sass b/src/sass/wyrm_core/_type.sass
new file mode 100644
index 000000000..60589dff7
--- /dev/null
+++ b/src/sass/wyrm_core/_type.sass
@@ -0,0 +1,237 @@
+// Typography
+//
+// Styles from this page can be found in `wyrm_core/_type.sass`.
+// Let's start with some basic links.
+//
+// Markup:
+// I wonder where <a href="#url" class="{$modifiers}">this link goes</a>!
+//
+// :hover          - On hover.
+// :visited        - Visited links.
+//
+// Styleguide 4.0
+
+a
+  color: $link-color
+  text-decoration: none
+  cursor: pointer
+  &:hover
+    color: $link-color-hover
+  &:visited
+    color: $link-color-visited
+
+
+// Text
+//
+// Text handling and other base styles. Can be safely used on any element, not just paragraph tags.
+//
+// Markup:
+// <p class="{$modifiers}">The best movie of all time is either Network or Rollerball.</p>
+//
+// .wy-text-small           - Smaller, 80% text. Can also use the `<small>` tag for this.
+// .wy-text-large           - Larger, 120% text.
+// .wy-text-left            - To the left.
+// .wy-text-right           - To the right.
+// .wy-text-center          - To the center.
+// .wy-text-center          - To the center.
+// .wy-text-strike          - Strikethrough.
+// .wy-text-neutral         - Simply applies the normal text color.
+// .wy-text-info            - Info text.
+// .wy-text-success         - Success text.
+// .wy-text-warning         - Warning text.
+// .wy-text-danger          - Danger text.
+//
+// Styleguide 4.1
+
+
+html
+  height: 100%
+  overflow-x: hidden
+
+body
+  font-family: $base-font-family
+  font-weight: normal
+  color: $text_color
+  min-height: 100%
+  overflow-x: hidden
+  background: $background_color
+
+.wy-text-left
+  text-align: left
+
+.wy-text-center
+  text-align: center
+
+.wy-text-right
+  text-align: right
+
+.wy-text-large
+  font-size: 120%
+
+.wy-text-normal
+  font-size: 100%
+
+.wy-text-small, small
+  font-size: 80%
+
+.wy-text-strike
+  text-decoration: line-through
+
+.wy-text-warning
+  color: $orange !important
+a.wy-text-warning:hover
+  color: lighten($orange, 10%) !important
+.wy-text-info
+  color: $blue !important
+a.wy-text-info:hover
+  color: lighten($blue, 10%) !important
+.wy-text-success
+  color: $green !important
+a.wy-text-success:hover
+  color: lighten($green, 10%) !important
+.wy-text-danger
+  color: $red !important
+a.wy-text-danger:hover
+  color: lighten($red, 10%) !important
+.wy-text-neutral
+  color: $text-color !important
+//a.wy-text-neutral:hover
+//  color: lighten($text-color, 10%) !important
+
+// Headings and paragraphs.
+//
+// Headings and paragraphs have a `margin-bottom: $base-line-height` on them like most objects in wyrm.
+//
+// Markup:
+// <h1>Heading 1</h1>
+// <h2>Heading 2</h2>
+// <h3>Heading 3</h3>
+// <h4>Heading 4</h4>
+// <h5>Heading 5</h5>
+// <h6>Heading 6</h6>
+// <p>Hey everybody, it's Tuuuuuuuesday! I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat. Seattle is actually Spanish for "taco." I try not to affiliate myself with Canadians. I've got a salty mustache. I've been a party to many, many stupid things in my life. This is by far the stupidest. This Quick Look is over! I'm an old man. I like turns.</p>
+// <p>Jeff, I have a question. Why do we keep doing this? There's nothing I'd rather talk about right now than Peter Molyneux's balls! I WILL CONTINUE TO CALL PAX AUSTRALIA PAXA UNTIL IT FUCKING CATCHES ON. I feel like I'm gonna throw up, but in a good way. No one should ever put clothes on a shark. You are looking for far too much logical consistency.</p>
+//
+// Styleguide 4.2
+
+h1,h2,h3,h4,h5,h6, legend
+  margin-top: 0
+  font-weight: 700
+  font-family: $custom-font-family
+
+p
+  line-height: $base-line-height
+  margin: 0
+  font-size: $base-font-size
+  margin-bottom: $base-line-height
+
+h1
+  font-size: 175%
+
+h2
+  font-size: 150%
+
+h3
+  font-size: 125%
+
+h4
+  font-size: 115%
+
+h5
+  font-size: 110%
+
+h6
+  font-size: 100%
+
+hr
+  display: block
+  height: 1px
+  border: 0
+  border-top: 1px solid $table-border-color
+  margin: $base-line-height 0
+  padding: 0
+
+code
+  white-space: nowrap
+  max-width: 100%
+  background: $text-code-background-color
+  border: solid 1px $text-code-border-color
+  font-size: 75%
+  padding: 0 5px
+  font-family: $code-font-family
+  color: $text-code-color
+  overflow-x: auto
+  &.code-large
+    font-size: 90%
+
+// Lists
+//
+// Lists in wyrm default to `list-style: none` mostly because I've found I use lists
+// more often as nav or block elements than as text lists. To get traditional
+// text lists you either add, or extend these classes through sass. For convenience
+// default lists in the `<article>` tag also extend these values.
+//
+// Markup:
+// <ul class="{$modifiers}">
+//  <li>Freespace 2</li>
+//  <li>The Elder Scrolls: Skyrim</li>
+//  <li>Grim Fandango</li>
+//  <li>
+//    Saints forever:
+//    <ul>
+//      <li>Saint's Row</li>
+//      <li>Saint's Row 2</li>
+//      <li>Saint's Row: The Third</li>
+//      <li>Saint's Row IV</li>
+//    </ul>
+//    <ol>
+//      <li>number 1</li>
+//      <li>number 2</li>
+//    </ol>
+//  </li>
+// </ul>
+//
+// .wy-plain-list-disc          - The usual disc list.
+// .wy-plain-list-decimal       - Decimal lists.
+//
+// Styleguide 4.3
+
+
+%wy-plain-list-disc
+  list-style: disc
+  line-height: $base-line-height
+  margin-bottom: $base-line-height
+  li
+    list-style: disc
+    margin-left: $base-line-height
+    p:last-child
+      margin-bottom: 0
+    ul
+      margin-bottom: 0
+    li
+      list-style: circle
+      li
+        list-style: square
+    ol li
+      list-style: decimal
+
+%wy-plain-list-decimal
+  list-style: decimal
+  line-height: $base-line-height
+  margin-bottom: $base-line-height
+  li
+    list-style: decimal
+    margin-left: $base-line-height
+    p:last-child
+      margin-bottom: 0
+    ul
+      margin-bottom: 0
+      li
+        list-style: disc
+
+
+.wy-plain-list-disc, article ul
+  @extend %wy-plain-list-disc
+.wy-plain-list-decimal, article ol
+  @extend %wy-plain-list-decimal
+