diff --git a/src/components/TextArea/TextArea.js b/src/components/TextArea/TextArea.js
index a2a875d..5f72547 100644
--- a/src/components/TextArea/TextArea.js
+++ b/src/components/TextArea/TextArea.js
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import propTypes from "prop-types";
 
 import styled from "styled-components";
-import { createDisabledTextStyles } from "../common";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
 import { blockSizes, fontSizes, padding, fontFamily } from "../common/system";
 import Cutout from "../Cutout/Cutout";
 
@@ -13,6 +13,11 @@ const StyledTextAreaWrapper = styled(Cutout)`
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
 `;
+const StyledFlatTextAreaWrapper = styled.div`
+  position: relative;
+  min-height: ${blockSizes.md};
+  ${createFlatBoxStyles()}
+`;
 const StyledTextArea = styled.textarea`
   width: 100%;
   height: 100%;
@@ -24,50 +29,56 @@ const StyledTextArea = styled.textarea`
   resize: none;
   font-size: ${fontSizes.md};
   font-family: ${fontFamily};
-  color: ${({ theme, disabled }) =>
-    disabled ? theme.inputTextDisabled : theme.inputText};
-  ${props => props.disabled && createDisabledTextStyles()}
+
+  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
 `;
 
 const TextArea = ({
   onChange,
   disabled,
+  flat,
   width,
   height,
   style,
   className,
   shadow,
   ...otherProps
-}) => (
-  <StyledTextAreaWrapper
-    style={{
-      ...style,
-      width: width ? width : "100%",
-      height: height ? height : "auto"
-    }}
-    className={className}
-    isDisabled={disabled}
-    shadow={shadow}
-  >
-    <StyledTextArea
-      width={width}
-      height={height}
-      readOnly={disabled}
-      onChange={disabled ? undefined : onChange}
-      disabled={disabled}
-      {...otherProps}
-    />
-  </StyledTextAreaWrapper>
-);
+}) => {
+  const Wrapper = flat ? StyledFlatTextAreaWrapper : StyledTextAreaWrapper;
+  return (
+    <Wrapper
+      style={{
+        ...style,
+        width: width ? width : "100%",
+        height: height ? height : "auto"
+      }}
+      className={className}
+      isDisabled={disabled}
+      shadow={shadow}
+    >
+      <StyledTextArea
+        width={width}
+        height={height}
+        readOnly={disabled}
+        onChange={disabled ? undefined : onChange}
+        disabled={disabled}
+        flat={flat}
+        {...otherProps}
+      />
+    </Wrapper>
+  );
+};
 
 TextArea.defaultProps = {
-  shadow: true
+  shadow: true,
+  flat: false
 };
 TextArea.propTypes = {
   width: propTypes.oneOfType([propTypes.string, propTypes.number]),
   height: propTypes.oneOfType([propTypes.string, propTypes.number]),
   onChange: propTypes.func,
   disabled: propTypes.bool,
+  flat: propTypes.bool,
   className: propTypes.string,
   shadow: propTypes.bool
 };
diff --git a/src/components/TextArea/TextArea.stories.js b/src/components/TextArea/TextArea.stories.js
index 62805d9..1afb3aa 100644
--- a/src/components/TextArea/TextArea.stories.js
+++ b/src/components/TextArea/TextArea.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
 import TextArea from "./TextArea";
-import { Button } from "../";
+import { Button, Cutout } from "../";
 
 const onChange = e => console.log(e.target.value);
 
@@ -40,6 +40,41 @@ storiesOf("TextArea", module)
   ))
   .add("no shadow", () => (
     <TextArea shadow={false} placeholder="Type in here.." onChange={onChange} />
+  ))
+  .add("flat", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add text area on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <TextArea
+          flat
+          width={"100%"}
+          height={200}
+          placeholder="Type in here.."
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
+  ))
+  .add("flat disabled", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add text area on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <TextArea
+          flat
+          disabled
+          width={"100%"}
+          height={200}
+          placeholder="Type in here.."
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
   ));
 class ControlledTextAreaExample extends React.Component {
   state = {
diff --git a/src/components/TextField/TextField.js b/src/components/TextField/TextField.js
index a608fed..cf1d411 100644
--- a/src/components/TextField/TextField.js
+++ b/src/components/TextField/TextField.js
@@ -1,16 +1,21 @@
 import React from "react";
 import propTypes from "prop-types";
 
-import styled from "styled-components";
-import Cutout from "../Cutout/Cutout";
+import styled, { css } from "styled-components";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
 import { blockSizes, fontSizes, padding, fontFamily } from "../common/system";
+import Cutout from "../Cutout/Cutout";
 
 const StyledWrapper = styled(Cutout)`
   height: ${blockSizes.md};
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
 `;
-
+const StyledFlatWrapper = styled.div`
+  position: relative;
+  height: ${blockSizes.md};
+  ${createFlatBoxStyles()}
+`;
 export const StyledTextInput = styled.input`
   box-sizing: border-box;
   width: 100%;
@@ -21,46 +26,50 @@ export const StyledTextInput = styled.input`
   background: none;
   font-size: ${fontSizes.md};
   font-family: ${fontFamily};
-  color: ${({ theme, disabled }) =>
-    disabled ? theme.inputTextDisabled : theme.inputText};
-  text-shadow: ${({ theme, disabled }) =>
-    disabled ? "1px 1px " + theme.inputTextDisabledShadow : "none"};
+  ${({ disabled, flat }) => !flat && disabled && createDisabledTextStyles()}
 `;
 const TextField = ({
   onChange,
   disabled,
+  flat,
   type,
   style,
   shadow,
   className,
   width,
   ...otherProps
-}) => (
-  <StyledWrapper
-    width={width}
-    shadow={shadow}
-    isDisabled={disabled}
-    style={{ ...style, width: width ? width : "auto" }}
-    className={className}
-  >
-    <StyledTextInput
-      onChange={disabled ? undefined : onChange}
-      readOnly={disabled}
-      disabled={disabled}
-      type={type}
-      {...otherProps}
-    />
-  </StyledWrapper>
-);
+}) => {
+  const Wrapper = flat ? StyledFlatWrapper : StyledWrapper;
+  return (
+    <Wrapper
+      width={width}
+      shadow={shadow}
+      isDisabled={disabled}
+      style={{ ...style, width: width ? width : "auto" }}
+      className={className}
+    >
+      <StyledTextInput
+        onChange={disabled ? undefined : onChange}
+        readOnly={disabled}
+        disabled={disabled}
+        flat={flat}
+        type={type}
+        {...otherProps}
+      />
+    </Wrapper>
+  );
+};
 TextField.defaultProps = {
   disabled: false,
+  type: "text",
   shadow: true,
-  type: "text"
+  flat: false
 };
 TextField.propTypes = {
   width: propTypes.oneOfType([propTypes.string, propTypes.number]),
   onChange: propTypes.func,
   disabled: propTypes.bool,
+  flat: propTypes.bool,
   shadow: propTypes.bool,
   type: propTypes.string,
   className: propTypes.string
diff --git a/src/components/TextField/TextField.stories.js b/src/components/TextField/TextField.stories.js
index 7434772..0783dbb 100644
--- a/src/components/TextField/TextField.stories.js
+++ b/src/components/TextField/TextField.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
 
 import TextField from "./TextField";
 
-import { Button, Toolbar } from "../";
+import { Button, Toolbar, Cutout } from "../";
 
 const onChange = e => console.log(e.target.value);
 
@@ -28,6 +28,45 @@ storiesOf("TextField", module)
   ))
   .add("custom width", () => (
     <TextField defaultValue="Custom width" width={150} onChange={onChange} />
+  ))
+  .add("flat", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <label style={{ paddingRight: "0.5rem", fontSize: "1rem" }}>
+          Name:
+        </label>
+        <TextField
+          flat
+          placeholder="type here..."
+          width={150}
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
+  ))
+  .add("flat disabled", () => (
+    <Cutout style={{ padding: "2rem", background: "white", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ display: "flex", alignItems: "center", marginTop: "1rem" }}>
+        <label style={{ paddingRight: "0.5rem", fontSize: "1rem" }}>
+          Name:
+        </label>
+        <TextField
+          flat
+          disabled
+          defaultValue="Can't type 😥"
+          width={150}
+          onChange={onChange}
+        />
+      </div>
+    </Cutout>
   ));
 
 class ControlledTextFieldExample extends React.Component {
diff --git a/src/components/common/index.js b/src/components/common/index.js
index 1ce4629..eb853e8 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -15,6 +15,17 @@ export const createBoxStyles = () =>
     background-color: ${({ theme }) => theme.material};
     color: ${({ theme }) => theme.text};
   `;
+export const createFlatBoxStyles = () =>
+  css`
+    box-sizing: border-box;
+    display: inline-block;
+    color: ${({ theme }) => theme.text};
+    background: ${({ theme, isDisabled }) =>
+      isDisabled ? theme.flatLight : theme.canvas};
+    border: 2px solid ${({ theme }) => theme.canvas};
+    outline: 2px solid ${({ theme }) => theme.flatDark};
+    outline-offset: -4px;
+  `;
 export const createBorderStyles = (invert = false) =>
   invert
     ? css`
diff --git a/src/components/common/themes.js b/src/components/common/themes.js
index 26f2fc4..9fffa61 100644
--- a/src/components/common/themes.js
+++ b/src/components/common/themes.js
@@ -31,7 +31,10 @@ themes.default = {
 
   hoverBackground: "#000080",
   checkmark: "#050608",
-  progress: "#000080"
+  progress: "#000080",
+
+  flatLight: "#d8d8d8",
+  flatDark: "#9e9e9e"
 };
 
 themes.water = {
@@ -65,7 +68,10 @@ themes.water = {
 
   hoverBackground: "#72b3b4",
   checkmark: "#050608",
-  progress: "#72b3b4"
+  progress: "#72b3b4",
+
+  flatLight: "#d8d8d8",
+  flatDark: "#9e9e9e"
 };
 
 themes.coldGray = {
@@ -103,7 +109,10 @@ themes.coldGray = {
 
   hoverBackground: "#8d88c2",
   checkmark: "#010601",
-  progress: "#8d88c2"
+  progress: "#8d88c2",
+
+  flatLight: "#a4a7c8",
+  flatDark: "#5b57a1"
 };
 
 themes.lilacRoseDark = {
@@ -139,7 +148,10 @@ themes.lilacRoseDark = {
 
   hoverBackground: "#713259",
   checkmark: "#010601",
-  progress: "#713259"
+  progress: "#713259",
+
+  flatLight: "#E597C9",
+  flatDark: "#7F3163"
 };
 
 themes.violetDark = {
@@ -171,6 +183,9 @@ themes.violetDark = {
 
   hoverBackground: "#512155",
   checkmark: "#000000",
-  progress: "#000080"
+  progress: "#000080",
+
+  flatLight: "#945b9b",
+  flatDark: "#3c1f3e"
 };
 export default themes;