diff --git a/common/changes/phkuo-semanticInputs_2017-04-21-01-53.json b/common/changes/phkuo-semanticInputs_2017-04-21-01-53.json
new file mode 100644
index 0000000000000..66f9991e05ad4
--- /dev/null
+++ b/common/changes/phkuo-semanticInputs_2017-04-21-01-53.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Lay some groundwork for converting to semantic slots, starting with input text fields.",
+      "type": "patch"
+    }
+  ],
+  "email": "phkuo@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
index 7830f0509cbf9..39bd65864ee7d 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
@@ -3,6 +3,27 @@
 
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
+
+// --------------------------------------------------
+// ChoiceField semantic slots
+
+$radioButton-background-color: $controlBackgroundColor;
+
+$radioButton-text-color: $controlForegroundColor;
+$radioButton-text-hover-color: $controlForegroundHoverColor;
+
+$radioButton-dot-color: $controlBackgroundSelectedColor;
+
+$radioButton-border-color: $controlBorderUnselectedColor;
+$radioButton-border-hover-color: $controlBorderUnselectedHoverColor;
+$radioButton-border-selected-color: $radioButton-dot-color;
+$radioButton-border-selected-hover-color: $controlBackgroundSelectedHoverColor;
+
+$radioButton-text-disabled-color: $disabledTextColor;
+$radioButton-background-unselected-disabled-color: $disabledTextColor;
+$radioButton-dot-disabled-color: $radioButton-background-unselected-disabled-color;
+$radioButton-border-disabled-color: $radioButton-background-unselected-disabled-color;
+
 //
 // --------------------------------------------------
 // ChoiceField styles
@@ -23,7 +44,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
 
 .choiceField {
   box-sizing: border-box;
-  color: $ms-color-neutralPrimary;
+  color: $radioButton-text-color;
   font-family: $ms-font-family-base;
   font-size: $ms-font-size-m;
   font-weight: $ms-font-weight-regular;
@@ -46,11 +67,12 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   top: 8px
 }
 
-// The choiceField container
+// The circle
 .field::before {
   content: '';
   display: inline-block;
-  border: 1px solid $ms-color-neutralTertiary;
+  background-color: $radioButton-background-color;
+  border: 1px solid $radioButton-border-color;
   width: $ms-choiceField-field-size;
   height: $ms-choiceField-field-size;
   font-weight: normal;
@@ -62,7 +84,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   border-radius: 50%;
 }
 
-// The circle
+// The dot
 .field::after {
   content: '';
   width: 0;
@@ -96,45 +118,22 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   vertical-align: top;
   user-select: none;
 
-  &:hover {
-    &::before {
-      border-color: $ms-color-neutralSecondaryAlt;
-    }
-
-    :global(.ms-Label) {
-      color: $ms-color-black;
-    }
-  }
-
+  &:hover,
   &:focus {
     &::before {
-      border-color: $ms-color-neutralSecondaryAlt;
-    }
-
-    &.fieldIsDisabled::before {
-      border-color: $ms-color-neutralTertiaryAlt;
-    }
-
-    &.fieldIsChecked::before {
-      border-color: $ms-color-themeDarkAlt;
-    }
-  }
-  &:active {
-    &::before {
-      border-color: $ms-color-neutralSecondaryAlt;
+      border-color: $radioButton-border-hover-color;
     }
 
     :global(.ms-Label) {
-      color: $ms-color-black;
+      color: $radioButton-text-hover-color;
     }
   }
 
   //== State: A choiceField is checked
   //
   &.fieldIsChecked {
-    &::before {
-      border: 2px solid $ms-color-themePrimary;
-      background-color: transparent;
+    &::before { // the circle
+      border: 2px solid $radioButton-border-selected-color;
 
       @media screen and (-ms-high-contrast: active) {
         border-color: $ms-color-contrastBlackSelected;
@@ -145,8 +144,8 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
       }
     }
 
-    &::after {
-      background-color: $ms-color-themePrimary;
+    &::after { // the dot
+      background-color: $radioButton-dot-color;
       top: 5px;
       @include left(5px);
       width: 10px;
@@ -164,7 +163,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
     &:hover,
     &:focus {
       &::before {
-        border-color: $ms-color-themeDarkAlt;
+        border-color: $radioButton-border-selected-hover-color;
       }
     }
   }
@@ -174,17 +173,9 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   &.fieldIsDisabled {
     cursor: default;
 
-    &:hover,
-    &:focus {
-      &::before {
-        border-color: $ms-color-neutralTertiaryAlt;
-      }
-    }
-
     &::before {
-      background-color: $ms-color-neutralTertiaryAlt;
-      border-color: $ms-color-neutralTertiaryAlt;
-      color: $ms-color-neutralTertiaryAlt;
+      background-color: $radioButton-background-unselected-disabled-color;
+      border-color: $radioButton-border-disabled-color;
 
       @media screen and (-ms-high-contrast: active) {
         border-color: $ms-color-contrastBlackDisabled;
@@ -196,7 +187,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
     }
 
     :global(.ms-Label) {
-      color: $ms-color-neutralTertiary;
+      color: $radioButton-text-disabled-color;
 
       @media screen and (-ms-high-contrast: active) {
         color: $ms-color-contrastBlackDisabled;
@@ -208,19 +199,13 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
     }
   }
 
-  //== State: A choiceField in focus
-  //
-  &.choiceFieldIsInFocus {
+  &.fieldIsChecked.fieldIsDisabled {
     &::before {
-      border-color: $ms-color-neutralSecondaryAlt;
+      background-color: $radioButton-background-color;
+      border-color: $radioButton-border-disabled-color;
     }
-
-    &.fieldIsDisabled::before {
-      border-color: $ms-color-neutralTertiaryAlt;
-    }
-
-    &.fieldIsChecked::before {
-      border-color: $ms-color-themeDarkAlt;
+    &::after {
+      background-color: $radioButton-dot-disabled-color;
     }
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx
index d6dc5ecc1e4b3..663c31f7e44c1 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx
@@ -20,32 +20,52 @@ export class ChoiceGroupBasicExample extends React.Component<any, IChoiceGroupBa
 
   public render() {
     return (
-      <ChoiceGroup
-        defaultSelectedKey='B'
-        options={ [
-          {
-            key: 'A',
-            text: 'Option A'
-          },
-          {
-            key: 'B',
-            text: 'Option B',
-          },
-          {
-            key: 'C',
-            text: 'Option C',
-            disabled: true
-          },
-          {
-            key: 'D',
-            text: 'Option D',
-            disabled: true
-          }
-        ] }
-        onChange={ this._onChange }
-        label='Pick one'
-        required={ true }
-      />
+      <div>
+        <ChoiceGroup
+          defaultSelectedKey='B'
+          options={ [
+            {
+              key: 'A',
+              text: 'Option A'
+            },
+            {
+              key: 'B',
+              text: 'Option B',
+            },
+            {
+              key: 'C',
+              text: 'Option C',
+              disabled: true
+            },
+            {
+              key: 'D',
+              text: 'Option D',
+              disabled: true
+            }
+          ] }
+          onChange={ this._onChange }
+          label='Pick one'
+          required={ true }
+        />
+        <ChoiceGroup
+          defaultSelectedKey='A'
+          options={ [
+            {
+              key: 'A',
+              text: 'Option A',
+              disabled: true
+            },
+            {
+              key: 'B',
+              text: 'Option B',
+              disabled: true
+            }
+          ] }
+          onChange={ this._onChange }
+          label='Pick one'
+          required={ true }
+        />
+      </div>
     );
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
index 0185333fc90f8..7ebdd6a4f176d 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
@@ -8,86 +8,62 @@
 // Single line (input) and multiline (textarea) form field styles
 @import '../Label/LabelMixins.scss';
 
+// component slots
+$field-background-color: $fieldBackgroundColor;
+$field-background-disabled-color: $disabledBackgroundColor;
+
+$field-border-color: $fieldBorderColor;
+$field-border-disabled-color: $disabledBackgroundColor;
+$field-border-hover-color: $fieldBorderHoverColor;
+$field-border-focus-color: $fieldBorderFocusColor;
+$field-border-error-color: $errorTextColor;
+
+$field-text-color: $fieldTextColor;
+$field-text-disabled-color: $disabledTextColor;
+
+$field-placeholder-color: $fieldPlaceholderColor;
+$field-placeholder-disabled-color: $disabledSubtextColor;
+
+$field-description-color: $bodySubtextColor;
+$field-error-color: $errorTextColor;
+
+// the box containing the label and input field
 .root {
   @include ms-baseFont;
   @include ms-u-normalize;
-  color: $ms-color-neutralPrimary;
-  font-size: $ms-font-size-m;
-  font-weight: $ms-font-weight-regular;
   margin-bottom: 8px;
   position: relative; /* Needed to position icon */
-
-  :global(.ms-Label) {
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
-  }
 }
 
 .screenReaderOnly {
   @include ms-u-screenReaderOnly;
 }
 
-//= State: A disabled textfield
-.root.rootIsDisabled {
-  :global(.field) {
-    background-color: $ms-color-neutralLighter;
-    border-color: $ms-color-neutralLighter;
-    pointer-events: none;
-    cursor: default;
-  }
-
-  @include input-placeholder {
-    color: $ms-color-neutralTertiary;
-  }
-}
-
-//= State: A required textfield
-.root.rootIsRequired {
-  :global(.ms-Label) {
-    @include ms-Label-is-required
-  }
-
-  @include input-placeholder {
-    @include ms-Label-is-required
-  }
-}
-
-//= State: An active textfield
-.root.rootIsActive {
-  border-color: $ms-color-themePrimary;
-}
-
-.errorIcon {
-  vertical-align: middle;
-  font-size: $ms-font-size-m;
-  @include margin-right(5px);
-}
-
-.icon {
-  position: absolute;
-  bottom: 8px;
-  @include right(8px);
-  top: auto;
-}
-
+//= State: default
 .fieldGroup {
-  @include ms-u-normalize;
-  @include ms-baseFont;
-  font-weight: $ms-font-weight-regular;
-  font-size: $ms-font-size-m;
-  border: 1px solid $ms-color-neutralTertiaryAlt;
+  border: 1px solid $field-border-color;
+  background: $field-background-color;
   height: 32px;
   display: flex;
   flex-direction: row;
   align-items: stretch;
   position: relative;
+
   &:hover {
-    border-color: $ms-color-neutralSecondaryAlt;
+    border-color: $field-border-hover-color;
   }
 
   &.fieldGroupIsFocused {
-    border-color: $ms-color-themePrimary;
+    border-color: $field-border-focus-color;
+  }
+
+  .rootIsDisabled > & {
+    background-color: $field-background-disabled-color;
+    border-color: $field-border-disabled-color;
+    pointer-events: none;
+    cursor: default;
   }
+
   &:hover,
   &.fieldGroupIsFocused {
     @media screen and (-ms-high-contrast: active) {
@@ -98,9 +74,17 @@
       border-color: $ms-color-contrastWhiteSelected;
     }
   }
-  .rootIsDisabled > & {
-    background-color: $ms-color-neutralLighter;
-    border-color: $ms-color-neutralLighter;
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+//= State: A disabled textfield
+.root.rootIsDisabled {
+  :global(.field) {
+    background-color: $field-background-disabled-color;
+    border-color: $field-border-disabled-color;
     pointer-events: none;
     cursor: default;
   }
@@ -120,7 +104,7 @@
   @include ms-baseFont;
   border-radius: 0;
   border: none;
-  color: $ms-color-neutralPrimary;
+  color: $field-text-color;
   @include padding(0, 12px, 0, 12px);
   width: 100%;
   text-overflow: ellipsis;
@@ -141,17 +125,40 @@
     cursor: default;
   }
 
-  @include input-placeholder {
-    color: $ms-color-neutralSecondary;
+  .field {
+      @include input-placeholder {
+      color: $field-placeholder-disabled-color;
+    }
   }
+}
 
-  &::-ms-clear {
-    display: none;
+//= State: A required textfield
+.root.rootIsRequired {
+  :global(.ms-Label) {
+    @include ms-Label-is-required
   }
 }
 
+//= State: An active textfield
+.root.rootIsActive {
+  border-color: $field-border-focus-color;
+}
+
+.errorIcon {
+  vertical-align: middle;
+  font-size: $ms-font-size-m;
+  @include margin-right(5px);
+}
+
+.icon {
+  position: absolute;
+  bottom: 8px;
+  @include right(8px);
+  top: auto;
+}
+
 .description {
-  color: $ms-color-neutralSecondaryAlt;
+  color: $field-description-color;
   font-size: $ms-font-size-xs;
 }
 
@@ -160,14 +167,15 @@
 }
 
 //== Modifier: Single line (default), underlined
-//
 .root.rootIsUnderlined {
-  border-bottom: 1px solid $ms-color-neutralTertiaryAlt;
+  border-bottom: 1px solid $field-border-color;
+  border-width: 0px;
+  border-bottom-width: 1px;
   display: flex;
   width: 100%;
 
-  &:hover {
-    border-color: $ms-color-neutralSecondaryAlt;
+  &:hover:not(.rootIsDisabled) {
+    border-color: $field-border-hover-color;
 
     @media screen and (-ms-high-contrast: active) {
       border-color: $ms-color-contrastBlackSelected;
@@ -193,7 +201,7 @@
   }
 
   &.rootIsDisabled {
-    border-bottom-color: $ms-color-neutralLight;
+    border-bottom-color: $field-border-disabled-color;
 
     :global(.ms-Label) {
       @include ms-Label-is-disabled;
@@ -201,12 +209,12 @@
 
     .field {
       background-color: transparent;
-      color: $ms-color-neutralTertiary;
+      color: $field-text-disabled-color;
     }
   }
 
   &.rootIsActive {
-    border-color: $ms-color-themePrimary;
+    border-color: $field-border-focus-color;
 
     @media screen and (-ms-high-contrast: active) {
       border-color: $ms-color-contrastBlackSelected;
@@ -228,11 +236,6 @@
     display: flex;
   }
   .field {
-    @include ms-baseFont;
-    color: $ms-color-neutralPrimary;
-    font-family: $ms-font-family-base;
-    font-size: $ms-font-size-m;
-    font-weight: $ms-font-weight-regular;
     line-height: 17px;
     flex-grow: 1;
     padding-top: 6px;
@@ -247,7 +250,7 @@
 // @todo: https://github.com/OfficeDev/Office-UI-Fabric/issues/359
 .errorMessage {
   @include ms-font-s;
-  @include ms-fontColor-redDark;
+  color: $field-error-color;
   @include resetMargins;
   padding-top: 5px;
 }
@@ -255,7 +258,7 @@
 .invalid,
 .invalid:focus,
 .invalid:hover {
-  @include ms-borderColor-redDark;
+  border-color: $field-border-error-color;
 }
 
 .root.rootIsUnderlined {
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 fd5c46155adbf..ec471903d4a58 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
@@ -7,8 +7,10 @@ export class TextFieldBasicExample extends React.Component<any, any> {
   public render() {
     return (
       <div>
-        <TextField label='Default TextField' onChanged={ this._onChanged } />
-        <TextField label='Disabled TextField' disabled={ true } />
+        <TextField
+          addonString='https://'
+          label='Default TextField' onChanged={ this._onChanged } />
+        <TextField label='Disabled TextField' disabled={ true } placeholder='Placeholder text' />
         <TextField label='Required TextField' required={ true } />
         <TextField label='TextField with a placeholder' placeholder='Now I am a Placeholder' ariaLabel='Please enter text here' />
         <TextField label='TextField with an icon' iconClass='ms-Icon--Calendar ms-Icon' />
@@ -17,6 +19,7 @@ export class TextFieldBasicExample extends React.Component<any, any> {
         <TextField label='Multiline TextField Unresizable' multiline resizable={ false } />
         <TextField label='Multiline TextField with auto adjust height' multiline autoAdjustHeight />
         <TextField label='Underlined TextField' underlined />
+        <TextField label='Underlined TextField Disabled' underlined disabled={ true } />
         <TextField label='Borderless TextField' borderless placeholder='No borders here, folks.' />
         <TextField label='Multiline Borderless TextField' multiline rows={ 4 } borderless placeholder='Example TextField without a border' />
       </div>
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.scss b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.scss
index 1f136000a0db9..2042cc108b6a5 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.scss
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.scss
@@ -2,6 +2,28 @@
 
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
 
+// --------------------------------------------------
+// Toggle semantic slots
+
+$toggle-background-off-color: $controlBackgroundColor;
+$toggle-background-on-color: $controlBackgroundSelectedColor;
+$toggle-background-on-hover-color: $controlBackgroundSelectedHoverColor;
+
+$toggle-thumb-off-color: $controlBorderUnselectedColor;
+$toggle-thumb-off-hover-color: $controlBorderUnselectedHoverColor;
+$toggle-thumb-on-color: $controlForegroundSelectedColor;
+
+$toggle-border-off-color: $toggle-thumb-off-color;
+$toggle-border-off-hover-color: $toggle-thumb-off-hover-color;
+$toggle-border-on-hover-color: $controlBorderSelectedHoverColor;
+
+$toggle-thumb-off-disabled-color: $disabledTextColor;
+$toggle-border-off-disabled-color: $disabledTextColor;
+$toggle-background-on-disabled-color: $disabledTextColor;
+$toggle-thumb-on-disabled-color: $disabledBackgroundColor;
+
+$toggle-focusBorder-color: $focusBorderColor;
+
 //
 // Office UI Fabric
 // --------------------------------------------------
@@ -20,9 +42,7 @@
 // Toggle
 .root {
   @include ms-baseFont;
-  @include ms-font-m;
   @include ms-u-normalize;
-  color: $ms-color-neutralPrimary;
 
   position: relative;
   display: block;
@@ -38,43 +58,48 @@
   }
 
   .background {
-    border: 1px solid $ms-color-neutralSecondaryAlt;
+    background: $toggle-background-off-color;
+    border: 1px solid $toggle-border-off-color;
   }
 
   .thumb {
+    background: $toggle-thumb-off-color;
     @include highContrast-bgColor($ms-color-white, $ms-color-black);
   }
 
   .slider:hover {
     .background {
-      border: 1px solid $ms-color-black;
+      border: 1px solid $toggle-border-off-hover-color;
     }
 
     .thumb {
-      background: $ms-color-black;
+      background: $toggle-thumb-off-hover-color;
     }
   }
 
   &.isChecked {
     .background {
-      background: $ms-color-themePrimary;
-      border: 1px solid $ms-color-themePrimary;
+      background: $toggle-background-on-color;
+      border: 1px solid transparent;
       @include highContrast-bgColor($ms-color-white, $ms-color-black);
     }
 
     .thumb {
-      background: $ms-color-white;
+      background: $toggle-thumb-on-color;
       @include left(28px);
       @include highContrast-bgColor($ms-color-black, $ms-color-white);
     }
 
     .slider:hover {
       .background {
-        border: 1px solid $ms-color-themePrimary;
-        background: $ms-color-themeSecondary;
+        border: 1px solid $toggle-border-on-hover-color;
+        background: $toggle-background-on-hover-color;
       }
+
       .thumb {
-        background: $ms-color-white;
+        background: $toggle-thumb-on-color;
+        @include left(28px);
+        @include highContrast-bgColor($ms-color-black, $ms-color-white);
       }
     }
   }
@@ -84,12 +109,13 @@
 // Disabled overrides
 .isDisabled {
   .thumb {
-    background: $ms-color-neutralTertiaryAlt;
+    background: $toggle-thumb-off-disabled-color;
     @include highContrast-bgColor($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
   }
 
   .background {
-    border: 1px solid $ms-color-neutralTertiaryAlt;
+    background: $toggle-background-off-color;
+    border: 1px solid $toggle-border-off-disabled-color;
 
     @media screen and (-ms-high-contrast: active) {
       border-color: $ms-color-contrastBlackDisabled;
@@ -102,13 +128,13 @@
 
   &.isChecked {
     .background {
-      background: $ms-color-neutralTertiaryAlt;
+      background: $toggle-background-on-disabled-color;
       border: 1px solid transparent;
       @include highContrast-bgColor($ms-color-contrastBlackDisabled, $ms-color-contrastWhiteDisabled);
     }
 
     .thumb {
-      background: $ms-color-neutralLight;
+      background: $toggle-thumb-on-disabled-color;
       @include left(28px);
       @include highContrast-bgColor($ms-color-black, $ms-color-white);
     }
@@ -122,7 +148,7 @@
 }
 
 :global(.ms-Fabric.is-focusVisible) .root.isEnabled .invisibleToggle:focus + .background .focus {
-  border: 1px solid $focusedBorderColor;
+  border: 1px solid $toggle-focusBorder-color;
 }
 
 .invisibleToggle {
@@ -161,7 +187,6 @@
   border-radius: 10px;
   top: 4px;
   @include left(4px);
-  background: $ms-color-neutralSecondary;
   transition: all 0.1s ease;
 }