diff --git a/lib/components/src/Badge/Badge.tsx b/lib/components/src/Badge/Badge.tsx
index fd0576ab6985..186d9caa8d71 100644
--- a/lib/components/src/Badge/Badge.tsx
+++ b/lib/components/src/Badge/Badge.tsx
@@ -1,63 +1,66 @@
 import React, { FunctionComponent } from 'react';
-import { styled, css } from '@storybook/theming';
+import { styled } from '@storybook/theming';
 
-type BadgeWrapperProps = BadgeProps;
+const BadgeWrapper = styled.div<BadgeProps>(
+  ({ theme }) => ({
+    display: 'inline-block',
+    fontSize: 11,
+    lineHeight: '12px',
+    alignSelf: 'center',
+    padding: '4px 12px',
+    borderRadius: '3em',
+    fontWeight: theme.typography.weight.bold,
+  }),
+  {
+    svg: {
+      height: 12,
+      width: 12,
+      marginRight: 4,
+      marginTop: -2,
 
-const BadgeWrapper = styled.div<BadgeWrapperProps>`
-  display: inline-block;
-  font-size: 11px;
-  line-height: 12px;
-  align-self: center;
-  padding: 4px 12px;
-  border-radius: 3em;
-  font-weight: ${props => props.theme.typography.weight.bold};
-
-  svg {
-    height: 12px;
-    width: 12px;
-    margin-right: 4px;
-    margin-top: -2px;
-
-    path {
-      fill: currentColor;
+      path: {
+        fill: 'currentColor',
+      },
+    },
+  },
+  ({ theme, status }) => {
+    switch (status) {
+      case 'critical': {
+        return {
+          color: theme.color.critical,
+          background: theme.background.critical,
+        };
+      }
+      case 'negative': {
+        return {
+          color: theme.color.negative,
+          background: theme.background.negative,
+        };
+      }
+      case 'warning': {
+        return {
+          color: theme.color.warning,
+          background: theme.background.warning,
+        };
+      }
+      case 'neutral': {
+        return {
+          color: theme.color.dark,
+          background: theme.color.mediumlight,
+        };
+      }
+      case 'positive': {
+        return {
+          color: theme.color.positive,
+          background: theme.background.positive,
+        };
+      }
+      default: {
+        return {};
+      }
     }
   }
-
-  ${props =>
-    props.status === 'critical' &&
-    css`
-      color: ${props.theme.color.critical};
-      background: ${props.theme.background.critical};
-    `};
-
-  ${props =>
-    props.status === 'negative' &&
-    css`
-      color: ${props.theme.color.negative};
-      background: ${props.theme.background.negative};
-    `};
-
-  ${props =>
-    props.status === 'warning' &&
-    css`
-      color: ${props.theme.color.warning};
-      background: ${props.theme.background.warning};
-    `};
-
-  ${props =>
-    props.status === 'neutral' &&
-    css`
-      color: ${props.theme.color.dark};
-      background: ${props.theme.color.mediumlight};
-    `};
-
-  ${props =>
-    props.status === 'positive' &&
-    css`
-      color: ${props.theme.color.positive};
-      background: ${props.theme.background.positive};
-    `};
-`;
+);
 
 export interface BadgeProps {
   status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
diff --git a/lib/components/src/Button/Button.stories.tsx b/lib/components/src/Button/Button.stories.tsx
index 9eb18d888821..da248be179cb 100644
--- a/lib/components/src/Button/Button.stories.tsx
+++ b/lib/components/src/Button/Button.stories.tsx
@@ -36,6 +36,9 @@ storiesOf('Basics/Button', module).add('all buttons', () => (
     <Button secondary small>
       Secondary
     </Button>
+    <Button gray small>
+      Secondary
+    </Button>
     <Button outline small>
       Outline
     </Button>
diff --git a/lib/components/src/Button/Button.tsx b/lib/components/src/Button/Button.tsx
index 63e515b10d20..22e15a04bd51 100644
--- a/lib/components/src/Button/Button.tsx
+++ b/lib/components/src/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, FunctionComponent, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
 import { darken, lighten, rgba, transparentize } from 'polished';
 
@@ -7,6 +7,7 @@ export interface ButtonProps {
   primary?: boolean;
   secondary?: boolean;
   tertiary?: boolean;
+  gray?: boolean;
   inForm?: boolean;
   disabled?: boolean;
   small?: boolean;
@@ -78,7 +79,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
           ...(small ? { padding: 9 } : { padding: 12 }),
         }
       : {},
-  ({ theme, primary, secondary }) => {
+  ({ theme, primary, secondary, gray }) => {
     let color;
 
     if (primary) {
@@ -87,11 +88,14 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
     if (secondary) {
       color = theme.color.secondary;
     }
+    if (gray) {
+      color = theme.color.medium;
+    }
 
     return color
       ? {
           background: color,
-          color: theme.color.lightest,
+          color: gray ? '#333333' : theme.color.inverseText,
 
           '&:hover': {
             background: darken(0.05, color),
@@ -226,7 +230,7 @@ const ButtonWrapper = styled.button<ButtonWrapperProps>(
 
 const ButtonLink = ButtonWrapper.withComponent('a');
 
-export const Button = Object.assign(
+export const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>> = Object.assign(
   forwardRef<any, ButtonProps>(({ isLink, children, ...props }, ref) => {
     if (isLink) {
       return (
diff --git a/lib/components/src/Colors/SideBySide.tsx b/lib/components/src/Colors/SideBySide.tsx
new file mode 100644
index 000000000000..e2e95e7b80dc
--- /dev/null
+++ b/lib/components/src/Colors/SideBySide.tsx
@@ -0,0 +1,18 @@
+import { styled } from '@storybook/theming';
+
+export const SideBySide = styled.div({
+  display: 'grid',
+  gridColumnGap: 30,
+  gridTemplateColumns: '1fr 1fr',
+
+  position: 'absolute',
+  width: '100vw',
+  height: '100vh',
+  overflow: 'auto',
+  top: 0,
+  left: 0,
+
+  '& > *': {
+    padding: 20,
+  },
+});
diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx
new file mode 100644
index 000000000000..89116dcf34a4
--- /dev/null
+++ b/lib/components/src/Colors/colorpalette.stories.mdx
@@ -0,0 +1,123 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
+
+import { themes, ThemeProvider, convert, ensure } from '@storybook/theming';
+
+import { SideBySide } from './SideBySide';
+
+<Meta title="Basics/ColorPalette" />
+
+<SideBySide>
+  <div style={{background: '#202020' }}>
+<ThemeProvider theme={ensure(themes.dark)}>
+
+Dark theme Colors
+
+<ColorPalette>
+  {Object.entries(convert(themes.dark).color).map(([k,v]) => {
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {})}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+
+Dark theme Backgrounds
+
+<ColorPalette>
+  {Object.entries(convert(themes.dark).background).map(([k,v]) => {
+    if(k === 'color'){
+      return null
+    }
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={colors}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+  </ThemeProvider></div>
+  <div styles={{ background: '#eeeeee'}}>
+
+Light theme Colors
+
+<ColorPalette>
+  {Object.entries(convert(themes.light).color).map(([k,v]) => {
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {})}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+
+Light theme Backgrounds
+
+<ColorPalette>
+  {Object.entries(convert(themes.light).background).map(([k,v]) => {
+    if(k === 'color'){
+      return null
+    }
+    if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={{ [k]: v }}
+        />
+      );
+    } else if (typeof v === 'object') {
+      const colors = Object.entries(v).reduce((acc, [key, value]) => (typeof value === 'string' && (value.match(/^#/) || value.match(/^rgb/) || key.match(/color/i))) ? {...acc, [key]: value} : acc, {});
+      return (
+        <ColorItem
+          key={k}
+          title={k}
+          colors={colors}
+        />
+      );
+    }
+    return null;
+  })}
+</ColorPalette>
+  </div>
+</SideBySide>
diff --git a/lib/components/src/Loader/Loader.stories.tsx b/lib/components/src/Loader/Loader.stories.tsx
index 33e4cca3b6f3..510fd5d1b0aa 100644
--- a/lib/components/src/Loader/Loader.stories.tsx
+++ b/lib/components/src/Loader/Loader.stories.tsx
@@ -2,4 +2,32 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Loader } from './Loader';
 
-storiesOf('Basics/Loader', module).add('infinite state', () => <Loader role="progressbar" />);
+storiesOf('Basics/Loader', module)
+  .addDecorator(storyFn => (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        background:
+          'linear-gradient(to right, rgba(56,56,56,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%)',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute',
+          top: '50%',
+          left: 0,
+          height: '50vh',
+          width: '100vw',
+          background:
+            'linear-gradient(to right, red 0%, orangered 50%, blue 50%, deepskyblue 100%)',
+        }}
+      />
+      {storyFn()}
+    </div>
+  ))
+  .add('infinite state', () => <Loader role="progressbar" />)
+  .add('size adjusted', () => <Loader size={64} role="progressbar" />);
diff --git a/lib/components/src/Loader/Loader.tsx b/lib/components/src/Loader/Loader.tsx
index 01f7b5645006..b642833a279f 100644
--- a/lib/components/src/Loader/Loader.tsx
+++ b/lib/components/src/Loader/Loader.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
+import React, { FunctionComponent, ComponentProps } from 'react';
 import { styled } from '@storybook/theming';
-import { transparentize, opacify } from 'polished';
 import { rotate360 } from '../shared/animation';
 
-const LoaderWrapper = styled.div(({ theme }) => ({
+const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({
   borderRadius: '3em',
   cursor: 'progress',
   display: 'inline-block',
@@ -13,25 +12,19 @@ const LoaderWrapper = styled.div(({ theme }) => ({
   verticalAlign: 'top',
   top: '50%',
   left: '50%',
-  marginTop: -16,
-  marginLeft: -16,
-  height: 32,
-  width: 32,
+  marginTop: -(size / 2),
+  marginLeft: -(size / 2),
+  height: size,
+  width: size,
   zIndex: 4,
   borderWidth: 2,
   borderStyle: 'solid',
-  borderColor: transparentize(0.06, theme.appBorderColor),
-  borderTopColor: opacify(0.07, theme.appBorderColor),
+  borderColor: 'rgba(97, 97, 97, 0.29)',
+  borderTopColor: 'rgb(100,100,100)',
   animation: `${rotate360} 0.7s linear infinite`,
+  mixBlendMode: 'difference',
 }));
 
-export function Loader({ ...props }) {
-  return (
-    <LoaderWrapper
-      aria-label="Content is loading ..."
-      aria-live="polite"
-      role="status"
-      {...props}
-    />
-  );
-}
+export const Loader: FunctionComponent<ComponentProps<typeof LoaderWrapper>> = props => (
+  <LoaderWrapper aria-label="Content is loading ..." aria-live="polite" role="status" {...props} />
+);
diff --git a/lib/components/src/blocks/Toolbar.tsx b/lib/components/src/blocks/Toolbar.tsx
index af0efb6e4236..b3e9909b24f7 100644
--- a/lib/components/src/blocks/Toolbar.tsx
+++ b/lib/components/src/blocks/Toolbar.tsx
@@ -67,7 +67,7 @@ const Eject: FunctionComponent<EjectProps> = ({ baseUrl, storyId }) => (
   </IconButton>
 );
 
-const Bar = styled(props => <FlexBar {...props} />)({
+const Bar = styled(FlexBar)({
   position: 'absolute',
   left: 0,
   right: 0,
diff --git a/lib/components/src/spaced/Spaced.tsx b/lib/components/src/spaced/Spaced.tsx
index 7666a4264932..c0354500b9cc 100644
--- a/lib/components/src/spaced/Spaced.tsx
+++ b/lib/components/src/spaced/Spaced.tsx
@@ -3,6 +3,9 @@ import { styled } from '@storybook/theming';
 
 const toNumber = (input: any) => (typeof input === 'number' ? input : Number(input));
 
+const ignoreSsrWarning =
+  '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';
+
 export interface ContainerProps {
   col?: number;
   row?: number;
@@ -19,7 +22,7 @@ const Container = styled.div<ContainerProps>(
             marginLeft: col * theme.layoutMargin,
             verticalAlign: 'inherit',
           },
-          '& > *:first-of-type': {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginLeft: 0,
           },
         }
@@ -27,7 +30,7 @@ const Container = styled.div<ContainerProps>(
           '& > *': {
             marginTop: row * theme.layoutMargin,
           },
-          '& > *:first-of-type': {
+          [`& > *:first-child${ignoreSsrWarning}`]: {
             marginTop: 0,
           },
         },
diff --git a/lib/theming/src/convert.ts b/lib/theming/src/convert.ts
index c35030a6ae1d..da0666ded750 100644
--- a/lib/theming/src/convert.ts
+++ b/lib/theming/src/convert.ts
@@ -49,15 +49,15 @@ const createColors = (vars: ThemeVars): Color => ({
   ultraviolet: color.ultraviolet,
 
   // Monochrome
-  lightest: color.lightest,
-  lighter: color.lighter,
-  light: color.light,
-  mediumlight: color.mediumlight,
+  lightest: vars.base === 'dark' ? color.darkest : color.lightest,
+  lighter: vars.base === 'dark' ? color.darker : color.lighter,
+  light: vars.base === 'dark' ? color.dark : color.light,
+  mediumlight: vars.base === 'dark' ? color.mediumdark : color.mediumlight,
   medium: color.medium,
-  mediumdark: color.mediumdark,
-  dark: color.dark,
-  darker: color.darker,
-  darkest: color.darkest,
+  mediumdark: vars.base === 'dark' ? color.mediumlight : color.mediumdark,
+  dark: vars.base === 'dark' ? color.light : color.dark,
+  darker: vars.base === 'dark' ? color.lighter : color.darker,
+  darkest: vars.base === 'dark' ? color.lightest : color.darkest,
 
   // For borders
   border: color.border,
diff --git a/lib/ui/src/components/layout/container.tsx b/lib/ui/src/components/layout/container.tsx
index c6fcd354836b..0c42a598541e 100644
--- a/lib/ui/src/components/layout/container.tsx
+++ b/lib/ui/src/components/layout/container.tsx
@@ -510,7 +510,7 @@ class Layout extends Component<LayoutProps, LayoutState> {
             onDrag={this.resizeNav}
             onStop={this.unsetDrag}
           >
-            <Handle shadow="left" axis="x" isDragging={isDragging === 'nav'} />
+            <Handle axis="x" isDragging={isDragging === 'nav'} />
           </Draggable>
         )}
 
@@ -539,7 +539,6 @@ class Layout extends Component<LayoutProps, LayoutState> {
           >
             <Handle
               isDragging={isDragging === 'panel'}
-              shadow={isPanelBottom ? 'top' : 'left'}
               style={
                 isPanelBottom
                   ? {
diff --git a/lib/ui/src/components/layout/desktop.tsx b/lib/ui/src/components/layout/desktop.tsx
index f135c2d19683..5164c73b24da 100644
--- a/lib/ui/src/components/layout/desktop.tsx
+++ b/lib/ui/src/components/layout/desktop.tsx
@@ -21,66 +21,69 @@ export interface DesktopProps {
   docsOnly: boolean;
 }
 
-const Desktop = React.memo<DesktopProps>(
-  ({
-    Panel,
-    Sidebar,
-    Preview,
-    Notifications,
-    pages,
-    options,
-    viewMode = undefined,
-    width = 0,
-    height = 0,
-    panelCount,
-    docsOnly = false,
-  }) => (
-    <Fragment>
-      <Notifications
-        placement={{
-          position: 'fixed',
-          bottom: 20,
-          left: 20,
-        }}
-      />
-      {width && height ? (
-        <S.Layout
-          options={options}
-          bounds={{ width, height, top: 0, left: 0 }}
-          viewMode={viewMode}
-          docsOnly={!!docsOnly}
-          panelCount={panelCount}
-        >
-          {({ navProps, mainProps, panelProps, previewProps }) => (
-            <Fragment>
-              <S.Sidebar {...navProps}>
-                <Sidebar />
-              </S.Sidebar>
-              <S.Main {...mainProps} isFullscreen={!!mainProps.isFullscreen}>
-                <S.Preview {...previewProps} hidden={viewMode === 'settings'}>
-                  <Preview id="main" />
-                </S.Preview>
+const Desktop = Object.assign(
+  React.memo<DesktopProps>(
+    ({
+      Panel,
+      Sidebar,
+      Preview,
+      Notifications,
+      pages,
+      options,
+      viewMode = undefined,
+      width = 0,
+      height = 0,
+      panelCount,
+      docsOnly = false,
+    }) => (
+      <Fragment>
+        <Notifications
+          placement={{
+            position: 'fixed',
+            bottom: 20,
+            left: 20,
+          }}
+        />
+        {width && height ? (
+          <S.Layout
+            options={options}
+            bounds={{ width, height, top: 0, left: 0 }}
+            viewMode={viewMode}
+            docsOnly={!!docsOnly}
+            panelCount={panelCount}
+          >
+            {({ navProps, mainProps, panelProps, previewProps }) => (
+              <Fragment>
+                <S.Sidebar {...navProps}>
+                  <Sidebar />
+                </S.Sidebar>
+                <S.Main {...mainProps} isFullscreen={!!mainProps.isFullscreen}>
+                  <S.Preview {...previewProps} hidden={viewMode === 'settings'}>
+                    <Preview id="main" />
+                  </S.Preview>
 
-                <S.Panel {...panelProps} hidden={viewMode !== 'story' || docsOnly}>
-                  <Panel />
-                </S.Panel>
+                  <S.Panel {...panelProps} hidden={viewMode !== 'story' || docsOnly}>
+                    <Panel />
+                  </S.Panel>
 
-                {pages.map(({ key, route: Route, render: Content }) => (
-                  <Route key={key}>
-                    <Content />
-                  </Route>
-                ))}
-              </S.Main>
-            </Fragment>
-          )}
-        </S.Layout>
-      ) : (
-        <div title={JSON.stringify({ width, height })} />
-      )}
-    </Fragment>
-  )
+                  {pages.map(({ key, route: Route, render: Content }) => (
+                    <Route key={key}>
+                      <Content />
+                    </Route>
+                  ))}
+                </S.Main>
+              </Fragment>
+            )}
+          </S.Layout>
+        ) : (
+          <div title={JSON.stringify({ width, height })} />
+        )}
+      </Fragment>
+    )
+  ),
+  {
+    displayName: 'DesktopLayout',
+  }
 );
 
-Desktop.displayName = 'DesktopLayout';
-
 export { Desktop };
diff --git a/lib/ui/src/components/layout/draggers.tsx b/lib/ui/src/components/layout/draggers.tsx
index 0380bd7683c5..9d145bbb2039 100644
--- a/lib/ui/src/components/layout/draggers.tsx
+++ b/lib/ui/src/components/layout/draggers.tsx
@@ -1,7 +1,9 @@
 import Draggable, { DraggableEvent, DraggableData } from 'react-draggable';
 import { styled } from '@storybook/theming';
 
-const Handle = styled.div<{ isDragging: boolean; axis: 'x' | 'y'; shadow: 'top' | 'left' }>(
+type Axis = 'x' | 'y';
+
+const Handle = styled.div<{ isDragging: boolean; axis: Axis }>(
   ({ theme, isDragging }) => ({
     zIndex: 10,
     position: 'absolute',
@@ -35,8 +37,8 @@ const Handle = styled.div<{ isDragging: boolean; axis: 'x' | 'y'; shadow: 'top'
           width: '100%',
           marginTop: 0,
         },
-  ({ shadow, isDragging }) => {
-    if (shadow === 'top') {
+  ({ axis, isDragging }) => {
+    if (axis === 'y') {
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
         backgroundSize: '100% 50px',
@@ -51,7 +53,7 @@ const Handle = styled.div<{ isDragging: boolean; axis: 'x' | 'y'; shadow: 'top'
             '&:hover': style,
           };
     }
-    if (shadow === 'left') {
+    if (axis === 'x') {
       const style = {
         backgroundImage: `radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%)`,
         backgroundSize: '50px 100%',