diff --git a/src/core/components/array-model.jsx b/src/core/components/array-model.jsx
index 1c8620356fad302a1b835d31e7bacdf129a3a8ff..cdc741666de76381c8a762071b63fcd6ef3bf5de 100644
--- a/src/core/components/array-model.jsx
+++ b/src/core/components/array-model.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 
-const propStyle = { color: "#999", fontStyle: "italic" }
+const propClass = "property"
 
 export default class ArrayModel extends Component {
   static propTypes = {
@@ -44,7 +44,7 @@ export default class ArrayModel extends Component {
       <ModelCollapse title={titleEl} expanded={ depth <= expandDepth } collapsedContent="[...]">
         [
           {
-            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
+            properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
           }
           {
             !description ? (properties.size ? <div className="markdown"></div> : null) :
diff --git a/src/core/components/auth/error.jsx b/src/core/components/auth/error.jsx
index c3af158fdc9cc4a98a60fbef1eb164e556b020b8..bad1d41983766155a42a85a25a96f4446718b171 100644
--- a/src/core/components/auth/error.jsx
+++ b/src/core/components/auth/error.jsx
@@ -15,8 +15,8 @@ export default class AuthError extends React.Component {
     let source = error.get("source")
 
     return (
-      <div className="errors" style={{ backgroundColor: "#ffeeee", color: "red", margin: "1em" }}>
-        <b style={{ textTransform: "capitalize", marginRight: "1em"}} >{ source } { level }</b>
+      <div className="errors">
+        <b>{ source } { level }</b>
         <span>{ message }</span>
       </div>
     )
diff --git a/src/core/components/curl.jsx b/src/core/components/curl.jsx
index b7a6f3e0af45b4c8a63a719322caba73f8892218..bd3ff681780700fb3973c8c9b5d658b4c96349fb 100644
--- a/src/core/components/curl.jsx
+++ b/src/core/components/curl.jsx
@@ -20,7 +20,7 @@ export default class Curl extends React.Component {
       <div>
         <h4>Curl</h4>
         <div className="copy-paste">
-          <textarea onFocus={this.handleFocus} readOnly={true} className="curl" style={{ whiteSpace: "normal" }} value={curl}></textarea>
+          <textarea onFocus={this.handleFocus} readOnly={true} className="curl" value={curl}></textarea>
         </div>
       </div>
     )
diff --git a/src/core/components/errors.jsx b/src/core/components/errors.jsx
index d06128fac2c0f3a6bc47e5756e886005a4dafcd0..2b99e33d38c3f725e8dfc625095fb89830623c07 100644
--- a/src/core/components/errors.jsx
+++ b/src/core/components/errors.jsx
@@ -72,10 +72,10 @@ const ThrownErrorItem = ( { error, jumpToLine } ) => {
           <h4>{ (error.get("source") && error.get("level")) ?
             toTitleCase(error.get("source")) + " " + error.get("level") : "" }
           { error.get("path") ? <small> at {error.get("path")}</small>: null }</h4>
-          <span style={{ whiteSpace: "pre-line", "maxWidth": "100%" }}>
+          <span className="message thrown">
             { error.get("message") }
           </span>
-          <div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
+          <div className="error-line">
             { errorLine && jumpToLine ? <a onClick={jumpToLine.bind(null, errorLine)}>Jump to line { errorLine }</a> : null }
           </div>
         </div>
@@ -102,8 +102,8 @@ const SpecErrorItem = ( { error, jumpToLine } ) => {
       { !error ? null :
         <div>
           <h4>{ toTitleCase(error.get("source")) + " " + error.get("level") }&nbsp;{ locationMessage }</h4>
-          <span style={{ whiteSpace: "pre-line"}}>{ error.get("message") }</span>
-          <div style={{ "text-decoration": "underline", "cursor": "pointer" }}>
+          <span className="message">{ error.get("message") }</span>
+          <div className="error-line">
             { jumpToLine ? (
               <a onClick={jumpToLine.bind(null, error.get("line"))}>Jump to line { error.get("line") }</a>
             ) : null }
diff --git a/src/core/components/headers.jsx b/src/core/components/headers.jsx
index 6d630de96c3dfccf7823f26054fff32ea201d14f..c21203bce76e9af1910d0425fa24b2d4c45f36d5 100644
--- a/src/core/components/headers.jsx
+++ b/src/core/components/headers.jsx
@@ -2,7 +2,7 @@ import React from "react"
 import PropTypes from "prop-types"
 import Im from "immutable"
 
-const propStyle = { color: "#999", fontStyle: "italic" }
+const propClass = "header-example"
 
 export default class Headers extends React.Component {
   static propTypes = {
@@ -46,7 +46,7 @@ export default class Headers extends React.Component {
                 <td className="header-col">{
                   !description ? null : <Markdown source={ description } />
                 }</td>
-                <td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propStyle={ propStyle } /> : null }</td>
+                <td className="header-col">{ type } { schemaExample ? <Property propKey={ "Example" } propVal={ schemaExample } propClass={ propClass } /> : null }</td>
               </tr>)
             }).toArray()
           }
diff --git a/src/core/components/layout-utils.jsx b/src/core/components/layout-utils.jsx
index 99cd175bc7699c2e3a77e326116e79df04e8c5fb..e6a13fcc82b53ac3a0aad7ba8ca4ba03a2418950 100644
--- a/src/core/components/layout-utils.jsx
+++ b/src/core/components/layout-utils.jsx
@@ -73,10 +73,14 @@ export class Col extends React.Component {
       }
     }
 
+    if (hide) {
+      classesAr.push("hidden")
+    }
+
     let classes = xclass(rest.className, ...classesAr)
 
     return (
-      <section {...rest} style={{display: hide ? "none": null}} className={classes}/>
+      <section {...rest} className={classes}/>
     )
   }
 
@@ -213,7 +217,7 @@ Link.propTypes = {
   className: PropTypes.string
 }
 
-const NoMargin = ({children}) => <div style={{height: "auto", border: "none", margin: 0, padding: 0}}> {children} </div>
+const NoMargin = ({children}) => <div className="no-margin"> {children} </div>
 
 NoMargin.propTypes = {
   children: PropTypes.node
diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index f4062ad4420d28a211a5fcfce29ed2487b4e7c55..1709a362c1071ed85659a83759b8128bd448316e 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -57,7 +57,7 @@ export default class BaseLayout extends React.Component {
     if (loadingStatus === "failedConfig") {
       const lastErr = errSelectors.lastError()
       const lastErrMsg = lastErr ? lastErr.get("message") : ""
-      loadingMessage = <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
+      loadingMessage = <div className="info failed-config">
         <div className="loading-container">
           <h4 className="title">Failed to load remote configuration.</h4>
           <p>{lastErrMsg}</p>
diff --git a/src/core/components/model-collapse.jsx b/src/core/components/model-collapse.jsx
index 41ae29b94bb6afd1a27ad232ae9d7d53b6a90768..ff783bfe5f88cb9bbad862d860f03f4850595ff3 100644
--- a/src/core/components/model-collapse.jsx
+++ b/src/core/components/model-collapse.jsx
@@ -71,8 +71,8 @@ export default class ModelCollapse extends Component {
 
     return (
       <span className={classes || ""}>
-        { title && <span onClick={this.toggleCollapsed} style={{ "cursor": "pointer" }}>{title}</span> }
-        <span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}>
+        { title && <span onClick={this.toggleCollapsed} className="pointer">{title}</span> }
+        <span onClick={ this.toggleCollapsed } className="pointer">
           <span className={ "model-toggle" + ( this.state.expanded ? "" : " collapsed" ) }></span>
         </span>
         { this.state.expanded ? this.props.children :this.state.collapsedContent }
diff --git a/src/core/components/model.jsx b/src/core/components/model.jsx
index 818608caf143d04c4130e6f5d5a14664346d785d..fa676ef1a080c7fdc5c75078daeaeb3d4266ee42 100644
--- a/src/core/components/model.jsx
+++ b/src/core/components/model.jsx
@@ -53,11 +53,7 @@ export default class Model extends ImmutablePureComponent {
     if(!schema) {
       return <span className="model model-title">
               <span className="model-title__text">{ displayName || name }</span>
-              <img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} style={{
-                  marginLeft: "1em",
-                  position: "relative",
-                  bottom: "0px"
-                }} />
+              <img src={require("core/../img/rolling-load.svg")} height={"20px"} width={"20px"} />
             </span>
     }
 
diff --git a/src/core/components/object-model.jsx b/src/core/components/object-model.jsx
index 3d6e132065c5563ce2638c7405e93f3ad76028b0..324b435578ad7015a68a4530c7a1423d804b5c12 100644
--- a/src/core/components/object-model.jsx
+++ b/src/core/components/object-model.jsx
@@ -79,8 +79,8 @@ export default class ObjectModel extends Component {
             {
               <table className="model"><tbody>
               {
-                !description ? null : <tr style={{ color: "#666", fontWeight: "normal" }}>
-                    <td style={{ fontWeight: "bold" }}>description:</td>
+                !description ? null : <tr className="description">
+                    <td>description:</td>
                     <td>
                       <Markdown source={ description } />
                     </td>
@@ -91,16 +91,22 @@ export default class ObjectModel extends Component {
                     ([key, value]) => {
                       let isDeprecated = isOAS3() && value.get("deprecated")
                       let isRequired = List.isList(requiredProperties) && requiredProperties.contains(key)
-                      let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" }
-                      if ( isRequired ) {
-                        propertyStyle.fontWeight = "bold"
+
+                      let classNames = ["property-row"]
+
+                      if (isDeprecated) {
+                        classNames.push("deprecated")
+                      }
+
+                      if (isRequired) {
+                        classNames.push("required")
                       }
 
-                      return (<tr key={key} className={isDeprecated && "deprecated"}>
-                        <td style={ propertyStyle }>
-                          { key }{ isRequired && <span style={{ color: "red" }}>*</span> }
+                      return (<tr key={key} className={classNames.join(" ")}>
+                        <td>
+                          { key }{ isRequired && <span className="star">*</span> }
                         </td>
-                        <td style={{ verticalAlign: "top" }}>
+                        <td>
                           <Model key={ `object-${name}-${key}_${value}` } { ...otherProps }
                                  required={ isRequired }
                                  getComponent={ getComponent }
@@ -126,11 +132,11 @@ export default class ObjectModel extends Component {
 
                       const normalizedValue = !value ? null : value.toJS ? value.toJS() : value
 
-                      return (<tr key={key} style={{ color: "#777" }}>
+                      return (<tr key={key} className="extension">
                         <td>
                           { key }
                         </td>
-                        <td style={{ verticalAlign: "top" }}>
+                        <td>
                           { JSON.stringify(normalizedValue) }
                         </td>
                       </tr>)
diff --git a/src/core/components/online-validator-badge.jsx b/src/core/components/online-validator-badge.jsx
index a40428b1100c4b9f222a8608d934fee14ebcd3b8..1d14db28789d8773decd396318c0df2fd2110e60 100644
--- a/src/core/components/online-validator-badge.jsx
+++ b/src/core/components/online-validator-badge.jsx
@@ -53,7 +53,7 @@ export default class OnlineValidatorBadge extends React.Component {
           return null
         }
 
-        return (<span style={{ float: "right"}}>
+        return (<span className="float-right">
                 <a target="_blank" rel="noopener noreferrer" href={`${ sanitizedValidatorUrl }/debug?url=${ encodeURIComponent(this.state.url) }`}>
                     <ValidatorImage src={`${ sanitizedValidatorUrl }?url=${ encodeURIComponent(this.state.url) }`} alt="Online validator badge"/>
                 </a>
diff --git a/src/core/components/overview.jsx b/src/core/components/overview.jsx
index 6e1708d3798a4b8d6f6e83b3bdd0ddeca49ec3e5..a0fe767b02bec399a97cf8fdb45dae34cfe77e24 100644
--- a/src/core/components/overview.jsx
+++ b/src/core/components/overview.jsx
@@ -97,7 +97,7 @@ export class OperationLink extends React.Component {
     let { id, method, shown, href } = this.props
 
     return (
-      <Link href={ href } style={{fontWeight: shown ? "bold" : "normal"}} onClick={this.onClick} className="block opblock-link">
+      <Link href={ href } onClick={this.onClick} className={`block opblock-link ${shown ? "shown" : ""}`}>
         <div>
           <small className={`bold-label-${method}`}>{method.toUpperCase()}</small>
           <span className="bold-label" >{id}</span>
diff --git a/src/core/components/parameter-row.jsx b/src/core/components/parameter-row.jsx
index f0a48dd1fe35a36a78933381597638d30fa7ac8b..41b5ab445c55656e8f343a1e6e7eeaafbaf20fe0 100644
--- a/src/core/components/parameter-row.jsx
+++ b/src/core/components/parameter-row.jsx
@@ -262,7 +262,7 @@ export default class ParameterRow extends Component {
         <td className="parameters-col_name">
           <div className={required ? "parameter__name required" : "parameter__name"}>
             { param.get("name") }
-            { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
+            { !required ? null : <span>&nbsp;*</span> }
           </div>
           <div className="parameter__type">
             { type }
diff --git a/src/core/components/primitive-model.jsx b/src/core/components/primitive-model.jsx
index ff9fd2de2660ee9da4f4df21053873a93c285a9f..6ddadbd8144b2e7dc58e6f300392cb08b8295811 100644
--- a/src/core/components/primitive-model.jsx
+++ b/src/core/components/primitive-model.jsx
@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import PropTypes from "prop-types"
 import { getExtensions } from "core/utils"
 
-const propStyle = { color: "#6b6b6b", fontStyle: "italic" }
+const propClass = "property primitive"
 
 export default class Primitive extends Component {
   static propTypes = {
@@ -44,19 +44,19 @@ export default class Primitive extends Component {
         <span className="prop-type">{ type }</span>
         { format && <span className="prop-format">(${format})</span>}
         {
-          properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
+          properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
         }
         {
-          showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propStyle={ propStyle } />) : null
+          showExtensions && extensions.size ? extensions.entrySeq().map( ( [ key, v ] ) => <Property key={`${key}-${v}`} propKey={ key } propVal={ v } propClass={ propClass } />) : null
         }
         {
           !description ? null :
             <Markdown source={ description } />
         }
         {
-          xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span>
+          xml && xml.size ? (<span><br /><span className={ propClass }>xml:</span>
             {
-              xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
+              xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} className={ propClass }><br/>&nbsp;&nbsp;&nbsp;{key}: { String(v) }</span>).toArray()
             }
           </span>): null
         }
diff --git a/src/core/components/property.jsx b/src/core/components/property.jsx
index 0d129643e27ed92efa030c5e62a4fdb270666a35..c7054ae614a679489cf689bec118e270f8aa8547 100644
--- a/src/core/components/property.jsx
+++ b/src/core/components/property.jsx
@@ -1,16 +1,16 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-export const Property = ({ propKey, propVal, propStyle }) => {
+export const Property = ({ propKey, propVal, propClass }) => {
     return (
-        <span style={ propStyle }>
+        <span className={ propClass }>
           <br />{ propKey }: { String(propVal) }</span>
     )
 }
 Property.propTypes = {
   propKey: PropTypes.string,
   propVal: PropTypes.any,
-  propStyle: PropTypes.object
+  propClass: PropTypes.string
 }
 
 export default Property
diff --git a/src/core/components/response-body.jsx b/src/core/components/response-body.jsx
index 33f971f134ecce30c8e55b011557d89ff15eceac..6281acb749ad5a1a24fe978ffdf88ad4e2268642 100644
--- a/src/core/components/response-body.jsx
+++ b/src/core/components/response-body.jsx
@@ -118,7 +118,7 @@ export default class ResponseBody extends React.PureComponent {
       if(contentType.includes("svg")) {
         bodyEl = <div> { content } </div>
       } else {
-        bodyEl = <img style={{ maxWidth: "100%" }} src={ window.URL.createObjectURL(content) } />
+        bodyEl = <img className="full-width" src={ window.URL.createObjectURL(content) } />
       }
 
       // Audio
diff --git a/src/core/components/svg-assets.jsx b/src/core/components/svg-assets.jsx
index 3b078edda7eacea759be975f789755c92c58324b..ca1c13bae993365a065b8c7d9692813ac570ed32 100644
--- a/src/core/components/svg-assets.jsx
+++ b/src/core/components/svg-assets.jsx
@@ -1,11 +1,7 @@
 import React from "react"
 const SvgAssets = () =>
   <div>
-    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{
-        position: "absolute",
-        width: 0,
-        height: 0
-      }}>
+    <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" className="svg-assets">
       <defs>
         <symbol viewBox="0 0 20 20" id="unlocked">
           <path d="M15.8 8H14V5.6C14 2.703 12.665 1 10 1 7.334 1 6 2.703 6 5.6V6h2v-.801C8 3.754 8.797 3 10 3c1.203 0 2 .754 2 2.199V8H4c-.553 0-1 .646-1 1.199V17c0 .549.428 1.139.951 1.307l1.197.387C5.672 18.861 6.55 19 7.1 19h5.8c.549 0 1.428-.139 1.951-.307l1.196-.387c.524-.167.953-.757.953-1.306V9.199C17 8.646 16.352 8 15.8 8z"></path>
diff --git a/src/core/containers/filter.jsx b/src/core/containers/filter.jsx
index 8cfdcff966965e707be66c2ca4b4ebd1e3cddd52..24a668cad845a2ca8f4c4e4af49341ad437a24b7 100644
--- a/src/core/containers/filter.jsx
+++ b/src/core/containers/filter.jsx
@@ -23,18 +23,18 @@ export default class FilterContainer extends React.Component {
     const isFailed = specSelectors.loadingStatus() === "failed"
     const filter = layoutSelectors.currentFilter()
 
-    const inputStyle = {}
-    if (isFailed) inputStyle.color = "red"
-    if (isLoading) inputStyle.color = "#aaa"
+    const classNames = ["operation-filter-input"]
+    if (isFailed) classNames.push("failed")
+    if (isLoading) classNames.push("loading")
 
     return (
       <div>
         {filter === null || filter === false ? null :
           <div className="filter-container">
             <Col className="filter wrapper" mobile={12}>
-              <input className="operation-filter-input" placeholder="Filter by tag" type="text"
+              <input className={classNames.join(" ")} placeholder="Filter by tag" type="text"
                      onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter}
-                     disabled={isLoading} style={inputStyle}/>
+                     disabled={isLoading}/>
             </Col>
           </div>
         }
diff --git a/src/core/plugins/oas3/components/operation-link.jsx b/src/core/plugins/oas3/components/operation-link.jsx
index 4e9aba910944550c6ca71ffb93104d7bae14ebf8..29342872c2179200b6605bc76212ae5746c70f0c 100644
--- a/src/core/plugins/oas3/components/operation-link.jsx
+++ b/src/core/plugins/oas3/components/operation-link.jsx
@@ -12,8 +12,8 @@ class OperationLink extends Component {
     let parameters = link.get("parameters") && link.get("parameters").toJS()
     let description = link.get("description")
 
-    return <div style={{ marginBottom: "1.5em" }}>
-      <div style={{ marginBottom: ".5em" }}>
+    return <div className="operation-link">
+      <div className="description">
         <b><code>{name}</code></b>
         { description ? <Markdown source={description}></Markdown> : null }
       </div>
diff --git a/src/core/plugins/oas3/components/request-body.jsx b/src/core/plugins/oas3/components/request-body.jsx
index 5cc2a75e6e7465f29a55e8aaf9f72d43987e23e6..5e5d7a83fffe0bdbb3f29053db177536d707b570 100644
--- a/src/core/plugins/oas3/components/request-body.jsx
+++ b/src/core/plugins/oas3/components/request-body.jsx
@@ -145,7 +145,7 @@ const RequestBody = ({
                 <td className="parameters-col_name">
                         <div className={required ? "parameter__name required" : "parameter__name"}>
                           { key }
-                          { !required ? null : <span style={{color: "red"}}>&nbsp;*</span> }
+                          { !required ? null : <span>&nbsp;*</span> }
                         </div>
                         <div className="parameter__type">
                           { type }
diff --git a/src/core/plugins/oas3/wrap-components/version-stamp.jsx b/src/core/plugins/oas3/wrap-components/version-stamp.jsx
index 616fc95824706b8bc8426112a0a4ef6dabde0903..d0d188bde88d8fccf507f23a878df75c702d5e8e 100644
--- a/src/core/plugins/oas3/wrap-components/version-stamp.jsx
+++ b/src/core/plugins/oas3/wrap-components/version-stamp.jsx
@@ -6,7 +6,7 @@ export default OAS3ComponentWrapFactory((props) => {
 
   return <span>
     <Ori {...props} />
-    <small style={{ backgroundColor: "#89bf04" }}>
+    <small className="version-stamp">
       <pre className="version">OAS3</pre>
     </small>
   </span>
diff --git a/src/core/plugins/view/root-injects.jsx b/src/core/plugins/view/root-injects.jsx
index a25c479b55bda0d38829acff2295609367c9697f..7d001735457856dafd79805b90dd2b1edd597c1b 100644
--- a/src/core/plugins/view/root-injects.jsx
+++ b/src/core/plugins/view/root-injects.jsx
@@ -76,10 +76,9 @@ const createClass = component => class extends Component {
   }
 }
 
-const Fallback = ({ name }) => <div style={{ // eslint-disable-line react/prop-types
-    padding: "1em",
-    "color": "#aaa"
-  }}>😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
+const Fallback = ({ 
+  name // eslint-disable-line react/prop-types
+}) => <div className="fallback">😱 <i>Could not render { name === "t" ? "this component" : name }, see the console.</i></div>
 
 const wrapRender = (component) => {
   const isStateless = component => !(component.prototype && component.prototype.isReactComponent)
diff --git a/src/core/utils.js b/src/core/utils.js
index 042a0b256e8a36fb1fa02829a4dc09ad528e47d1..f83f433bcff93edd74bef69d645af43d3044dcb9 100644
--- a/src/core/utils.js
+++ b/src/core/utils.js
@@ -307,15 +307,15 @@ export function highlight (el) {
           // (some types are highlighted similarly)
           el[appendChild](
             node = _document.createElement("span")
-          ).setAttribute("style", [
+          ).setAttribute("class", [
             // 0: not formatted
-            "color: #555; font-weight: bold;",
+            "token-not-formatted",
             // 1: keywords
             "",
             // 2: punctuation
             "",
             // 3: strings and regexps
-            "color: #555;",
+            "token-string",
             // 4: comments
             ""
           ][
diff --git a/src/plugins/topbar/topbar.jsx b/src/plugins/topbar/topbar.jsx
index 1b2dd619fcdc029c4fb7d75873a2b2869111e9e9..39df72f6ef93a5e52143b5c200120a5212807af5 100644
--- a/src/plugins/topbar/topbar.jsx
+++ b/src/plugins/topbar/topbar.jsx
@@ -104,10 +104,10 @@ export default class Topbar extends React.Component {
     let isLoading = specSelectors.loadingStatus() === "loading"
     let isFailed = specSelectors.loadingStatus() === "failed"
 
-    let inputStyle = {}
-    if(isFailed) inputStyle.color = "red"
-    if(isLoading) inputStyle.color = "#aaa"
-
+    const classNames = ["download-url-input"]
+    if (isFailed) classNames.push("failed")
+    if (isLoading) classNames.push("loading")
+    
     const { urls } = getConfigs()
     let control = []
     let formOnSubmit = null
@@ -128,7 +128,7 @@ export default class Topbar extends React.Component {
     }
     else {
       formOnSubmit = this.downloadUrl
-      control.push(<input className="download-url-input" type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} style={inputStyle} />)
+      control.push(<input className={classNames.join(" ")} type="text" onChange={ this.onUrlChange } value={this.state.url} disabled={isLoading} />)
       control.push(<Button className="download-url-button" onClick={ this.downloadUrl }>Explore</Button>)
     }
 
diff --git a/src/style/_authorize.scss b/src/style/_authorize.scss
index ec5b56dbf5e4d8462f000dea15b84d019ea17b94..396dfe558d8b2516aa9851a1b90d578dde201ddc 100644
--- a/src/style/_authorize.scss
+++ b/src/style/_authorize.scss
@@ -65,7 +65,19 @@
 
         border-radius: 4px;
 
+        background-color: #ffeeee;
+
+        color: red;
+        
+        margin: 1em;
+
         @include text_code();
+
+        b
+        {
+            text-transform: capitalize;
+            margin-right: 1em;
+        }
     }
 }
 
diff --git a/src/style/_errors.scss b/src/style/_errors.scss
index 05fe47db91a4d23bfa8f5c9e55c607698e695809..8d36901c6386b72358c6fae22f9104cea10f56ee 100644
--- a/src/style/_errors.scss
+++ b/src/style/_errors.scss
@@ -29,6 +29,22 @@
         {
           color: $errors-wrapper-errors-small-font-color;
         }
+
+        .message
+        { 
+            white-space: pre-line;
+            
+            &.thrown
+            {
+                max-width: 100%;
+            }
+        }
+
+        .error-line
+        {
+            text-decoration: underline;
+            cursor: pointer;
+        }
     }
 
     hgroup
diff --git a/src/style/_information.scss b/src/style/_information.scss
index d7c0a3d47d3075b93714fc060d38c7b088ec6ab0..d08595959e6204743be7cd9bffbd042e90368c94 100644
--- a/src/style/_information.scss
+++ b/src/style/_information.scss
@@ -2,6 +2,14 @@
 {
     margin: 50px 0;
 
+    &.failed-config
+    { 
+        max-width: 880px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center
+    }
+
     hgroup.main
     {
         margin: 0 0 20px 0;
@@ -78,6 +86,11 @@
 
             border-radius: 57px;
             background: $info-title-small-background-color;
+            
+            &.version-stamp
+            {
+                background-color: #89bf04;
+            }
 
             pre
             {
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 83124d57780cbc6ee31314e0f5b8c61a5600e852..52aeb66650582813f99ae917b306372cd1f81c5a 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -419,6 +419,19 @@
     }
 }
 
+.filter, .download-url-wrapper
+{
+    .failed
+    {
+        color: red;
+    }
+
+    .loading
+    {
+        color: #aaa;
+    }
+}
+
 .model-example {
     margin-top: 1em;
 }
@@ -553,6 +566,11 @@
 
         @include text_body();
     }
+
+    .curl
+    {
+        white-space: normal;
+    }
 }
 
 .response-col_status
@@ -583,6 +601,16 @@
 
         @include text_code($response-col-links-font-color);
     }
+
+    .operation-link
+    {
+        margin-bottom: 1.5em;
+
+        .description
+        {
+            margin-bottom: 0.5em;
+        }
+    }
 }
 
 .opblock-body
@@ -793,6 +821,35 @@
     }
 }
 
+.hidden
+{
+    display: none;
+}
+
+.no-margin
+{
+    height: auto;
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+.float-right
+{
+    float: right;
+}
+
+img.full-width
+{
+    width: 100%;
+}
+
+.svg-assets
+{
+    position: absolute;
+    width: 0;
+    height: 0;
+}
 
 section
 {
@@ -815,6 +872,12 @@ a.nostyle {
   }
 }
 
+.fallback
+{
+    padding: 1em;
+    color: #aaa;
+}
+
 .version-pragma {
   height: 100%;
   padding: 5em 0px;
@@ -841,3 +904,27 @@ a.nostyle {
     }
   }
 }
+
+.opblock-link
+{
+    font-weight: normal;
+
+    &.shown
+    {
+        font-weight: bold;
+    }
+}
+
+span
+{
+    &.token-string
+    {
+        color: #555;
+    }
+
+    &.token-not-formatted
+    {
+        color: #555; 
+        font-weight: bold;
+    }
+}
diff --git a/src/style/_models.scss b/src/style/_models.scss
index cff2af2c49558cf2ee2772c91faf934fee558838..340ce562353f42e2949d8dd64119247e53768943 100644
--- a/src/style/_models.scss
+++ b/src/style/_models.scss
@@ -97,8 +97,68 @@
     {
         margin: 0 0 1em 0;
     }
+
+    .property
+    {
+        color: #999;
+        font-style: italic;
+
+        &.primitive
+        {
+             color: #6b6b6b;
+        }
+    }
 }
 
+table.model
+{
+    tr
+    {
+        &.description
+        {
+            color: #666;
+            font-weight: normal;
+            
+            td:first-child
+            {
+                font-weight: bold;
+            }
+        }
+
+        &.property-row
+        {
+            &.required td:first-child
+            {
+                font-weight: bold;
+            }
+
+            td
+            {
+                vertical-align: top;
+
+                &:first-child
+                {
+                    padding-right: 0.2em;
+                }
+            }
+
+            .star
+            {
+                color: red;
+            }
+        }
+
+        &.extension
+        {
+            color: #777;
+
+            td:last-child
+            {
+                vertical-align: top;
+            }
+        }
+    }
+}
 
 section.models
 {
@@ -107,6 +167,11 @@ section.models
     border: 1px solid rgba($section-models-border-color, .3);
     border-radius: 4px;
 
+    .pointer
+    {
+        cursor: pointer;
+    }
+
     &.is-open
     {
         padding: 0 0 20px;
@@ -229,6 +294,13 @@ section.models
     font-size: 16px;
 
     @include text_headline($section-models-model-title-font-color);
+
+    img
+    {
+        margin-left: 1em;
+        position: relative;
+        bottom: 0px;
+    }
 }
 
 .model-deprecated-warning
diff --git a/src/style/_table.scss b/src/style/_table.scss
index 61242dfcf50079a6ef9ebc4dd9c11c4848905023..c155a681e625a910eb402b9ccba44295dccc0688 100644
--- a/src/style/_table.scss
+++ b/src/style/_table.scss
@@ -38,6 +38,12 @@ table
 
             @include text_code();
         }
+
+        .header-example 
+        {
+            color: #999; 
+            font-style: italic;
+        }
     }
 
     tbody
@@ -112,6 +118,11 @@ table
     {
         font-weight: bold;
 
+        span
+        {
+            color: red;
+        }
+
         &:after
         {
             font-size: 10px;