diff --git a/apps/vr-tests/src/stories/Stack.stories.tsx b/apps/vr-tests/src/stories/Stack.stories.tsx
index 07fe4b54942707..59c437af665d5b 100644
--- a/apps/vr-tests/src/stories/Stack.stories.tsx
+++ b/apps/vr-tests/src/stories/Stack.stories.tsx
@@ -106,7 +106,7 @@ storiesOf('Stack', module)
   ))
   .addStory('Vertical Stack - Gap', () => (
     <Fabric>
-      <Stack {...defaultProps} gap={10} />
+      <Stack {...defaultProps} tokens={{ childrenGap: 10 }} />
     </Fabric>
   ))
   .addStory('Vertical Stack - Vertically centered', () => (
@@ -151,7 +151,7 @@ storiesOf('Stack', module)
   .addStory(
     'Vertical Stack - Item alignments',
     () => (
-      <Stack {...defaultProps} gap={10}>
+      <Stack {...defaultProps} tokens={{ childrenGap: 10 }}>
         <Stack.Item align="auto" className={styles.item}>
           Auto-aligned item
         </Stack.Item>
@@ -175,7 +175,7 @@ storiesOf('Stack', module)
     { rtl: true }
   )
   .addStory('Vertical Stack - Growing items', () => (
-    <Stack {...defaultProps} gap={10} className={styles.fixedHeight}>
+    <Stack {...defaultProps} tokens={{ childrenGap: 10 }} className={styles.fixedHeight}>
       <Stack.Item grow={3} className={styles.item}>
         Grow is 3
       </Stack.Item>
@@ -188,7 +188,7 @@ storiesOf('Stack', module)
     </Stack>
   ))
   .addStory('Vertical Stack - Shrinking items', () => (
-    <Stack {...defaultProps} gap={10} className={styles.fixedHeight}>
+    <Stack {...defaultProps} tokens={{ childrenGap: 10 }} className={styles.fixedHeight}>
       <Stack.Item className={styles.verticalShrinkItem}>1</Stack.Item>
       <Stack.Item disableShrink className={styles.verticalShrinkItem}>
         2 (does not shrink)
@@ -202,7 +202,12 @@ storiesOf('Stack', module)
     'Vertical Stack - Wrap',
     () => (
       <Fabric>
-        <Stack {...defaultProps} gap={'10 0'} wrap className={styles.fixedHeight}>
+        <Stack
+          {...defaultProps}
+          tokens={{ childrenGap: '10 0' }}
+          wrap
+          className={styles.fixedHeight}
+        >
           <span className={styles.boxItem}>1</span>
           <span className={styles.boxItem}>2</span>
           <span className={styles.boxItem}>3</span>
@@ -225,7 +230,7 @@ storiesOf('Stack', module)
   )
   .addStory('Vertical Stack - Box shadow around items', () => (
     <Fabric>
-      <Stack {...defaultProps} gap={25}>
+      <Stack {...defaultProps} tokens={{ childrenGap: 25 }}>
         <span className={styles.shadowItem}>1</span>
         <span className={styles.shadowItem}>2</span>
         <span className={styles.shadowItem}>3</span>
@@ -261,7 +266,7 @@ storiesOf('Stack', module)
     'Horizontal Stack - Gap',
     () => (
       <Fabric>
-        <Stack horizontal {...defaultProps} gap={10} />
+        <Stack horizontal {...defaultProps} tokens={{ childrenGap: 10 }} />
       </Fabric>
     ),
     { rtl: true }
@@ -308,7 +313,12 @@ storiesOf('Stack', module)
   .addStory(
     'Horizontal Stack - Item alignments',
     () => (
-      <Stack horizontal {...defaultProps} gap={10} className={styles.fixedHeight}>
+      <Stack
+        horizontal
+        {...defaultProps}
+        tokens={{ childrenGap: 10 }}
+        className={styles.fixedHeight}
+      >
         <Stack.Item align="auto" className={styles.item}>
           Auto-aligned item
         </Stack.Item>
@@ -332,7 +342,7 @@ storiesOf('Stack', module)
     { rtl: true }
   )
   .addStory('Horizontal Stack - Growing items', () => (
-    <Stack horizontal {...defaultProps} gap={10}>
+    <Stack horizontal {...defaultProps} tokens={{ childrenGap: 10 }}>
       <Stack.Item grow={3} className={styles.item}>
         Grow is 3
       </Stack.Item>
@@ -345,7 +355,7 @@ storiesOf('Stack', module)
     </Stack>
   ))
   .addStory('Horizontal Stack - Shrinking items', () => (
-    <Stack horizontal {...defaultProps} gap={10}>
+    <Stack horizontal {...defaultProps} tokens={{ childrenGap: 10 }}>
       <Stack.Item className={styles.horizontalShrinkItem}>1</Stack.Item>
       <Stack.Item disableShrink className={styles.horizontalShrinkItem}>
         2 (does not shrink)
@@ -361,7 +371,7 @@ storiesOf('Stack', module)
     'Horizontal Stack - Wrap',
     () => (
       <Fabric>
-        <Stack horizontal {...defaultProps} gap={10} wrap>
+        <Stack horizontal {...defaultProps} tokens={{ childrenGap: 10 }} wrap>
           <span className={styles.boxItem}>1</span>
           <span className={styles.boxItem}>2</span>
           <span className={styles.boxItem}>3</span>
@@ -398,7 +408,7 @@ storiesOf('Stack', module)
   )
   .addStory('Horizontal Stack - Wrap with specified vertical gap', () => (
     <Fabric>
-      <Stack horizontal {...defaultProps} wrap gap={'40 10'}>
+      <Stack horizontal {...defaultProps} wrap tokens={{ childrenGap: '40 10' }}>
         <span className={styles.boxItem}>1</span>
         <span className={styles.boxItem}>2</span>
         <span className={styles.boxItem}>3</span>
@@ -433,7 +443,7 @@ storiesOf('Stack', module)
   ))
   .addStory('Horizontal Stack - Box shadow around items', () => (
     <Fabric>
-      <Stack horizontal {...defaultProps} gap={25}>
+      <Stack horizontal {...defaultProps} tokens={{ childrenGap: 25 }}>
         <span className={styles.shadowItem}>1</span>
         <span className={styles.shadowItem}>2</span>
         <span className={styles.shadowItem}>3</span>
diff --git a/common/changes/@uifabric/foundation/cardApi_2019-03-20-21-17.json b/common/changes/@uifabric/foundation/cardApi_2019-03-20-21-17.json
new file mode 100644
index 00000000000000..d1bca656a4075d
--- /dev/null
+++ b/common/changes/@uifabric/foundation/cardApi_2019-03-20-21-17.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/foundation",
+      "comment": "Passing styling and tokens to view.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/foundation",
+  "email": "makotom@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/merge-styles/cardApi_2019-03-28-20-09.json b/common/changes/@uifabric/merge-styles/cardApi_2019-03-28-20-09.json
new file mode 100644
index 00000000000000..8c0f595c4e3923
--- /dev/null
+++ b/common/changes/@uifabric/merge-styles/cardApi_2019-03-28-20-09.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/merge-styles",
+      "comment": "Deleting .api.ts file.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/react-cards/cardApi_2019-03-08-22-08.json b/common/changes/@uifabric/react-cards/cardApi_2019-03-08-22-08.json
new file mode 100644
index 00000000000000..77df7df617256d
--- /dev/null
+++ b/common/changes/@uifabric/react-cards/cardApi_2019-03-08-22-08.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/react-cards",
+      "comment": "Card: Improving styling and adding compact Card styling and examples.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/react-cards",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/@uifabric/react-cards/cardApi_2019-03-18-15-59.json b/common/changes/@uifabric/react-cards/cardApi_2019-03-18-15-59.json
new file mode 100644
index 00000000000000..9c13a4c71d6728
--- /dev/null
+++ b/common/changes/@uifabric/react-cards/cardApi_2019-03-18-15-59.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Updating examples using Stack to use childrenGap token instead of gap prop.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "Humberto.Morimoto@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/cardApi_2019-03-14-18-48.json b/common/changes/office-ui-fabric-react/cardApi_2019-03-14-18-48.json
new file mode 100644
index 00000000000000..534f1d220a3deb
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/cardApi_2019-03-14-18-48.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Stack: Adding margin as a token of StackItem and childrenGap as a token of Stack and updating examples accordingly.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "makotom@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Button/Button.view.tsx b/packages/experiments/src/components/Button/Button.view.tsx
index fe19b4a8e99840..8eb07c3269e315 100644
--- a/packages/experiments/src/components/Button/Button.view.tsx
+++ b/packages/experiments/src/components/Button/Button.view.tsx
@@ -37,7 +37,7 @@ export const ButtonView: IButtonComponent['view'] = props => {
       {...buttonProps}
       aria-disabled={disabled}
     >
-      <Slots.stack horizontal as="span" gap={8} verticalAlign="center" horizontalAlign="center" verticalFill>
+      <Slots.stack horizontal as="span" tokens={{ childrenGap: 8 }} verticalAlign="center" horizontalAlign="center" verticalFill>
         {icon && <Slots.icon />}
         {content && <Slots.content />}
         {children}
diff --git a/packages/experiments/src/components/Button/MenuButton/examples/MenuButton.Example.tsx b/packages/experiments/src/components/Button/MenuButton/examples/MenuButton.Example.tsx
index cf4d280891c381..ab6c30e3c7aa0f 100644
--- a/packages/experiments/src/components/Button/MenuButton/examples/MenuButton.Example.tsx
+++ b/packages/experiments/src/components/Button/MenuButton/examples/MenuButton.Example.tsx
@@ -5,12 +5,20 @@ import { Stack, Text } from 'office-ui-fabric-react';
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
 const buttonMenu: IMenuButtonProps['menu'] = render => render((MenuType, props) => <MenuType {...props} items={menuItems} />);
 
-const sectionGap = 32;
-const headingGap = 16;
-const buttonGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
 
 const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={buttonGap}>
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
     {props.children}
   </Stack>
 );
@@ -19,10 +27,10 @@ const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
 export class MenuButtonExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
           <div>
-            <Stack gap={buttonGap}>
+            <Stack tokens={tokens.buttonStack}>
               <ButtonStack>
                 <MenuButton content="Menu button" menu={buttonMenu} />
                 <MenuButton primary content="Menu primary button" menu={buttonMenu} />
diff --git a/packages/experiments/src/components/Button/SplitMenuButton/examples/SplitMenuButton.Example.tsx b/packages/experiments/src/components/Button/SplitMenuButton/examples/SplitMenuButton.Example.tsx
index 2c6e46db2d622e..45e3e3cd10e1ad 100644
--- a/packages/experiments/src/components/Button/SplitMenuButton/examples/SplitMenuButton.Example.tsx
+++ b/packages/experiments/src/components/Button/SplitMenuButton/examples/SplitMenuButton.Example.tsx
@@ -5,16 +5,24 @@ import { Stack } from 'office-ui-fabric-react';
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
 const buttonMenu: ISplitMenuButtonProps['menu'] = render => render((MenuType, props) => <MenuType {...props} items={menuItems} />);
 
-const sectionGap = 32;
-const headingGap = 16;
-const buttonGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
 
 const alertClicked = (): void => {
   alert('Clicked');
 };
 
 const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={buttonGap}>
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
     {props.children}
   </Stack>
 );
@@ -23,10 +31,10 @@ const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
 export class SplitMenuButtonExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
           <div>
-            <Stack gap={buttonGap}>
+            <Stack tokens={tokens.buttonStack}>
               <ButtonStack>
                 <SplitMenuButton icon="Add" content="Default split button" menu={buttonMenu} onClick={alertClicked} />
                 <SplitMenuButton disabled icon="Add" content="Disabled split button" menu={buttonMenu} onClick={alertClicked} />
diff --git a/packages/experiments/src/components/Button/examples/Button.Example.tsx b/packages/experiments/src/components/Button/examples/Button.Example.tsx
index f6903875338a10..615ebd9e949028 100644
--- a/packages/experiments/src/components/Button/examples/Button.Example.tsx
+++ b/packages/experiments/src/components/Button/examples/Button.Example.tsx
@@ -2,16 +2,24 @@ import * as React from 'react';
 import { Button } from '../index';
 import { Icon, CommandBar, Stack, Text } from 'office-ui-fabric-react';
 
-const sectionGap = 32;
-const headingGap = 16;
-const buttonGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
 
 const alertClicked = (): void => {
   alert('Clicked');
 };
 
 const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={buttonGap}>
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
     {props.children}
   </Stack>
 );
@@ -20,10 +28,10 @@ const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
 export class ButtonExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
           <div>
-            <Stack gap={buttonGap}>
+            <Stack tokens={tokens.buttonStack}>
               <ButtonStack>
                 <Button content="Default button" onClick={alertClicked} />
                 <Button disabled content="Disabled default button" onClick={alertClicked} />
diff --git a/packages/experiments/src/components/Button/examples/Button.Styles.Example.tsx b/packages/experiments/src/components/Button/examples/Button.Styles.Example.tsx
index b052e39b7c1213..b455298c1f04c5 100644
--- a/packages/experiments/src/components/Button/examples/Button.Styles.Example.tsx
+++ b/packages/experiments/src/components/Button/examples/Button.Styles.Example.tsx
@@ -13,15 +13,23 @@ const testTheme = createTheme({
   }
 });
 
-const sectionGap = 32;
-const headingGap = 16;
-const buttonGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  buttonStack: {
+    childrenGap: 12
+  }
+};
 
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
 const buttonMenu: IMenuButtonProps['menu'] = render => render((MenuType, props) => <MenuType {...props} items={menuItems} />);
 
 const ButtonStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={buttonGap}>
+  <Stack horizontal disableShrink tokens={tokens.buttonStack}>
     {props.children}
   </Stack>
 );
@@ -32,10 +40,10 @@ export class ButtonStylesExample extends React.Component<{}, {}> {
     const testClassName = mergeStyles({ color: 'blue' });
 
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
           <div>
-            <Stack gap={buttonGap}>
+            <Stack tokens={tokens.buttonStack}>
               <ButtonStack>
                 <Button icon="PeopleAdd" content="Button Theme: Red Icon and Text" theme={testTheme} />
                 <Button icon="PeopleAdd" content={{ children: 'Slot Theme: Purple Text', theme: testTheme }} />
diff --git a/packages/experiments/src/components/Button/examples/Button.Tokens.Example.tsx b/packages/experiments/src/components/Button/examples/Button.Tokens.Example.tsx
index 4d344d19919efa..eefa6274021482 100644
--- a/packages/experiments/src/components/Button/examples/Button.Tokens.Example.tsx
+++ b/packages/experiments/src/components/Button/examples/Button.Tokens.Example.tsx
@@ -5,7 +5,14 @@ import { createTheme, Spinner, Stack } from 'office-ui-fabric-react';
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
 const buttonMenu: IMenuButtonProps['menu'] = render => render((MenuType, props) => <MenuType {...props} items={menuItems} />);
 
-const sectionGap = 32;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  buttonStack: {
+    childrenGap: 8
+  }
+};
 
 const testTheme = createTheme({
   semanticColors: {
@@ -22,7 +29,7 @@ const testTheme = createTheme({
 export class ButtonTokensExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     const ButtonSet = (props: IButtonProps) => (
-      <Stack horizontal disableShrink verticalAlign="center" gap={8}>
+      <Stack horizontal disableShrink verticalAlign="center" tokens={tokens.buttonStack}>
         <Button {...props} />
         <Button {...props} primary />
         <Button {...props} disabled />
@@ -41,7 +48,7 @@ export class ButtonTokensExample extends React.Component<{}, {}> {
     );
 
     const MenuButtonSet = (props: IMenuButtonProps) => (
-      <Stack horizontal disableShrink verticalAlign="center" gap={8}>
+      <Stack horizontal disableShrink verticalAlign="center" tokens={tokens.buttonStack}>
         <MenuButton {...props} />
         <MenuButton {...props} primary />
         <MenuButton {...props} disabled />
@@ -60,7 +67,7 @@ export class ButtonTokensExample extends React.Component<{}, {}> {
     );
 
     return (
-      <Stack gap={sectionGap}>
+      <Stack tokens={tokens.sectionStack}>
         <ButtonSet />
         <ButtonSet content="No Icon" />
         <ButtonSet content={<Spinner />} />
@@ -73,7 +80,7 @@ export class ButtonTokensExample extends React.Component<{}, {}> {
           content="Menu button with icon"
           menu={buttonMenu}
         />
-        <Stack horizontal disableShrink verticalAlign="center" gap={8}>
+        <Stack horizontal disableShrink verticalAlign="center" tokens={tokens.buttonStack}>
           <Button
             primary
             icon="PeopleAdd"
diff --git a/packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx b/packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx
index b316b10474135e..6936082d68fe90 100644
--- a/packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx
+++ b/packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import { Stack } from 'office-ui-fabric-react';
-import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
-import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton, FocusZone, IStackTokens, Stack } from 'office-ui-fabric-react';
 import { CollapsibleSection } from '@uifabric/experiments/lib/CollapsibleSection';
 
 export interface ICollapsibleSectionControlledExampleState {
@@ -9,6 +7,8 @@ export interface ICollapsibleSectionControlledExampleState {
   clicks: number;
 }
 
+const stackTokens: IStackTokens = { childrenGap: 20 };
+
 // tslint:disable:jsx-no-lambda
 export class CollapsibleSectionControlledExample extends React.Component<{}, ICollapsibleSectionControlledExampleState> {
   constructor(props: {}) {
@@ -28,7 +28,7 @@ export class CollapsibleSectionControlledExample extends React.Component<{}, ICo
             component's output when the controlled prop has a value passed in automatically. As a result, clicking on the titles in this
             example does not affect collapsed state, only clicking on the Toggle button does.
           </p>
-          <Stack horizontal gap={20} verticalAlign="center">
+          <Stack horizontal tokens={stackTokens} verticalAlign="center">
             <DefaultButton
               text="Toggle"
               onClick={() => {
diff --git a/packages/experiments/src/components/Persona/examples/Persona.Example.tsx b/packages/experiments/src/components/Persona/examples/Persona.Example.tsx
index 4ecc69344f49b0..6c32d1a0033bd6 100644
--- a/packages/experiments/src/components/Persona/examples/Persona.Example.tsx
+++ b/packages/experiments/src/components/Persona/examples/Persona.Example.tsx
@@ -3,26 +3,34 @@ import { Stack, Text } from 'office-ui-fabric-react';
 import { PersonaTestImages } from '@uifabric/experiments/lib/common/TestImages';
 import { Persona } from '../Persona';
 
-const sectionGap = 32;
-const headingGap = 16;
-const personaCoinGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  personaCoinStack: {
+    childrenGap: 12
+  }
+};
 
 export class PersonaExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
-          <Stack gap={personaCoinGap}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>Basic Usage</Text>
-            <Stack gap={personaCoinGap}>
+            <Stack tokens={tokens.personaCoinStack}>
               <Persona text="Sukhnam Chander" secondaryText="Principal Program manager" />
               <Persona text="Kevin Jameson" secondaryText="Professional traveller" />
               <Persona text="王力" secondaryText="Principal Program manager" />
             </Stack>
           </Stack>
-          <Stack gap={personaCoinGap}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>When passing coinProps</Text>
-            <Stack gap={personaCoinGap}>
+            <Stack tokens={tokens.personaCoinStack}>
               <Persona text="Eline Page" secondaryText="eSports commentator" coin={{ presence: 4 }} />
               <Persona text="赵丽颖" coin={{ imageUrl: PersonaTestImages.personFemale }} />
               <Persona text="Kevin Jameson" coin={{ imageUrl: PersonaTestImages.personMale }} />
diff --git a/packages/experiments/src/components/Persona/examples/VerticalPersona.Example.tsx b/packages/experiments/src/components/Persona/examples/VerticalPersona.Example.tsx
index 00cf992569e345..4da0f7d1649489 100644
--- a/packages/experiments/src/components/Persona/examples/VerticalPersona.Example.tsx
+++ b/packages/experiments/src/components/Persona/examples/VerticalPersona.Example.tsx
@@ -4,9 +4,17 @@ import { PersonaTestImages } from '@uifabric/experiments/lib/common/TestImages';
 import { mergeStyles } from '@uifabric/styling';
 import { Persona } from '../Persona';
 
-const sectionGap = 32;
-const headingGap = 16;
-const personaCoinGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  personaCoinStack: {
+    childrenGap: 12
+  }
+};
 
 const verticalPersonaStackClassName = mergeStyles({ display: 'flex', flexDirection: 'row' });
 
@@ -15,9 +23,9 @@ const VerticalPersonaStack = (props: { children: JSX.Element[] }) => <div classN
 export class VerticalPersonaExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
-          <Stack gap={personaCoinGap}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>Basic Usage</Text>
             <VerticalPersonaStack>
               <Persona vertical text="Sukhnam Chander" secondaryText="Principal Program manager" />
@@ -36,7 +44,7 @@ export class VerticalPersonaExample extends React.Component<{}, {}> {
               />
             </VerticalPersonaStack>
           </Stack>
-          <Stack gap={personaCoinGap}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>When passing coinProps</Text>
             <VerticalPersonaStack>
               <Persona vertical text="Eline Page" secondaryText="eSports commentator" coin={{ presence: 4 }} />
@@ -44,7 +52,7 @@ export class VerticalPersonaExample extends React.Component<{}, {}> {
               <Persona vertical text="Kevin Jameson" coin={{ imageUrl: PersonaTestImages.personMale }} />
             </VerticalPersonaStack>
           </Stack>
-          <Stack gap={personaCoinGap}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>Tokens!</Text>
             <VerticalPersonaStack>
               <Persona
diff --git a/packages/experiments/src/components/PersonaCoin/examples/PersonaCoin.Example.tsx b/packages/experiments/src/components/PersonaCoin/examples/PersonaCoin.Example.tsx
index 2fbbdaff8b6d26..fe3311bb3c0396 100644
--- a/packages/experiments/src/components/PersonaCoin/examples/PersonaCoin.Example.tsx
+++ b/packages/experiments/src/components/PersonaCoin/examples/PersonaCoin.Example.tsx
@@ -3,12 +3,20 @@ import { Stack, Text } from 'office-ui-fabric-react';
 import { PersonaTestImages } from '@uifabric/experiments/lib/common/TestImages';
 import { PersonaCoin } from '../index';
 
-const sectionGap = 32;
-const headingGap = 16;
-const personaCoinGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  personaCoinStack: {
+    childrenGap: 12
+  }
+};
 
 const PersonaCoinStack = (props: { children: JSX.Element[] | JSX.Element }) => (
-  <Stack horizontal disableShrink gap={personaCoinGap}>
+  <Stack horizontal disableShrink tokens={tokens.personaCoinStack}>
     {props.children}
   </Stack>
 );
@@ -16,9 +24,9 @@ const PersonaCoinStack = (props: { children: JSX.Element[] | JSX.Element }) => (
 export class PersonaCoinExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
-          <Stack gap={personaCoinGap}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>When passing text initials will be extracted from the text</Text>
             <PersonaCoinStack>
               <PersonaCoin text="Kevin Jameson" />
@@ -28,14 +36,14 @@ export class PersonaCoinExample extends React.Component<{}, {}> {
               <PersonaCoin text="Kevin Jameson" imageUrl={PersonaTestImages.personMale} />
             </PersonaCoinStack>
           </Stack>
-          <Stack gap={personaCoinGap}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>When passing specific initials</Text>
             <PersonaCoinStack>
               <PersonaCoin initials="JB" />
               <PersonaCoin initials="王力" />
             </PersonaCoinStack>
           </Stack>
-          <Stack gap={personaCoinGap}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>Initials not available</Text>
             <PersonaCoinStack>
               <PersonaCoin />
diff --git a/packages/experiments/src/components/PersonaCoin/examples/PersonaCoinSizeAndColor.Example.tsx b/packages/experiments/src/components/PersonaCoin/examples/PersonaCoinSizeAndColor.Example.tsx
index e1363e71b3dd50..91c3d0c2d1c637 100644
--- a/packages/experiments/src/components/PersonaCoin/examples/PersonaCoinSizeAndColor.Example.tsx
+++ b/packages/experiments/src/components/PersonaCoin/examples/PersonaCoinSizeAndColor.Example.tsx
@@ -3,18 +3,26 @@ import { PersonaCoin } from '../index';
 import { Stack, Text } from 'office-ui-fabric-react';
 import { PersonaTestImages } from '@uifabric/experiments/lib/common/TestImages';
 
-const sectionGap = 32;
-const headingGap = 16;
-const personaCoinGap = 12;
+const tokens = {
+  sectionStack: {
+    childrenGap: 32
+  },
+  headingStack: {
+    childrenGap: 16
+  },
+  personaCoinStack: {
+    childrenGap: 12
+  }
+};
 
 export class PersonaCoinSizeAndColorExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     return (
-      <Stack gap={sectionGap}>
-        <Stack gap={headingGap} padding={8}>
-          <Stack gap={personaCoinGap}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack tokens={tokens.headingStack} padding={8}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>Sizes</Text>
-            <Stack horizontal disableShrink gap={personaCoinGap}>
+            <Stack horizontal disableShrink tokens={tokens.personaCoinStack}>
               <PersonaCoin text="Kevin Jameson" size={10} />
               <PersonaCoin text="Kevin Jameson" size={24} />
               <PersonaCoin text="Kevin Jameson" size={28} />
@@ -24,7 +32,7 @@ export class PersonaCoinSizeAndColorExample extends React.Component<{}, {}> {
               <PersonaCoin text="Kevin Jameson" size={72} />
               <PersonaCoin text="Kevin Jameson" size={100} />
             </Stack>
-            <Stack horizontal disableShrink gap={personaCoinGap}>
+            <Stack horizontal disableShrink tokens={tokens.personaCoinStack}>
               <PersonaCoin text="Kevin Jameson" size={10} imageUrl={PersonaTestImages.personMale} />
               <PersonaCoin text="Kevin Jameson" size={24} imageUrl={PersonaTestImages.personMale} presence={1} />
               <PersonaCoin text="Kevin Jameson" size={28} imageUrl={PersonaTestImages.personMale} />
@@ -35,9 +43,9 @@ export class PersonaCoinSizeAndColorExample extends React.Component<{}, {}> {
               <PersonaCoin text="Kevin Jameson" size={100} imageUrl={PersonaTestImages.personMale} presence={4} />
             </Stack>
           </Stack>
-          <Stack gap={personaCoinGap}>
+          <Stack tokens={tokens.personaCoinStack}>
             <Text>Custom colors</Text>
-            <Stack horizontal disableShrink gap={personaCoinGap}>
+            <Stack horizontal disableShrink tokens={tokens.personaCoinStack}>
               <PersonaCoin text="Kevin Jameson" coinColor="red" initialsColor="black" />
               <PersonaCoin text="Kevin Jameson" coinColor="beige" initialsColor="black" />
               <PersonaCoin text="Kevin Jameson" coinColor="blue" />
diff --git a/packages/experiments/src/slots/examples/SlotExampleUtils.tsx b/packages/experiments/src/slots/examples/SlotExampleUtils.tsx
index 6f0d6cb93b1551..757c011a2376cc 100644
--- a/packages/experiments/src/slots/examples/SlotExampleUtils.tsx
+++ b/packages/experiments/src/slots/examples/SlotExampleUtils.tsx
@@ -1,3 +1,3 @@
 import { IStackProps } from 'office-ui-fabric-react';
 
-export const stackProps: IStackProps = { gap: 16, padding: 8, maxWidth: 400 };
+export const stackProps: IStackProps = { tokens: { childrenGap: 16 }, padding: 8, maxWidth: 400 };
diff --git a/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx b/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx
index d09672af4a302c..294327a684c8f8 100644
--- a/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx
+++ b/packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { CommandBar, Customizer, Stack, Toggle, Text } from 'office-ui-fabric-react';
+import { CommandBar, Customizer, IStackTokens, Stack, Toggle, Text } from 'office-ui-fabric-react';
 import { farItems, items, overflowItems } from 'office-ui-fabric-react/lib/components/CommandBar/examples/data';
 
 // tslint:disable:max-line-length
@@ -38,13 +38,15 @@ export class ThemingExample extends React.Component<{}, IThemingExampleState> {
     const sideCaption = 'Scheme: ' + sideScheme;
     const topCaption = 'Scheme: ' + topScheme;
 
+    const stackTokens: IStackTokens = { childrenGap: 10 };
+
     // TODO: Even though this styles function is the same for all regions, it has to be provided whenever the scheme
     //        is changed to apply the new semanticColors. Is this the best way we can do this?
     return (
-      <Stack horizontal gap={10}>
+      <Stack horizontal tokens={stackTokens}>
         <Stack.Item grow={true} styles={{ root: { width: '33%', maxWidth: '33%' } }}>
           <ThemeProvider scheme={sideScheme}>
-            <Stack styles={regionStyles} gap={10} padding={5}>
+            <Stack styles={regionStyles} tokens={stackTokens} padding={5}>
               <Text>{sideCaption}</Text>
               <Toggle offText={sideCaption} onText={sideCaption} onChange={this.toggleSide} />
               <CollapsibleSectionRecursiveExample />
@@ -54,7 +56,7 @@ export class ThemingExample extends React.Component<{}, IThemingExampleState> {
         <Stack.Item grow={true} styles={{ root: { height: 'auto' } }}>
           <Stack grow={true} verticalFill={true}>
             <ThemeProvider scheme={topScheme}>
-              <Stack styles={regionStyles} gap={10} padding={5}>
+              <Stack styles={regionStyles} tokens={stackTokens} padding={5}>
                 <Stack horizontal horizontalAlign="space-between">
                   <Text>{topCaption}</Text>
                   <Toggle offText={topCaption} onText={topCaption} onChange={this.toggleTop} />
diff --git a/packages/foundation/src/createComponent.tsx b/packages/foundation/src/createComponent.tsx
index e212f368e29d8b..70fa3363b5ab49 100644
--- a/packages/foundation/src/createComponent.tsx
+++ b/packages/foundation/src/createComponent.tsx
@@ -71,6 +71,8 @@ export function createComponent<
 
             const viewComponentProps: typeof mergedProps & IDefaultSlotProps<any> = {
               ...(mergedProps as any),
+              styles,
+              tokens,
               _defaultStyles: styles
             };
 
diff --git a/packages/merge-styles/api/merge-styles.api.ts b/packages/merge-styles/api/merge-styles.api.ts
deleted file mode 100644
index eb475fd14c0c8d..00000000000000
--- a/packages/merge-styles/api/merge-styles.api.ts
+++ /dev/null
@@ -1,304 +0,0 @@
-// @public
-export function concatStyleSets<T extends object>(...args: (T | false | null | undefined)[]): T;
-
-// @public
-export function fontFace(font: IFontFace): void;
-
-// @public
-interface IExtendedRawStyle extends IRawStyle {
-  displayName?: string;
-  selectors?: {
-    [key: string]: IStyle;
-  }
-}
-
-// @public
-interface IFontFace extends IRawFontStyle {
-  fontFeatureSettings?: string;
-  src?: string;
-  unicodeRange?: ICSSRule | string;
-}
-
-// @public
-enum InjectionMode {
-  insertNode = 1,
-  none = 0
-}
-
-// @public
-interface IRawStyle extends IRawFontStyle {
-  alignContent?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
-  alignItems?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-  alignmentAdjust?: ICSSRule | string;
-  alignmentBaseline?: ICSSRule | string;
-  alignSelf?: ICSSRule | 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-  animationDelay?: ICSSRule | string;
-  animationDirection?: ICSSRule | string;
-  animationDuration?: ICSSRule | string;
-  animationFillMode?: ICSSRule | 'none' | 'forwards' | 'backwards' | 'both';
-  animationIterationCount?: ICSSRule | string;
-  animationName?: ICSSRule | string;
-  animationPlayState?: ICSSRule | string;
-  animationTimingFunction?: ICSSRule | string;
-  appearance?: ICSSRule | string;
-  backfaceVisibility?: ICSSRule | string;
-  background?: ICSSRule | string;
-  backgroundAttachment?: ICSSRule | 'scroll' | 'fixed' | 'local';
-  backgroundBlendMode?: ICSSRule | string;
-  backgroundColor?: ICSSRule | string;
-  backgroundComposite?: ICSSRule | string;
-  backgroundImage?: ICSSRule | string;
-  backgroundOrigin?: ICSSRule | string;
-  backgroundPosition?: ICSSRule | string;
-  backgroundRepeat?: ICSSRule | string;
-  border?: ICSSRule | 0 | string;
-  borderBottom?: ICSSRule | ICSSPixelUnitRule;
-  borderBottomColor?: ICSSRule | string;
-  borderBottomLeftRadius?: ICSSRule | string;
-  borderBottomRightRadius?: ICSSRule | string;
-  borderBottomStyle?: ICSSRule | string;
-  borderBottomWidth?: ICSSRule | ICSSPixelUnitRule;
-  borderCollapse?: ICSSRule | string;
-  borderColor?: ICSSRule | string;
-  borderCornerShape?: ICSSRule | string;
-  borderImageSource?: ICSSRule | string;
-  borderImageWidth?: ICSSRule | ICSSPixelUnitRule;
-  borderLeft?: ICSSRule | ICSSPixelUnitRule;
-  borderLeftColor?: ICSSRule | string;
-  borderLeftStyle?: ICSSRule | string;
-  borderLeftWidth?: ICSSRule | ICSSPixelUnitRule;
-  borderRadius?: ICSSRule | ICSSPixelUnitRule;
-  borderRight?: ICSSRule | ICSSPixelUnitRule;
-  borderRightColor?: ICSSRule | string;
-  borderRightStyle?: ICSSRule | string;
-  borderRightWidth?: ICSSRule | ICSSPixelUnitRule;
-  borderSpacing?: ICSSRule | string;
-  borderStyle?: ICSSRule | string;
-  borderTop?: ICSSRule | ICSSPixelUnitRule;
-  borderTopColor?: ICSSRule | string;
-  borderTopLeftRadius?: ICSSRule | string;
-  borderTopRightRadius?: ICSSRule | string;
-  borderTopStyle?: ICSSRule | string;
-  borderTopWidth?: ICSSRule | ICSSPixelUnitRule;
-  borderWidth?: ICSSRule | ICSSPixelUnitRule;
-  bottom?: ICSSRule | ICSSPixelUnitRule;
-  boxDecorationBreak?: ICSSRule | string;
-  boxShadow?: ICSSRule | string;
-  boxSizing?: ICSSRule | 'border-box' | 'content-box';
-  breakAfter?: ICSSRule | string;
-  breakBefore?: ICSSRule | string;
-  breakInside?: ICSSRule | string;
-  clear?: ICSSRule | string;
-  clip?: void;
-  clipRule?: ICSSRule | string;
-  color?: ICSSRule | string;
-  columnCount?: ICSSRule | number | 'auto';
-  columnFill?: ICSSRule | string;
-  columnGap?: ICSSRule | string;
-  columnRule?: ICSSRule | string;
-  columnRuleColor?: ICSSRule | string;
-  columnRuleWidth?: ICSSRule | ICSSPixelUnitRule;
-  columns?: ICSSRule | string;
-  columnSpan?: ICSSRule | string;
-  columnWidth?: ICSSRule | ICSSPixelUnitRule;
-  content?: string;
-  counterIncrement?: ICSSRule | string;
-  counterReset?: ICSSRule | string;
-  cue?: ICSSRule | string;
-  cueAfter?: ICSSRule | string;
-  cursor?: ICSSRule | string;
-  direction?: ICSSRule | string;
-  display?: ICSSRule | string;
-  fill?: ICSSRule | string;
-  fillOpacity?: ICSSRule | number;
-  fillRule?: ICSSRule | string;
-  filter?: ICSSRule | string;
-  flex?: ICSSRule | ICSSPixelUnitRule;
-  flexBasis?: ICSSRule | string;
-  flexDirection?: ICSSRule | 'row' | 'row-reverse' | 'column' | 'column-reverse';
-  flexFlow?: ICSSRule | string;
-  flexGrow?: ICSSRule | number;
-  flexOrder?: ICSSRule | string;
-  flexShrink?: ICSSRule | number;
-  flexWrap?: ICSSRule | 'nowrap' | 'wrap' | 'wrap-reverse';
-  float?: ICSSRule | string;
-  flowFrom?: ICSSRule | string;
-  gridArea?: ICSSRule | string;
-  gridColumn?: ICSSRule | string;
-  gridColumnEnd?: ICSSRule | string;
-  gridColumnStart?: ICSSRule | string;
-  gridRow?: ICSSRule | string;
-  gridRowEnd?: ICSSRule | string;
-  gridRowPosition?: ICSSRule | string;
-  gridTemplateAreas?: ICSSRule | string;
-  gridTemplateColumns?: ICSSRule | string;
-  gridTemplateRows?: ICSSRule | string;
-  height?: ICSSRule | ICSSPixelUnitRule;
-  hyphenateLimitChars?: ICSSRule | string;
-  hyphenateLimitLines?: ICSSRule | string;
-  hyphenateLimitZone?: ICSSRule | string;
-  hyphens?: ICSSRule | string;
-  justifyContent?: ICSSRule | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-  left?: ICSSRule | ICSSPixelUnitRule;
-  letterSpacing?: ICSSRule | string;
-  lineHeight?: ICSSRule | 'normal' | number | ICSSPixelUnitRule | ICSSPercentageRule;
-  listStyle?: ICSSRule | string;
-  listStyleImage?: ICSSRule | string;
-  listStylePosition?: ICSSRule | string;
-  listStyleType?: ICSSRule | string;
-  margin?: ICSSRule | ICSSPixelUnitRule;
-  marginBottom?: ICSSRule | ICSSPixelUnitRule;
-  marginLeft?: ICSSRule | ICSSPixelUnitRule;
-  marginRight?: ICSSRule | ICSSPixelUnitRule;
-  marginTop?: ICSSRule | ICSSPixelUnitRule;
-  marqueeDirection?: ICSSRule | string;
-  marqueeStyle?: ICSSRule | string;
-  mask?: ICSSRule | string;
-  maskBorder?: ICSSRule | string;
-  maskBorderRepeat?: ICSSRule | string;
-  maskBorderSlice?: ICSSRule | string;
-  maskBorderSource?: ICSSRule | string;
-  maskBorderWidth?: ICSSRule | ICSSPixelUnitRule;
-  maskClip?: ICSSRule | string;
-  maskOrigin?: ICSSRule | string;
-  maxFontSize?: ICSSRule | ICSSPixelUnitRule;
-  maxHeight?: ICSSRule | ICSSPixelUnitRule;
-  maxWidth?: ICSSRule | ICSSPixelUnitRule;
-  minHeight?: ICSSRule | ICSSPixelUnitRule;
-  minWidth?: ICSSRule | ICSSPixelUnitRule;
-  MozOsxFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased';
-  opacity?: ICSSRule | number | string;
-  order?: ICSSRule | number;
-  orphans?: ICSSRule | number;
-  outline?: ICSSRule | 0 | string;
-  outlineColor?: ICSSRule | string;
-  outlineOffset?: ICSSRule | string;
-  overflow?: ICSSRule | 'auto' | 'hidden' | 'scroll' | 'visible';
-  overflowStyle?: ICSSRule | string;
-  overflowWrap?: ICSSRule | 'normal' | 'break-word';
-  overflowX?: ICSSRule | 'auto' | 'hidden' | 'scroll' | 'visible';
-  overflowY?: ICSSRule | 'auto' | 'hidden' | 'scroll' | 'visible';
-  padding?: ICSSRule | ICSSPixelUnitRule;
-  paddingBottom?: ICSSRule | ICSSPixelUnitRule;
-  paddingLeft?: ICSSRule | ICSSPixelUnitRule;
-  paddingRight?: ICSSRule | ICSSPixelUnitRule;
-  paddingTop?: ICSSRule | ICSSPixelUnitRule;
-  pageBreakAfter?: ICSSRule | string;
-  pageBreakBefore?: ICSSRule | string;
-  pageBreakInside?: ICSSRule | string;
-  pause?: ICSSRule | string;
-  pauseAfter?: ICSSRule | string;
-  pauseBefore?: ICSSRule | string;
-  perspective?: ICSSRule | string;
-  perspectiveOrigin?: ICSSRule | string;
-  pointerEvents?: ICSSRule | string;
-  position?: ICSSRule | 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
-  quotes?: ICSSRule | string;
-  regionFragment?: ICSSRule | string;
-  restAfter?: ICSSRule | string;
-  restBefore?: ICSSRule | string;
-  right?: ICSSRule | ICSSPixelUnitRule;
-  shapeImageThreshold?: ICSSRule | string;
-  shapeInside?: ICSSRule | string;
-  shapeMargin?: ICSSRule | string;
-  shapeOutside?: ICSSRule | string;
-  speak?: ICSSRule | string;
-  speakAs?: ICSSRule | string;
-  strokeOpacity?: ICSSRule | number;
-  strokeWidth?: ICSSRule | ICSSPixelUnitRule;
-  tableLayout?: ICSSRule | string;
-  tabSize?: ICSSRule | string;
-  textAlign?: ICSSRule | string;
-  textAlignLast?: ICSSRule | string;
-  textDecoration?: ICSSRule | string;
-  textDecorationColor?: ICSSRule | string;
-  textDecorationLine?: ICSSRule | string;
-  textDecorationSkip?: ICSSRule | string;
-  textDecorationStyle?: ICSSRule | string;
-  textEmphasis?: ICSSRule | string;
-  textEmphasisColor?: ICSSRule | string;
-  textEmphasisStyle?: ICSSRule | string;
-  textHeight?: ICSSRule | string;
-  textIndent?: ICSSRule | string;
-  textOverflow?: ICSSRule | string;
-  textOverline?: ICSSRule | string;
-  textOverlineColor?: ICSSRule | string;
-  textOverlineMode?: ICSSRule | string;
-  textOverlineStyle?: ICSSRule | string;
-  textOverlineWidth?: ICSSRule | ICSSPixelUnitRule;
-  textRendering?: ICSSRule | string;
-  textShadow?: ICSSRule | string;
-  textTransform?: ICSSRule | string;
-  textUnderlinePosition?: ICSSRule | string;
-  textUnderlineStyle?: ICSSRule | string;
-  top?: ICSSRule | ICSSPixelUnitRule;
-  touchAction?: ICSSRule | string;
-  transform?: ICSSRule | string;
-  transformOrigin?: ICSSRule | string;
-  transformOriginZ?: ICSSRule | string;
-  transformStyle?: ICSSRule | string;
-  transition?: ICSSRule | string;
-  transitionDelay?: ICSSRule | string;
-  transitionDuration?: ICSSRule | string;
-  transitionProperty?: ICSSRule | string;
-  transitionTimingFunction?: ICSSRule | string;
-  unicodeBidi?: ICSSRule | string;
-  userFocus?: ICSSRule | string;
-  userInput?: ICSSRule | string;
-  userSelect?: ICSSRule | 'none' | 'auto' | 'text' | 'all' | 'contain';
-  verticalAlign?: ICSSRule | string;
-  visibility?: ICSSRule | string;
-  voiceBalance?: ICSSRule | string;
-  voiceDuration?: ICSSRule | string;
-  voiceFamily?: ICSSRule | string;
-  voicePitch?: ICSSRule | string;
-  voiceRange?: ICSSRule | string;
-  voiceRate?: ICSSRule | string;
-  voiceStress?: ICSSRule | string;
-  voiceVolume?: ICSSRule | string;
-  WebkitFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased';
-  whiteSpace?: ICSSRule | string;
-  widows?: ICSSRule | number;
-  width?: ICSSRule | ICSSPixelUnitRule;
-  wordBreak?: ICSSRule | string;
-  wordSpacing?: ICSSRule | string;
-  wordWrap?: ICSSRule | string;
-  wrapFlow?: ICSSRule | string;
-  wrapMargin?: ICSSRule | string;
-  writingMode?: ICSSRule | string;
-  zIndex?: ICSSRule | 'auto' | number;
-  zoom?: ICSSRule | 'auto' | number | ICSSPercentageRule;
-}
-
-// @public
-interface IStyleSheetConfig {
-  injectionMode?: InjectionMode;
-}
-
-// @public
-export function keyframes(timeline: { [key: string]: {} }): string;
-
-// @public
-export function mergeStyles(...args: (IStyle | IStyle[] | false | null | undefined)[]): string;
-
-// @public
-export function mergeStyleSets<T extends object>(...cssSets: (T | false | null | undefined)[]): {[P in keyof T]?: string };
-
-// @public
-class Stylesheet {
-  constructor(config?: IStyleSheetConfig);
-  public argsFromClassName(className: string): IStyle[] | undefined;
-  public cacheClassName(className: string, key: string, args: IStyle[]): void;
-  public classNameFromKey(key: string): string | undefined;
-  public getClassName(displayName?: string): string;
-  public static getInstance(): Stylesheet;
-  public getRules(): string;
-  public insertRule(rule: string): void;
-  public reset(): void;
-  public setConfig(config?: IStyleSheetConfig): void;
-}
-
-// WARNING: Unsupported export: IStyle
-// WARNING: Unsupported export: IStyleSet
-// WARNING: Unsupported export: IFontWeight
-// (No packageDescription for this package)
diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
index e3200ecd7fe89c..49eb442f11149a 100644
--- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
+++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
@@ -6715,10 +6715,12 @@ export type IStackItemTokenReturnType = ReturnType<Extract<IStackItemComponent['
 
 // @public (undocumented)
 export interface IStackItemTokens {
+    // (undocumented)
+    margin?: number | string;
 }
 
 // @public (undocumented)
-export interface IStackProps extends IStackSlots, IStyleableComponentProps<IStackProps, IStackStyles, IStackTokens>, React_2.HTMLAttributes<HTMLElement> {
+export interface IStackProps extends IStackSlots, IStyleableComponentProps<IStackProps, IStackTokens, IStackStyles>, React_2.HTMLAttributes<HTMLElement> {
     as?: React_2.ReactType<React_2.HTMLAttributes<HTMLElement>>;
     disableShrink?: boolean;
     gap?: number | string;
@@ -6754,6 +6756,8 @@ export type IStackTokenReturnType = ReturnType<Extract<IStackComponent['tokens']
 
 // @public (undocumented)
 export interface IStackTokens {
+    // (undocumented)
+    childrenGap?: number | string;
 }
 
 // @public (undocumented)
diff --git a/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx b/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx
index e63d3bda2a854a..0c69450ab767be 100644
--- a/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.BulkOperations.Example.tsx
@@ -5,7 +5,7 @@ import { DetailsList, Selection } from 'office-ui-fabric-react/lib/DetailsList';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { IColumn } from 'office-ui-fabric-react/lib/DetailsList';
 import { Text } from 'office-ui-fabric-react/lib/Text';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { IDragDropEvents, IDragDropContext } from 'office-ui-fabric-react/lib/utilities/dragdrop/interfaces';
 import { mergeStyles, getTheme } from 'office-ui-fabric-react/lib/Styling';
 import './Announced.Example.scss';
@@ -122,9 +122,10 @@ export class AnnouncedBulkOperationsExample extends React.Component<
 
   public render(): JSX.Element {
     const { items, columns } = this.state;
+    const stackTokens: IStackTokens = { childrenGap: 10 };
 
     return (
-      <Stack gap={10}>
+      <Stack tokens={stackTokens}>
         <Text>Turn on Narrator and drag and drop the items.</Text>
         <Text>
           Note: This example is to showcase the concept of copying, uploading, or moving many items and not fully illustrative of the real
diff --git a/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.LazyLoading.Example.tsx b/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.LazyLoading.Example.tsx
index 5bd93683bafcb6..ec602995537626 100644
--- a/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.LazyLoading.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.LazyLoading.Example.tsx
@@ -4,7 +4,7 @@ import { createArray, createRef } from 'office-ui-fabric-react/lib/Utilities';
 import { Image } from 'office-ui-fabric-react/lib/Image';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import { Text } from 'office-ui-fabric-react/lib/Text';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
 import { Async } from 'office-ui-fabric-react/lib/Utilities';
@@ -73,9 +73,10 @@ export class AnnouncedLazyLoadingExample extends React.Component<IAnnouncedLazyL
 
   public render(): JSX.Element {
     const { percentComplete } = this.state;
+    const stackTokens: IStackTokens = { childrenGap: 10 };
 
     return (
-      <Stack gap={10}>
+      <Stack tokens={stackTokens}>
         <Text>
           Turn on Narrator and check the toggle to start loading photos. Announced should announce the number of photos loaded every 10
           seconds, as that is the delay chosen for this example.
diff --git a/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.SearchResults.Example.tsx b/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.SearchResults.Example.tsx
index a67e71a1ab94d8..ab5388a0ebc27f 100644
--- a/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.SearchResults.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Announced/examples/Announced.SearchResults.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Announced } from '../Announced';
 import { TagPicker } from 'office-ui-fabric-react/lib/Pickers';
 import { Text } from 'office-ui-fabric-react/lib/Text';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Async } from 'office-ui-fabric-react/lib/Utilities';
 
 const _testTags = [
@@ -55,8 +55,10 @@ export class AnnouncedSearchResultsExample extends React.Component<
   }
 
   public render(): JSX.Element {
+    const stackTokens: IStackTokens = { childrenGap: 10 };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={stackTokens}>
         <Text>
           Turn on Narrator and type a letter or two into the TagPicker. This picker will filter added items from the search suggestions.
         </Text>
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
index 28c485d3fe127f..c5263d08ec297e 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
@@ -131,7 +131,7 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     }
 
     // Ensure positioning is recalculated when we are about to show a persisted menu.
-    if (!newProps.hidden && (newProps.hidden !== this.props.hidden)) {
+    if (!newProps.hidden && newProps.hidden !== this.props.hidden) {
       this._maxHeight = undefined;
       // Target might have been updated while hidden.
       this._setTargetWindowAndElement(newTarget);
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.test.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.test.tsx
index 3bd8ec99c20ebd..69ae5fbc5f4c20 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.test.tsx
@@ -17,7 +17,7 @@ describe('CalloutContentBase', () => {
     };
 
     const callout = mount(
-      <CalloutContent {...props} >
+      <CalloutContent {...props}>
         <div>Content</div>
       </CalloutContent>
     );
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx
index 43816ee63f1da1..6002fbdd9743d6 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
 
 const dropdownStyles: Partial<IDropdownStyles> = {
@@ -19,9 +19,11 @@ const options: IDropdownOption[] = [
   { key: 'lettuce', text: 'Lettuce' }
 ];
 
+const stackTokens: IStackTokens = { childrenGap: 20 };
+
 export const DropdownBasicExample: React.StatelessComponent = () => {
   return (
-    <Stack gap={20}>
+    <Stack tokens={stackTokens}>
       <Dropdown placeholder="Select an option" label="Basic uncontrolled example" options={options} styles={dropdownStyles} />
 
       <Dropdown
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx
index 46144006b798f8..d1910b6f658659 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 export interface IDropdownErrorExampleState {
@@ -13,8 +13,11 @@ export class DropdownErrorExample extends React.Component<{}, IDropdownErrorExam
 
   public render() {
     const { showError } = this.state;
+
+    const stackTokens: IStackTokens = { childrenGap: 30 };
+
     return (
-      <Stack horizontal gap={30} verticalAlign="start">
+      <Stack horizontal tokens={stackTokens} verticalAlign="start">
         <Toggle label="Show error message" onText="Yes" offText="No" checked={showError} onChange={this._updateShowError} />
         <Dropdown
           placeholder="Select an option"
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Required.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Required.Example.tsx
index e5cd8794a9850d..da7e0ef6065ff2 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Required.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Required.Example.tsx
@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { Dropdown, IDropdown } from 'office-ui-fabric-react/lib/Dropdown';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export const DropdownRequiredExample: React.StatelessComponent = () => {
   const dropdownRef = React.createRef<IDropdown>();
   const onSetFocus = () => dropdownRef.current!.focus(true);
 
+  const stackTokens: IStackTokens = { childrenGap: 20 };
+
   return (
-    <Stack horizontal gap={20} verticalAlign="end">
+    <Stack horizontal tokens={stackTokens} verticalAlign="end">
       <Dropdown
         componentRef={dropdownRef}
         placeholder="Select an option"
diff --git a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Basic.Example.tsx
index a7f3d6a9c0ada4..a0782ff6a1866a 100644
--- a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Basic.Example.tsx
@@ -7,9 +7,10 @@ import { Link } from 'office-ui-fabric-react/lib/Link';
 import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { Pivot, PivotItem } from 'office-ui-fabric-react/lib/Pivot';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 const pivotItemStyle: React.CSSProperties = { width: 500, paddingTop: 20 };
+const stackTokens: IStackTokens = { childrenGap: 20 };
 
 export class KeytipsBasicExample extends React.Component<{}> {
   private _sampleOptions = [{ key: 'A', text: 'Option 1' }, { key: 'B', text: 'Option 2' }, { key: 'C', text: 'Option 3' }];
@@ -21,7 +22,7 @@ export class KeytipsBasicExample extends React.Component<{}> {
         <p>For Pivots, keytips will first show for each of the pivots. After selecting a pivot, the Keytips for its content are shown.</p>
         <Pivot>
           <PivotItem headerText="Pivot 1" keytipProps={keytipMap.Pivot1Keytip} style={pivotItemStyle}>
-            <Stack gap={20}>
+            <Stack tokens={stackTokens}>
               <SpinButton label="Spin Button" keytipProps={keytipMap.SpinButtonKeytip} styles={{ root: { maxWidth: 200 } }} />
               <Toggle onText="Yes" offText="No" keytipProps={keytipMap.ToggleKeytip} />
               <span>
@@ -34,7 +35,7 @@ export class KeytipsBasicExample extends React.Component<{}> {
           </PivotItem>
 
           <PivotItem headerText="Pivot 2" keytipProps={keytipMap.Pivot2Keytip} style={pivotItemStyle}>
-            <Stack gap={20}>
+            <Stack tokens={stackTokens}>
               <Checkbox label="Checkbox" keytipProps={keytipMap.CheckboxKeytip} />
               <Dropdown label="Dropdown" keytipProps={keytipMap.DropdownKeytip} options={this._sampleOptions} />
             </Stack>
diff --git a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Button.Example.tsx b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Button.Example.tsx
index b3bb04d881b044..2bae995f9f3d27 100644
--- a/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Button.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Keytip/examples/Keytips.Button.Example.tsx
@@ -2,12 +2,13 @@ import * as React from 'react';
 import { DefaultButton, CompoundButton } from 'office-ui-fabric-react/lib/Button';
 import { keytipMap } from './KeytipSetup';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface IKeytipsButtonExampleState {
   btnDisabled: boolean;
 }
 
+const stackTokens: IStackTokens = { childrenGap: 20 };
 const marginBottom = { root: { marginBottom: 28 } };
 
 export class KeytipsButtonExample extends React.Component<{}, IKeytipsButtonExampleState> {
@@ -24,7 +25,7 @@ export class KeytipsButtonExample extends React.Component<{}, IKeytipsButtonExam
     return (
       <div>
         <p>When multiple Keytips start with the same character, typing that character will filter the visible keytips.</p>
-        <Stack horizontal gap={20}>
+        <Stack horizontal tokens={stackTokens}>
           <DefaultButton
             keytipProps={keytipMap.Button}
             text="Button"
diff --git a/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx
index ad4790dee7a47b..e247272da31cd2 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Basic.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Slider } from 'office-ui-fabric-react/lib/Slider';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface ISliderBasicExampleState {
   value: number;
@@ -11,8 +11,10 @@ export class SliderBasicExample extends React.Component<{}, ISliderBasicExampleS
   public state: ISliderBasicExampleState = { value: 0 };
 
   public render(): JSX.Element {
+    const stackTokens: IStackTokens = { childrenGap: 20 };
+
     return (
-      <Stack gap={20} styles={{ root: { maxWidth: 300 } }}>
+      <Stack tokens={stackTokens} styles={{ root: { maxWidth: 300 } }}>
         <Slider
           label="Basic example"
           min={1}
diff --git a/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Vertical.Example.tsx b/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Vertical.Example.tsx
index acfd01a9c68e9f..c6275cb440ff3a 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Vertical.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/examples/Slider.Vertical.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Slider } from 'office-ui-fabric-react/lib/Slider';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface ISliderVerticalExampleState {
   value: number;
@@ -8,8 +8,10 @@ export interface ISliderVerticalExampleState {
 
 // tslint:disable:jsx-no-lambda
 export const SliderVerticalExample: React.StatelessComponent = () => {
+  const stackTokens: IStackTokens = { childrenGap: 20 };
+
   return (
-    <Stack horizontal gap={20} styles={{ root: { height: 200 } }}>
+    <Stack horizontal tokens={stackTokens} styles={{ root: { height: 200 } }}>
       <Slider // prettier-ignore
         label="Basic"
         min={1}
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx
index 82289510c4f53c..973c266f6a9241 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Basic.Example.tsx
@@ -1,29 +1,39 @@
 import * as React from 'react';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 import { Label } from 'office-ui-fabric-react/lib/Label';
-import { Stack, IStackProps } from 'office-ui-fabric-react/lib/Stack';
+import { IStackProps, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export const SpinnerBasicExample: React.StatelessComponent = () => {
   // This is just for laying out the label and spinner (spinners don't have to be inside a Stack)
-  const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center', gap: 20 };
+  const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' };
+
+  const tokens = {
+    sectionStack: {
+      childrenGap: 10
+    },
+    spinnerStack: {
+      childrenGap: 20
+    }
+  };
+
   return (
-    <Stack gap={10}>
-      <Stack {...rowProps}>
+    <Stack tokens={tokens.sectionStack}>
+      <Stack {...rowProps} tokens={tokens.spinnerStack}>
         <Label>Extra small spinner</Label>
         <Spinner size={SpinnerSize.xSmall} />
       </Stack>
 
-      <Stack {...rowProps}>
+      <Stack {...rowProps} tokens={tokens.spinnerStack}>
         <Label>Small spinner</Label>
         <Spinner size={SpinnerSize.small} />
       </Stack>
 
-      <Stack {...rowProps}>
+      <Stack {...rowProps} tokens={tokens.spinnerStack}>
         <Label>Medium spinner</Label>
         <Spinner size={SpinnerSize.medium} />
       </Stack>
 
-      <Stack {...rowProps}>
+      <Stack {...rowProps} tokens={tokens.spinnerStack}>
         <Label>Large spinner</Label>
         <Spinner size={SpinnerSize.large} />
       </Stack>
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Labeled.Example.tsx b/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Labeled.Example.tsx
index 308c2739c56be9..e7bcc83d1a16fb 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Labeled.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/examples/Spinner.Labeled.Example.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export const SpinnerLabeledExample: React.StatelessComponent = () => {
+  const stackTokens: IStackTokens = { childrenGap: 20 };
+
   return (
-    <Stack gap={20} maxWidth={250}>
+    <Stack tokens={stackTokens} maxWidth={250}>
       <div>
         <Label>Spinner with label positioned below</Label>
         <Spinner label="I am definitely loading..." />
diff --git a/packages/office-ui-fabric-react/src/components/Stack/Stack.styles.ts b/packages/office-ui-fabric-react/src/components/Stack/Stack.styles.ts
index 879597e4cef293..6d20b0d7d4b00d 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/Stack.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.styles.ts
@@ -12,7 +12,7 @@ const GlobalClassNames = {
   inner: 'ms-Stack-inner'
 };
 
-export const styles: IStackComponent['styles'] = (props, theme): IStackStylesReturnType => {
+export const styles: IStackComponent['styles'] = (props, theme, tokens): IStackStylesReturnType => {
   const {
     verticalFill,
     maxWidth,
@@ -31,7 +31,8 @@ export const styles: IStackComponent['styles'] = (props, theme): IStackStylesRet
 
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
-  const { rowGap, columnGap } = parseGap(gap, theme);
+  const childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : gap;
+  const { rowGap, columnGap } = parseGap(childrenGap, theme);
 
   const horizontalMargin = `${-0.5 * columnGap.value}${columnGap.unit}`;
   const verticalMargin = `${-0.5 * rowGap.value}${rowGap.unit}`;
diff --git a/packages/office-ui-fabric-react/src/components/Stack/Stack.test.tsx b/packages/office-ui-fabric-react/src/components/Stack/Stack.test.tsx
index 66d03c76e7430a..834b1d373b7788 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/Stack.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.test.tsx
@@ -168,7 +168,7 @@ describe('Stack', () => {
 
   it('renders vertical Stack with a gap correctly', () => {
     const component = renderer.create(
-      <Stack gap={10}>
+      <Stack tokens={{ childrenGap: 10 }}>
         <Stack.Item>Item 1</Stack.Item>
         <Stack.Item>Item 2</Stack.Item>
       </Stack>
@@ -179,7 +179,7 @@ describe('Stack', () => {
 
   it('renders horizontal Stack with a gap correctly', () => {
     const component = renderer.create(
-      <Stack horizontal gap={10}>
+      <Stack horizontal tokens={{ childrenGap: 10 }}>
         <Stack.Item>Item 1</Stack.Item>
         <Stack.Item>Item 2</Stack.Item>
       </Stack>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/Stack.types.ts b/packages/office-ui-fabric-react/src/components/Stack/Stack.types.ts
index c48c3dd67256c1..31e362e4391d14 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/Stack.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Stack/Stack.types.ts
@@ -31,7 +31,7 @@ export interface IStackSlots {
 
 export interface IStackProps
   extends IStackSlots,
-    IStyleableComponentProps<IStackProps, IStackStyles, IStackTokens>,
+    IStyleableComponentProps<IStackProps, IStackTokens, IStackStyles>,
     React.HTMLAttributes<HTMLElement> {
   /**
    * Defines how to render the Stack.
@@ -110,6 +110,8 @@ export interface IStackProps
   wrap?: boolean;
 }
 
-export interface IStackTokens {}
+export interface IStackTokens {
+  childrenGap?: number | string;
+}
 
 export type IStackStyles = IComponentStyles<IStackSlots>;
diff --git a/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.styles.ts b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.styles.ts
index 78e0efb90e4cc0..1802b8d8b4023f 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.styles.ts
@@ -10,7 +10,7 @@ const alignMap: { [key: string]: string } = {
   end: 'flex-end'
 };
 
-export const styles: IStackItemComponent['styles'] = (props, theme): IStackItemStylesReturnType => {
+export const StackItemStyles: IStackItemComponent['styles'] = (props, theme, tokens): IStackItemStylesReturnType => {
   const { grow, shrink, disableShrink, align, verticalFill, order, className } = props;
 
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
@@ -20,8 +20,9 @@ export const styles: IStackItemComponent['styles'] = (props, theme): IStackItemS
       theme.fonts.medium,
       classNames.root,
       {
-        width: 'auto',
-        height: verticalFill ? '100%' : 'auto'
+        margin: tokens.margin,
+        height: verticalFill ? '100%' : 'auto',
+        width: 'auto'
       },
       grow && { flexGrow: grow === true ? 1 : grow },
       (disableShrink || (!grow && !shrink)) && {
diff --git a/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.tsx b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.tsx
index aa6cf5e7c4f6e6..77126465ba7cf7 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { withSlots, createComponent, getSlots } from '../../../Foundation';
 import { IStackItemComponent, IStackItemProps, IStackItemSlots } from './StackItem.types';
-import { styles } from './StackItem.styles';
+import { StackItemStyles as styles } from './StackItem.styles';
 
 const view: IStackItemComponent['view'] = props => {
   const { children } = props;
diff --git a/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts
index ebc114d89209cf..559c42aba40000 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Stack/StackItem/StackItem.types.ts
@@ -53,6 +53,8 @@ export interface IStackItemProps extends IStackItemSlots, IStyleableComponentPro
   order?: number | string;
 }
 
-export interface IStackItemTokens {}
+export interface IStackItemTokens {
+  margin?: number | string;
+}
 
 export type IStackItemStyles = IComponentStyles<IStackItemSlots>;
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx
index 3e2fef900eb402..921f83121f62f9 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Basic.Example.tsx
@@ -16,8 +16,17 @@ export class HorizontalStackBasicExample extends React.Component<{}, {}> {
       }
     });
 
+    const tokens = {
+      fiveGapStack: {
+        childrenGap: 5
+      },
+      tenGapStack: {
+        childrenGap: 10
+      }
+    };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={tokens.fiveGapStack}>
         <span>Default horizontal stack</span>
         <Stack horizontal disableShrink className={styles.root}>
           <span>Item One</span>
@@ -39,14 +48,21 @@ export class HorizontalStackBasicExample extends React.Component<{}, {}> {
         </Stack>
 
         <span>Horizontal gap between items</span>
-        <Stack horizontal disableShrink gap={10} padding={10} className={styles.root}>
+        <Stack horizontal disableShrink tokens={tokens.tenGapStack} padding={10} className={styles.root}>
           <span>Item One</span>
           <span>Item Two</span>
           <span>Item Three</span>
         </Stack>
 
         <span>Item alignments</span>
-        <Stack horizontal disableShrink gap={5} padding={10} className={styles.root} styles={{ root: { height: 100 } }}>
+        <Stack
+          horizontal
+          disableShrink
+          tokens={tokens.fiveGapStack}
+          padding={10}
+          className={styles.root}
+          styles={{ root: { height: 100 } }}
+        >
           <Stack.Item align="auto" className={styles.item}>
             <span>Auto-aligned item</span>
           </Stack.Item>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx
index e6ecbd9b1bb20c..4ac97a350f5f49 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Configure.Example.tsx
@@ -103,8 +103,17 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
       }
     };
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      configureStack: {
+        childrenGap: 20
+      }
+    };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={tokens.sectionStack}>
         <Stack horizontal disableShrink>
           <Stack.Item grow>
             <Stack>
@@ -124,7 +133,7 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
             </Stack>
           </Stack.Item>
           <Stack.Item grow>
-            <Stack horizontal disableShrink gap={20}>
+            <Stack horizontal disableShrink tokens={tokens.configureStack}>
               <Stack>
                 <Checkbox label="Wrap items" onChange={this._onWrapChange} styles={{ root: { marginBottom: 10 } }} />
                 <Checkbox label="Shrink items" onChange={this._onShrinkChange} />
@@ -144,7 +153,7 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
           </Stack.Item>
         </Stack>
 
-        <Stack horizontal disableShrink gap={20}>
+        <Stack horizontal disableShrink tokens={tokens.configureStack}>
           <Stack.Item grow>
             <Stack>
               <Slider
@@ -213,7 +222,7 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
           </Stack.Item>
         </Stack>
 
-        <Stack horizontal disableShrink gap={20} verticalAlign="end">
+        <Stack horizontal disableShrink tokens={tokens.configureStack} verticalAlign="end">
           <Stack.Item grow>
             <Dropdown
               selectedKey={horizontalAlignment}
@@ -251,7 +260,7 @@ export class HorizontalStackConfigureExample extends React.Component<{}, IExampl
           horizontal
           wrap={wrap}
           disableShrink={disableShrink}
-          gap={rowGap + ' ' + columnGap}
+          tokens={{ childrenGap: rowGap + ' ' + columnGap }}
           padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
           horizontalAlign={horizontalAlignment}
           verticalAlign={verticalAlignment}
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx
index a6ce3c64f3f3c5..ed597813b61020 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Grow.Example.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Stack } from '../Stack';
+import { IStackTokens } from '../Stack.types';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class HorizontalStackGrowExample extends React.Component<{}, {}> {
@@ -19,8 +20,10 @@ export class HorizontalStackGrowExample extends React.Component<{}, {}> {
       }
     });
 
+    const stackTokens: IStackTokens = { childrenGap: 5 };
+
     return (
-      <Stack horizontal gap={5} padding={10} className={styles.root}>
+      <Stack horizontal tokens={stackTokens} padding={10} className={styles.root}>
         <Stack.Item grow={3} className={styles.item}>
           Grow is 3
         </Stack.Item>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.HorizontalAlign.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.HorizontalAlign.Example.tsx
index 99ae4904f60188..b3aa7629f5faef 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.HorizontalAlign.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.HorizontalAlign.Example.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Stack } from '../Stack';
+import { IStackTokens } from '../Stack.types';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class HorizontalStackHorizontalAlignExample extends React.Component<{}, {}> {
@@ -21,8 +22,10 @@ export class HorizontalStackHorizontalAlignExample extends React.Component<{}, {
       }
     });
 
+    const stackTokens: IStackTokens = { childrenGap: 5 };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={stackTokens}>
         <span>Left-aligned</span>
         <Stack horizontal horizontalAlign="start" className={styles.root}>
           <span>1</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Reversed.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Reversed.Example.tsx
index 1b435376baf45a..864df8e3b4eca0 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Reversed.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Reversed.Example.tsx
@@ -16,8 +16,17 @@ export class HorizontalStackReversedExample extends React.Component<{}, {}> {
       }
     });
 
+    const tokens = {
+      fiveGapStack: {
+        childrenGap: 5
+      },
+      tenGapStack: {
+        childrenGap: 10
+      }
+    };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={tokens.fiveGapStack}>
         <span>Default horizontal stack</span>
         <Stack horizontal reversed disableShrink className={styles.root}>
           <span>Item One</span>
@@ -26,14 +35,22 @@ export class HorizontalStackReversedExample extends React.Component<{}, {}> {
         </Stack>
 
         <span>Horizontal gap between items</span>
-        <Stack horizontal reversed disableShrink gap={10} padding={10} className={styles.root}>
+        <Stack horizontal reversed disableShrink tokens={tokens.tenGapStack} padding={10} className={styles.root}>
           <span>Item One</span>
           <span>Item Two</span>
           <span>Item Three</span>
         </Stack>
 
         <span>Item alignments</span>
-        <Stack horizontal reversed disableShrink gap={5} padding={10} className={styles.root} styles={{ root: { height: 100 } }}>
+        <Stack
+          horizontal
+          reversed
+          disableShrink
+          tokens={tokens.fiveGapStack}
+          padding={10}
+          className={styles.root}
+          styles={{ root: { height: 100 } }}
+        >
           <Stack.Item align="auto" className={styles.item}>
             <span>Auto-aligned item</span>
           </Stack.Item>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Shrink.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Shrink.Example.tsx
index d498c00e0f862b..03e3733aec46b6 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Shrink.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Shrink.Example.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Slider } from 'office-ui-fabric-react/lib/Slider';
 import { Stack } from '../Stack';
+import { IStackTokens } from '../Stack.types';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export interface IExampleState {
@@ -34,8 +35,10 @@ export class HorizontalStackShrinkExample extends React.Component<{}, IExampleSt
       }
     });
 
+    const stackTokens: IStackTokens = { childrenGap: 5 };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={stackTokens}>
         <Slider
           label="Change the stack width to see how child items shrink:"
           min={1}
@@ -45,7 +48,7 @@ export class HorizontalStackShrinkExample extends React.Component<{}, IExampleSt
           showValue={true}
           onChange={this._onWidthChange}
         />
-        <Stack horizontal gap={5} padding={10} className={styles.root}>
+        <Stack horizontal tokens={stackTokens} padding={10} className={styles.root}>
           <Stack.Item grow className={styles.item}>
             I shrink
           </Stack.Item>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Spacing.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Spacing.Example.tsx
index b2bacc701674a4..0c9c3183ad8151 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Spacing.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Spacing.Example.tsx
@@ -32,12 +32,36 @@ export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
       }
     });
 
+    const tokens = {
+      numericalSpacing: {
+        childrenGap: 10
+      },
+      customSpacing: {
+        childrenGap: '10%'
+      },
+      themedExtraSmall: {
+        childrenGap: 's2'
+      },
+      themedSmall: {
+        childrenGap: 's1'
+      },
+      themedMedium: {
+        childrenGap: 'm'
+      },
+      themedLarge: {
+        childrenGap: 'l1'
+      },
+      themedExtraLarge: {
+        childrenGap: 'l2'
+      }
+    };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={tokens.numericalSpacing}>
         <Stack horizontal disableShrink horizontalAlign="space-between">
           <Stack>
             <span>Numerical spacing</span>
-            <Stack horizontal className={styles.root} gap={10} padding={10}>
+            <Stack horizontal className={styles.root} tokens={tokens.numericalSpacing} padding={10}>
               <span>1</span>
               <span>2</span>
               <span>3</span>
@@ -45,7 +69,7 @@ export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
           </Stack>
           <Stack>
             <span>Custom spacing</span>
-            <Stack horizontal className={styles.root} gap="10%" padding="s1 15%">
+            <Stack horizontal className={styles.root} tokens={tokens.customSpacing} padding="s1 15%">
               <span>1</span>
               <span>2</span>
               <span>3</span>
@@ -56,7 +80,7 @@ export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
         <Stack horizontal disableShrink horizontalAlign="space-between">
           <Stack>
             <span>Themed spacing (extra small)</span>
-            <Stack horizontal className={styles.root} gap="s2" padding="s2">
+            <Stack horizontal className={styles.root} tokens={tokens.themedExtraSmall} padding="s2">
               <span>1</span>
               <span>2</span>
               <span>3</span>
@@ -64,7 +88,7 @@ export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
           </Stack>
           <Stack>
             <span>Themed spacing (small)</span>
-            <Stack horizontal className={styles.root} gap="s1" padding="s1">
+            <Stack horizontal className={styles.root} tokens={tokens.themedSmall} padding="s1">
               <span>1</span>
               <span>2</span>
               <span>3</span>
@@ -72,7 +96,7 @@ export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
           </Stack>
           <Stack>
             <span>Themed spacing (medium)</span>
-            <Stack horizontal className={styles.root} gap="m" padding="m">
+            <Stack horizontal className={styles.root} tokens={tokens.themedMedium} padding="m">
               <span>1</span>
               <span>2</span>
               <span>3</span>
@@ -83,7 +107,7 @@ export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
         <Stack horizontal horizontalAlign="space-between">
           <Stack>
             <span>Themed spacing (large)</span>
-            <Stack horizontal className={styles.root} gap="l1" padding="l1">
+            <Stack horizontal className={styles.root} tokens={tokens.themedLarge} padding="l1">
               <span>1</span>
               <span>2</span>
               <span>3</span>
@@ -91,7 +115,7 @@ export class HorizontalStackSpacingExample extends React.Component<{}, {}> {
           </Stack>
           <Stack>
             <span>Themed spacing (extra large)</span>
-            <Stack horizontal className={styles.root} gap="l2" padding="l2">
+            <Stack horizontal className={styles.root} tokens={tokens.themedExtraLarge} padding="l2">
               <span>1</span>
               <span>2</span>
               <span>3</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.VerticalAlign.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.VerticalAlign.Example.tsx
index bf26358803afb1..07b2ee6758a81e 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.VerticalAlign.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.VerticalAlign.Example.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Stack } from '../Stack';
+import { IStackTokens } from '../Stack.types';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class HorizontalStackVerticalAlignExample extends React.Component<{}, {}> {
@@ -22,8 +23,10 @@ export class HorizontalStackVerticalAlignExample extends React.Component<{}, {}>
       }
     });
 
+    const stackTokens: IStackTokens = { childrenGap: 5 };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={stackTokens}>
         <span>Top-aligned</span>
         <Stack horizontal verticalAlign="start" className={styles.root}>
           <span>1</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Wrap.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Wrap.Example.tsx
index bfe24f14d3dd2b..f625ace6eec8ad 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Wrap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.Wrap.Example.tsx
@@ -34,8 +34,17 @@ export class HorizontalStackWrapExample extends React.Component<{}, IExampleStat
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      wrapStack: {
+        childrenGap: 30
+      }
+    };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={tokens.sectionStack}>
         <Slider
           label="Change the stack width to see how child items wrap onto multiple rows:"
           min={1}
@@ -46,7 +55,7 @@ export class HorizontalStackWrapExample extends React.Component<{}, IExampleStat
           onChange={this._onWidthChange}
         />
 
-        <Stack horizontal wrap gap={30} className={styles.root}>
+        <Stack horizontal wrap tokens={tokens.wrapStack} className={styles.root}>
           <span>1</span>
           <span>2</span>
           <span>3</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapAdvanced.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapAdvanced.Example.tsx
index b8899b29454c52..fd8c70d7048a59 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapAdvanced.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapAdvanced.Example.tsx
@@ -54,8 +54,20 @@ export class HorizontalStackWrapAdvancedExample extends React.Component<{}, IExa
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      configureStack: {
+        childrenGap: 20
+      },
+      wrapStack: {
+        childrenGap: 30
+      }
+    };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={tokens.sectionStack}>
         <Stack horizontal>
           <Stack.Item grow>
             <Slider label="Stack width:" min={1} max={100} step={1} defaultValue={100} showValue={true} onChange={this._onWidthChange} />
@@ -73,7 +85,7 @@ export class HorizontalStackWrapAdvancedExample extends React.Component<{}, IExa
           </Stack.Item>
         </Stack>
 
-        <Stack horizontal gap={20}>
+        <Stack horizontal tokens={tokens.configureStack}>
           <Stack.Item grow>
             <Dropdown
               selectedKey={horizontalAlignment}
@@ -115,7 +127,7 @@ export class HorizontalStackWrapAdvancedExample extends React.Component<{}, IExa
             horizontal
             verticalFill
             wrap
-            gap={30}
+            tokens={tokens.wrapStack}
             horizontalAlign={horizontalAlignment}
             verticalAlign={verticalAlignment}
             className={styles.root}
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapNested.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapNested.Example.tsx
index a13dae8af544e7..8c6db7e4f8f0e3 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapNested.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Horizontal.WrapNested.Example.tsx
@@ -62,8 +62,23 @@ export class HorizontalStackWrapNestedExample extends React.Component<{}, IExamp
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      wrapStack: {
+        childrenGap: '30 40'
+      },
+      firstStack: {
+        childrenGap: '10 30'
+      },
+      secondStack: {
+        childrenGap: '20 50'
+      }
+    };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={tokens.sectionStack}>
         <Slider
           label="Change the stack width to see how child items wrap onto multiple rows:"
           min={1}
@@ -74,8 +89,8 @@ export class HorizontalStackWrapNestedExample extends React.Component<{}, IExamp
           onChange={this._onWidthChange}
         />
 
-        <Stack horizontal wrap gap={'30 40'} className={styles.root}>
-          <Stack horizontal wrap gap={'10 30'} className={styles.stackOne}>
+        <Stack horizontal wrap tokens={tokens.wrapStack} className={styles.root}>
+          <Stack horizontal wrap tokens={tokens.firstStack} className={styles.stackOne}>
             <span>1</span>
             <span>2</span>
             <span>3</span>
@@ -85,7 +100,7 @@ export class HorizontalStackWrapNestedExample extends React.Component<{}, IExamp
             <span>7</span>
           </Stack>
 
-          <Stack horizontal wrap gap={'20 50'} className={styles.stackTwo}>
+          <Stack horizontal wrap tokens={tokens.secondStack} className={styles.stackTwo}>
             <span>1</span>
             <span>2</span>
             <span>3</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Basic.Example.tsx
index 579d70cb0270e0..1244b5b7312ebc 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Basic.Example.tsx
@@ -16,8 +16,17 @@ export class VerticalStackBasicExample extends React.Component<{}, {}> {
       }
     });
 
+    const tokens = {
+      fiveGapStack: {
+        childrenGap: 5
+      },
+      tenGapStack: {
+        childrenGap: 10
+      }
+    };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={tokens.fiveGapStack}>
         <span>Default vertical stack</span>
         <Stack className={styles.root}>
           <span>Item One</span>
@@ -39,14 +48,14 @@ export class VerticalStackBasicExample extends React.Component<{}, {}> {
         </Stack>
 
         <span>Vertical gap between items</span>
-        <Stack gap={10} padding={10} className={styles.root}>
+        <Stack tokens={tokens.tenGapStack} padding={10} className={styles.root}>
           <span>Item One</span>
           <span>Item Two</span>
           <span>Item Three</span>
         </Stack>
 
         <span>Item alignments</span>
-        <Stack gap={5} padding={10} className={styles.root}>
+        <Stack tokens={tokens.fiveGapStack} padding={10} className={styles.root}>
           <Stack.Item align="auto" className={styles.item}>
             <span>Auto-aligned item</span>
           </Stack.Item>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Configure.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Configure.Example.tsx
index d035ab34027d50..2a24b719fd3fc5 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Configure.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Configure.Example.tsx
@@ -17,7 +17,7 @@ export interface IExampleState {
   wrap: boolean;
   stackHeight: number;
   autoHeight: boolean;
-  gap: number;
+  childrenGap: number;
   paddingLeft: number;
   paddingRight: number;
   paddingTop: number;
@@ -39,7 +39,7 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
       wrap: false,
       stackHeight: 200,
       autoHeight: true,
-      gap: 0,
+      childrenGap: 0,
       paddingLeft: 0,
       paddingRight: 0,
       paddingTop: 0,
@@ -60,7 +60,7 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
       wrap,
       stackHeight,
       autoHeight,
-      gap,
+      childrenGap,
       paddingLeft,
       paddingRight,
       paddingTop,
@@ -96,9 +96,18 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      configureStack: {
+        childrenGap: 20
+      }
+    };
+
     return (
-      <Stack gap={10}>
-        <Stack horizontal gap={20}>
+      <Stack tokens={tokens.sectionStack}>
+        <Stack horizontal tokens={tokens.configureStack}>
           <Stack.Item grow>
             <Stack>
               <Slider
@@ -135,7 +144,7 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
           </Stack.Item>
         </Stack>
 
-        <Stack horizontal gap={20}>
+        <Stack horizontal tokens={tokens.configureStack}>
           <Stack.Item grow>
             <Stack>
               <Slider
@@ -147,7 +156,7 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
                 showValue={true}
                 onChange={this._onGapChange}
               />
-              <Stack horizontal gap={20} verticalAlign="end">
+              <Stack horizontal tokens={tokens.configureStack} verticalAlign="end">
                 <Stack.Item grow>
                   <Dropdown
                     selectedKey={verticalAlignment}
@@ -231,7 +240,7 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
         <Stack
           disableShrink={disableShrink}
           wrap={wrap}
-          gap={gap + ' ' + 0}
+          tokens={{ childrenGap: childrenGap + ' ' + 0 }}
           padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
           verticalAlign={verticalAlignment}
           horizontalAlign={horizontalAlignment}
@@ -290,7 +299,7 @@ export class VerticalStackConfigureExample extends React.Component<{}, IExampleS
   };
 
   private _onGapChange = (value: number): void => {
-    this.setState({ gap: value });
+    this.setState({ childrenGap: value });
   };
 
   private _onPaddingLeftChange = (value: number): void => {
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx
index 627b327ce67ec1..427b1bc01288fe 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Stack } from '../Stack';
+import { IStackTokens } from '../Stack.types';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class VerticalStackGrowExample extends React.Component<{}, {}> {
@@ -19,9 +20,11 @@ export class VerticalStackGrowExample extends React.Component<{}, {}> {
       }
     });
 
+    const stackTokens: IStackTokens = { childrenGap: 5 };
+
     return (
-      <Stack gap={5}>
-        <Stack gap={5} padding={10} className={styles.root}>
+      <Stack tokens={stackTokens}>
+        <Stack tokens={stackTokens} padding={10} className={styles.root}>
           <Stack.Item grow={3} className={styles.item}>
             Grow is 3
           </Stack.Item>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.HorizontalAlign.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.HorizontalAlign.Example.tsx
index 9e98e05221caf4..3e29ed272c900e 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.HorizontalAlign.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.HorizontalAlign.Example.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Stack } from '../Stack';
+import { IStackTokens } from '../Stack.types';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export class VerticalStackHorizontalAlignExample extends React.Component<{}, {}> {
@@ -21,8 +22,10 @@ export class VerticalStackHorizontalAlignExample extends React.Component<{}, {}>
       }
     });
 
+    const stackTokens: IStackTokens = { childrenGap: 5 };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={stackTokens}>
         <span>Left-aligned</span>
         <Stack horizontalAlign="start" className={styles.root}>
           <span>1</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Reversed.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Reversed.Example.tsx
index 437456eb9735dd..510b184fab9db4 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Reversed.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Reversed.Example.tsx
@@ -16,8 +16,17 @@ export class VerticalStackReversedExample extends React.Component<{}, {}> {
       }
     });
 
+    const tokens = {
+      fiveGapStack: {
+        childrenGap: 5
+      },
+      tenGapStack: {
+        childrenGap: 10
+      }
+    };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={tokens.fiveGapStack}>
         <span>Default vertical stack</span>
         <Stack reversed className={styles.root}>
           <span>Item One</span>
@@ -26,14 +35,14 @@ export class VerticalStackReversedExample extends React.Component<{}, {}> {
         </Stack>
 
         <span>Vertical gap between items</span>
-        <Stack reversed gap={10} padding={10} className={styles.root}>
+        <Stack reversed tokens={tokens.tenGapStack} padding={10} className={styles.root}>
           <span>Item One</span>
           <span>Item Two</span>
           <span>Item Three</span>
         </Stack>
 
         <span>Item alignments</span>
-        <Stack reversed gap={5} padding={10} className={styles.root}>
+        <Stack reversed tokens={tokens.fiveGapStack} padding={10} className={styles.root}>
           <Stack.Item align="auto" className={styles.item}>
             <span>Auto-aligned item</span>
           </Stack.Item>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Shrink.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Shrink.Example.tsx
index 1a9089afa99cd5..c427851a487d04 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Shrink.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Shrink.Example.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Slider } from 'office-ui-fabric-react/lib/Slider';
 import { Stack } from '../Stack';
+import { IStackTokens } from '../Stack.types';
 import { mergeStyleSets, DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
 
 export interface IExampleState {
@@ -37,8 +38,10 @@ export class VerticalStackShrinkExample extends React.Component<{}, IExampleStat
       }
     });
 
+    const stackTokens: IStackTokens = { childrenGap: 5 };
+
     return (
-      <Stack gap={5}>
+      <Stack tokens={stackTokens}>
         <Slider
           label="Change the stack height to see how child items shrink:"
           min={1}
@@ -49,7 +52,7 @@ export class VerticalStackShrinkExample extends React.Component<{}, IExampleStat
           onChange={this._onHeightChange}
         />
         <div className={styles.container}>
-          <Stack gap={5} padding={10} className={styles.root}>
+          <Stack tokens={stackTokens} padding={10} className={styles.root}>
             <Stack.Item grow className={styles.item}>
               I shrink
             </Stack.Item>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Spacing.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Spacing.Example.tsx
index 87e9f4cc029f39..dfa7158771711e 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Spacing.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Spacing.Example.tsx
@@ -20,12 +20,39 @@ export class VerticalStackSpacingExample extends React.Component<{}, {}> {
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 50
+      },
+      numericalSpacing: {
+        childrenGap: 10
+      },
+      customSpacing: {
+        childrenGap: '20%'
+      },
+      themedExtraSmall: {
+        childrenGap: 's2'
+      },
+      themedSmall: {
+        childrenGap: 's1'
+      },
+      themedMedium: {
+        childrenGap: 'm'
+      },
+      themedLarge: {
+        childrenGap: 'l1'
+      },
+      themedExtraLarge: {
+        childrenGap: 'l2'
+      }
+    };
+
     return (
-      <Stack gap={10}>
-        <Stack horizontal disableShrink gap={50}>
+      <Stack tokens={tokens.numericalSpacing}>
+        <Stack horizontal disableShrink tokens={tokens.sectionStack}>
           <Stack>
             <span>Numerical spacing</span>
-            <Stack className={styles.root} gap={10} padding={10}>
+            <Stack className={styles.root} tokens={tokens.numericalSpacing} padding={10}>
               <span className={styles.item}>1</span>
               <span className={styles.item}>2</span>
               <span className={styles.item}>3</span>
@@ -34,7 +61,7 @@ export class VerticalStackSpacingExample extends React.Component<{}, {}> {
 
           <Stack>
             <span>Custom spacing</span>
-            <Stack className={styles.root} gap="20%" padding="m 40px">
+            <Stack className={styles.root} tokens={tokens.customSpacing} padding="m 40px">
               <span className={styles.item}>1</span>
               <span className={styles.item}>2</span>
               <span className={styles.item}>3</span>
@@ -45,7 +72,7 @@ export class VerticalStackSpacingExample extends React.Component<{}, {}> {
         <Stack horizontal disableShrink horizontalAlign="space-between">
           <Stack>
             <span>Themed spacing (extra small)</span>
-            <Stack className={styles.root} gap="s2" padding="s2">
+            <Stack className={styles.root} tokens={tokens.themedExtraSmall} padding="s2">
               <span className={styles.item}>1</span>
               <span className={styles.item}>2</span>
               <span className={styles.item}>3</span>
@@ -54,7 +81,7 @@ export class VerticalStackSpacingExample extends React.Component<{}, {}> {
 
           <Stack>
             <span>Themed spacing (small)</span>
-            <Stack className={styles.root} gap="s1" padding="s2">
+            <Stack className={styles.root} tokens={tokens.themedSmall} padding="s2">
               <span className={styles.item}>1</span>
               <span className={styles.item}>2</span>
               <span className={styles.item}>3</span>
@@ -63,7 +90,7 @@ export class VerticalStackSpacingExample extends React.Component<{}, {}> {
 
           <Stack>
             <span>Themed spacing (medium)</span>
-            <Stack className={styles.root} gap="m" padding="m">
+            <Stack className={styles.root} tokens={tokens.themedMedium} padding="m">
               <span className={styles.item}>1</span>
               <span className={styles.item}>2</span>
               <span className={styles.item}>3</span>
@@ -72,7 +99,7 @@ export class VerticalStackSpacingExample extends React.Component<{}, {}> {
 
           <Stack>
             <span>Themed spacing (large)</span>
-            <Stack className={styles.root} gap="l1" padding="l1">
+            <Stack className={styles.root} tokens={tokens.themedLarge} padding="l1">
               <span className={styles.item}>1</span>
               <span className={styles.item}>2</span>
               <span className={styles.item}>3</span>
@@ -81,7 +108,7 @@ export class VerticalStackSpacingExample extends React.Component<{}, {}> {
 
           <Stack>
             <span>Themed spacing (extra large)</span>
-            <Stack className={styles.root} gap="l2" padding="l2">
+            <Stack className={styles.root} tokens={tokens.themedExtraLarge} padding="l2">
               <span className={styles.item}>1</span>
               <span className={styles.item}>2</span>
               <span className={styles.item}>3</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.VerticalAlign.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.VerticalAlign.Example.tsx
index e53960d5b3be84..c045f59f04f602 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.VerticalAlign.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.VerticalAlign.Example.tsx
@@ -22,9 +22,18 @@ export class VerticalStackVerticalAlignExample extends React.Component<{}, {}> {
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      headingStack: {
+        childrenGap: 30
+      }
+    };
+
     return (
-      <Stack gap={10}>
-        <Stack horizontal disableShrink gap={30} horizontalAlign="space-between">
+      <Stack tokens={tokens.sectionStack}>
+        <Stack horizontal disableShrink tokens={tokens.headingStack} horizontalAlign="space-between">
           <Stack grow>
             <span>Top-aligned</span>
             <Stack verticalAlign="start" className={styles.root}>
@@ -53,7 +62,7 @@ export class VerticalStackVerticalAlignExample extends React.Component<{}, {}> {
           </Stack>
         </Stack>
 
-        <Stack horizontal disableShrink gap={30} horizontalAlign="space-between">
+        <Stack horizontal disableShrink tokens={tokens.headingStack} horizontalAlign="space-between">
           <Stack grow>
             <span>Vertical space around items</span>
             <Stack verticalAlign="space-around" className={styles.root}>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Wrap.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Wrap.Example.tsx
index 7092486834ddb7..ce3544e833ce62 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Wrap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Wrap.Example.tsx
@@ -36,8 +36,17 @@ export class VerticalStackWrapExample extends React.Component<{}, IExampleState>
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      wrapStack: {
+        childrenGap: 20
+      }
+    };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={tokens.sectionStack}>
         <Slider
           label="Change the stack height to see how child items wrap onto multiple columns:"
           min={1}
@@ -48,7 +57,7 @@ export class VerticalStackWrapExample extends React.Component<{}, IExampleState>
           onChange={this._onHeightChange}
         />
 
-        <Stack wrap gap={20} className={styles.root}>
+        <Stack wrap tokens={tokens.wrapStack} className={styles.root}>
           <span>1</span>
           <span>2</span>
           <span>3</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapAdvanced.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapAdvanced.Example.tsx
index 4e75b4d9d65d82..114a4b0eb4d5ef 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapAdvanced.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapAdvanced.Example.tsx
@@ -54,8 +54,17 @@ export class VerticalStackWrapAdvancedExample extends React.Component<{}, IExamp
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      wrapStack: {
+        childrenGap: 20
+      }
+    };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={tokens.sectionStack}>
         <Stack horizontal>
           <Stack.Item grow>
             <Slider label="Stack height:" min={1} max={420} step={1} defaultValue={420} showValue={true} onChange={this._onHeightChange} />
@@ -73,7 +82,7 @@ export class VerticalStackWrapAdvancedExample extends React.Component<{}, IExamp
           </Stack.Item>
         </Stack>
 
-        <Stack horizontal gap={20}>
+        <Stack horizontal tokens={tokens.wrapStack}>
           <Stack.Item grow>
             <Dropdown
               selectedKey={horizontalAlignment}
@@ -111,7 +120,13 @@ export class VerticalStackWrapAdvancedExample extends React.Component<{}, IExamp
         </Stack>
 
         <div className={styles.container}>
-          <Stack wrap gap={20} horizontalAlign={horizontalAlignment} verticalAlign={verticalAlignment} className={styles.root}>
+          <Stack
+            wrap
+            tokens={tokens.wrapStack}
+            horizontalAlign={horizontalAlignment}
+            verticalAlign={verticalAlignment}
+            className={styles.root}
+          >
             <span>1</span>
             <span>2</span>
             <span>3</span>
diff --git a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapNested.Example.tsx b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapNested.Example.tsx
index a4cc2d3c413182..86389c63e6cae4 100644
--- a/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapNested.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.WrapNested.Example.tsx
@@ -64,8 +64,23 @@ export class VerticalStackWrapNestedExample extends React.Component<{}, IExample
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 10
+      },
+      wrapStack: {
+        childrenGap: '30 40'
+      },
+      firstStack: {
+        childrenGap: '10 30'
+      },
+      secondStack: {
+        childrenGap: '20 50'
+      }
+    };
+
     return (
-      <Stack gap={10}>
+      <Stack tokens={tokens.sectionStack}>
         <Slider
           label="Change the stack height to see how child items wrap onto multiple columns:"
           min={1}
@@ -76,8 +91,8 @@ export class VerticalStackWrapNestedExample extends React.Component<{}, IExample
           onChange={this._onHeightChange}
         />
 
-        <Stack wrap gap={'30 40'} className={styles.root}>
-          <Stack wrap gap={'10 30'} className={styles.stackOne}>
+        <Stack wrap tokens={tokens.wrapStack} className={styles.root}>
+          <Stack wrap tokens={tokens.firstStack} className={styles.stackOne}>
             <span>1</span>
             <span>2</span>
             <span>3</span>
@@ -87,7 +102,7 @@ export class VerticalStackWrapNestedExample extends React.Component<{}, IExample
             <span>7</span>
           </Stack>
 
-          <Stack wrap gap={'20 50'} className={styles.stackTwo}>
+          <Stack wrap tokens={tokens.secondStack} className={styles.stackTwo}>
             <span>1</span>
             <span>2</span>
             <span>3</span>
diff --git a/packages/office-ui-fabric-react/src/components/Text/examples/Text.Wrap.Example.tsx b/packages/office-ui-fabric-react/src/components/Text/examples/Text.Wrap.Example.tsx
index a00b905fc18281..264fd6389ac692 100644
--- a/packages/office-ui-fabric-react/src/components/Text/examples/Text.Wrap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Text/examples/Text.Wrap.Example.tsx
@@ -2,9 +2,18 @@ import * as React from 'react';
 import { Text } from 'office-ui-fabric-react/lib/Text';
 import { Stack } from 'office-ui-fabric-react/lib/Stack';
 
+const tokens = {
+  sectionStack: {
+    childrenGap: 10
+  },
+  headingStack: {
+    childrenGap: 5
+  }
+};
+
 export const TextWrapExample = () => (
-  <Stack gap={10}>
-    <Stack gap={5}>
+  <Stack tokens={tokens.sectionStack}>
+    <Stack tokens={tokens.headingStack}>
       <Text variant={'large'} block>
         Wrap (Default)
       </Text>
@@ -15,7 +24,7 @@ export const TextWrapExample = () => (
         in culpa qui officia deserunt mollit anim id est laborum.
       </Text>
     </Stack>
-    <Stack gap={5}>
+    <Stack tokens={tokens.headingStack}>
       <Text variant={'large'} block>
         No Wrap
       </Text>
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx
index ac8e4b29a35910..f9c53537f6ef87 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { TextField, MaskedTextField } from 'office-ui-fabric-react/lib/TextField';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export const TextFieldBasicExample: React.StatelessComponent = () => {
+  const stackTokens: IStackTokens = { childrenGap: 15 };
+
   return (
-    <Stack gap={15} maxWidth={300}>
+    <Stack tokens={stackTokens} maxWidth={300}>
       <TextField label="Standard" />
       <TextField label="Disabled" disabled />
       <TextField label="Read-only" readOnly />
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx
index 98c81f0bbdac9f..3828aecbfcfd79 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TextField, ITextFieldProps } from 'office-ui-fabric-react/lib/TextField';
 import { DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button';
 import { Callout } from 'office-ui-fabric-react/lib/Callout';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Text } from 'office-ui-fabric-react/lib/Text';
 import { getId } from 'office-ui-fabric-react/lib/Utilities';
 import { getTheme, FontWeights } from 'office-ui-fabric-react/lib/Styling';
@@ -11,6 +11,8 @@ export interface ITextFieldCustomRenderExampleState {
   isCalloutVisible: boolean;
 }
 
+const stackTokens: IStackTokens = { childrenGap: 20 };
+
 export class TextFieldCustomRenderExample extends React.Component<{}, ITextFieldCustomRenderExampleState> {
   public state: ITextFieldCustomRenderExampleState = { isCalloutVisible: false };
 
@@ -19,7 +21,7 @@ export class TextFieldCustomRenderExample extends React.Component<{}, ITextField
 
   public render(): JSX.Element {
     return (
-      <Stack gap={20} maxWidth={300}>
+      <Stack tokens={stackTokens} maxWidth={300}>
         <TextField label="Custom label rendering" onRenderLabel={this._onRenderLabel} description="Click the (i) icon!" />
 
         <TextField
@@ -62,7 +64,7 @@ export class TextFieldCustomRenderExample extends React.Component<{}, ITextField
             ariaDescribedBy={this._descriptionId}
             role="alertdialog"
           >
-            <Stack gap={20} horizontalAlign="start" maxWidth={300} styles={{ root: { padding: 20 } }}>
+            <Stack tokens={stackTokens} horizontalAlign="start" maxWidth={300} styles={{ root: { padding: 20 } }}>
               <span id={this._descriptionId}>The custom label includes an IconButton that displays this Callout on click.</span>
               <DefaultButton onClick={this._onDismiss}>Close</DefaultButton>
             </Stack>
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx
index f495df205f64ee..7a70016d75802b 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx
@@ -1,7 +1,7 @@
 import { Promise } from 'es6-promise';
 import * as React from 'react';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 export interface ITextFieldErrorMessageExampleState {
@@ -20,8 +20,11 @@ export class TextFieldErrorMessageExample extends React.Component<{}, ITextField
 
   public render(): JSX.Element {
     const { showFields } = this.state;
+
+    const stackTokens: IStackTokens = { childrenGap: 20 };
+
     return (
-      <Stack gap={20} maxWidth={350}>
+      <Stack tokens={stackTokens} maxWidth={350}>
         <Toggle label="Show text fields" inlineLabel checked={showFields} onChange={this._toggleShowFields} />
         {showFields && (
           <>
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx
index abfcef35044299..1fe9ad149fd3ea 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { lorem } from 'office-ui-fabric-react/lib/utilities/exampleData';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export interface ITextFieldMultilineExampleState {
   multiline: boolean;
@@ -16,8 +16,10 @@ export class TextFieldMultilineExample extends React.Component<{}, ITextFieldMul
   }
 
   public render(): JSX.Element {
+    const stackTokens: IStackTokens = { childrenGap: 15 };
+
     return (
-      <Stack gap={15} maxWidth={300}>
+      <Stack tokens={stackTokens} maxWidth={300}>
         <TextField label="Standard" multiline rows={3} />
         <TextField label="Disabled" multiline rows={3} disabled value={this._lorem} />
         <TextField label="Non-resizable" multiline resizable={false} />
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Number.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Number.Example.tsx
index 506f23952252c6..5f4dc3eaf2cd87 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Number.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Number.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 interface INumberTextFieldProps {
   label: string;
@@ -67,8 +67,10 @@ class NumberTextField extends React.Component<INumberTextFieldProps, INumberText
 }
 
 export const NumberTextFieldExample: React.StatelessComponent = () => {
+  const stackTokens: IStackTokens = { childrenGap: 15 };
+
   return (
-    <Stack gap={15} maxWidth={300}>
+    <Stack tokens={stackTokens} maxWidth={300}>
       <NumberTextField label="Number TextField with valid initial value" initialValue="100" />
       <NumberTextField label="Number TextField with invalid initial value" initialValue="Not a number" />
     </Stack>
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx
index c6d4f3ba9d8819..fd67d9ee0583b6 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export const TextFieldPlaceholderExample: React.StatelessComponent = () => {
+  const stackTokens: IStackTokens = { childrenGap: 15 };
+
   return (
-    <Stack gap={15} maxWidth={300}>
+    <Stack tokens={stackTokens} maxWidth={300}>
       <TextField label="With placeholder" placeholder="Please enter text here" />
       <TextField label="Disabled with placeholder" disabled placeholder="I am disabled" />
     </Stack>
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx
index 112c1af6ef5877..122b5fc1edf772 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export const TextFieldPrefixAndSuffixExample: React.StatelessComponent = () => {
+  const stackTokens: IStackTokens = { childrenGap: 15 };
+
   return (
-    <Stack maxWidth={300} gap={15}>
+    <Stack maxWidth={300} tokens={stackTokens}>
       <TextField // prettier-ignore
         label="With prefix"
         prefix="https://"
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Styled.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Styled.Example.tsx
index f2db2cf86712f6..92fb6359146a58 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Styled.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Styled.Example.tsx
@@ -2,12 +2,14 @@ import * as React from 'react';
 import { ITextFieldStyleProps, ITextFieldStyles, TextField } from 'office-ui-fabric-react/lib/TextField';
 import { ILabelStyles, ILabelStyleProps } from 'office-ui-fabric-react/lib/Label';
 import { Text } from 'office-ui-fabric-react/lib/Text';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 import './TextField.Styled.Example.scss';
 
 export const TextFieldStyledExample: React.StatelessComponent = () => {
+  const stackTokens: IStackTokens = { childrenGap: 15 };
+
   return (
-    <Stack gap={15}>
+    <Stack tokens={stackTokens}>
       <Text styles={{ root: { maxWidth: 600 } }}>
         These examples show how components that used to be styled using CSS can be styled using JS styling. The preferred method is JS
         styling for several reasons: type safety for styling, more predictable behavior, and clear feedback via typing when component
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx
index 0cb314c3cf464d..ac4316591aed58 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
-import { Stack } from 'office-ui-fabric-react/lib/Stack';
+import { IStackTokens, Stack } from 'office-ui-fabric-react/lib/Stack';
 
 export const TextFieldUnderlinedExample: React.StatelessComponent = () => {
+  const stackTokens: IStackTokens = { childrenGap: 15 };
+
   return (
-    <Stack gap={15} maxWidth={300}>
+    <Stack tokens={stackTokens} maxWidth={300}>
       <TextField label="Standard:" underlined />
       <TextField label="Disabled:" underlined disabled={true} />
       <TextField label="Required:" underlined required={true} placeholder="Enter text here" />
diff --git a/packages/react-cards/src/components/Card/Card.styles.ts b/packages/react-cards/src/components/Card/Card.styles.ts
index 9c1c5a534e3a94..5d2edbf4a30052 100644
--- a/packages/react-cards/src/components/Card/Card.styles.ts
+++ b/packages/react-cards/src/components/Card/Card.styles.ts
@@ -1,49 +1,58 @@
-import { ICardComponent, ICardStylesReturnType, ICardTokenReturnType } from './Card.types';
 import { getGlobalClassNames } from '@uifabric/styling';
+import { Depths } from '@uifabric/fluent-theme';
+import { ICardComponent, ICardStylesReturnType, ICardTokenReturnType } from './Card.types';
 
 const GlobalClassNames = {
   root: 'ms-Card',
   stack: 'ms-Card-stack'
 };
 
-export const CardTokens: ICardComponent['tokens'] = (props, theme): ICardTokenReturnType => [];
+const baseTokens: ICardComponent['tokens'] = {
+  boxShadow: Depths.depth4,
+  childrenGap: 12,
+  height: 'inherit',
+  minHeight: '348px',
+  minWidth: '212px',
+  maxWidth: '286px',
+  padding: 12
+};
 
-export const CardStyles: ICardComponent['styles'] = (props, theme, tokens): ICardStylesReturnType => {
-  const { compact } = props;
+const compactTokens: ICardComponent['tokens'] = {
+  height: 'auto',
+  minWidth: '300px',
+  maxWidth: '500px'
+};
 
+const clickableTokens: ICardComponent['tokens'] = {
+  boxShadowHovered: Depths.depth8
+};
+
+export const CardTokens: ICardComponent['tokens'] = (props, theme): ICardTokenReturnType => [
+  baseTokens,
+  props.compact && compactTokens,
+  props.onClick && clickableTokens
+];
+
+export const CardStyles: ICardComponent['styles'] = (props, theme, tokens): ICardStylesReturnType => {
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
 
   return {
     root: [
       classNames.root,
       {
-        borderColor: 'lightgray',
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        boxShadow: '1px 2px lightgray',
-        padding: 12,
-        height: '350px',
-        width: '250px'
-      }
-    ],
+        borderRadius: '2px',
+        boxShadow: tokens.boxShadow,
+        height: tokens.height,
+        padding: tokens.padding,
+        width: tokens.width,
+        minWidth: tokens.minWidth,
+        maxWidth: tokens.maxWidth,
+        transition: 'box-shadow 0.5s ease',
 
-    stack: [
-      classNames.stack,
-      {
         selectors: {
-          '> *': {
-            height: 'auto',
-            textOverflow: 'ellipsis'
-          },
-
-          '> *:not(:first-child)': [
-            compact && {
-              marginLeft: '12px'
-            },
-            !compact && {
-              marginTop: '12px'
-            }
-          ]
+          ':hover': {
+            boxShadow: tokens.boxShadowHovered
+          }
         }
       }
     ]
diff --git a/packages/react-cards/src/components/Card/Card.ts b/packages/react-cards/src/components/Card/Card.ts
index 4f77a7d3c69f14..fc094709b41e41 100644
--- a/packages/react-cards/src/components/Card/Card.ts
+++ b/packages/react-cards/src/components/Card/Card.ts
@@ -1,16 +1,16 @@
+import { IStackItemProps } from 'office-ui-fabric-react';
+import { createComponent } from '@uifabric/foundation';
 import { CardView as view } from './Card.view';
 import { CardStyles as styles, CardTokens as tokens } from './Card.styles';
 import { ICardProps } from './Card.types';
 import { CardItem } from './CardItem/CardItem';
-import { ICardItemProps } from './CardItem/CardItem.types';
-import { createComponent } from '@uifabric/foundation';
 
 const CardStatics = {
   Item: CardItem
 };
 
 export const Card: React.StatelessComponent<ICardProps> & {
-  Item: React.StatelessComponent<ICardItemProps>;
+  Item: React.StatelessComponent<IStackItemProps>;
 } = createComponent({
   displayName: 'Card',
   view,
diff --git a/packages/react-cards/src/components/Card/Card.types.ts b/packages/react-cards/src/components/Card/Card.types.ts
index 78b10c5382a92d..0b17c5478f1669 100644
--- a/packages/react-cards/src/components/Card/Card.types.ts
+++ b/packages/react-cards/src/components/Card/Card.types.ts
@@ -1,6 +1,6 @@
-import { IComponent, IComponentStyles, IHTMLSlot, IStyleableComponentProps } from '@uifabric/foundation';
 import { IBaseProps } from '@uifabric/utilities';
-import { IStackSlot } from 'office-ui-fabric-react';
+import { IStackSlot, IStackTokens } from 'office-ui-fabric-react';
+import { IComponent, IComponentStyles, IStyleableComponentProps } from '@uifabric/foundation';
 
 export type ICardComponent = IComponent<ICardProps, ICardTokens, ICardStyles>;
 
@@ -14,26 +14,33 @@ export interface ICard {}
 
 export interface ICardSlots {
   /**
-   * Defines root slot of the component.
+   * Defines root slot of the component for managing the layout of the Card.
    */
-  root?: IHTMLSlot;
-
-  /**
-   * Defines a stack slot for managing the layout of the Card.
-   */
-  stack?: IStackSlot;
+  root?: IStackSlot;
 }
 
-// Extending IStyleableComponentProps will automatically add stylable props for you, such as styles and theme.
-//    If you don't want these props to be included in your component, just remove this extension.
 export interface ICardProps extends ICardSlots, IStyleableComponentProps<ICardProps, ICardTokens, ICardStyles>, IBaseProps<ICard> {
   /**
    * Defines whether to render a regular or a compact Card.
    * @defaultvalue false
    */
   compact?: boolean;
+
+  /**
+   * Defines a callback that is called when the Card is clicked.
+   */
+  onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 }
 
-export interface ICardTokens {}
+export interface ICardTokens extends IStackTokens {
+  boxShadow?: string;
+  boxShadowHovered?: string;
+  height?: number | string;
+  minHeight?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  padding?: number | string;
+  width?: number | string;
+}
 
 export type ICardStyles = IComponentStyles<ICardSlots>;
diff --git a/packages/react-cards/src/components/Card/Card.view.tsx b/packages/react-cards/src/components/Card/Card.view.tsx
index d377c28a173bf0..2404714e75fe5b 100644
--- a/packages/react-cards/src/components/Card/Card.view.tsx
+++ b/packages/react-cards/src/components/Card/Card.view.tsx
@@ -7,17 +7,23 @@ import { ICardComponent, ICardProps, ICardSlots } from './Card.types';
 
 export const CardView: ICardComponent['view'] = props => {
   const Slots = getSlots<ICardProps, ICardSlots>(props, {
-    root: 'div',
-    stack: Stack
+    root: Stack
   });
 
-  const nativeProps = getNativeProps(props, htmlElementProperties);
+  const { styles, tokens, compact, ...rest } = props;
+
+  const nativeProps = getNativeProps(rest, htmlElementProperties);
 
   return (
-    <Slots.root {...nativeProps}>
-      <Slots.stack disableShrink verticalFill verticalAlign="space-between">
-        {props.children}
-      </Slots.stack>
+    <Slots.root
+      {...nativeProps}
+      horizontal={compact}
+      tokens={tokens}
+      verticalFill
+      verticalAlign="space-between"
+      horizontalAlign="space-between"
+    >
+      {props.children}
     </Slots.root>
   );
 };
diff --git a/packages/react-cards/src/components/Card/CardItem/CardItem.styles.ts b/packages/react-cards/src/components/Card/CardItem/CardItem.styles.ts
deleted file mode 100644
index d0bb759476810c..00000000000000
--- a/packages/react-cards/src/components/Card/CardItem/CardItem.styles.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { getGlobalClassNames } from '@uifabric/styling';
-import { ICardItemComponent, ICardItemStylesReturnType } from './CardItem.types';
-
-const GlobalClassNames = {
-  root: 'ms-CardItem'
-};
-
-export const CardItemStyles: ICardItemComponent['styles'] = (props, theme): ICardItemStylesReturnType => {
-  const { disableChildPadding } = props;
-
-  const classNames = getGlobalClassNames(GlobalClassNames, theme);
-
-  return {
-    root: [
-      theme.fonts.medium,
-      classNames.root,
-      {
-        width: 'auto',
-        height: 'auto'
-      },
-      disableChildPadding && {
-        marginLeft: -12,
-        marginRight: -13
-      }
-    ]
-  };
-};
diff --git a/packages/react-cards/src/components/Card/CardItem/CardItem.test.tsx b/packages/react-cards/src/components/Card/CardItem/CardItem.test.tsx
index 0bd146388dd803..516251957dd4c6 100644
--- a/packages/react-cards/src/components/Card/CardItem/CardItem.test.tsx
+++ b/packages/react-cards/src/components/Card/CardItem/CardItem.test.tsx
@@ -3,16 +3,6 @@ import { mount } from 'enzyme';
 import { Card } from '../Card';
 import * as renderer from 'react-test-renderer';
 
-import { CardStyles } from '../Card.styles';
-import { ICardProps, ICardTokens, ICardStyles } from '../Card.types';
-import { CardItemStyles } from './CardItem.styles';
-import { ICardItemProps, ICardItemTokens, ICardItemStyles } from './CardItem.types';
-
-import { IStylesFunction } from '@uifabric/foundation';
-import { createTheme, find } from 'office-ui-fabric-react';
-
-const testTheme = createTheme({});
-
 describe('Card Item', () => {
   it('can handle not having a class', () => {
     const wrapper = mount(
@@ -40,11 +30,11 @@ describe('Card Item', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders correctly when having the disableChildPadding prop set to true', () => {
+  it('renders correctly when having tokens passed to it', () => {
     const tree = renderer
       .create(
         <Card>
-          <Card.Item disableChildPadding>
+          <Card.Item tokens={{ margin: '12px 8px' }}>
             <div />
           </Card.Item>
         </Card>
@@ -53,27 +43,4 @@ describe('Card Item', () => {
 
     expect(tree).toMatchSnapshot();
   });
-
-  it('has the correct margin values when the disableChildPadding prop is set to true', () => {
-    const cardStylesFunc = CardStyles as IStylesFunction<ICardProps, ICardTokens, ICardStyles>;
-    const cardItemStylesFunc = CardItemStyles as IStylesFunction<ICardItemProps, ICardItemTokens, ICardItemStyles>;
-
-    const cardStyles = cardStylesFunc({}, testTheme, {}).root;
-    const cardItemStylesArray = cardItemStylesFunc({ disableChildPadding: true }, testTheme, {}).root;
-
-    expect(cardStyles).not.toBeNull();
-    expect(cardItemStylesArray).not.toBeNull();
-
-    expect(cardStyles).toBeInstanceOf(Array);
-    expect(cardItemStylesArray).toBeInstanceOf(Array);
-
-    const cardPadding = find(cardStyles as Array<any>, style => style.padding).padding;
-
-    const cardItemStyles = find(cardItemStylesArray as Array<any>, style => style.marginLeft || style.marginRight);
-    const cardItemMarginLeft = cardItemStyles.marginLeft;
-    const cardItemMarginRight = cardItemStyles.marginRight;
-
-    expect(cardItemMarginLeft).toBe(-cardPadding);
-    expect(cardItemMarginRight).toBe(-cardPadding - 1);
-  });
 });
diff --git a/packages/react-cards/src/components/Card/CardItem/CardItem.tsx b/packages/react-cards/src/components/Card/CardItem/CardItem.tsx
index f9388ffe8d81ca..a82ccf4ad18bb4 100644
--- a/packages/react-cards/src/components/Card/CardItem/CardItem.tsx
+++ b/packages/react-cards/src/components/Card/CardItem/CardItem.tsx
@@ -1,26 +1,7 @@
 /** @jsx withSlots */
 import * as React from 'react';
-import { withSlots, createComponent, getSlots } from '@uifabric/foundation';
-import { ICardItemComponent, ICardItemProps, ICardItemSlots } from './CardItem.types';
-import { CardItemStyles as styles } from './CardItem.styles';
+import { StackItem, IStackItemProps } from 'office-ui-fabric-react';
 
-const view: ICardItemComponent['view'] = props => {
-  const { children } = props;
-  if (React.Children.count(children) < 1) {
-    return null;
-  }
-
-  const Slots = getSlots<ICardItemProps, ICardItemSlots>(props, {
-    root: 'div'
-  });
-
-  return <Slots.root>{children}</Slots.root>;
-};
-
-export const CardItem: React.StatelessComponent<ICardItemProps> = createComponent({
-  displayName: 'CardItem',
-  styles,
-  view
-});
+export const CardItem: React.StatelessComponent<IStackItemProps> = StackItem;
 
 export default CardItem;
diff --git a/packages/react-cards/src/components/Card/CardItem/CardItem.types.ts b/packages/react-cards/src/components/Card/CardItem/CardItem.types.ts
deleted file mode 100644
index cab02782f1dd20..00000000000000
--- a/packages/react-cards/src/components/Card/CardItem/CardItem.types.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { IComponentStyles, IHTMLSlot, IComponent, IStyleableComponentProps } from '@uifabric/foundation';
-
-export type ICardItemComponent = IComponent<ICardItemProps, ICardItemTokens, ICardItemStyles>;
-
-export interface ICardItemSlots {
-  root?: IHTMLSlot;
-}
-
-// These types are redundant with ICardItemComponent but are needed until TS function return widening issue is resolved:
-// https://github.com/Microsoft/TypeScript/issues/241
-// For now, these helper types can be used to provide return type safety when specifying tokens and styles functions.
-export type ICardItemTokenReturnType = ReturnType<Extract<ICardItemComponent['tokens'], Function>>;
-export type ICardItemStylesReturnType = ReturnType<Extract<ICardItemComponent['styles'], Function>>;
-
-export interface ICardItemProps extends ICardItemSlots, IStyleableComponentProps<ICardItemProps, ICardItemTokens, ICardItemStyles> {
-  /**
-   * Defines if the default horizontal padding of the Card applies to this CardItem child or not.
-   * @defaultvalue false
-   */
-  disableChildPadding?: boolean;
-}
-
-export interface ICardItemTokens {}
-
-export type ICardItemStyles = IComponentStyles<ICardItemSlots>;
diff --git a/packages/react-cards/src/components/Card/CardItem/__snapshots__/CardItem.test.tsx.snap b/packages/react-cards/src/components/Card/CardItem/__snapshots__/CardItem.test.tsx.snap
index e900160c80af14..aa7f95c607a8d3 100644
--- a/packages/react-cards/src/components/Card/CardItem/__snapshots__/CardItem.test.tsx.snap
+++ b/packages/react-cards/src/components/Card/CardItem/__snapshots__/CardItem.test.tsx.snap
@@ -3,121 +3,109 @@
 exports[`Card Item renders correctly 1`] = `
 <div
   className=
+      ms-Stack
       ms-Card
       {
-        border-color: lightgray;
-        border-style: solid;
-        border-width: 1px;
-        box-shadow: 1px 2px lightgray;
-        height: 350px;
+        align-items: space-between;
+        border-radius: 2px;
+        box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: inherit;
+        justify-content: space-between;
+        max-width: 286px;
+        min-width: 212px;
         padding-bottom: 12px;
         padding-left: 12px;
         padding-right: 12px;
         padding-top: 12px;
-        width: 250px;
+        transition: box-shadow 0.5s ease;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+      }
+      & > *:not(:first-child) {
+        margin-top: 12px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
       }
 >
   <div
     className=
-        ms-Stack
-        ms-Card-stack
+        ms-StackItem
         {
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-wrap: nowrap;
-          height: 100%;
-          justify-content: space-between;
-          width: auto;
-        }
-        & > * {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
           height: auto;
-          text-overflow: ellipsis;
-        }
-        & > *:not(:first-child) {
-          margin-top: 12px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 0;
+          width: auto;
         }
   >
-    <div
-      className=
-          ms-CardItem
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: auto;
-            width: auto;
-          }
-    >
-      <div />
-    </div>
+    <div />
   </div>
 </div>
 `;
 
-exports[`Card Item renders correctly when having the disableChildPadding prop set to true 1`] = `
+exports[`Card Item renders correctly when having tokens passed to it 1`] = `
 <div
   className=
+      ms-Stack
       ms-Card
       {
-        border-color: lightgray;
-        border-style: solid;
-        border-width: 1px;
-        box-shadow: 1px 2px lightgray;
-        height: 350px;
+        align-items: space-between;
+        border-radius: 2px;
+        box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.132), 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.108);
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: inherit;
+        justify-content: space-between;
+        max-width: 286px;
+        min-width: 212px;
         padding-bottom: 12px;
         padding-left: 12px;
         padding-right: 12px;
         padding-top: 12px;
-        width: 250px;
+        transition: box-shadow 0.5s ease;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+      }
+      & > *:not(:first-child) {
+        margin-top: 12px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
       }
 >
   <div
     className=
-        ms-Stack
-        ms-Card-stack
+        ms-StackItem
         {
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-wrap: nowrap;
-          height: 100%;
-          justify-content: space-between;
-          width: auto;
-        }
-        & > * {
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          flex-shrink: 1;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-size: 14px;
+          font-weight: 400;
           height: auto;
-          text-overflow: ellipsis;
-        }
-        & > *:not(:first-child) {
+          margin-bottom: 12px;
+          margin-left: 8px;
+          margin-right: 8px;
           margin-top: 12px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 0;
+          width: auto;
         }
   >
-    <div
-      className=
-          ms-CardItem
-          {
-            -moz-osx-font-smoothing: grayscale;
-            -webkit-font-smoothing: antialiased;
-            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-            font-size: 14px;
-            font-weight: 400;
-            height: auto;
-            margin-left: -12px;
-            margin-right: -13px;
-            width: auto;
-          }
-    >
-      <div />
-    </div>
+    <div />
   </div>
 </div>
 `;
diff --git a/packages/react-cards/src/components/Card/CardPage.tsx b/packages/react-cards/src/components/Card/CardPage.tsx
index f20b7b193b3861..d1f3237463272d 100644
--- a/packages/react-cards/src/components/Card/CardPage.tsx
+++ b/packages/react-cards/src/components/Card/CardPage.tsx
@@ -4,6 +4,9 @@ import { ExampleCard, IComponentDemoPageProps, ComponentPage, PageMarkdown, Prop
 import { CardBasicExample } from './examples/Card.Basic.Example';
 const CardBasicExampleCode = require('!raw-loader!@uifabric/react-cards/src/components/Card/examples/Card.Basic.Example.tsx') as string;
 
+import { CardCompactExample } from './examples/Card.Compact.Example';
+const CardCompactExampleCode = require('!raw-loader!@uifabric/react-cards/src/components/Card/examples/Card.Compact.Example.tsx') as string;
+
 export class CardPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
     return (
@@ -15,6 +18,9 @@ export class CardPage extends React.Component<IComponentDemoPageProps, {}> {
             <ExampleCard title="Basic Card" code={CardBasicExampleCode}>
               <CardBasicExample />
             </ExampleCard>
+            <ExampleCard title="Compact Card" code={CardCompactExampleCode}>
+              <CardCompactExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={
diff --git a/packages/react-cards/src/components/Card/__snapshots__/Card.view.test.tsx.snap b/packages/react-cards/src/components/Card/__snapshots__/Card.view.test.tsx.snap
index f6c4f5da29fc2f..44e725d3ea5240 100644
--- a/packages/react-cards/src/components/Card/__snapshots__/Card.view.test.tsx.snap
+++ b/packages/react-cards/src/components/Card/__snapshots__/Card.view.test.tsx.snap
@@ -2,29 +2,26 @@
 
 exports[`CardView renders correctly 1`] = `
 <div
-  className=""
->
-  <div
-    className=
-        ms-Stack
-        {
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          flex-wrap: nowrap;
-          height: 100%;
-          justify-content: space-between;
-          width: auto;
-        }
-        & > * {
-          text-overflow: ellipsis;
-        }
-        & > *:not(:first-child) {
-          margin-top: 0px;
-        }
-        & > *:not(.ms-StackItem) {
-          flex-shrink: 0;
-        }
-  />
-</div>
+  className=
+      ms-Stack
+      {
+        align-items: space-between;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: 100%;
+        justify-content: space-between;
+        width: auto;
+      }
+      & > * {
+        text-overflow: ellipsis;
+      }
+      & > *:not(:first-child) {
+        margin-top: 0px;
+      }
+      & > *:not(.ms-StackItem) {
+        flex-shrink: 1;
+      }
+/>
 `;
diff --git a/packages/react-cards/src/components/Card/examples/Card.Basic.Example.tsx b/packages/react-cards/src/components/Card/examples/Card.Basic.Example.tsx
index ab954b05953092..53aec40a6f1cc8 100644
--- a/packages/react-cards/src/components/Card/examples/Card.Basic.Example.tsx
+++ b/packages/react-cards/src/components/Card/examples/Card.Basic.Example.tsx
@@ -1,50 +1,73 @@
 import * as React from 'react';
-import { Card } from '../Card';
 import { Persona, Text } from '@uifabric/experiments';
-import { PersonaTestImages } from '@uifabric/experiments/lib/common/TestImages';
 import { Icon, Image, Stack } from 'office-ui-fabric-react';
-import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { mergeStyleSets, FontWeights } from 'office-ui-fabric-react/lib/Styling';
+import { Card } from '../Card';
+
+const alertClicked = (): void => {
+  alert('Clicked');
+};
 
 export class CardBasicExample extends React.Component<{}, {}> {
   public render(): JSX.Element {
     const styles = mergeStyleSets({
-      textLarge: {
-        color: 'teal',
-        fontWeight: 'bolder'
+      siteText: {
+        color: '#025F52',
+        fontSize: 12,
+        fontWeight: FontWeights.semibold
+      },
+      descriptionText: {
+        color: '#333333',
+        fontSize: 14,
+        fontWeight: FontWeights.regular
+      },
+      helpfulText: {
+        color: '#333333',
+        fontSize: 12,
+        fontWeight: FontWeights.regular
       },
-      textBold: {
-        fontWeight: 'bold'
+      icon: {
+        color: '#0078D4',
+        fontSize: 16,
+        fontWeight: FontWeights.regular
       }
     });
 
+    const tokens = {
+      sectionStack: {
+        childrenGap: 30
+      },
+      cardFooterStack: {
+        childrenGap: 16
+      }
+    };
+
     return (
-      <Card>
-        <Persona text="Kevin Jameson" secondaryText="Feb 2, 2019" coin={{ imageUrl: PersonaTestImages.personMale }} />
-        <Card.Item disableChildPadding>
-          <Image
-            src="https://placehold.it/250x120"
-            alt="Example implementation of the property image fit using the center value on an image larger than the frame."
-            width="100%"
-            height="120px"
-          />
-        </Card.Item>
-        <Text variant="large" className={styles.textLarge}>
-          Contoso
-        </Text>
-        <Text variant="large">Contoso Denver expansion design marketing hero guidelines</Text>
-        <Text className={styles.textBold}>Is this recommendation helpful?</Text>
-        <Card.Item disableChildPadding>
-          <Stack
-            horizontal
-            horizontalAlign="space-between"
-            padding="10px 10px -2px 10px"
-            styles={{ root: { borderTop: '1px solid lightgray' } }}
-          >
-            <Icon iconName="RedEye" styles={{ root: { color: 'mediumturquoise', fontSize: '20px' } }} />
-            <Icon iconName="MoreVertical" styles={{ root: { color: 'mediumturquoise', fontSize: '20px' } }} />
-          </Stack>
-        </Card.Item>
-      </Card>
+      <Stack horizontal tokens={tokens.sectionStack}>
+        <Card>
+          <Text>Basic card</Text>
+        </Card>
+
+        <Card onClick={alertClicked}>
+          <Persona text="Kevin Jameson" secondaryText="Feb 2, 2019" />
+          <Card.Item tokens={{ margin: '0 -13px' }}>
+            <Image src="https://placehold.it/286x144" width="100%" />
+          </Card.Item>
+          <Text className={styles.siteText}>Contoso</Text>
+          <Text className={styles.descriptionText}>Contoso Denver expansion design marketing hero guidelines</Text>
+          <Text className={styles.helpfulText}>Is this recommendation helpful?</Text>
+          <Card.Item>
+            <Stack horizontal tokens={tokens.cardFooterStack} padding="12px 0 0" styles={{ root: { borderTop: '1px solid #F3F2F1' } }}>
+              <Icon iconName="RedEye" className={styles.icon} />
+              <Icon iconName="SingleBookmark" className={styles.icon} />
+              <Stack.Item grow={1}>
+                <span />
+              </Stack.Item>
+              <Icon iconName="MoreVertical" className={styles.icon} />
+            </Stack>
+          </Card.Item>
+        </Card>
+      </Stack>
     );
   }
 }
diff --git a/packages/react-cards/src/components/Card/examples/Card.Compact.Example.tsx b/packages/react-cards/src/components/Card/examples/Card.Compact.Example.tsx
new file mode 100644
index 00000000000000..8017bd11895e0d
--- /dev/null
+++ b/packages/react-cards/src/components/Card/examples/Card.Compact.Example.tsx
@@ -0,0 +1,63 @@
+// @codepen
+import * as React from 'react';
+import { Text } from '@uifabric/experiments';
+import { Icon, Image, Stack } from 'office-ui-fabric-react';
+import { mergeStyleSets, FontWeights } from 'office-ui-fabric-react/lib/Styling';
+import { Card } from '../Card';
+
+const alertClicked = (): void => {
+  alert('Clicked');
+};
+export class CardCompactExample extends React.Component<{}, {}> {
+  public render(): JSX.Element {
+    const styles = mergeStyleSets({
+      siteText: {
+        color: '#025F52',
+        fontSize: 12,
+        fontWeight: FontWeights.semibold
+      },
+      descriptionText: {
+        color: '#333333',
+        fontSize: 14,
+        fontWeight: FontWeights.regular
+      },
+      helpfulText: {
+        color: '#333333',
+        fontSize: 12,
+        fontWeight: FontWeights.regular
+      },
+      icon: {
+        color: '#0078D4',
+        fontSize: 16,
+        fontWeight: FontWeights.regular
+      }
+    });
+
+    return (
+      <Stack gap={20}>
+        <Card compact={true}>
+          <Text>Basic compact card</Text>
+        </Card>
+
+        <Card compact={true} onClick={alertClicked}>
+          <Card.Item tokens={{ margin: '-12px 0 -12px -12px' }}>
+            <Image src="https://placehold.it/180x135" />
+          </Card.Item>
+          <Stack gap={12}>
+            <Text className={styles.siteText}>Contoso</Text>
+            <Text className={styles.descriptionText}>Contoso Denver expansion design marketing hero guidelines</Text>
+            <Text className={styles.helpfulText}>Is this recommendation helpful?</Text>
+          </Stack>
+          <Stack gap={16} padding="0 0 0 12px" styles={{ root: { borderLeft: '1px solid #F3F2F1' } }}>
+            <Icon iconName="RedEye" className={styles.icon} />
+            <Icon iconName="SingleBookmark" className={styles.icon} />
+            <Stack.Item grow={1}>
+              <span />
+            </Stack.Item>
+            <Icon iconName="MoreVertical" className={styles.icon} />
+          </Stack>
+        </Card>
+      </Stack>
+    );
+  }
+}
diff --git a/packages/react-cards/webpack.serve.config.js b/packages/react-cards/webpack.serve.config.js
index 9bb6716d7be88f..1076326f6a1c1c 100644
--- a/packages/react-cards/webpack.serve.config.js
+++ b/packages/react-cards/webpack.serve.config.js
@@ -1,8 +1,5 @@
 const path = require('path');
 const resources = require('../../scripts/webpack/webpack-resources');
-const webpack = resources.webpack;
-
-const PACKAGE_NAME = require('./package.json').name;
 
 module.exports = resources.createServeConfig({
   entry: './src/demo/index.tsx',
@@ -18,9 +15,17 @@ module.exports = resources.createServeConfig({
 
   resolve: {
     alias: {
-      '@uifabric/react-cards/src': path.join(__dirname, 'src'),
-      '@uifabric/react-cards/lib': path.join(__dirname, 'lib'),
-      '@uifabric/react-cards': path.join(__dirname, 'lib'),
+      '@uifabric/example-app-base$': path.resolve(__dirname, '../../packages/example-app-base/src'),
+      '@uifabric/experiments/src': path.resolve(__dirname, '../../packages/experiments/src'),
+      '@uifabric/experiments/lib': path.resolve(__dirname, '../../packages/experiments/src'),
+      '@uifabric/experiments': path.resolve(__dirname, '../../packages/experiments/src'),
+      '@uifabric/foundation$': path.resolve(__dirname, '../../packages/foundation/src'),
+      '@uifabric/react-cards/src': path.resolve(__dirname, 'src'),
+      '@uifabric/react-cards/lib': path.resolve(__dirname, 'src'),
+      '@uifabric/react-cards': path.resolve(__dirname, 'src'),
+      'office-ui-fabric-react$': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
+      'office-ui-fabric-react/lib': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
+      'office-ui-fabric-react/src': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'Props.ts.js': 'Props',
       'Example.tsx.js': 'Example'
     }