diff --git a/types/styled-system/index.d.ts b/types/styled-system/index.d.ts
new file mode 100644
index 0000000000..ea6fdc03db
--- /dev/null
+++ b/types/styled-system/index.d.ts
@@ -0,0 +1,603 @@
+// Type definitions for styled-system 2.3
+// Project: https://github.com/jxnblk/styled-system#readme
+// Definitions by: Marshall Bowers <https://github.com/maxdeviant>
+//                 Ben McCormick   <https://github.com/phobon>
+//                 Justin Bennett  <https://github.com/zephraph>
+//                 Christopher Pappas <https://github.com/damassi>
+//                 Eloy Durán      <https://github.com/alloy>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.6
+
+/**
+ * Core
+ */
+
+export type GlobalStyleValues = "inherit" | "initial" | "unset";
+
+export interface BaseTheme {
+    breakpoints?: number[];
+    space?: number[];
+    fontSizes?: number[];
+    colors?: {
+        [name: string]: string;
+    };
+}
+
+/**
+ * Space
+ */
+
+export type ResponsiveValue<T> = T | Array<T | null>;
+
+export type SpaceValue = number | string;
+export type ResponsiveSpaceValue = ResponsiveValue<SpaceValue>;
+
+export interface SpaceProps {
+    m?: ResponsiveSpaceValue;
+    mt?: ResponsiveSpaceValue;
+    mr?: ResponsiveSpaceValue;
+    mb?: ResponsiveSpaceValue;
+    ml?: ResponsiveSpaceValue;
+    mx?: ResponsiveSpaceValue;
+    my?: ResponsiveSpaceValue;
+    p?: ResponsiveSpaceValue;
+    pt?: ResponsiveSpaceValue;
+    pr?: ResponsiveSpaceValue;
+    pb?: ResponsiveSpaceValue;
+    pl?: ResponsiveSpaceValue;
+    px?: ResponsiveSpaceValue;
+    py?: ResponsiveSpaceValue;
+}
+
+export function space(...args: any[]): any;
+
+/**
+ * Width
+ */
+
+export type WidthValue = number | string;
+export type ResponsiveWidthValue = ResponsiveValue<WidthValue>;
+
+export interface WidthProps {
+    width?: ResponsiveWidthValue;
+}
+
+export interface MinWidthProps {
+    minWidth?: ResponsiveWidthValue;
+}
+
+export interface MaxWidthProps {
+    maxWidth?: ResponsiveWidthValue;
+}
+
+export function width(...args: any[]): any;
+export function minWidth(...args: any[]): any;
+export function maxWidth(...args: any[]): any;
+
+/**
+ * Height
+ */
+
+export type HeightValue = number | string;
+export type ResponsiveHeightValue = ResponsiveValue<HeightValue>;
+
+export interface HeightProps {
+    height?: ResponsiveHeightValue;
+}
+
+export interface MinHeightProps {
+    minHeight?: ResponsiveHeightValue;
+}
+
+export interface MaxHeightProps {
+    maxHeight?: ResponsiveHeightValue;
+}
+
+export function height(...args: any[]): any;
+export function minHeight(...args: any[]): any;
+export function maxHeight(...args: any[]): any;
+
+/**
+ * Font Size
+ */
+
+export type FontSizeValue = number | string;
+export type ResponsiveFontSizeValue = ResponsiveValue<FontSizeValue>;
+
+export interface FontSizeProps {
+    fontSize?: ResponsiveFontSizeValue;
+}
+
+export function fontSize(...args: any[]): any;
+
+/**
+ * Color
+ */
+export type ColorValue = string;
+export type ResponsiveColorValue = ResponsiveValue<ColorValue>;
+
+export interface ColorProps {
+    color?: ResponsiveColorValue;
+}
+
+export function color(...args: any[]): any;
+
+/**
+ * Typography
+ */
+export interface FontFamilyProps {
+    fontFamily?: string;
+}
+export function fontFamily(...args: any[]): any;
+
+export type TextAlignValue =
+    | "left"
+    | "right"
+    | "center"
+    | "justify"
+    | "justify-all"
+    | "start"
+    | "end"
+    | "match-parent";
+export type ResponsiveTextAlignValue = ResponsiveValue<TextAlignValue>;
+
+export interface TextAlignProps {
+    textAlign?: ResponsiveTextAlignValue;
+}
+
+export function textAlign(...args: any[]): any;
+
+export type LineHeightValue = number | string;
+export type ResponsiveLineHeightValue = ResponsiveValue<LineHeightValue>;
+export interface LineHeightProps {
+    lineHeight?: ResponsiveLineHeightValue;
+}
+export function lineHeight(...args: any[]): any;
+
+export type FontWeightValue =
+    | GlobalStyleValues
+    | "normal"
+    | "bold"
+    | "lighter"
+    | "bolder"
+    | number;
+
+export interface FontWeightProps {
+    fontWeight?: FontWeightValue;
+}
+
+export function fontWeight(...args: any[]): any;
+
+export type LetterSpacingValue = number | string;
+export type ResponsiveLetterSpacingValue = ResponsiveValue<LetterSpacingValue>;
+export interface LetterSpacingProps {
+    letterSpacing?: ResponsiveLetterSpacingValue;
+}
+export function letterSpacing(...args: any[]): any;
+
+/**
+ * Layout
+ */
+
+export type DisplayValue =
+    | "inline"
+    | "block"
+    | "contents"
+    | "flex"
+    | "grid"
+    | "inline-block";
+export type ResponsiveDisplayValue = ResponsiveValue<DisplayValue>;
+export interface DisplayProps {
+    display?: ResponsiveDisplayValue;
+}
+
+export function display(...args: any[]): any;
+
+export interface SizeProps {
+    size?: ResponsiveWidthValue | ResponsiveHeightValue;
+}
+
+export function size(...args: any[]): any;
+
+export type RatioValue = SpaceValue;
+
+export interface RatioProps {
+    ratio?: RatioValue;
+}
+
+export function ratio(...args: any[]): any;
+
+/**
+ * Flexbox
+ */
+
+export type AlignItemsValue =
+    | "normal"
+    | "stretch"
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "self-start"
+    | "self-end"
+    | "left"
+    | "right"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "safe center"
+    | "unsafe center";
+export type ResponsiveAlignItemsValue = ResponsiveValue<AlignItemsValue>;
+
+export interface AlignItemsProps {
+    align?: ResponsiveAlignItemsValue;
+    alignItems?: ResponsiveAlignItemsValue;
+}
+
+export function alignItems(...args: any[]): any;
+
+export type JustifyContentValue =
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "left"
+    | "right"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "stretch"
+    | "safe center"
+    | "unsafe center";
+export type ResponsiveJustifyContentValue = ResponsiveValue<
+    JustifyContentValue
+>;
+
+export interface JustifyContentProps {
+    justify?: ResponsiveJustifyContentValue;
+    justifyContent?: ResponsiveJustifyContentValue;
+}
+
+export function justifyContent(...args: any[]): any;
+
+export type FlexWrapValue = true | "nowrap" | "wrap" | "wrap-reverse";
+
+export interface FlexWrapProps {
+    flexWrap?: FlexWrapValue;
+}
+
+export function flexWrap(...args: any[]): any;
+
+export type FlexDirectionValue =
+    | GlobalStyleValues
+    | "row"
+    | "row-reverse"
+    | "column"
+    | "column-reverse";
+
+export type ResponsiveFlexDirectionValue = ResponsiveValue<FlexDirectionValue>;
+
+export interface FlexDirectionProps {
+    flexDirection?: ResponsiveFlexDirectionValue;
+}
+
+export function flexDirection(...args: any[]): any;
+
+export type FlexValue = number | string;
+export type ResponsiveFlexValue = ResponsiveValue<FlexValue>;
+
+export interface FlexProps {
+    flex?: ResponsiveFlexValue;
+}
+
+export function flex(...args: any[]): any;
+
+export type AlignContentValue =
+    | GlobalStyleValues
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "normal"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "space-between"
+    | "space-around"
+    | "space-evenly"
+    | "stretch"
+    | "safe center"
+    | "unsafe center";
+export type ResponsiveAlignContentValue = ResponsiveValue<AlignContentValue>;
+
+export interface AlignContentProps {
+    alignContent?: ResponsiveAlignItemsValue;
+}
+
+export function alignContent(...args: any[]): any;
+
+export type JustifySelfValue =
+    | GlobalStyleValues
+    | "auto"
+    | "normal"
+    | "stretch"
+    | "center"
+    | "start"
+    | "end"
+    | "flex-start"
+    | "flex-end"
+    | "self-start"
+    | "self-end"
+    | "left"
+    | "right"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "safe center"
+    | "unsafe center";
+
+export type ResponsiveJustifySelfValue = ResponsiveValue<JustifySelfValue>;
+
+export interface JustifySelfProps {
+    justifySelf?: ResponsiveJustifySelfValue;
+}
+
+export function justifySelf(...args: any[]): any;
+
+export type AlignSelfValue =
+    | "auto"
+    | "normal"
+    | "center"
+    | "start"
+    | "end"
+    | "self-start"
+    | "self-end"
+    | "flex-start"
+    | "flex-end"
+    | "left"
+    | "right"
+    | "baseline"
+    | "first baseline"
+    | "last baseline"
+    | "stretch"
+    | "safe center"
+    | "unsafe center";
+export type ResponsiveAlignSelfValue = ResponsiveValue<AlignSelfValue>;
+
+export interface AlignSelfProps {
+    alignSelf?: ResponsiveAlignSelfValue;
+}
+
+export function alignSelf(...args: any[]): any;
+
+export type OrderValue = GlobalStyleValues | number;
+export type ResponsiveOrderValue = ResponsiveValue<OrderValue>;
+
+export interface OrderProps {
+    order?: ResponsiveOrderValue;
+}
+
+export function order(...args: any[]): any;
+
+export type FlexBasisValue =
+    | GlobalStyleValues
+    | "auto"
+    | "fill"
+    | "max-content"
+    | "min-content"
+    | "fit-content"
+    | "content";
+
+export interface FlexBasisProps {
+    // TODO: The FlexBasisValue currently really only exists for documentation
+    //       purposes, because flex-basis also accepts `Nem` and `Npx` strings.
+    //       Not sure there’s a way to still have the union values show up as
+    //       auto-completion results.
+    flexBasis?: FlexBasisValue | string;
+}
+
+export function flexBasis(...args: any[]): any;
+
+/**
+ * Grid Layout
+ */
+
+// TODO: Add grid values
+
+/**
+ * Background
+ */
+
+export type BackgroundValue = string;
+export interface BackgroundProps {
+    background?: BackgroundValue;
+    bg?: BackgroundValue;
+}
+
+export function background(...args: any[]): any;
+
+export type BackgroundImageValue = string;
+export interface BackgroundImageProps {
+    /**
+     * Value will be wrapped in url()
+     */
+    backgroundImage?: BackgroundImageValue;
+}
+
+export function backgroundImage(...args: any[]): any;
+
+export type BackgroundSizeValue = string;
+export interface BackgroundSizeProps {
+    backgroundSize?: BackgroundSizeValue;
+}
+
+export function backgroundSize(...args: any[]): any;
+
+export type BackgroundPositionValue = string;
+export interface BackgroundPositionProps {
+    backgroundPosition?: BackgroundPositionValue;
+}
+
+export function backgroundPosition(...args: any[]): any;
+
+export type BackgroundRepeatValue = string;
+export interface BackgroundRepeatProps {
+    backgroundRepeat?: BackgroundRepeatValue;
+}
+
+export function backgroundRepeat(...args: any[]): any;
+
+/**
+ * Misc
+ */
+
+export type BorderRadiusValue = string | number;
+export interface BorderRadiusProps {
+    borderRadius?: BorderRadiusValue;
+}
+export function borderRadius(...args: any[]): any;
+
+export type BorderColorValue = string;
+export interface BorderColorProps {
+    borderColor?: BorderColorValue;
+}
+export function borderColor(...args: any[]): any;
+
+export type BorderValue = string | number;
+export type ResponsiveBorderValue = ResponsiveValue<BorderValue>;
+export interface BorderProps {
+    border?: ResponsiveBorderValue;
+    borderTop?: ResponsiveBorderValue;
+    borderRight?: ResponsiveBorderValue;
+    borderBottom?: ResponsiveBorderValue;
+    borderLeft?: ResponsiveBorderValue;
+}
+export function borders(...args: any[]): any;
+
+export type BoxShadowValue = string | number;
+export interface BoxShadowProps {
+    boxShadow?: BoxShadowValue;
+}
+export function boxShadow(...arg: any[]): any;
+
+/**
+ * Position
+ */
+
+export type PositionValue =
+    | "static"
+    | "relative"
+    | "absolute"
+    | "sticky"
+    | "fixed";
+export type ResponsivePositionValue = ResponsiveValue<PositionValue>;
+export interface PositionProps {
+    position?: ResponsivePositionValue;
+}
+export function position(...args: any[]): any;
+
+export type ZIndexValue = GlobalStyleValues | "auto" | number;
+
+export interface ZIndexProps {
+    zIndex?: ZIndexValue;
+}
+export function zIndex(...args: any[]): any;
+
+export type TopValue = string | number;
+export type ResponsiveTopValue = ResponsiveValue<TopValue>;
+export interface TopProps {
+    top?: ResponsiveTopValue;
+}
+export function top(...args: any[]): any;
+
+export type RightValue = string | number;
+export type ResponsiveRightValue = ResponsiveValue<RightValue>;
+export interface RightProps {
+    right?: ResponsiveRightValue;
+}
+export function right(...args: any[]): any;
+
+export type BottomValue = string | number;
+export type ResponsiveBottomValue = ResponsiveValue<BottomValue>;
+export interface BottomProps {
+    bottom?: ResponsiveBottomValue;
+}
+export function bottom(...args: any[]): any;
+
+export type LeftValue = string | number;
+export type ResponsiveLeftValue = ResponsiveValue<LeftValue>;
+export interface LeftProps {
+    left?: ResponsiveLeftValue;
+}
+export function left(...args: any[]): any;
+
+/**
+ * Pseudo-classes
+ */
+
+export interface PseudoStyleValue {
+    color?: ColorValue;
+    backgroundColor?: ColorValue;
+    borderColor?: BorderColorValue;
+    boxShadow?: BoxShadowValue;
+    textDecoration?: string;
+}
+export type HoverValue = PseudoStyleValue;
+export interface HoverProps {
+    hover?: HoverValue;
+}
+export function hover(...args: any[]): any;
+
+export type FocusValue = PseudoStyleValue;
+export interface FocusProps {
+    focus?: FocusValue;
+}
+export function focus(...args: any[]): any;
+
+export type ActiveValue = PseudoStyleValue;
+export interface ActiveProps {
+    active?: ActiveValue;
+}
+export function active(...args: any[]): any;
+
+export type DisabledValue = PseudoStyleValue;
+export interface DisabledProps {
+    disabledStyle?: DisabledValue;
+}
+export function disabled(...args: any[]): any;
+
+/**
+ * Utilities
+ */
+
+export function theme(keys: string): any;
+export function themeGet(keys: string, fallback?: string): any;
+
+export function cleanElement(component: any): any;
+
+export function removeProps(props: any): any;
+
+/**
+ * Low-level style export functions
+ */
+
+export interface LowLevelStylefunctionArguments {
+    prop: string;
+    cssProperty?: string;
+    key?: string;
+    numberToPx?: boolean;
+    alias?: string;
+    getter?: () => any;
+}
+
+export function style(args: LowLevelStylefunctionArguments): any;
+
+export function responsiveStyle(args: LowLevelStylefunctionArguments): any;
+
+export function pseudoStyle(args: LowLevelStylefunctionArguments): any;
diff --git a/types/styled-system/package.json b/types/styled-system/package.json
new file mode 100644
index 0000000000..da1a3181d0
--- /dev/null
+++ b/types/styled-system/package.json
@@ -0,0 +1,6 @@
+{
+    "private": true,
+    "dependencies": {
+        "styled-components": "^3.3.2"
+    }
+}
diff --git a/types/styled-system/styled-system-tests.tsx b/types/styled-system/styled-system-tests.tsx
new file mode 100644
index 0000000000..78340eb3d8
--- /dev/null
+++ b/types/styled-system/styled-system-tests.tsx
@@ -0,0 +1,351 @@
+// Example uses styled-components, but styled-system works with most other css-in-js libraries as well
+import * as React from "react";
+import styled from "styled-components";
+import {
+    themeGet,
+    space,
+    width,
+    fontSize,
+    color,
+    fontFamily,
+    display,
+    SpaceProps,
+    WidthProps,
+    ColorProps,
+    DisplayProps,
+    FontSizeProps,
+    FontFamilyProps,
+    textAlign,
+    TextAlignProps,
+    background,
+    BackgroundProps,
+    maxWidth,
+    MaxWidthProps,
+    lineHeight,
+    LineHeightProps,
+    FontWeightProps,
+    fontWeight,
+    letterSpacing,
+    LetterSpacingProps,
+    minWidth,
+    MinWidthProps,
+    HeightProps,
+    height,
+    MaxHeightProps,
+    maxHeight,
+    minHeight,
+    MinHeightProps,
+    size,
+    SizeProps,
+    RatioProps,
+    ratio,
+    alignItems,
+    AlignItemsProps,
+    AlignContentProps,
+    alignContent,
+    justifyContent,
+    JustifyContentProps,
+    FlexWrapProps,
+    flexWrap,
+    flexBasis,
+    FlexBasisProps,
+    borderColor,
+    BorderColorProps,
+    flexDirection,
+    FlexDirectionProps,
+    flex,
+    FlexProps,
+    justifySelf,
+    JustifySelfProps,
+    alignSelf,
+    AlignSelfProps,
+    borders,
+    BorderProps,
+    borderRadius,
+    BorderRadiusProps,
+    position,
+    PositionProps,
+    zIndex,
+    ZIndexProps,
+    top,
+    bottom,
+    left,
+    right,
+    TopProps,
+    BottomProps,
+    LeftProps,
+    RightProps,
+    boxShadow,
+    BoxShadowProps,
+    backgroundImage,
+    backgroundPosition,
+    backgroundRepeat,
+    backgroundSize,
+    BackgroundImageProps,
+    BackgroundPositionProps,
+    BackgroundRepeatProps,
+    BackgroundSizeProps,
+    hover,
+    HoverProps,
+    focus,
+    FocusProps,
+    active,
+    ActiveProps,
+    disabled,
+    DisabledProps
+} from "styled-system";
+
+interface BoxProps
+    extends SpaceProps,
+        WidthProps,
+        FontSizeProps,
+        ColorProps,
+        DisplayProps,
+        BackgroundProps,
+        MaxWidthProps,
+        MinWidthProps,
+        HeightProps,
+        MaxHeightProps,
+        MinHeightProps,
+        SizeProps,
+        RatioProps,
+        BorderColorProps,
+        FlexProps,
+        JustifySelfProps,
+        AlignSelfProps,
+        BorderProps,
+        BorderRadiusProps,
+        PositionProps,
+        ZIndexProps,
+        TopProps,
+        BottomProps,
+        LeftProps,
+        RightProps,
+        BoxShadowProps,
+        BackgroundImageProps,
+        BackgroundPositionProps,
+        BackgroundRepeatProps,
+        BackgroundSizeProps,
+        HoverProps,
+        FocusProps,
+        ActiveProps,
+        DisabledProps {}
+const Box = styled.div.attrs<BoxProps>({})`
+
+border-radius: ${themeGet("radii.small", "4px")};
+  ${space}
+  ${width}
+  ${fontSize}
+  ${color}
+  ${display}
+  ${background}
+  ${maxWidth}
+  ${minWidth}
+  ${height}
+  ${maxHeight}
+  ${minHeight}
+  ${size}
+  ${ratio}
+  ${borderColor}
+  ${flex}
+  ${justifySelf}
+  ${alignSelf}
+  ${borders}
+  ${borderRadius}
+  ${position}
+  ${zIndex}
+  ${top}
+  ${bottom}
+  ${left}
+  ${right}
+  ${boxShadow}
+  ${backgroundImage}
+  ${backgroundPosition}
+  ${backgroundRepeat}
+  ${backgroundSize}
+  ${hover}
+  ${focus}
+  ${active}
+  ${disabled}
+`;
+
+interface TextProps
+    extends FontSizeProps,
+        FontFamilyProps,
+        TextAlignProps,
+        LineHeightProps,
+        FontWeightProps,
+        LetterSpacingProps {}
+const Text = styled.div.attrs<TextProps>({})`
+    ${fontSize};
+    ${fontFamily};
+    ${textAlign};
+    ${lineHeight};
+    ${fontWeight};
+    ${letterSpacing};
+`;
+
+interface FlexComponentProps
+    extends AlignItemsProps,
+        AlignContentProps,
+        JustifyContentProps,
+        FlexWrapProps,
+        FlexBasisProps,
+        FlexDirectionProps {}
+const Flex = styled.div.attrs<FlexComponentProps>({})`
+    ${alignItems};
+    ${alignContent};
+    ${justifyContent};
+    ${flexWrap};
+    ${flexBasis};
+    ${flexDirection};
+`;
+
+const test = () => (
+    <div>
+        // width: 50%
+        <Box width={1 / 2} />
+        // font-size: 20px (theme.fontSizes[4])
+        <Box fontSize={4} />
+        // margin: 16px (theme.space[2])
+        <Box m={2} />
+        // padding: 32px (theme.space[3])
+        <Box p={3} />
+        // color
+        <Box color="tomato" />
+        // color: #333 (theme.colors.gray[0])
+        <Box color="grays.0" />
+        // background color
+        <Box bg="tomato" />
+        // responsive width
+        <Box width={[1, 1 / 2, 1 / 4]} />
+        // responsive font-size
+        <Box fontSize={[2, 3, 4]} />
+        // responsive margin
+        <Box m={[1, 2, 3]} />
+        // responsive padding
+        <Box p={[1, 2, 3]} />
+        // examples (margin prop) // sets margin value of `theme.space[2]`
+        <Box m={2} />
+        // sets margin value of `-1 * theme.space[2]`
+        <Box m={-2} />
+        // sets a margin value of `16px` since it's greater than
+        `theme.space.length`
+        <Box m={16} />
+        // sets margin `'auto'`
+        <Box m="auto" />
+        // sets margin `8px` on all viewports and `16px` from the smallest
+        breakpoint and up
+        <Box m={[1, 2]} />
+        // examples // width `50%`
+        <Box width={1 / 2} />
+        // width `256px`
+        <Box width={256} />
+        // width `'2em'`
+        <Box width="2em" />
+        // width `100%` on all viewports and `50%` from the smallest breakpoint
+        and up
+        <Box width={[1, 1 / 2]} />
+        // examples // font-size of `theme.fontSizes[3]`
+        <Text fontSize={3} />
+        // font-size `32px`
+        <Text fontSize={32} />
+        // font-size `'2em'`
+        <Text fontSize="2em" />
+        // font-size `10px` on all viewports and `12px` from the smallest
+        breakpoint and up
+        <Text fontSize={[10, 12]} />
+        // examples // picks the value defined in `theme.colors['blue']`
+        <Box color="blue" />
+        // picks up a nested color value using dot notation //
+        `theme.colors['gray'][0]`
+        <Box color="gray.0" />
+        // raw CSS color value
+        <Box color="#f00" />
+        // fontFamily
+        <Text fontFamily="mono" />
+        // textAlign (responsive)
+        <Text textAlign="center" />
+        <Text textAlign={["center", "left"]} />
+        // lineHeight
+        <Text lineHeight="1.25" />
+        // fontWeight
+        <Text fontWeight="bold" />
+        // letterSpacing
+        <Text letterSpacing="0.1em" />
+        // display (responsive)
+        <Box display="inline-block" />
+        <Box display={["block", "inline-block"]} />
+        // maxWidth (responsive)
+        <Box maxWidth={1024} />
+        <Box maxWidth={[768, null, null, 1024]} />
+        // minWidth (responsive)
+        <Box minWidth={128} />
+        <Box minWidth={[96, 128]} />
+        // height (responsive)
+        <Box height={64} />
+        <Box height={[48, 64]} />
+        // maxHeight (responsive)
+        <Box maxHeight={512} />
+        <Box maxHeight={[384, 512]} />
+        // minHeight (responsive)
+        <Box minHeight={512} />
+        <Box minHeight={[384, 512]} />
+        // size (responsive, width & height)
+        <Box size={32} />
+        <Box size={[32, 48]} />
+        // ratio (height: 0 & paddingBottom)
+        <Box ratio={3 / 4} />
+        // alignItems (responsive)
+        <Flex alignItems="center" />
+        // alignContent (responsive)
+        <Flex alignContent="center" />
+        // justifyContent (responsive)
+        <Flex justifyContent="center" />
+        // flexWrap (responsive)
+        <Flex flexWrap="wrap" />
+        // flexBasis (responsive)
+        <Flex flexBasis="auto" />
+        // flexDirection (responsive)
+        <Flex flexDirection="column" />
+        // flex (responsive)
+        <Box flex="1 1 auto" />
+        // justifySelf (responsive)
+        <Box justifySelf="center" />
+        // alignSelf (responsive)
+        <Box alignSelf="center" />
+        <Box border="1px solid" />
+        <Box borderTop="1px solid" />
+        <Box borderRight="1px solid" />
+        <Box borderBottom="1px solid" />
+        <Box borderLeft="1px solid" />
+        // borderColor
+        <Box borderColor="blue" />
+        // borderRadius
+        <Box borderRadius={4} />
+        // position (responsive)
+        <Box position="absolute" />
+        // zIndex
+        <Box zIndex={2} />
+        // top, right, bottom, left (responsive)
+        <Box top="0" right="0" bottom="0" left="0" />
+        // boxShadow
+        <Box boxShadow={1} />
+        // backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat
+        <Box
+            backgroundImage="kitten.png"
+            backgroundSize="cover"
+            backgroundPosition="center"
+            backgroundRepeat="repeat-x"
+        />
+        <Box
+            hover={{
+                textDecoration: "underline",
+                color: "blue"
+            }}
+        />
+        <Box focus={{ color: "blue" }} />
+        <Box active={{ color: "navy" }} />
+        <Box disabledStyle={{ color: "gray" }} />
+    </div>
+);
diff --git a/types/styled-system/tsconfig.json b/types/styled-system/tsconfig.json
new file mode 100644
index 0000000000..2cc754217f
--- /dev/null
+++ b/types/styled-system/tsconfig.json
@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6"],
+        "jsx": "react",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": ["index.d.ts", "styled-system-tests.tsx"]
+}
diff --git a/types/styled-system/tslint.json b/types/styled-system/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/styled-system/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }