diff --git a/packages/core/src/_accessibility.scss b/packages/core/src/_accessibility.scss
index ce0ad7e3e8..d96318c28d 100644
--- a/packages/core/src/_accessibility.scss
+++ b/packages/core/src/_accessibility.scss
@@ -5,13 +5,13 @@
   @include focus-outline();
 }
 
-.pt-focus-disabled :focus {
+.#{$ns}-focus-disabled :focus {
   // override any focus outline anywhere
   // stylelint-disable declaration-no-important
   outline: none !important;
 
   // special override for checkbox etc which render focus on a separate element
-  ~ .pt-control-indicator {
+  ~ .#{$ns}-control-indicator {
     outline: none !important;
   }
 }
diff --git a/packages/core/src/_typography.scss b/packages/core/src/_typography.scss
index 8c053b388a..91408fa86d 100644
--- a/packages/core/src/_typography.scss
+++ b/packages/core/src/_typography.scss
@@ -12,7 +12,7 @@ hr {
   border: none;
   border-bottom: 1px solid $pt-divider-black;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     border-color: $pt-dark-divider-white;
   }
 }
@@ -37,12 +37,12 @@ Fonts
 Markup:
 <div class="{{.modifier}}">Blueprint components react overlay date picker.</div>
 
-.pt-monospace-text - Use a monospace font (ideal for code)
+.#{$ns}-monospace-text - Use a monospace font (ideal for code)
 
 Styleguide fonts
 */
 
-.pt-monospace-text {
+.#{$ns}-monospace-text {
   @include monospace-typography();
 }
 
@@ -86,17 +86,17 @@ UI text
 Markup:
 <div class="{{.modifier}}">Blueprint components react overlay date picker.</div>
 
-.pt-ui-text - Default UI text. This is applied to the document body as part of core styles.
-.pt-ui-text-large - Larger UI text.
+.#{$ns}-ui-text - Default UI text. This is applied to the document body as part of core styles.
+.#{$ns}-ui-text-large - Larger UI text.
 
-Styleguide pt-ui-text
+Styleguide ui-text
 */
 
-.pt-ui-text {
+.#{$ns}-ui-text {
   @include base-typography();
 }
 
-.pt-ui-text-large {
+.#{$ns}-ui-text-large {
   line-height: 1.25;
   font-size: $pt-font-size-large;
 }
@@ -107,23 +107,23 @@ Running text
 Markup:
 <div class="{{.modifier}}">
   <p>Longform text, such as rendered Markdown documents, benefit from additional spacing and slightly
-large font size. Apply <code>.pt-running-text</code> to the parent element to adjust spacing for the following
+large font size. Apply <code>.#{$ns}-running-text</code> to the parent element to adjust spacing for the following
 elements:</p>
   <ul>
     <li><code>&lt;p></code> tags have increased line-height and font size.</li>
     <li><code>&lt;h*></code> tag margins are adjusted to provide clear separation between sections in a document.</li>
-    <li><code>&lt;ul></code> and <code>&lt;ol></code> tags receive [`.pt-list`](#typography.lists) styles for legibility.</li>
+    <li><code>&lt;ul></code> and <code>&lt;ol></code> tags receive <code>.#{$ns}-list</code> styles for legibility.</li>
   </ul>
   <h3>New section</h3>
   <p>And another paragraph.</p>
 </div>
 
-.pt-running-text - Apply larger font size and additional spacing.
+.#{$ns}-running-text - Apply larger font size and additional spacing.
 
-Styleguide pt-running-text
+Styleguide running-text
 */
 
-.pt-running-text {
+.#{$ns}-running-text {
   @include running-typography();
 
   @each $header, $props in $headers {
@@ -134,7 +134,7 @@ Styleguide pt-running-text
   }
 }
 
-.pt-running-text-small {
+.#{$ns}-running-text-small {
   @include running-typography-small();
 }
 
@@ -169,12 +169,12 @@ a {
   }
 
   code,
-  .pt-dark & code {
+  .#{$ns}-dark & code {
     color: inherit;
   }
 
-  .pt-dark &,
-  .pt-dark &:hover {
+  .#{$ns}-dark &,
+  .#{$ns}-dark &:hover {
     color: $pt-dark-link-color;
 
     #{$icon-classes} {
@@ -222,7 +222,7 @@ code {
   padding: 2px 5px;
   color: $pt-code-text-color;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: inset border-shadow(0.4);
     background: $pt-dark-code-background-color;
     color: $pt-dark-code-text-color;
@@ -252,7 +252,7 @@ pre {
     font-size: inherit;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: inset 0 0 0 1px $pt-dark-divider-black;
     background: $pt-dark-code-background-color;
     color: $pt-dark-text-color;
@@ -296,7 +296,7 @@ blockquote {
     margin-bottom: 0;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     border-color: rgba($gray2, 0.5);
   }
 }
@@ -316,8 +316,8 @@ Markup:
   <li>Item the third</li>
 </ol>
 
-.pt-list - Add a little spacing between items for readability.
-.pt-list-unstyled - Remove all list styling (including indicators) so you can add your own.
+.#{$ns}-list - Add a little spacing between items for readability.
+.#{$ns}-list-unstyled - Remove all list styling (including indicators) so you can add your own.
 
 Styleguide lists
 */
@@ -328,9 +328,9 @@ ul {
   padding-left: $pt-grid-size * 4;
 }
 
-.pt-list,
-.pt-running-text ul,
-.pt-running-text ol {
+.#{$ns}-list,
+.#{$ns}-running-text ul,
+.#{$ns}-running-text ol {
   li:not(:last-child) {
     padding-bottom: $pt-grid-size / 2;
   }
@@ -346,7 +346,7 @@ ul {
   }
 }
 
-.pt-list-unstyled {
+.#{$ns}-list-unstyled {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -364,22 +364,22 @@ Markup:
   Blueprint components react overlay date picker. Breadcrumbs dialog progress non-ideal state.
 </div>
 
-.pt-text-muted - Changes text color to a gentler gray.
-.pt-text-overflow-ellipsis - Truncates a single line of text with an ellipsis if it overflows its
+.#{$ns}-text-muted - Changes text color to a gentler gray.
+.#{$ns}-text-overflow-ellipsis - Truncates a single line of text with an ellipsis if it overflows its
   container.
 
 Styleguide utilities
 */
 
-.pt-text-muted {
+.#{$ns}-text-muted {
   color: $pt-text-color-muted;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $pt-dark-text-color-muted;
   }
 }
 
-.pt-text-overflow-ellipsis {
+.#{$ns}-text-overflow-ellipsis {
   @include overflow-ellipsis();
 }
 
@@ -388,24 +388,24 @@ Right-to-left text
 
 Markup:
 <h4>Arabic:</h4>
-<p class="pt-rtl">
+<p class="#{$ns}-rtl">
   لكل لأداء بمحاولة من. مدينة الواقعة يبق أي, وإعلان وقوعها، حول كل, حدى عجّل مشروط الخاسرة قد.
   من الذود تكبّد بين, و لها واحدة الأراضي. عل الصفحة والروسية يتم, أي للحكومة استعملت شيء. أم وصل زهاء اليا
 </p>
 <h4>Hebrew:</h4>
-<p class="pt-rtl">
+<p class="#{$ns}-rtl">
   כדי על עזרה יידיש הבהרה, מלא באגים טכניים דת. תנך או ברית ביולי. כתב בה הטבע למנוע, דת כלים פיסיקה החופשית זכר.
   מתן החלל מאמרשיחהצפה ב. הספרות אנציקלופדיה אם זכר, על שימושי שימושיים תאולוגיה עזה
 </p>
 
-Styleguide pt-rtl
+Styleguide rtl
 */
 
-.pt-rtl {
+.#{$ns}-rtl {
   text-align: right;
 }
 
-.pt-dark {
+.#{$ns}-dark {
   color: $pt-dark-text-color;
 
   @each $header, $props in $headers {
diff --git a/packages/core/src/common/_flex.scss b/packages/core/src/common/_flex.scss
index 5f150bdfe5..b44d7db1b4 100644
--- a/packages/core/src/common/_flex.scss
+++ b/packages/core/src/common/_flex.scss
@@ -5,7 +5,7 @@
 // supply `$margin` to put space between each child.
 // supply `$inline: inline` to use `display: flex-inline`.
 // customize `flex: 1 1` child selector with $fill.
-@mixin pt-flex-container($direction: row, $margin: none, $inline: none, $fill: ".pt-fill") {
+@mixin pt-flex-container($direction: row, $margin: none, $inline: none, $fill: ".#{$ns}-fill") {
   @if $inline == inline or $inline == true {
     display: inline-flex;
   } @else {
diff --git a/packages/core/src/common/_react-transition.scss b/packages/core/src/common/_react-transition.scss
index 3d45b4b63b..ab8b4544a4 100644
--- a/packages/core/src/common/_react-transition.scss
+++ b/packages/core/src/common/_react-transition.scss
@@ -10,8 +10,8 @@ value). For enter & appear transitions, each property will transition from its i
 value. For exit transitions, each property will transition in reverse, from final to initial.
 
 **Simple example:**
-`@include react-transition("pt-popover", (opacity: 0 1), $before: "&");`
-Transition named "pt-popover" moves opacity from 0 to 1. `"&"` indicates that the
+`@include react-transition("popover", (opacity: 0 1), $before: "&");`
+Transition named "popover" moves opacity from 0 to 1. `"&"` indicates that the
 Transition classes are expected to be applied to this element, where the mixin is invoked.
 
 **Params:**
@@ -52,8 +52,8 @@ If `enter` phase is given then `appear` phase will be generated at the same time
 If `exit` phase is given then property values are animated in reverse, from final to initial.
 
 **Example:**
-@include react-transition-phase(pt-toast, enter, $enter-translate, $before: "&");
-@include react-transition-phase(pt-toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&");
+@include react-transition-phase(toast, enter, $enter-translate, $before: "&");
+@include react-transition-phase(toast, leave, $leave-blur, $pt-transition-duration * 3, $before: "&");
 */
 @mixin react-transition-phase(
   $name,
diff --git a/packages/core/src/common/_variables.scss b/packages/core/src/common/_variables.scss
index 0fecc4f0ce..2902f7e4af 100644
--- a/packages/core/src/common/_variables.scss
+++ b/packages/core/src/common/_variables.scss
@@ -4,7 +4,10 @@
 @import "colors";
 @import "mixins";
 
-// easily the most important variable, so it comes first
+// Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
+$ns: "pt" !default;
+
+// easily the most important variable, so it comes up top
 // (so other variables can use it to define themselves)
 $pt-grid-size: 10px !default;
 
diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
index cb21b97095..0c689eac11 100644
--- a/packages/core/src/common/classes.ts
+++ b/packages/core/src/common/classes.ts
@@ -8,26 +8,26 @@ import { Elevation } from "../components/card/card";
 import { Alignment } from "./alignment";
 import { Intent } from "./intent";
 
-// tslint:disable:blueprint-classes-constants
+const NS = process.env.BLUEPRINT_NAMESPACE || "pt";
 
 // modifiers
-export const ACTIVE = "pt-active";
-export const ALIGN_LEFT = "pt-align-left";
-export const ALIGN_RIGHT = "pt-align-right";
-export const DARK = "pt-dark";
-export const DISABLED = "pt-disabled";
-export const FILL = "pt-fill";
-export const FIXED = "pt-fixed";
-export const FIXED_TOP = "pt-fixed-top";
-export const INLINE = "pt-inline";
-export const INTERACTIVE = "pt-interactive";
-export const LARGE = "pt-large";
-export const LOADING = "pt-loading";
-export const MINIMAL = "pt-minimal";
-export const MULTILINE = "pt-multiline";
-export const ROUND = "pt-round";
-export const SMALL = "pt-small";
-export const VERTICAL = "pt-vertical";
+export const ACTIVE = `${NS}-active`;
+export const ALIGN_LEFT = `${NS}-align-left`;
+export const ALIGN_RIGHT = `${NS}-align-right`;
+export const DARK = `${NS}-dark`;
+export const DISABLED = `${NS}-disabled`;
+export const FILL = `${NS}-fill`;
+export const FIXED = `${NS}-fixed`;
+export const FIXED_TOP = `${NS}-fixed-top`;
+export const INLINE = `${NS}-inline`;
+export const INTERACTIVE = `${NS}-interactive`;
+export const LARGE = `${NS}-large`;
+export const LOADING = `${NS}-loading`;
+export const MINIMAL = `${NS}-minimal`;
+export const MULTILINE = `${NS}-multiline`;
+export const ROUND = `${NS}-round`;
+export const SMALL = `${NS}-small`;
+export const VERTICAL = `${NS}-vertical`;
 
 export const ELEVATION_0 = elevationClass(Elevation.ZERO);
 export const ELEVATION_1 = elevationClass(Elevation.ONE);
@@ -41,206 +41,213 @@ export const INTENT_WARNING = intentClass(Intent.WARNING);
 export const INTENT_DANGER = intentClass(Intent.DANGER);
 
 // text utilities
-export const TEXT_MUTED = "pt-text-muted";
-export const TEXT_OVERFLOW_ELLIPSIS = "pt-text-overflow-ellipsis";
-export const UI_TEXT = "pt-ui-text";
-export const UI_TEXT_LARGE = "pt-ui-text-large";
-export const RUNNING_TEXT = "pt-running-text";
-export const RUNNING_TEXT_SMALL = "pt-running-text-small";
-export const MONOSPACE_TEXT = "pt-monospace-text";
+export const TEXT_MUTED = `${NS}-text-muted`;
+export const TEXT_OVERFLOW_ELLIPSIS = `${NS}-text-overflow-ellipsis`;
+export const UI_TEXT = `${NS}-ui-text`;
+export const UI_TEXT_LARGE = `${NS}-ui-text-large`;
+export const RUNNING_TEXT = `${NS}-running-text`;
+export const RUNNING_TEXT_SMALL = `${NS}-running-text-small`;
+export const MONOSPACE_TEXT = `${NS}-monospace-text`;
 
-export const FOCUS_DISABLED = "pt-focus-disabled";
+export const FOCUS_DISABLED = `${NS}-focus-disabled`;
 
 // lists
-export const LIST = "pt-list";
-export const LIST_UNSTYLED = "pt-list-unstyled";
+export const LIST = `${NS}-list`;
+export const LIST_UNSTYLED = `${LIST}-unstyled`;
 
 // components
-export const ALERT = "pt-alert";
-export const ALERT_BODY = "pt-alert-body";
-export const ALERT_CONTENTS = "pt-alert-contents";
-export const ALERT_FOOTER = "pt-alert-footer";
-
-export const BREADCRUMB = "pt-breadcrumb";
-export const BREADCRUMB_CURRENT = "pt-breadcrumb-current";
-export const BREADCRUMBS = "pt-breadcrumbs";
-export const BREADCRUMBS_COLLAPSED = "pt-breadcrumbs-collapsed";
-
-export const BUTTON = "pt-button";
-export const BUTTON_GROUP = "pt-button-group";
-export const BUTTON_SPINNER = "pt-button-spinner";
-export const BUTTON_TEXT = "pt-button-text";
-
-export const CALLOUT = "pt-callout";
-export const CALLOUT_ICON = "pt-callout-icon";
-export const CALLOUT_TITLE = "pt-callout-title";
-
-export const CARD = "pt-card";
-
-export const COLLAPSE = "pt-collapse";
-export const COLLAPSE_BODY = "pt-collapse-body";
-
-export const COLLAPSIBLE_LIST = "pt-collapse-list";
-
-export const CONTEXT_MENU = "pt-context-menu";
-export const CONTEXT_MENU_POPOVER_TARGET = "pt-context-menu-popover-target";
-
-export const CONTROL = "pt-control";
-export const CONTROL_GROUP = "pt-control-group";
-export const CONTROL_INDICATOR = "pt-control-indicator";
-
-export const DIALOG = "pt-dialog";
-export const DIALOG_CONTAINER = "pt-dialog-container";
-export const DIALOG_BODY = "pt-dialog-body";
-export const DIALOG_CLOSE_BUTTON = "pt-dialog-close-button";
-export const DIALOG_FOOTER = "pt-dialog-footer";
-export const DIALOG_FOOTER_ACTIONS = "pt-dialog-footer-actions";
-export const DIALOG_HEADER = "pt-dialog-header";
-export const DIALOG_HEADER_TITLE = "pt-dialog-header-title";
-
-export const EDITABLE_TEXT = "pt-editable-text";
-export const EDITABLE_TEXT_CONTENT = "pt-editable-content";
-export const EDITABLE_TEXT_EDITING = "pt-editable-editing";
-export const EDITABLE_TEXT_INPUT = "pt-editable-input";
-export const EDITABLE_TEXT_PLACEHOLDER = "pt-editable-placeholder";
-
-export const FLEX_EXPANDER = "pt-flex-expander";
-
-export const HTML_TABLE = "pt-html-table";
-export const HTML_TABLE_STRIPED = "pt-html-table-striped";
-export const HTML_TABLE_BORDERED = "pt-html-table-bordered";
-
-export const INPUT = "pt-input";
-export const INPUT_GROUP = "pt-input-group";
-export const INPUT_ACTION = "pt-input-action";
-
-export const CHECKBOX = "pt-checkbox";
-export const RADIO = "pt-radio";
-export const SWITCH = "pt-switch";
-export const FILE_INPUT = "pt-file-input";
-export const FILE_UPLOAD_INPUT = "pt-file-upload-input";
-
-export const INPUT_GHOST = "pt-input-ghost";
-
-export const KEY = "pt-key";
-export const KEY_COMBO = "pt-key-combo";
-export const MODIFIER_KEY = "pt-modifier-key";
-
-export const HOTKEY = "pt-hotkey";
-export const HOTKEY_LABEL = "pt-hotkey-label";
-export const HOTKEY_GROUP = "pt-hotkey-group";
-export const HOTKEY_COLUMN = "pt-hotkey-column";
-export const HOTKEY_DIALOG = "pt-hotkey-dialog";
-
-export const LABEL = "pt-label";
-export const FORM_GROUP = "pt-form-group";
-export const FORM_CONTENT = "pt-form-content";
-export const FORM_HELPER_TEXT = "pt-form-helper-text";
-
-export const MENU = "pt-menu";
-export const MENU_ITEM = "pt-menu-item";
-export const MENU_ITEM_LABEL = "pt-menu-item-label";
-export const MENU_SUBMENU = "pt-submenu";
-export const MENU_DIVIDER = "pt-menu-divider";
-export const MENU_HEADER = "pt-menu-header";
-
-export const NAVBAR = "pt-navbar";
-export const NAVBAR_GROUP = "pt-navbar-group";
-export const NAVBAR_HEADING = "pt-navbar-heading";
-export const NAVBAR_DIVIDER = "pt-navbar-divider";
-
-export const NON_IDEAL_STATE = "pt-non-ideal-state";
-export const NON_IDEAL_STATE_ACTION = "pt-non-ideal-state-action";
-export const NON_IDEAL_STATE_DESCRIPTION = "pt-non-ideal-state-description";
-export const NON_IDEAL_STATE_ICON = "pt-non-ideal-state-icon";
-export const NON_IDEAL_STATE_TITLE = "pt-non-ideal-state-title";
-export const NON_IDEAL_STATE_VISUAL = "pt-non-ideal-state-visual";
-
-export const NUMERIC_INPUT = "pt-numeric-input";
-
-export const OVERLAY = "pt-overlay";
-export const OVERLAY_BACKDROP = "pt-overlay-backdrop";
-export const OVERLAY_CONTENT = "pt-overlay-content";
-export const OVERLAY_INLINE = "pt-overlay-inline";
-export const OVERLAY_OPEN = "pt-overlay-open";
-export const OVERLAY_SCROLL_CONTAINER = "pt-overlay-scroll-container";
-
-export const POPOVER = "pt-popover";
-export const POPOVER_ARROW = "pt-popover-arrow";
-export const POPOVER_BACKDROP = "pt-popover-backdrop";
-export const POPOVER_CONTENT = "pt-popover-content";
-export const POPOVER_CONTENT_SIZING = "pt-popover-content-sizing";
-export const POPOVER_DISMISS = "pt-popover-dismiss";
-export const POPOVER_DISMISS_OVERRIDE = "pt-popover-dismiss-override";
-export const POPOVER_OPEN = "pt-popover-open";
-export const POPOVER_TARGET = "pt-popover-target";
-export const POPOVER_WRAPPER = "pt-popover-wrapper";
-export const TRANSITION_CONTAINER = "pt-transition-container";
-
-export const PROGRESS_BAR = "pt-progress-bar";
-export const PROGRESS_METER = "pt-progress-meter";
-export const PROGRESS_NO_STRIPES = "pt-no-stripes";
-export const PROGRESS_NO_ANIMATION = "pt-no-animation";
-
-export const PORTAL = "pt-portal";
-
-export const SELECT = "pt-select";
-
-export const SKELETON = "pt-skeleton";
-
-export const SLIDER = "pt-slider";
-export const SLIDER_HANDLE = "pt-slider-handle";
-export const SLIDER_LABEL = "pt-slider-label";
-export const SLIDER_PROGRESS = "pt-slider-progress";
-export const RANGE_SLIDER = "pt-range-slider";
-
-export const SPINNER = "pt-spinner";
-export const SPINNER_HEAD = "pt-spinner-head";
-export const SPINNER_NO_SPIN = "pt-no-spin";
-export const SPINNER_TRACK = "pt-spinner-track";
-export const SPINNER_SVG_CONTAINER = "pt-spinner-svg-container";
-export const SVG_SPINNER = "pt-svg-spinner";
-
-export const TAB = "pt-tab";
-export const TAB_INDICATOR = "pt-tab-indicator";
-export const TAB_INDICATOR_WRAPPER = "pt-tab-indicator-wrapper";
-export const TAB_LIST = "pt-tab-list";
-export const TAB_PANEL = "pt-tab-panel";
-export const TABS = "pt-tabs";
-
-export const TAG = "pt-tag";
-export const TAG_REMOVABLE = "pt-tag-removable";
-export const TAG_REMOVE = "pt-tag-remove";
-
-export const TAG_INPUT = "pt-tag-input";
-export const TAG_INPUT_ICON = "pt-tag-input-icon";
-export const TAG_INPUT_VALUES = "pt-tag-input-values";
-
-export const TOAST = "pt-toast";
-export const TOAST_CONTAINER = "pt-toast-container";
-export const TOAST_MESSAGE = "pt-toast-message";
-
-export const TOOLTIP = "pt-tooltip";
-export const TOOLTIP_INDICATOR = "pt-tooltip-indicator";
-
-export const TREE = "pt-tree";
-export const TREE_NODE = "pt-tree-node";
-export const TREE_NODE_CARET = "pt-tree-node-caret";
-export const TREE_NODE_CARET_CLOSED = "pt-tree-node-caret-closed";
-export const TREE_NODE_CARET_NONE = "pt-tree-node-caret-none";
-export const TREE_NODE_CARET_OPEN = "pt-tree-node-caret-open";
-export const TREE_NODE_CONTENT = "pt-tree-node-content";
-export const TREE_NODE_EXPANDED = "pt-tree-node-expanded";
-export const TREE_NODE_ICON = "pt-tree-node-icon";
-export const TREE_NODE_LABEL = "pt-tree-node-label";
-export const TREE_NODE_LIST = "pt-tree-node-list";
-export const TREE_NODE_SECONDARY_LABEL = "pt-tree-node-secondary-label";
-export const TREE_NODE_SELECTED = "pt-tree-node-selected";
-export const TREE_ROOT = "pt-tree-root";
-
-export const ICON = "pt-icon";
-export const ICON_STANDARD = "pt-icon-standard";
-export const ICON_LARGE = "pt-icon-large";
+export const ALERT = `${NS}-alert`;
+export const ALERT_BODY = `${ALERT}-body`;
+export const ALERT_CONTENTS = `${ALERT}-contents`;
+export const ALERT_FOOTER = `${ALERT}-footer`;
+
+export const BREADCRUMB = `${NS}-breadcrumb`;
+export const BREADCRUMB_CURRENT = `${BREADCRUMB}-current`;
+export const BREADCRUMBS = `${BREADCRUMB}s`;
+export const BREADCRUMBS_COLLAPSED = `${BREADCRUMB}s-collapsed`;
+
+export const BUTTON = `${NS}-button`;
+export const BUTTON_GROUP = `${BUTTON}-group`;
+export const BUTTON_SPINNER = `${BUTTON}-spinner`;
+export const BUTTON_TEXT = `${BUTTON}-text`;
+
+export const CALLOUT = `${NS}-callout`;
+export const CALLOUT_ICON = `${CALLOUT}-icon`;
+export const CALLOUT_TITLE = `${CALLOUT}-title`;
+
+export const CARD = `${NS}-card`;
+
+export const COLLAPSE = `${NS}-collapse`;
+export const COLLAPSE_BODY = `${COLLAPSE}-body`;
+
+export const COLLAPSIBLE_LIST = `${NS}-collapse-list`;
+
+export const CONTEXT_MENU = `${NS}-context-menu`;
+export const CONTEXT_MENU_POPOVER_TARGET = `${CONTEXT_MENU}-popover-target`;
+
+export const CONTROL_GROUP = `${NS}-control-group`;
+
+export const DIALOG = `${NS}-dialog`;
+export const DIALOG_CONTAINER = `${DIALOG}-container`;
+export const DIALOG_BODY = `${DIALOG}-body`;
+export const DIALOG_CLOSE_BUTTON = `${DIALOG}-close-button`;
+export const DIALOG_FOOTER = `${DIALOG}-footer`;
+export const DIALOG_FOOTER_ACTIONS = `${DIALOG}-footer-actions`;
+export const DIALOG_HEADER = `${DIALOG}-header`;
+export const DIALOG_HEADER_TITLE = `${DIALOG}-header-title`;
+
+export const EDITABLE_TEXT = `${NS}-editable-text`;
+export const EDITABLE_TEXT_CONTENT = `${EDITABLE_TEXT}-content`;
+export const EDITABLE_TEXT_EDITING = `${EDITABLE_TEXT}-editing`;
+export const EDITABLE_TEXT_INPUT = `${EDITABLE_TEXT}-input`;
+export const EDITABLE_TEXT_PLACEHOLDER = `${EDITABLE_TEXT}-placeholder`;
+
+export const FLEX_EXPANDER = `${NS}-flex-expander`;
+
+export const HTML_TABLE = `${NS}-html-table`;
+export const HTML_TABLE_STRIPED = `${HTML_TABLE}-striped`;
+export const HTML_TABLE_BORDERED = `${HTML_TABLE}-bordered`;
+
+export const INPUT = `${NS}-input`;
+export const INPUT_GHOST = `${INPUT}-ghost`;
+export const INPUT_GROUP = `${INPUT}-group`;
+export const INPUT_ACTION = `${INPUT}-action`;
+
+export const CONTROL = `${NS}-control`;
+export const CONTROL_INDICATOR = `${CONTROL}-indicator`;
+export const CHECKBOX = `${NS}-checkbox`;
+export const RADIO = `${NS}-radio`;
+export const SWITCH = `${NS}-switch`;
+export const FILE_INPUT = `${NS}-file-input`;
+export const FILE_UPLOAD_INPUT = `${NS}-file-upload-input`;
+
+export const KEY = `${NS}-key`;
+export const KEY_COMBO = `${KEY}-combo`;
+export const MODIFIER_KEY = `${NS}-modifier-key`;
+
+export const HOTKEY = `${NS}-hotkey`;
+export const HOTKEY_LABEL = `${HOTKEY}-label`;
+export const HOTKEY_GROUP = `${HOTKEY}-group`;
+export const HOTKEY_COLUMN = `${HOTKEY}-column`;
+export const HOTKEY_DIALOG = `${HOTKEY}-dialog`;
+
+export const LABEL = `${NS}-label`;
+export const FORM_GROUP = `${NS}-form-group`;
+export const FORM_CONTENT = `${NS}-form-content`;
+export const FORM_HELPER_TEXT = `${NS}-form-helper-text`;
+
+export const MENU = `${NS}-menu`;
+export const MENU_ITEM = `${MENU}-item`;
+export const MENU_ITEM_LABEL = `${MENU_ITEM}-label`;
+export const MENU_SUBMENU = `${NS}-submenu`;
+export const MENU_DIVIDER = `${MENU}-divider`;
+export const MENU_HEADER = `${MENU}-header`;
+
+export const NAVBAR = `${NS}-navbar`;
+export const NAVBAR_GROUP = `${NAVBAR}-group`;
+export const NAVBAR_HEADING = `${NAVBAR}-heading`;
+export const NAVBAR_DIVIDER = `${NAVBAR}-divider`;
+
+export const NON_IDEAL_STATE = `${NS}-non-ideal-state`;
+export const NON_IDEAL_STATE_ACTION = `${NON_IDEAL_STATE}-action`;
+export const NON_IDEAL_STATE_DESCRIPTION = `${NON_IDEAL_STATE}-description`;
+export const NON_IDEAL_STATE_ICON = `${NON_IDEAL_STATE}-icon`;
+export const NON_IDEAL_STATE_TITLE = `${NON_IDEAL_STATE}-title`;
+export const NON_IDEAL_STATE_VISUAL = `${NON_IDEAL_STATE}-visual`;
+
+export const NUMERIC_INPUT = `${NS}-numeric-input`;
+
+export const OVERLAY = `${NS}-overlay`;
+export const OVERLAY_BACKDROP = `${OVERLAY}-backdrop`;
+export const OVERLAY_CONTENT = `${OVERLAY}-content`;
+export const OVERLAY_INLINE = `${OVERLAY}-inline`;
+export const OVERLAY_OPEN = `${OVERLAY}-open`;
+export const OVERLAY_SCROLL_CONTAINER = `${OVERLAY}-scroll-container`;
+
+export const POPOVER = `${NS}-popover`;
+export const POPOVER_ARROW = `${POPOVER}-arrow`;
+export const POPOVER_BACKDROP = `${POPOVER}-backdrop`;
+export const POPOVER_CONTENT = `${POPOVER}-content`;
+export const POPOVER_CONTENT_SIZING = `${POPOVER_CONTENT}-sizing`;
+export const POPOVER_DISMISS = `${POPOVER}-dismiss`;
+export const POPOVER_DISMISS_OVERRIDE = `${POPOVER_DISMISS}-override`;
+export const POPOVER_OPEN = `${POPOVER}-open`;
+export const POPOVER_TARGET = `${POPOVER}-target`;
+export const POPOVER_WRAPPER = `${POPOVER}-wrapper`;
+export const TRANSITION_CONTAINER = `${NS}-transition-container`;
+
+export const PROGRESS_BAR = `${NS}-progress-bar`;
+export const PROGRESS_METER = `${NS}-progress-meter`;
+export const PROGRESS_NO_STRIPES = `${NS}-no-stripes`;
+export const PROGRESS_NO_ANIMATION = `${NS}-no-animation`;
+
+export const PORTAL = `${NS}-portal`;
+
+export const SELECT = `${NS}-select`;
+
+export const SKELETON = `${NS}-skeleton`;
+
+export const SLIDER = `${NS}-slider`;
+export const SLIDER_HANDLE = `${SLIDER}-handle`;
+export const SLIDER_LABEL = `${SLIDER}-label`;
+export const SLIDER_PROGRESS = `${SLIDER}-progress`;
+export const RANGE_SLIDER = `${NS}-range-slider`;
+
+export const SPINNER = `${NS}-spinner`;
+export const SPINNER_HEAD = `${SPINNER}-head`;
+export const SPINNER_NO_SPIN = `${NS}-no-spin`;
+export const SPINNER_TRACK = `${SPINNER}-track`;
+export const SPINNER_SVG_CONTAINER = `${SPINNER}-svg-container`;
+export const SVG_SPINNER = `${NS}-svg-spinner`;
+
+export const TAB = `${NS}-tab`;
+export const TAB_INDICATOR = `${TAB}-indicator`;
+export const TAB_INDICATOR_WRAPPER = `${TAB_INDICATOR}-wrapper`;
+export const TAB_LIST = `${TAB}-list`;
+export const TAB_PANEL = `${TAB}-panel`;
+export const TABS = `${TAB}s`;
+
+export const TAG = `${NS}-tag`;
+export const TAG_REMOVABLE = `${TAG}-removable`;
+export const TAG_REMOVE = `${TAG}-remove`;
+
+export const TAG_INPUT = `${NS}-tag-input`;
+export const TAG_INPUT_ICON = `${TAG_INPUT}-icon`;
+export const TAG_INPUT_VALUES = `${TAG_INPUT}-values`;
+
+export const TOAST = `${NS}-toast`;
+export const TOAST_CONTAINER = `${TOAST}-container`;
+export const TOAST_MESSAGE = `${TOAST}-message`;
+
+export const TOOLTIP = `${NS}-tooltip`;
+export const TOOLTIP_INDICATOR = `${TOOLTIP}-indicator`;
+
+export const TREE = `${NS}-tree`;
+export const TREE_NODE = `${NS}-tree-node`;
+export const TREE_NODE_CARET = `${TREE_NODE}-caret`;
+export const TREE_NODE_CARET_CLOSED = `${TREE_NODE_CARET}-closed`;
+export const TREE_NODE_CARET_NONE = `${TREE_NODE_CARET}-none`;
+export const TREE_NODE_CARET_OPEN = `${TREE_NODE_CARET}-open`;
+export const TREE_NODE_CONTENT = `${TREE_NODE}-content`;
+export const TREE_NODE_EXPANDED = `${TREE_NODE}-expanded`;
+export const TREE_NODE_ICON = `${TREE_NODE}-icon`;
+export const TREE_NODE_LABEL = `${TREE_NODE}-label`;
+export const TREE_NODE_LIST = `${TREE_NODE}-list`;
+export const TREE_NODE_SECONDARY_LABEL = `${TREE_NODE}-secondary-label`;
+export const TREE_NODE_SELECTED = `${TREE_NODE}-selected`;
+export const TREE_ROOT = `${NS}-tree-root`;
+
+export const ICON = `${NS}-icon`;
+export const ICON_STANDARD = `${ICON}-standard`;
+export const ICON_LARGE = `${ICON}-large`;
+
+/**
+ * Returns the namespace prefix for all Blueprint CSS classes.
+ * Customize this namespace at build time with the `process.env.BLUEPRINT_NAMESPACE` environment variable.
+ */
+export function getClassNamespace() {
+    return NS;
+}
 
 /** Return CSS class for alignment. */
 export function alignmentClass(alignment: Alignment) {
@@ -258,7 +265,7 @@ export function elevationClass(elevation: Elevation) {
     if (elevation == null) {
         return undefined;
     }
-    return `pt-elevation-${elevation}`;
+    return `${NS}-elevation-${elevation}`;
 }
 
 /** Return CSS class for icon, whether or not 'pt-icon-' prefix is included */
@@ -266,7 +273,7 @@ export function iconClass(iconName?: string) {
     if (iconName == null) {
         return undefined;
     }
-    return iconName.indexOf("pt-icon-") === 0 ? iconName : `pt-icon-${iconName}`;
+    return iconName.indexOf(`${NS}-icon-`) === 0 ? iconName : `${NS}-icon-${iconName}`;
 }
 
 /** Return CSS class for intent. */
@@ -274,7 +281,5 @@ export function intentClass(intent = Intent.NONE) {
     if (intent == null || intent === Intent.NONE) {
         return undefined;
     }
-    return `pt-intent-${intent.toLowerCase()}`;
+    return `${NS}-intent-${intent.toLowerCase()}`;
 }
-
-// tslint:enable:blueprint-classes-constants
diff --git a/packages/core/src/components/alert/_alert.scss b/packages/core/src/components/alert/_alert.scss
index 9cd9a62139..8966c67391 100644
--- a/packages/core/src/components/alert/_alert.scss
+++ b/packages/core/src/components/alert/_alert.scss
@@ -3,27 +3,27 @@
 
 @import "../../common/variables";
 
-.pt-alert {
+.#{$ns}-alert {
   max-width: $pt-grid-size * 40;
   padding: $pt-grid-size * 2;
 }
 
-.pt-alert-body {
+.#{$ns}-alert-body {
   display: flex;
 
-  .pt-icon {
+  .#{$ns}-icon {
     margin-top: 0;
     margin-right: $pt-grid-size * 2;
     font-size: $pt-icon-size-large * 2;
   }
 }
 
-.pt-alert-footer {
+.#{$ns}-alert-footer {
   display: flex;
   flex-direction: row-reverse;
   margin-top: $pt-grid-size;
 
-  .pt-button {
+  .#{$ns}-button {
     margin-left: $pt-grid-size;
   }
 }
diff --git a/packages/core/src/components/breadcrumbs/_breadcrumbs.scss b/packages/core/src/components/breadcrumbs/_breadcrumbs.scss
index ea0a2c43b1..c78561e0bb 100644
--- a/packages/core/src/components/breadcrumbs/_breadcrumbs.scss
+++ b/packages/core/src/components/breadcrumbs/_breadcrumbs.scss
@@ -8,21 +8,21 @@
 Breadcrumbs
 
 Markup:
-<ul class="pt-breadcrumbs">
-  <li><a class="pt-breadcrumbs-collapsed" href="#"></a></li>
-  <li><a class="pt-breadcrumb pt-disabled">Folder one</a></li>
-  <li><a class="pt-breadcrumb" href="#">Folder two</a></li>
-  <li><a class="pt-breadcrumb" href="#">Folder three</a></li>
-  <li><span class="pt-breadcrumb pt-breadcrumb-current">File</span></li>
+<ul class="#{$ns}-breadcrumbs">
+  <li><a class="#{$ns}-breadcrumbs-collapsed" href="#"></a></li>
+  <li><a class="#{$ns}-breadcrumb #{$ns}-disabled">Folder one</a></li>
+  <li><a class="#{$ns}-breadcrumb" href="#">Folder two</a></li>
+  <li><a class="#{$ns}-breadcrumb" href="#">Folder three</a></li>
+  <li><span class="#{$ns}-breadcrumb #{$ns}-breadcrumb-current">File</span></li>
 </ul>
 
-Styleguide pt-breadcrumbs
+Styleguide breadcrumbs
 */
 
 // shaving off 1px for perfect centering (... icon is 5px high)
 $breadcrumb-line-height: $pt-icon-size-large - 1px !default;
 
-.pt-breadcrumbs {
+.#{$ns}-breadcrumbs {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -51,42 +51,42 @@ $breadcrumb-line-height: $pt-icon-size-large - 1px !default;
   }
 }
 
-.pt-breadcrumb,
-.pt-breadcrumb-current,
-.pt-breadcrumbs-collapsed {
+.#{$ns}-breadcrumb,
+.#{$ns}-breadcrumb-current,
+.#{$ns}-breadcrumbs-collapsed {
   display: inline-block;
   line-height: $breadcrumb-line-height;
   font-size: $pt-font-size-large;
 }
 
-.pt-breadcrumb,
-.pt-breadcrumbs-collapsed {
+.#{$ns}-breadcrumb,
+.#{$ns}-breadcrumbs-collapsed {
   color: $pt-text-color-muted;
 }
 
-.pt-breadcrumb {
+.#{$ns}-breadcrumb {
   &:hover {
     text-decoration: none;
   }
 
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     cursor: not-allowed;
     color: $pt-text-color-disabled;
   }
 }
 
-.pt-breadcrumb-current {
+.#{$ns}-breadcrumb-current {
   color: inherit;
   font-weight: 600;
 
-  .pt-input {
+  .#{$ns}-input {
     vertical-align: baseline;
     font-size: inherit;
     font-weight: inherit;
   }
 }
 
-.pt-breadcrumbs-collapsed {
+.#{$ns}-breadcrumbs-collapsed {
   margin-right: 2px;
   border: none;
   border-radius: $pt-border-radius;
@@ -107,25 +107,25 @@ $breadcrumb-line-height: $pt-icon-size-large - 1px !default;
   }
 }
 
-.pt-dark {
-  .pt-breadcrumb,
-  .pt-breadcrumbs-collapsed {
+.#{$ns}-dark {
+  .#{$ns}-breadcrumb,
+  .#{$ns}-breadcrumbs-collapsed {
     color: $pt-dark-text-color-muted;
   }
 
-  .pt-breadcrumbs > li::after {
+  .#{$ns}-breadcrumbs > li::after {
     color: $pt-dark-icon-color;
   }
 
-  .pt-breadcrumb.pt-disabled {
+  .#{$ns}-breadcrumb.#{$ns}-disabled {
     color: $pt-dark-text-color-disabled;
   }
 
-  .pt-breadcrumb-current {
+  .#{$ns}-breadcrumb-current {
     color: $pt-dark-text-color;
   }
 
-  .pt-breadcrumbs-collapsed {
+  .#{$ns}-breadcrumbs-collapsed {
     background: rgba($black, 0.4);
 
     &:hover {
diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.md b/packages/core/src/components/breadcrumbs/breadcrumbs.md
index 3fcc1845ca..954b3e44b0 100644
--- a/packages/core/src/components/breadcrumbs/breadcrumbs.md
+++ b/packages/core/src/components/breadcrumbs/breadcrumbs.md
@@ -4,29 +4,29 @@ Breadcrumbs identify the current resource in an application.
 
 @## CSS API
 
-* Begin with a `ul.pt-breadcrumbs`; each crumb should be in its own `li` as a direct descendant.
+* Begin with a `ul.@ns-breadcrumbs`; each crumb should be in its own `li` as a direct descendant.
 * Breadcrumbs are typically navigation links (for example, to the parent folder in a file path), and
 therefore should use `<a>` tags (except for the final breadcrumb).
-* Each navigation breadcrumb should use `.pt-breadcrumb`.
-* Make a breadcrumb non-interactive with the `.pt-disabled` class. You should only use this
+* Each navigation breadcrumb should use `.@ns-breadcrumb`.
+* Make a breadcrumb non-interactive with the `.@ns-disabled` class. You should only use this
 state when you want to indicate that the user cannot navigate to the breadcrumb (for example, if
 the user does not have permission to access it). Otherwise, clicking a breadcrumb should take the
 user to that resource.
-* Mark the final breadcrumb `.pt-breadcrumb-current` for an emphasized appearance.
-* The `.pt-breadcrumbs-collapsed` button-like element can be used as the target for a dropdown menu
+* Mark the final breadcrumb `.@ns-breadcrumb-current` for an emphasized appearance.
+* The `.@ns-breadcrumbs-collapsed` button-like element can be used as the target for a dropdown menu
 containing breadcrumbs that are collapsed due to layout constraints.
 * When adding another element (such as a [tooltip](#core/components/tooltip) or
 [popover](#core/components/popover)) to a breadcrumb, wrap it around the contents of the `li`.
 
-@css pt-breadcrumbs
+@css breadcrumbs
 
 @## JavaScript API
 
 The `Breadcrumb` component is available in the __@blueprintjs/core__ package.
 Make sure to review the [getting started docs for installation info](#blueprint/getting-started).
 
-The component renders an `a.pt-breadcrumb`. You are responsible for constructing
-the `ul.pt-breadcrumbs` list. [`CollapsibleList`](#core/components/collapsiblelist)
+The component renders an `a.@ns-breadcrumb`. You are responsible for constructing
+the `ul.@ns-breadcrumbs` list. [`CollapsibleList`](#core/components/collapsiblelist)
 works nicely with this component because its props are a subset of `IMenuItemProps`.
 
 @interface IBreadcrumbProps
diff --git a/packages/core/src/components/button/_button-group.scss b/packages/core/src/components/button/_button-group.scss
index c9ae5869a2..03d59802e7 100644
--- a/packages/core/src/components/button/_button-group.scss
+++ b/packages/core/src/components/button/_button-group.scss
@@ -9,41 +9,41 @@
 Button groups
 
 Markup:
-<div class="pt-button-group {{.modifier}}">
-  <a class="pt-button pt-icon-database" tabindex="0" role="button">Queries</a>
-  <a class="pt-button pt-icon-function" tabindex="0" role="button">Functions</a>
-  <a class="pt-button" tabindex="0" role="button">
-    Options <span class="pt-icon-standard pt-icon-caret-down pt-align-right"></span>
+<div class="#{$ns}-button-group {{.modifier}}">
+  <a class="#{$ns}-button #{$ns}-icon-database" tabindex="0" role="button">Queries</a>
+  <a class="#{$ns}-button #{$ns}-icon-function" tabindex="0" role="button">Functions</a>
+  <a class="#{$ns}-button" tabindex="0" role="button">
+    Options <span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
   </a>
 </div>
 <br /><br />
-<div class="pt-button-group {{.modifier}}">
-  <a class="pt-button pt-icon-chart" tabindex="0" role="button"></a>
-  <a class="pt-button pt-icon-control" tabindex="0" role="button"></a>
-  <a class="pt-button pt-icon-graph" tabindex="0" role="button"></a>
-  <a class="pt-button pt-icon-camera" tabindex="0" role="button"></a>
-  <a class="pt-button pt-icon-map" tabindex="0" role="button"></a>
-  <a class="pt-button pt-icon-code" tabindex="0" role="button"></a>
-  <a class="pt-button pt-icon-th" tabindex="0" role="button"></a>
-  <a class="pt-button pt-icon-time" tabindex="0" role="button"></a>
-  <a class="pt-button pt-icon-compressed" tabindex="0" role="button"></a>
+<div class="#{$ns}-button-group {{.modifier}}">
+  <a class="#{$ns}-button #{$ns}-icon-chart" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-control" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-graph" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-camera" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-map" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-code" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-th" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-time" tabindex="0" role="button"></a>
+  <a class="#{$ns}-button #{$ns}-icon-compressed" tabindex="0" role="button"></a>
 </div>
 <br /><br />
-<div class="pt-button-group {{.modifier}}">
-  <button type="button" class="pt-button pt-intent-success">Save</button>
-  <button type="button" class="pt-button pt-intent-success pt-icon-caret-down"></button>
+<div class="#{$ns}-button-group {{.modifier}}">
+  <button type="button" class="#{$ns}-button #{$ns}-intent-success">Save</button>
+  <button type="button" class="#{$ns}-button #{$ns}-intent-success #{$ns}-icon-caret-down"></button>
 </div>
 
-.pt-large - Use large buttons
-.pt-minimal - Use minimal buttons
+.#{$ns}-large - Use large buttons
+.#{$ns}-minimal - Use minimal buttons
 
-Styleguide pt-button-group
+Styleguide button-group
 */
 
-.pt-button-group {
+.#{$ns}-button-group {
   display: inline-flex;
 
-  .pt-button {
+  .#{$ns}-button {
     // ensure button can never be smaller than its default size
     flex: 0 0 auto;
     position: relative;
@@ -63,16 +63,16 @@ Styleguide pt-button-group
     }
 
     &:active,
-    &.pt-active {
+    &.#{$ns}-active {
       z-index: index($control-group-stack, "button-active");
     }
 
     &:disabled,
-    &.pt-disabled {
+    &.#{$ns}-disabled {
       z-index: index($control-group-stack, "button-disabled");
     }
 
-    &[class*="pt-intent-"] {
+    &[class*="#{$ns}-intent-"] {
       z-index: index($control-group-stack, "intent-button-default");
 
       &:focus {
@@ -84,35 +84,35 @@ Styleguide pt-button-group
       }
 
       &:active,
-      &.pt-active {
+      &.#{$ns}-active {
         z-index: index($control-group-stack, "intent-button-active");
       }
 
       &:disabled,
-      &.pt-disabled {
+      &.#{$ns}-disabled {
         z-index: index($control-group-stack, "intent-button-disabled");
       }
     }
   }
 
   // support wrapping buttons in a tooltip, which adds a wrapper element
-  &:not(.pt-minimal) {
-    > .pt-popover-wrapper:not(:first-child) .pt-popover-target .pt-button,
-    > .pt-button:not(:first-child) {
+  &:not(.#{$ns}-minimal) {
+    > .#{$ns}-popover-wrapper:not(:first-child) .#{$ns}-popover-target .#{$ns}-button,
+    > .#{$ns}-button:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
 
-    > .pt-popover-wrapper:not(:last-child) .pt-popover-target .pt-button,
-    > .pt-button:not(:last-child) {
+    > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-popover-target .#{$ns}-button,
+    > .#{$ns}-button:not(:last-child) {
       margin-right: -$button-border-width;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
 
-  &.pt-minimal {
-    .pt-button {
+  &.#{$ns}-minimal {
+    .#{$ns}-button {
       @include pt-button-minimal();
     }
   }
@@ -121,29 +121,29 @@ Styleguide pt-button-group
   Responsive
 
   Markup:
-  <div class="pt-button-group pt-large pt-fill">
-    <a class="pt-button pt-intent-primary pt-fixed" tabindex="0" role="button">Start</a>
-    <a class="pt-button pt-intent-primary" tabindex="0" role="button">Left</a>
-    <a class="pt-button pt-intent-primary pt-active" tabindex="0" role="button">Middle</a>
-    <a class="pt-button pt-intent-primary" tabindex="0" role="button">Right</a>
-    <a class="pt-button pt-intent-primary pt-fixed" tabindex="0" role="button">End</a>
+  <div class="#{$ns}-button-group #{$ns}-large #{$ns}-fill">
+    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-fixed" tabindex="0" role="button">Start</a>
+    <a class="#{$ns}-button #{$ns}-intent-primary" tabindex="0" role="button">Left</a>
+    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-active" tabindex="0" role="button">Middle</a>
+    <a class="#{$ns}-button #{$ns}-intent-primary" tabindex="0" role="button">Right</a>
+    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-fixed" tabindex="0" role="button">End</a>
   </div>
   <br />
-  <div class="pt-button-group pt-fill">
-    <button class="pt-button pt-icon-arrow-left"></button>
-    <button class="pt-button pt-fill">Middle</button>
-    <button class="pt-button pt-icon-arrow-right"></button>
+  <div class="#{$ns}-button-group #{$ns}-fill">
+    <button class="#{$ns}-button #{$ns}-icon-arrow-left"></button>
+    <button class="#{$ns}-button #{$ns}-fill">Middle</button>
+    <button class="#{$ns}-button #{$ns}-icon-arrow-right"></button>
   </div>
 
-  Styleguide pt-button-group.pt-fill
+  Styleguide button-group}-fill
   */
 
-  &.pt-fill {
+  &.#{$ns}-fill {
     display: flex;
   }
 
-  .pt-button.pt-fill,
-  &.pt-fill .pt-button:not(.pt-fixed) {
+  .#{$ns}-button.#{$ns}-fill,
+  &.#{$ns}-fill .#{$ns}-button:not(.#{$ns}-fixed) {
     flex: 1 1 auto;
   }
 
@@ -151,78 +151,78 @@ Styleguide pt-button-group
   Vertical button groups
 
   Markup:
-  <div class="pt-button-group pt-vertical">
-    <a class="pt-button pt-icon-search-template" role="button" tabindex="0"></a>
-    <a class="pt-button pt-icon-zoom-in" role="button" tabindex="0"></a>
-    <a class="pt-button pt-icon-zoom-out" role="button" tabindex="0"></a>
-    <a class="pt-button pt-icon-zoom-to-fit" role="button" tabindex="0"></a>
+  <div class="#{$ns}-button-group #{$ns}-vertical">
+    <a class="#{$ns}-button #{$ns}-icon-search-template" role="button" tabindex="0"></a>
+    <a class="#{$ns}-button #{$ns}-icon-zoom-in" role="button" tabindex="0"></a>
+    <a class="#{$ns}-button #{$ns}-icon-zoom-out" role="button" tabindex="0"></a>
+    <a class="#{$ns}-button #{$ns}-icon-zoom-to-fit" role="button" tabindex="0"></a>
   </div>
-  <div class="pt-button-group pt-vertical">
-    <button type="button" class="pt-button pt-active">Home</button>
-    <button type="button" class="pt-button">Pages</button>
-    <button type="button" class="pt-button">Blog</button>
-    <button type="button" class="pt-button">Calendar</button>
+  <div class="#{$ns}-button-group #{$ns}-vertical">
+    <button type="button" class="#{$ns}-button #{$ns}-active">Home</button>
+    <button type="button" class="#{$ns}-button">Pages</button>
+    <button type="button" class="#{$ns}-button">Blog</button>
+    <button type="button" class="#{$ns}-button">Calendar</button>
   </div>
-  <div class="pt-button-group pt-vertical pt-align-left pt-large">
-    <button type="button" class="pt-button pt-intent-primary pt-icon-document">Text</button>
-    <button type="button" class="pt-button pt-intent-primary pt-icon-media pt-active">Media</button>
-    <button type="button" class="pt-button pt-intent-primary pt-icon-link">Sources</button>
+  <div class="#{$ns}-button-group #{$ns}-vertical #{$ns}-align-left #{$ns}-large">
+    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-document">Text</button>
+    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-media #{$ns}-active">Media</button>
+    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-link">Sources</button>
   </div>
 
-  Styleguide pt-button-group.pt-vertical
+  Styleguide button-group-vertical
   */
 
-  &.pt-vertical {
+  &.#{$ns}-vertical {
     flex-direction: column;
     align-items: stretch;
     vertical-align: top;
 
-    .pt-button {
+    .#{$ns}-button {
       // we never want that margin-right when vertical
       margin-right: 0 !important; // stylelint-disable-line declaration-no-important
       // needed to ensure buttons take up the full width when wrapped in a Popover:
       width: 100%;
     }
 
-    &:not(.pt-minimal) {
-      > .pt-popover-wrapper:first-child .pt-popover-target .pt-button,
-      > .pt-button:first-child {
+    &:not(.#{$ns}-minimal) {
+      > .#{$ns}-popover-wrapper:first-child .#{$ns}-popover-target .#{$ns}-button,
+      > .#{$ns}-button:first-child {
         border-radius: $pt-border-radius $pt-border-radius 0 0;
       }
 
-      > .pt-popover-wrapper:last-child .pt-popover-target .pt-button,
-      > .pt-button:last-child {
+      > .#{$ns}-popover-wrapper:last-child .#{$ns}-popover-target .#{$ns}-button,
+      > .#{$ns}-button:last-child {
         border-radius: 0 0 $pt-border-radius $pt-border-radius;
       }
 
-      > .pt-popover-wrapper:not(:last-child) .pt-popover-target .pt-button,
-      > .pt-button:not(:last-child) {
+      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-popover-target .#{$ns}-button,
+      > .#{$ns}-button:not(:last-child) {
         margin-bottom: -$button-border-width;
       }
     }
   }
 
-  &.pt-align-left .pt-button {
+  &.#{$ns}-align-left .#{$ns}-button {
     text-align: left;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     // support wrapping buttons in a Blueprint.Tooltip, which adds a wrapper element
     // in dark theme, we adjust the spacing between buttons for best visual results
-    &:not(.pt-minimal) {
+    &:not(.#{$ns}-minimal) {
       // deeply nested selector necessary to target the appropriate popover
       // wrapper, yet ensure we only style buttons within the target.
       // stylelint-disable-next-line selector-max-compound-selectors
-      > .pt-popover-wrapper:not(:last-child) .pt-popover-target .pt-button,
-      > .pt-button:not(:last-child) {
+      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-popover-target .#{$ns}-button,
+      > .#{$ns}-button:not(:last-child) {
         margin-right: $button-border-width;
       }
     }
 
-    &.pt-vertical {
+    &.#{$ns}-vertical {
       // stylelint-disable-next-line selector-max-compound-selectors
-      > .pt-popover-wrapper:not(:last-child) .pt-popover-target .pt-button,
-      > .pt-button:not(:last-child) {
+      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-popover-target .#{$ns}-button,
+      > .#{$ns}-button:not(:last-child) {
         margin-bottom: $button-border-width;
       }
     }
diff --git a/packages/core/src/components/button/_button.scss b/packages/core/src/components/button/_button.scss
index 8db6f195bb..462c859180 100644
--- a/packages/core/src/components/button/_button.scss
+++ b/packages/core/src/components/button/_button.scss
@@ -8,23 +8,23 @@
 Button
 
 Markup:
-<a role="button" class="pt-button {{.modifier}}" {{:modifier}} tabindex="0">Anchor</a>
-<button type="button" class="pt-button pt-icon-add {{.modifier}}" {{:modifier}}>Button</button>
+<a role="button" class="#{$ns}-button {{.modifier}}" {{:modifier}} tabindex="0">Anchor</a>
+<button type="button" class="#{$ns}-button #{$ns}-icon-add {{.modifier}}" {{:modifier}}>Button</button>
 
 :disabled - Disabled state
-.pt-disabled - Disabled appearance
-.pt-intent-primary - Primary intent
-.pt-intent-success - Success intent
-.pt-intent-warning - Warning intent
-.pt-intent-danger - Danger intent
-.pt-active - Active appearance
-.pt-large - Larger size
-.pt-small - Smaller size
-.pt-fill - Fill parent container
-
-Styleguide pt-button
+.#{$ns}-disabled - Disabled appearance
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-success - Success intent
+.#{$ns}-intent-warning - Warning intent
+.#{$ns}-intent-danger - Danger intent
+.#{$ns}-active - Active appearance
+.#{$ns}-large - Larger size
+.#{$ns}-small - Smaller size
+.#{$ns}-fill - Fill parent container
+
+Styleguide button
 */
-.pt-button {
+.#{$ns}-button {
   @include pt-button-base();
   @include pt-button-height($pt-button-height);
 
@@ -33,50 +33,50 @@ Styleguide pt-button
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     cursor: not-allowed;
   }
 
-  &.pt-fill {
+  &.#{$ns}-fill {
     display: flex;
     width: 100%;
   }
 
   // default is `text-align: left` so we only need `right` case.
-  &.pt-align-right,
-  .pt-align-right & {
+  &.#{$ns}-align-right,
+  .#{$ns}-align-right & {
     text-align: right;
   }
 
-  &:not([class*="pt-intent-"]) {
+  &:not([class*="#{$ns}-intent-"]) {
     @include pt-button();
   }
 
   @each $intent, $colors in $button-intents {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       @include pt-button-intent($colors...);
     }
   }
 
-  &[class*="pt-intent-"] .pt-button-spinner .pt-spinner-head {
+  &[class*="#{$ns}-intent-"] .#{$ns}-button-spinner .#{$ns}-spinner-head {
     stroke: $white;
   }
 
-  &.pt-loading {
+  &.#{$ns}-loading {
     position: relative;
 
-    &[class*="pt-icon-"]::before {
+    &[class*="#{$ns}-icon-"]::before {
       visibility: hidden;
     }
 
-    .pt-button-spinner {
+    .#{$ns}-button-spinner {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
     }
 
-    > :not(.pt-button-spinner) {
+    > :not(.#{$ns}-button-spinner) {
       visibility: hidden;
     }
   }
@@ -85,40 +85,40 @@ Styleguide pt-button
   Buttons with icons
 
   Markup:
-  <button type="button" class="pt-button pt-icon-add">Default button</button>
-  <button type="button" class="pt-button pt-icon-refresh"></button>
-  <button type="button" class="pt-button pt-large pt-icon-add">Large button</button>
-  <button type="button" class="pt-button pt-large pt-icon-refresh"></button>
+  <button type="button" class="#{$ns}-button #{$ns}-icon-add">Default button</button>
+  <button type="button" class="#{$ns}-button #{$ns}-icon-refresh"></button>
+  <button type="button" class="#{$ns}-button #{$ns}-large #{$ns}-icon-add">Large button</button>
+  <button type="button" class="#{$ns}-button #{$ns}-large #{$ns}-icon-refresh"></button>
 
-  Styleguide pt-button.pt-icon
+  Styleguide button-icon
   */
 
   /*
   Advanced icon usage
 
   Markup:
-  <button type="button" class="pt-button pt-intent-success">
+  <button type="button" class="#{$ns}-button #{$ns}-intent-success">
     Next step
-    <span class="pt-icon-standard pt-icon-arrow-right pt-align-right"></span>
+    <span class="#{$ns}-icon-standard #{$ns}-icon-arrow-right #{$ns}-align-right"></span>
   </button>
-  <button type="button" class="pt-button">
-    <span class="pt-icon-standard pt-icon-user"></span>
+  <button type="button" class="#{$ns}-button">
+    <span class="#{$ns}-icon-standard #{$ns}-icon-user"></span>
     Profile settings
-    <span class="pt-icon-standard pt-icon-caret-down pt-align-right"></span>
+    <span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
   </button>
-  <button type="button" class="pt-button pt-intent-danger">
+  <button type="button" class="#{$ns}-button #{$ns}-intent-danger">
     Reset
-    <span class="pt-icon-standard pt-icon-refresh pt-align-right"></span>
+    <span class="#{$ns}-icon-standard #{$ns}-icon-refresh #{$ns}-align-right"></span>
   </button>
-  <button type="button" class="pt-button pt-large">
-    <span class="pt-icon-standard pt-icon-document"></span>
+  <button type="button" class="#{$ns}-button #{$ns}-large">
+    <span class="#{$ns}-icon-standard #{$ns}-icon-document"></span>
     upload.txt
-    <span class="pt-icon-standard pt-icon-cross pt-align-right"></span>
+    <span class="#{$ns}-icon-standard #{$ns}-icon-cross #{$ns}-align-right"></span>
   </button>
 
-  Styleguide pt-button.pt-icon-advanced
+  Styleguide button-icon-advanced
   */
-  &[class*="pt-icon-"] {
+  &[class*="#{$ns}-icon-"] {
     &::before {
       @include pt-icon();
       color: $pt-icon-color;
@@ -128,24 +128,24 @@ Styleguide pt-button
   #{$icon-classes} {
     color: $pt-icon-color;
 
-    &.pt-align-right {
+    &.#{$ns}-align-right {
       margin-left: $button-icon-spacing;
     }
   }
 
   // button with SVG icon only (no text or children)
-  .pt-icon:first-child:last-child,
+  .#{$ns}-icon:first-child:last-child,
   // if loading, then it contains exactly [spinner, icon]
-  .pt-spinner + .pt-icon:last-child {
+  .#{$ns}-spinner + .#{$ns}-icon:last-child {
     // center icon horizontally. this works for large buttons too.
     margin: 0 (-($pt-button-height - $pt-icon-size-standard) / 2);
   }
 
-  .pt-dark & {
-    &:not([class*="pt-intent-"]) {
+  .#{$ns}-dark & {
+    &:not([class*="#{$ns}-intent-"]) {
       @include pt-dark-button();
 
-      &[class*="pt-icon-"]::before {
+      &[class*="#{$ns}-icon-"]::before {
         color: $pt-dark-icon-color;
       }
 
@@ -154,18 +154,18 @@ Styleguide pt-button
       }
     }
 
-    &[class*="pt-intent-"] {
+    &[class*="#{$ns}-intent-"] {
       @include pt-dark-button-intent();
 
-      .pt-button-spinner .pt-spinner-head {
+      .#{$ns}-button-spinner .#{$ns}-spinner-head {
         stroke: $dark-progress-head-color;
       }
     }
   }
 
   &:disabled,
-  &.pt-disabled,
-  &[class*="pt-intent-"] {
+  &.#{$ns}-disabled,
+  &[class*="#{$ns}-intent-"] {
     // disabled and intent button icon should use same color as text
     // stylelint-disable declaration-no-important
     &::before {
@@ -182,34 +182,34 @@ Styleguide pt-button
   Minimal buttons
 
   Markup:
-  <a role="button" class="pt-button pt-minimal {{.modifier}}" {{:modifier}} tabindex="0">Anchor</a>
-  <button type="button" class="pt-button pt-minimal pt-icon-add {{.modifier}}" {{:modifier}}>Button</button>
+  <a role="button" class="#{$ns}-button #{$ns}-minimal {{.modifier}}" {{:modifier}} tabindex="0">Anchor</a>
+  <button type="button" class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-add {{.modifier}}" {{:modifier}}>Button</button>
 
-  .pt-disabled - Disabled appearance
-  .pt-intent-primary - Primary intent
-  .pt-intent-success - Success intent
-  .pt-intent-warning - Warning intent
-  .pt-intent-danger - Danger intent
+  .#{$ns}-disabled - Disabled appearance
+  .#{$ns}-intent-primary - Primary intent
+  .#{$ns}-intent-success - Success intent
+  .#{$ns}-intent-warning - Warning intent
+  .#{$ns}-intent-danger - Danger intent
 
-  Styleguide pt-button.pt-minimal
+  Styleguide button-minimal
   */
 
-  &.pt-minimal {
+  &.#{$ns}-minimal {
     @include pt-button-minimal();
   }
 
-  &.pt-large,
-  .pt-large & {
+  &.#{$ns}-large,
+  .#{$ns}-large & {
     @include pt-button-height-large();
   }
 
-  &.pt-small,
-  .pt-small & {
+  &.#{$ns}-small,
+  .#{$ns}-small & {
     @include pt-button-height-small();
   }
 }
 
-a.pt-button {
+a.#{$ns}-button {
   text-align: center;
   text-decoration: none;
   transition: none;
@@ -221,18 +221,18 @@ a.pt-button {
     color: $pt-text-color;
   }
 
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     color: $button-color-disabled;
   }
 }
 
-.pt-button-text {
+.#{$ns}-button-text {
   // default: don't grow to fill but allow shrinking as necessary
   flex: 0 1 auto;
 
-  // when alignment is set, grow to fill and inherit `text-align` set on `.pt-button`
-  .pt-align-left &,
-  .pt-align-right & {
+  // when alignment is set, grow to fill and inherit `text-align` set on `.#{$ns}-button`
+  .#{$ns}-align-left &,
+  .#{$ns}-align-right & {
     flex: 1 1 auto;
   }
 }
diff --git a/packages/core/src/components/button/_common.scss b/packages/core/src/components/button/_common.scss
index ea4e5bd8a1..1b267b3221 100644
--- a/packages/core/src/components/button/_common.scss
+++ b/packages/core/src/components/button/_common.scss
@@ -139,12 +139,12 @@ $button-intents: (
   }
 
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     @include pt-button-active();
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     @include pt-button-disabled();
   }
 }
@@ -169,8 +169,8 @@ $button-intents: (
   cursor: not-allowed;
   color: $button-color-disabled;
 
-  &.pt-active,
-  &.pt-active:hover {
+  &.#{$ns}-active,
+  &.#{$ns}-active:hover {
     background: $button-background-color-active-disabled;
   }
 }
@@ -183,7 +183,7 @@ $button-intents: (
 
   &:hover,
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     color: $white;
   }
 
@@ -193,14 +193,14 @@ $button-intents: (
   }
 
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     box-shadow: $button-intent-box-shadow-active;
     background-color: $active-color;
     background-image: none;
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     @include pt-button-intent-disabled($default-color);
   }
 }
@@ -221,7 +221,7 @@ $button-intents: (
 
   &:hover,
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     color: $pt-dark-text-color;
   }
 
@@ -230,16 +230,16 @@ $button-intents: (
   }
 
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     @include pt-dark-button-active();
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     @include pt-dark-button-disabled();
   }
 
-  .pt-button-spinner .pt-spinner-head {
+  .#{$ns}-button-spinner .#{$ns}-spinner-head {
     background: $dark-progress-track-color;
     stroke: $dark-progress-head-color;
   }
@@ -262,7 +262,7 @@ $button-intents: (
   background-image: none;
   color: $dark-button-color-disabled;
 
-  &.pt-active {
+  &.#{$ns}-active {
     background: $dark-button-background-color-active-disabled;
   }
 }
@@ -275,12 +275,12 @@ $button-intents: (
   }
 
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     box-shadow: $dark-button-intent-box-shadow-active;
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     @include pt-dark-button-intent-disabled();
   }
 }
@@ -303,7 +303,7 @@ $button-intents: (
   }
 
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     box-shadow: none;
     background: $minimal-button-background-color-active;
     color: $pt-text-color;
@@ -311,23 +311,23 @@ $button-intents: (
 
   &:disabled,
   &:disabled:hover,
-  &.pt-disabled,
-  &.pt-disabled:hover {
+  &.#{$ns}-disabled,
+  &.#{$ns}-disabled:hover {
     background: none;
     cursor: not-allowed;
     color: $pt-text-color-disabled;
 
-    &.pt-active {
+    &.#{$ns}-active {
       background: $minimal-button-background-color-active;
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include pt-dark-button-minimal();
   }
 
   @each $intent, $colors in $button-intents {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       @include pt-button-minimal-intent(
         map-get($pt-intent-colors, $intent),
         map-get($pt-intent-text-colors, $intent),
@@ -344,7 +344,7 @@ $button-intents: (
 
   &:hover,
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     box-shadow: none;
     background: none;
   }
@@ -354,20 +354,20 @@ $button-intents: (
   }
 
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     background: $dark-minimal-button-background-color-active;
     color: $pt-dark-text-color;
   }
 
   &:disabled,
   &:disabled:hover,
-  &.pt-disabled,
-  &.pt-disabled:hover {
+  &.#{$ns}-disabled,
+  &.#{$ns}-disabled:hover {
     background: none;
     cursor: not-allowed;
     color: $pt-dark-text-color-disabled;
 
-    &.pt-active {
+    &.#{$ns}-active {
       background: $dark-minimal-button-background-color-active;
     }
   }
@@ -378,7 +378,7 @@ $button-intents: (
 
   &:hover,
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     box-shadow: none;
     background: none;
     color: $text-color;
@@ -390,26 +390,26 @@ $button-intents: (
   }
 
   &:active,
-  &.pt-active {
+  &.#{$ns}-active {
     background: rgba($intent-color, 0.3);
     color: $text-color;
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     background: none;
     color: rgba($text-color, 0.5);
 
-    &.pt-active {
+    &.#{$ns}-active {
       background: rgba($intent-color, 0.3);
     }
   }
 
-  .pt-button-spinner .pt-spinner-head {
+  .#{$ns}-button-spinner .#{$ns}-spinner-head {
     stroke: $text-color;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $dark-text-color;
 
     &:hover {
@@ -418,17 +418,17 @@ $button-intents: (
     }
 
     &:active,
-    &.pt-active {
+    &.#{$ns}-active {
       background: rgba($intent-color, 0.3);
       color: $dark-text-color;
     }
 
     &:disabled,
-    &.pt-disabled {
+    &.#{$ns}-disabled {
       background: none;
       color: rgba($dark-text-color, 0.5);
 
-      &.pt-active {
+      &.#{$ns}-active {
         background: rgba($intent-color, 0.3);
       }
     }
@@ -442,7 +442,7 @@ $button-intents: (
   background: $pt-divider-black;
   width: $minimal-button-divider-width;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background: $pt-dark-divider-white;
   }
 }
diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
index 6b04dca265..c917adf25f 100644
--- a/packages/core/src/components/button/abstractButton.tsx
+++ b/packages/core/src/components/button/abstractButton.tsx
@@ -18,7 +18,7 @@ import { Spinner } from "../spinner/spinner";
 export interface IButtonProps extends IActionProps {
     /**
      * If set to `true`, the button will display in an active state.
-     * This is equivalent to setting `className="pt-active"`.
+     * This is equivalent to setting `className={Classes.ACTIVE}`.
      * @default false
      */
     active?: boolean;
diff --git a/packages/core/src/components/button/button-group.md b/packages/core/src/components/button/button-group.md
index 4161e3a5d9..5a7c4f41a6 100644
--- a/packages/core/src/components/button/button-group.md
+++ b/packages/core/src/components/button/button-group.md
@@ -4,37 +4,37 @@ Button groups arrange multiple buttons in a horizontal or vertical group.
 
 @## CSS API
 
-Arrange multiple buttons in a group by wrapping them in `.pt-button-group`.
+Arrange multiple buttons in a group by wrapping them in `.@ns-button-group`.
 You can apply sizing directly on the button group container element.
 
 You should implement interactive segmented controls as button groups.
 
-@css pt-button-group
+@css button-group
 
 @### Responsive button groups
 
-Add the class `pt-fill` to a button group to make all buttons expand equally to fill the
-available space. Then add the class `pt-fixed` to individual buttons to revert them to their
+Add the class `@ns-fill` to a button group to make all buttons expand equally to fill the
+available space. Then add the class `@ns-fixed` to individual buttons to revert them to their
 original default sizes.
 
-Alternatively, add the class `pt-fill` to an individual button (instead of to the container)
+Alternatively, add the class `@ns-fill` to an individual button (instead of to the container)
 to expand it to fill the available space while other buttons retain their original sizes.
 
 You can adjust the specific size of a button with the `flex-basis` CSS property.
 
-@css pt-button-group.pt-fill
+@css button-group-fill
 
 @### Vertical button groups
 
-Add the class `pt-vertical` to create a vertical button group. The buttons in a vertical
+Add the class `Classes.VERTICAL` to create a vertical button group. The buttons in a vertical
 group all have the same size as the widest button in the group.
 
-Add the modifier class `pt-align-left` (or `align={Alignment.LEFT}` in the React component) to
+Add the modifier class `Classes.ALIGN_LEFT` (or `align={Alignment.LEFT}` in the React component) to
 left-align button text and icon and right-align `rightIcon`.
 
-You can also combine vertical groups with the `pt-fill` and `pt-minimal` class modifiers.
+You can also combine vertical groups with the `Classes.FILL` and `Classes.MINIMAL` class modifiers.
 
-@css pt-button-group.pt-vertical
+@css button-group-vertical
 
 @## JavaScript API
 
@@ -74,8 +74,8 @@ It exposes shorthand props for CSS modifier classes and supports the full range
 
 @reactExample ButtonGroupPopoverExample
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    In vertical button groups, button content will be centered by default. You can align button content to the left or right using `pt-align-left` and `pt-align-right`, respectively.
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    In vertical button groups, button content will be centered by default. You can align button content to the left or right using `@ns-align-left` and `@ns-align-right`, respectively.
 </div>
 
 @interface IButtonGroupProps
diff --git a/packages/core/src/components/button/button.md b/packages/core/src/components/button/button.md
index e2153e0126..ddb6f979f7 100644
--- a/packages/core/src/components/button/button.md
+++ b/packages/core/src/components/button/button.md
@@ -4,7 +4,7 @@ Buttons trigger actions when clicked.
 
 @## CSS API
 
-Use the `pt-button` class to access button styles. You should implement buttons using the
+Use the `@ns-button` class to access button styles. You should implement buttons using the
 `<button>` or `<a>` tags rather than `<div>` for the purposes of HTML accessibility and semantics.
 
 * Make sure to include `type="button"` on `<button>` tags (use `type="submit"` when used in a
@@ -12,35 +12,35 @@ Use the `pt-button` class to access button styles. You should implement buttons
 * Add the attribute `tabindex="0"` to make `<a>` tags focusable. `<button>` elements are
   focusable by default.
 * For buttons implemented with `<a>` tags, add `tabindex="-1"` to disabled buttons to prevent the
-  user from focusing them by pressing <kbd class="pt-key">tab</kbd> on the keyboard.
-* Note that `<a>` tags do not respond to the `:disabled` attribute; use `.pt-disabled` instead.
+  user from focusing them by pressing <kbd class="@ns-key">tab</kbd> on the keyboard.
+* Note that `<a>` tags do not respond to the `:disabled` attribute; use `.@ns-disabled` instead.
 
-@css pt-button
+@css button
 
 @### Buttons with icons
 
-Add an icon before the button text with `pt-icon-*` classes.
+Add an icon before the button text with `@ns-icon-*` classes.
 You _do not_ need to include an icon sizing class.
 
-@css pt-button.pt-icon
+@css button-icon
 
 @### Advanced icon layout
 
-You can use a `pt-icon-*` class on a button to add a single icon before the button
+You can use a `@ns-icon-*` class on a button to add a single icon before the button
 text, but for more advanced icon layouts, use `<span>` tags inside the button.
 Add multiple icons to the same button, or move icons after the text.
 
-To adjust margins on right-aligned icons, add the class `pt-align-right` to the icon.
+To adjust margins on right-aligned icons, add the class `@ns-align-right` to the icon.
 
-@css pt-button.pt-icon-advanced
+@css button-icon-advanced
 
 @### Minimal buttons
 
-For a subtler button that appears to fade into the UI, add the `.pt-minimal` modifier
-to any `.pt-button`. `pt-minimal` is compatible with all other button modifiers,
-except for `.pt-fill` (due to lack of visual affordances).
+For a subtler button that appears to fade into the UI, add the `.@ns-minimal` modifier
+to any `.@ns-button`. `@ns-minimal` is compatible with all other button modifiers,
+except for `.@ns-fill` (due to lack of visual affordances).
 
-@css pt-button.pt-minimal
+@css button-minimal
 
 @## JavaScript API
 
@@ -55,12 +55,12 @@ provide a `className` prop, the class names you provide will be added alongside
 Blueprint class name. If you specify other attributes that the component provides, such as a `role`
 for an `<AnchorButton>`, you'll overide the default value.
 
-<div class="pt-callout pt-intent-danger pt-icon-error">
-    <h4 class="pt-callout-title">Interactions with disabled buttons</h4>
+<div class="@ns-callout @ns-intent-danger @ns-icon-error">
+    <h4 class="@ns-callout-title">Interactions with disabled buttons</h4>
     Use `AnchorButton` if you need mouse interaction events (such as hovering) on a disabled button.
     This is because `Button` and `AnchorButton` handle the `disabled` prop differently: `Button` uses
     the native `disabled` attribute on the `<button>` tag so the browser disables all interactions,
-    but `AnchorButton` uses the class `.pt-disabled` because `<a>` tags do not support the `disabled`
+    but `AnchorButton` uses the class `.@ns-disabled` because `<a>` tags do not support the `disabled`
     attribute. As a result, the `AnchorButton` component will prevent *only* the `onClick` handler
     when disabled but permit other events.
 </div>
@@ -72,7 +72,7 @@ for an `<AnchorButton>`, you'll overide the default value.
 ```jsx
 <AnchorButton text="Click" />
 // renders:
-<a class="pt-button" role="button" tabIndex={0}>Click</a>
+<a class="@ns-button" role="button" tabIndex={0}>Click</a>
 ```
 
 @### Button
@@ -80,7 +80,7 @@ for an `<AnchorButton>`, you'll overide the default value.
 ```jsx
 <Button icon="refresh" />
 // renders:
-<button class="pt-button pt-icon-refresh" type="button"></button>
+<button class="@ns-button @ns-icon-refresh" type="button"></button>
 ```
 
 @interface IButtonProps
diff --git a/packages/core/src/components/callout/_callout.scss b/packages/core/src/components/callout/_callout.scss
index 034e56798c..98ffb1004d 100644
--- a/packages/core/src/components/callout/_callout.scss
+++ b/packages/core/src/components/callout/_callout.scss
@@ -7,21 +7,21 @@
 Callout
 
 Markup:
-<div class="pt-callout {{.modifier}}">
-  <h4 class="pt-callout-title">Callout Heading</h4>
+<div class="#{$ns}-callout {{.modifier}}">
+  <h4 class="#{$ns}-callout-title">Callout Heading</h4>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, delectus!
 </div>
 
-.pt-intent-primary - Primary intent
-.pt-intent-success - Success intent
-.pt-intent-warning - Warning intent
-.pt-intent-danger  - Danger intent
-.pt-icon-info-sign - With an icon
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-success - Success intent
+.#{$ns}-intent-warning - Warning intent
+.#{$ns}-intent-danger  - Danger intent
+.#{$ns}-icon-info-sign - With an icon
 
-Styleguide pt-callout
+Styleguide callout
 */
 
-.pt-callout {
+.#{$ns}-callout {
   @include running-typography-small();
   position: relative;
   border-radius: $pt-border-radius;
@@ -30,7 +30,7 @@ Styleguide pt-callout
   padding: $pt-grid-size ($pt-grid-size * 1.2) ($pt-grid-size * 0.9);
 
   // CSS API support
-  &[class*="pt-icon-"] {
+  &[class*="#{$ns}-icon-"] {
     padding-left: ($pt-grid-size * 2) + $pt-icon-size-large;
 
     &::before {
@@ -42,10 +42,10 @@ Styleguide pt-callout
     }
   }
 
-  &.pt-callout-icon {
+  &.#{$ns}-callout-icon {
     padding-left: ($pt-grid-size * 2) + $pt-icon-size-large;
 
-    .pt-icon {
+    .#{$ns}-icon {
       position: absolute;
       top: $pt-grid-size;
       left: $pt-grid-size;
@@ -53,43 +53,43 @@ Styleguide pt-callout
     }
   }
 
-  .pt-callout-title {
+  .#{$ns}-callout-title {
     margin-top: 0;
     margin-bottom: $pt-grid-size / 2;
     line-height: $pt-icon-size-large;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background-color: rgba($gray3, 0.2);
 
-    &[class*="pt-icon-"]::before {
+    &[class*="#{$ns}-icon-"]::before {
       color: $pt-dark-icon-color;
     }
   }
 
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       background-color: rgba($color, 0.15);
 
-      &[class*="pt-icon-"]::before,
-      .pt-icon,
-      .pt-callout-title {
+      &[class*="#{$ns}-icon-"]::before,
+      .#{$ns}-icon,
+      .#{$ns}-callout-title {
         color: map-get($pt-intent-text-colors, $intent);
       }
 
-      .pt-dark & {
+      .#{$ns}-dark & {
         background-color: rgba($color, 0.25);
 
-        &[class*="pt-icon-"]::before,
-        .pt-callout-icon,
-        .pt-callout-title {
+        &[class*="#{$ns}-icon-"]::before,
+        .#{$ns}-callout-icon,
+        .#{$ns}-callout-title {
           color: map-get($pt-dark-intent-text-colors, $intent);
         }
       }
     }
   }
 
-  .pt-running-text & {
+  .#{$ns}-running-text & {
     margin: ($pt-grid-size * 2) 0;
   }
 }
diff --git a/packages/core/src/components/callout/callout.md b/packages/core/src/components/callout/callout.md
index 86478cb0d0..f4b1734a8c 100644
--- a/packages/core/src/components/callout/callout.md
+++ b/packages/core/src/components/callout/callout.md
@@ -7,13 +7,13 @@ Callouts visually highlight important content for the user.
 @## CSS API
 
 Callouts use the same visual intent modifier classes as buttons. If you need a
-heading, use the `<h4>` element with a `.pt-callout-title` class.
+heading, use the `<h4>` element with a `.@ns-callout-title` class.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Note that the title is entirely optional.
 </div>
 
-@css pt-callout
+@css callout
 
 @## JavaScript API
 
@@ -26,7 +26,7 @@ useful features:
 
 1. Providing an `intent` will set use a default icon per intent, which can be overridden by supplying
    your own `icon`.
-1. The React component renders an SVG `Icon` element for the `icon` prop, instead of the `.pt-icon-*`
+1. The React component renders an SVG `Icon` element for the `icon` prop, instead of the `.@ns-icon-*`
    CSS class.
 
 @interface ICalloutProps
diff --git a/packages/core/src/components/callout/callout.tsx b/packages/core/src/components/callout/callout.tsx
index 2c77c03d90..3d832b574a 100644
--- a/packages/core/src/components/callout/callout.tsx
+++ b/packages/core/src/components/callout/callout.tsx
@@ -24,8 +24,9 @@ export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
     /**
      * String content of optional title element.
      *
-     * Due to a conflict with the HTML prop types, to provide JSX content simply pass
-     * `<h4 className="pt-callout-title">JSX title content<h4>` as first `children` element instead of using this prop.
+     * Due to a conflict with the HTML prop types, to provide JSX content simply
+     * pass `<h4 className={Classes.CALLOUT_TITLE}>JSX title content<h4>` as
+     * first `children` element instead of using this prop.
      */
     title?: string;
 }
diff --git a/packages/core/src/components/card/_card.scss b/packages/core/src/components/card/_card.scss
index 6f06dc4849..9cd0d40f6e 100644
--- a/packages/core/src/components/card/_card.scss
+++ b/packages/core/src/components/card/_card.scss
@@ -7,17 +7,17 @@
 Cards
 
 Markup:
-<div class="pt-card {{.modifier}}">
+<div class="#{$ns}-card {{.modifier}}">
   We build products that make people better at their most important work.
 </div>
 
-.pt-elevation-0 - Ground floor. This level provides just a gentle border shadow.
-.pt-elevation-1 - First. Subtle drop shadow intended for static containers.
-.pt-elevation-2 - Second. An even stronger shadow, moving on up.
-.pt-elevation-3 - Third. For containers overlaying content temporarily.
-.pt-elevation-4 - Fourth. The strongest shadow, usually for overlay containers on top of backdrops.
+.#{$ns}-elevation-0 - Ground floor. This level provides just a gentle border shadow.
+.#{$ns}-elevation-1 - First. Subtle drop shadow intended for static containers.
+.#{$ns}-elevation-2 - Second. An even stronger shadow, moving on up.
+.#{$ns}-elevation-3 - Third. For containers overlaying content temporarily.
+.#{$ns}-elevation-4 - Fourth. The strongest shadow, usually for overlay containers on top of backdrops.
 
-Styleguide pt-card
+Styleguide card
 */
 
 $card-padding: $pt-grid-size * 2 !default;
@@ -40,7 +40,7 @@ $dark-elevation-shadows: (
   $pt-dark-elevation-shadow-4
 );
 
-.pt-card {
+.#{$ns}-card {
   border-radius: $pt-border-radius;
   box-shadow: $pt-elevation-shadow-0;
   background-color: $card-background-color;
@@ -48,19 +48,19 @@ $dark-elevation-shadows: (
   transition: transform ($pt-transition-duration * 2) $pt-transition-ease,
               box-shadow ($pt-transition-duration * 2) $pt-transition-ease;
 
-  &.pt-dark,
-  .pt-dark & {
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
     box-shadow: $pt-dark-elevation-shadow-0;
     background-color: $dark-card-background-color;
   }
 }
 
 @for $index from 1 through length($elevation-shadows) {
-  .pt-elevation-#{$index - 1} {
+  .#{$ns}-elevation-#{$index - 1} {
     box-shadow: nth($elevation-shadows, $index);
 
-    &.pt-dark,
-    .pt-dark & {
+    &.#{$ns}-dark,
+    .#{$ns}-dark & {
       box-shadow: nth($dark-elevation-shadows, $index);
     }
   }
@@ -71,30 +71,30 @@ Interactive cards
 
 Markup:
 <div class="docs-card-example">
-  <div class="pt-card pt-elevation-0 pt-interactive">
+  <div class="#{$ns}-card #{$ns}-elevation-0 #{$ns}-interactive">
     <h5><a href="#">Data fusion platforms</a></h5>
     <p>Back-end infrastructure for integrating, managing, and securing data of any kind, from any source, at massive scale.</p>
   </div>
-  <div class="pt-card pt-elevation-1 pt-interactive">
+  <div class="#{$ns}-card #{$ns}-elevation-1 #{$ns}-interactive">
     <h5><a href="#">Analytical applications</a></h5>
     <p>User interfaces that enable people to interact smoothly with data, ask better questions, and make better decisions.</p>
   </div>
-  <div class="pt-card pt-elevation-2 pt-interactive">
+  <div class="#{$ns}-card #{$ns}-elevation-2 #{$ns}-interactive">
     <h5><a href="#">For any data problem</a></h5>
     <p>Proven technology that can be deployed today, adapts to any domain, and produces operational results in weeks.</p>
   </div>
 </div>
 
-Styleguide pt-card.pt-interactive
+Styleguide card-interactive
 */
 
-.pt-card.pt-interactive {
+.#{$ns}-card.#{$ns}-interactive {
   &:hover {
     box-shadow: $pt-elevation-shadow-3;
     cursor: pointer;
 
-    &.pt-dark,
-    .pt-dark & {
+    &.#{$ns}-dark,
+    .#{$ns}-dark & {
       box-shadow: $pt-dark-elevation-shadow-3;
     }
   }
@@ -104,8 +104,8 @@ Styleguide pt-card.pt-interactive
     box-shadow: $pt-elevation-shadow-1;
     transition-duration: 0;
 
-    &.pt-dark,
-    .pt-dark & {
+    &.#{$ns}-dark,
+    .#{$ns}-dark & {
       box-shadow: $pt-dark-elevation-shadow-1;
     }
   }
diff --git a/packages/core/src/components/card/card.md b/packages/core/src/components/card/card.md
index 8e81acdfb7..bb22a20a43 100644
--- a/packages/core/src/components/card/card.md
+++ b/packages/core/src/components/card/card.md
@@ -4,23 +4,23 @@ A card is a bounded unit of UI content with a solid background color.
 
 @## CSS API
 
-Start with `.pt-card` and add an elevation modifier class to apply a drop shadow that simulates
+Start with `.@ns-card` and add an elevation modifier class to apply a drop shadow that simulates
 height in the UI.
 
-You can also use the `.pt-elevation-*` classes by themselves to apply shadows to any arbitrary
+You can also use the `.@ns-elevation-*` classes by themselves to apply shadows to any arbitrary
 element.
 
-@css pt-card
+@css card
 
 @### Interactive cards
 
-Add the `.pt-interactive` modifier class to make a `.pt-card` respond to user interactions. When you
+Add the `.@ns-interactive` modifier class to make a `.@ns-card` respond to user interactions. When you
 hover over cards with this class applied, the mouse changes to a pointer and the elevation shadow on
 the card increases by two levels.
 
 Users expect an interactive card to be a single clickable unit.
 
-@css pt-card.pt-interactive
+@css card-interactive
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/collapse/_collapse.scss b/packages/core/src/components/collapse/_collapse.scss
index 0f56cac51b..ab1fc83683 100644
--- a/packages/core/src/components/collapse/_collapse.scss
+++ b/packages/core/src/components/collapse/_collapse.scss
@@ -5,12 +5,12 @@
 
 $collapse-transition: ($pt-transition-duration * 2) $pt-transition-ease !default;
 
-.pt-collapse {
+.#{$ns}-collapse {
   height: 0;
   overflow-y: hidden;
   transition: height $collapse-transition;
 
-  .pt-collapse-body {
+  .#{$ns}-collapse-body {
     transition: transform $collapse-transition;
 
     &[aria-hidden="true"] {
diff --git a/packages/core/src/components/context-menu/_context-menu.scss b/packages/core/src/components/context-menu/_context-menu.scss
index 58653b3597..22ca60ab1a 100644
--- a/packages/core/src/components/context-menu/_context-menu.scss
+++ b/packages/core/src/components/context-menu/_context-menu.scss
@@ -1,10 +1,10 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-.pt-context-menu .pt-popover-target {
+.#{$ns}-context-menu .#{$ns}-popover-target {
   display: block;
 }
 
-.pt-context-menu-popover-target {
+.#{$ns}-context-menu-popover-target {
   position: fixed;
 }
diff --git a/packages/core/src/components/dialog/_dialog.scss b/packages/core/src/components/dialog/_dialog.scss
index 33f5846715..1358eaa28f 100644
--- a/packages/core/src/components/dialog/_dialog.scss
+++ b/packages/core/src/components/dialog/_dialog.scss
@@ -10,47 +10,47 @@
 Dialog
 
 Markup:
-<!-- this container element fills its parent and centers the .pt-dialog within it -->
-<div class="pt-dialog-container">
-  <div class="pt-dialog">
-    <div class="pt-dialog-header">
-      <span class="pt-icon-large pt-icon-inbox"></span>
-      <h4 class="pt-dialog-header-title">Dialog header</h4>
-      <button aria-label="Close" class="pt-dialog-close-button pt-icon-small-cross"></button>
+<!-- this container element fills its parent and centers the .#{$ns}-dialog within it -->
+<div class="#{$ns}-dialog-container">
+  <div class="#{$ns}-dialog">
+    <div class="#{$ns}-dialog-header">
+      <span class="#{$ns}-icon-large #{$ns}-icon-inbox"></span>
+      <h4 class="#{$ns}-dialog-header-title">Dialog header</h4>
+      <button aria-label="Close" class="#{$ns}-dialog-close-button #{$ns}-icon-small-cross"></button>
     </div>
-    <div class="pt-dialog-body">
+    <div class="#{$ns}-dialog-body">
       This dialog hasn't been wired up with any open or close interactions.
       It's just an example of markup and styles.
     </div>
-    <div class="pt-dialog-footer">
-      <div class="pt-dialog-footer-actions">
-        <button type="button" class="pt-button">Secondary button</button>
-        <button type="submit" class="pt-button pt-intent-primary">Primary button</button>
+    <div class="#{$ns}-dialog-footer">
+      <div class="#{$ns}-dialog-footer-actions">
+        <button type="button" class="#{$ns}-button">Secondary button</button>
+        <button type="submit" class="#{$ns}-button #{$ns}-intent-primary">Primary button</button>
       </div>
     </div>
   </div>
 </div>
 
-Styleguide pt-dialog
+Styleguide dialog
 */
 
 $dialog-border-radius: $pt-border-radius * 2 !default;
 $dialog-margin: ($pt-grid-size * 3) 0 !default;
 $dialog-padding: $pt-grid-size * 2 !default;
 
-.pt-dialog-container {
+.#{$ns}-dialog-container {
   $dialog-transition-props: (
     opacity: (0, 1),
     transform: (scale(0.5), scale(1))
   );
 
   @include react-transition(
-    "pt-overlay",
+    "#{$ns}-overlay",
     $dialog-transition-props,
     $duration: $pt-transition-duration * 3,
     $easing: $pt-transition-ease-bounce,
     $before: "&",
-    $after: "> .pt-dialog"
+    $after: "> .#{$ns}-dialog"
   );
   display: flex;
   align-items: center;
@@ -60,14 +60,14 @@ $dialog-padding: $pt-grid-size * 2 !default;
   user-select: none;
 
   // LEGACY: override old (<= 1.24.0) dialog styles when inside a container to respect flex layout
-  .pt-dialog {
+  .#{$ns}-dialog {
     // stylelint-disable-next-line declaration-no-important
     position: static !important;
     transform: none;
   }
 }
 
-.pt-dialog {
+.#{$ns}-dialog {
   display: flex;
   flex-direction: column;
   margin: $dialog-margin;
@@ -82,15 +82,15 @@ $dialog-padding: $pt-grid-size * 2 !default;
     outline: 0;
   }
 
-  &.pt-dark,
-  .pt-dark & {
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
     box-shadow: $pt-dark-dialog-box-shadow;
     background: $pt-dark-app-background-color;
     color: $pt-dark-text-color;
   }
 }
 
-.pt-dialog-header {
+.#{$ns}-dialog-header {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
@@ -100,14 +100,14 @@ $dialog-padding: $pt-grid-size * 2 !default;
   min-height: $pt-icon-size-large + $dialog-padding;
   padding-left: $dialog-padding;
 
-  .pt-icon-large,
-  .pt-icon {
+  .#{$ns}-icon-large,
+  .#{$ns}-icon {
     flex: 0 0 auto;
     margin-right: $dialog-padding / 2;
     color: $pt-icon-color;
   }
 
-  .pt-dialog-header-title {
+  .#{$ns}-dialog-header-title {
     @include overflow-ellipsis();
     flex: 1 1 auto;
     margin: 0;
@@ -118,22 +118,22 @@ $dialog-padding: $pt-grid-size * 2 !default;
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: 0 1px 0 $pt-dark-divider-black;
     background: $dark-gray4;
 
-    .pt-icon-large,
-    .pt-icon {
+    .#{$ns}-icon-large,
+    .#{$ns}-icon {
       color: $pt-dark-icon-color;
     }
 
-    .pt-dialog-header-title {
+    .#{$ns}-dialog-header-title {
       color: $pt-dark-heading-color;
     }
   }
 }
 
-.pt-dialog-close-button {
+.#{$ns}-dialog-close-button {
   // large icon with interactive colors
   @include pt-icon($pt-icon-size-large);
   @include pt-icon-colors();
@@ -146,28 +146,28 @@ $dialog-padding: $pt-grid-size * 2 !default;
   cursor: pointer;
   padding: $pt-grid-size;
 
-  .pt-icon-large,
-  .pt-icon {
+  .#{$ns}-icon-large,
+  .#{$ns}-icon {
     margin: 0;
   }
 }
 
-.pt-dialog-body {
+.#{$ns}-dialog-body {
   flex: 1 1 auto;
   margin: $dialog-padding;
   line-height: $pt-grid-size * 1.8;
 }
 
-.pt-dialog-footer {
+.#{$ns}-dialog-footer {
   flex: 0 0 auto;
   margin: 0 $dialog-padding;
 }
 
-.pt-dialog-footer-actions {
+.#{$ns}-dialog-footer-actions {
   display: flex;
   justify-content: flex-end;
 
-  .pt-button {
+  .#{$ns}-button {
     margin-left: $pt-grid-size;
   }
 }
diff --git a/packages/core/src/components/dialog/dialog.md b/packages/core/src/components/dialog/dialog.md
index 9c361a0fcb..7bb7a3ddd1 100644
--- a/packages/core/src/components/dialog/dialog.md
+++ b/packages/core/src/components/dialog/dialog.md
@@ -2,8 +2,8 @@
 
 Dialogs present content overlaid over other parts of the UI.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Terminology note</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Terminology note</h4>
     The term "modal" is sometimes used to mean "dialog," but this is a misnomer.
     _Modal_ is an adjective that describes parts of a UI.
     An element is considered modal if it
@@ -25,7 +25,7 @@ There are two ways to render dialogs:
 * in-place in the DOM tree. Set `usePortal={false}` to enable this behavior.
 
 `Dialog` is a stateless React component. The children you provide to this component
-are rendered as contents inside the `.pt-dialog` element.
+are rendered as contents inside the `.@ns-dialog` element.
 
 ```tsx
 interface IDialogExampleState {
@@ -45,9 +45,9 @@ class DialogExample extends React.Component<{}, IDialogExampleState> {
                     onClose={this.toggleDialog}
                     title="Dialog header"
                 >
-                    <div className="pt-dialog-body">Some content</div>
-                    <div className="pt-dialog-footer">
-                        <div className="pt-dialog-footer-actions">
+                    <div className="@ns-dialog-body">Some content</div>
+                    <div className="@ns-dialog-footer">
+                        <div className="@ns-dialog-footer-actions">
                             <Button text="Secondary" />
                             <Button
                                 intent={Intent.PRIMARY}
@@ -69,10 +69,10 @@ class DialogExample extends React.Component<{}, IDialogExampleState> {
 
 @## CSS API
 
-You can create dialogs manually using the HTML markup and `pt-dialog-*` classes below.
+You can create dialogs manually using the HTML markup and `@ns-dialog-*` classes below.
 However, you should use the dialog [JavaScript APIs](#core/components/dialog.javascript-api) whenever possible,
 as they automatically generate some of this markup.
 
 More examples of dialog content are shown below.
 
-@css pt-dialog
+@css dialog
diff --git a/packages/core/src/components/dialog/dialog.tsx b/packages/core/src/components/dialog/dialog.tsx
index 2d7893ff8d..10d1bfc2e3 100644
--- a/packages/core/src/components/dialog/dialog.tsx
+++ b/packages/core/src/components/dialog/dialog.tsx
@@ -29,8 +29,9 @@ export interface IDialogProps extends IOverlayableProps, IBackdropProps, IProps
     hasBackdrop?: boolean;
 
     /**
-     * Name of a Blueprint UI icon (or an icon element) to render in the dialog's header.
-     * Note that the header will only be rendered if `title` is provided.
+     * Name of a Blueprint UI icon (or an icon element) to render in the
+     * dialog's header. Note that the header will only be rendered if `title` is
+     * provided.
      */
     icon?: IconName | JSX.Element;
 
@@ -48,15 +49,14 @@ export interface IDialogProps extends IOverlayableProps, IBackdropProps, IProps
     style?: React.CSSProperties;
 
     /**
-     * Title of the dialog.
-     * If provided, a `.pt-dialog-header` element will be rendered inside the dialog
-     * before any children elements.
+     * Title of the dialog. If provided, an element with `Classes.DIALOG_HEADER`
+     * will be rendered inside the dialog before any children elements.
      */
     title?: React.ReactNode;
 
     /**
-     * Name of the transition for internal `CSSTransition`.
-     * Providing your own name here will require defining new CSS transition properties.
+     * Name of the transition for internal `CSSTransition`. Providing your own
+     * name here will require defining new CSS transition properties.
      */
     transitionName?: string;
 }
diff --git a/packages/core/src/components/editable-text/_editable-text.scss b/packages/core/src/components/editable-text/_editable-text.scss
index 3e15e9dbdd..0a69f206fc 100644
--- a/packages/core/src/components/editable-text/_editable-text.scss
+++ b/packages/core/src/components/editable-text/_editable-text.scss
@@ -4,7 +4,7 @@
 @import "../../common/variables";
 @import "../forms/common";
 
-.pt-editable-text {
+.#{$ns}-editable-text {
   display: inline-block;
   position: relative;
   cursor: text;
@@ -26,19 +26,19 @@
                 inset 0 0 0 1px $pt-divider-black;
   }
 
-  &.pt-editable-editing::before {
+  &.#{$ns}-editable-editing::before {
     box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
     background-color: $input-background-color;
   }
 
-  &.pt-disabled::before {
+  &.#{$ns}-disabled::before {
     box-shadow: none;
   }
 
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
-      .pt-editable-input,
-      .pt-editable-content {
+    &.#{$ns}-intent-#{$intent} {
+      .#{$ns}-editable-input,
+      .#{$ns}-editable-content {
         color: $color;
       }
 
@@ -46,31 +46,31 @@
         box-shadow: input-transition-shadow($color), inset border-shadow(0.4, $color, 1px);
       }
 
-      &.pt-editable-editing::before {
+      &.#{$ns}-editable-editing::before {
         box-shadow: input-transition-shadow($color, true), $input-box-shadow-focus;
       }
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     &:hover::before {
       box-shadow: input-transition-shadow($dark-input-shadow-color-focus),
                   inset 0 0 0 1px $pt-dark-divider-white;
     }
 
-    &.pt-editable-editing::before {
+    &.#{$ns}-editable-editing::before {
       box-shadow: input-transition-shadow($dark-input-shadow-color-focus, true),
                   $pt-dark-input-box-shadow;
       background-color: $dark-input-background-color;
     }
 
-    &.pt-disabled::before {
+    &.#{$ns}-disabled::before {
       box-shadow: none;
     }
 
     @each $intent, $color in $pt-dark-intent-text-colors {
-      &.pt-intent-#{$intent} {
-        .pt-editable-content {
+      &.#{$ns}-intent-#{$intent} {
+        .#{$ns}-editable-content {
           color: $color;
         }
 
@@ -78,7 +78,7 @@
           box-shadow: input-transition-shadow($color), inset border-shadow(0.4, $color, 1px);
         }
 
-        &.pt-editable-editing::before {
+        &.#{$ns}-editable-editing::before {
           box-shadow: input-transition-shadow($color, true), $pt-dark-input-box-shadow;
         }
       }
@@ -86,8 +86,8 @@
   }
 }
 
-.pt-editable-input,
-.pt-editable-content {
+.#{$ns}-editable-input,
+.#{$ns}-editable-content {
   display: inherit;
   position: relative;
   // inherit and respect parent bounds and text styles
@@ -102,7 +102,7 @@
   resize: none;
 }
 
-.pt-editable-input {
+.#{$ns}-editable-input {
   // reset browser input styles (we're using an input solely because you can type in it)
   border: none;
   box-shadow: none;
@@ -121,7 +121,7 @@
   }
 }
 
-.pt-editable-content {
+.#{$ns}-editable-content {
   overflow: hidden;
   // magical number to account for slight increase in input width for cursor bar
   padding-right: 2px;
@@ -129,25 +129,25 @@
   // preserve so trailing whitespace is included in scrollWidth
   white-space: pre;
 
-  .pt-editable-editing > & {
+  .#{$ns}-editable-editing > & {
     position: absolute;
     left: 0;
     visibility: hidden;
   }
 
-  .pt-editable-placeholder > & {
+  .#{$ns}-editable-placeholder > & {
     color: $input-placeholder-color;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       color: $dark-input-placeholder-color;
     }
   }
 }
 
-.pt-editable-text.pt-multiline {
+.#{$ns}-editable-text.#{$ns}-multiline {
   display: block;
 
-  .pt-editable-content {
+  .#{$ns}-editable-content {
     overflow: auto;
     white-space: pre-wrap;
     word-wrap: break-word;
diff --git a/packages/core/src/components/editable-text/editable-text.md b/packages/core/src/components/editable-text/editable-text.md
index fa91c195f9..5698f51ba4 100644
--- a/packages/core/src/components/editable-text/editable-text.md
+++ b/packages/core/src/components/editable-text/editable-text.md
@@ -11,8 +11,8 @@ You might use this component for inline renaming, or for an
 You should not use `EditableText` when a static always-editable `<input>` or
 `<textarea>` tag would suffice.
 
-<div class="pt-callout pt-intent-danger pt-icon-error">
-    <h4 class="pt-callout-title">Centering the component</h4>
+<div class="@ns-callout @ns-intent-danger @ns-icon-error">
+    <h4 class="@ns-callout-title">Centering the component</h4>
     **Do not center this component** using `text-align: center`, as it will cause an infinite loop
     in the browser ([more details](https://github.com/JedWatson/react-select/issues/540)). Instead,
     you should center the component via flexbox or with `position` and `transform: translateX(-50%)`.
@@ -55,8 +55,8 @@ Additionally, in multiline mode the component's width is fixed at 100%. It grows
 _vertically_ instead, based on the number of lines of text. You can use the `minLines` and
 `maxLines` props to constrain the vertical size of the component.
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Multiline prop format</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Multiline prop format</h4>
     You should declare `multiline` as a valueless boolean prop, as in the example above
     (`<EditableText multiline ...>`). This prevents you from changing the value after declaring it,
     which would provide a sub-optimal experience for users (multiline text does not always render
diff --git a/packages/core/src/components/forms/_common.scss b/packages/core/src/components/forms/_common.scss
index 49e61eb43c..30297a50b6 100644
--- a/packages/core/src/components/forms/_common.scss
+++ b/packages/core/src/components/forms/_common.scss
@@ -97,12 +97,12 @@ $control-group-stack: (
   appearance: none;
 
   &:focus,
-  &.pt-active {
+  &.#{$ns}-active {
     box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
   }
 
   &[type="search"],
-  &.pt-round {
+  &.#{$ns}-round {
     border-radius: $pt-input-height;
     // override normalize.css
     box-sizing: border-box;
@@ -114,7 +114,7 @@ $control-group-stack: (
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     @include pt-input-disabled();
   }
 }
@@ -141,7 +141,7 @@ $control-group-stack: (
   font-size: $pt-font-size-large;
 
   &[type="search"],
-  &.pt-round {
+  &.#{$ns}-round {
     padding: 0 $input-padding-horizontal * 1.5;
   }
 }
@@ -176,7 +176,7 @@ $control-group-stack: (
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     @include pt-dark-input-disabled();
   }
 }
@@ -196,7 +196,7 @@ $control-group-stack: (
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     box-shadow: none;
   }
 }
@@ -216,7 +216,7 @@ $control-group-stack: (
   }
 
   &:disabled,
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     box-shadow: none;
   }
 }
@@ -265,7 +265,7 @@ $control-group-stack: (
   content: $pt-icon-double-caret-vertical;
   pointer-events: none;
 
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     color: $pt-icon-color-disabled;
   }
 }
diff --git a/packages/core/src/components/forms/_control-group.scss b/packages/core/src/components/forms/_control-group.scss
index 70721bf6f6..8bfebf80c7 100644
--- a/packages/core/src/components/forms/_control-group.scss
+++ b/packages/core/src/components/forms/_control-group.scss
@@ -9,12 +9,12 @@
 Control groups
 
 Markup:
-<div class="pt-control-group">
-  <button class="pt-button pt-icon-filter">Filter</button>
-  <input type="text" class="pt-input" placeholder="Find filters..." />
+<div class="#{$ns}-control-group">
+  <button class="#{$ns}-button #{$ns}-icon-filter">Filter</button>
+  <input type="text" class="#{$ns}-input" placeholder="Find filters..." />
 </div>
-<div class="pt-control-group">
-  <div class="pt-select">
+<div class="#{$ns}-control-group">
+  <div class="#{$ns}-select">
     <select>
       <option selected>Filter...</option>
       <option value="1">Issues</option>
@@ -22,28 +22,28 @@ Markup:
       <option value="3">Projects</option>
     </select>
   </div>
-  <div class="pt-input-group">
-    <span class="pt-icon pt-icon-search"></span>
-    <input type="text" class="pt-input" value="from:ggray to:allorca" />
+  <div class="#{$ns}-input-group">
+    <span class="#{$ns}-icon #{$ns}-icon-search"></span>
+    <input type="text" class="#{$ns}-input" value="from:ggray to:allorca" />
   </div>
 </div>
-<div class="pt-control-group">
-  <div class="pt-input-group">
-    <span class="pt-icon pt-icon-people"></span>
-    <input type="text" class="pt-input" placeholder="Find collaborators..." style="padding-right:94px" />
-    <div class="pt-input-action">
-      <button class="pt-button pt-minimal pt-intent-primary">
-        can view<span class="pt-icon-standard pt-icon-caret-down pt-align-right"></span>
+<div class="#{$ns}-control-group">
+  <div class="#{$ns}-input-group">
+    <span class="#{$ns}-icon #{$ns}-icon-people"></span>
+    <input type="text" class="#{$ns}-input" placeholder="Find collaborators..." style="padding-right:94px" />
+    <div class="#{$ns}-input-action">
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-intent-primary">
+        can view<span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
       </button>
     </div>
   </div>
-  <button class="pt-button pt-intent-primary">Add</button>
+  <button class="#{$ns}-button #{$ns}-intent-primary">Add</button>
 </div>
 
-Styleguide pt-control-group
+Styleguide control-group
 */
 
-.pt-control-group {
+.#{$ns}-control-group {
   // create a new stacking context to isolate all the z-indices
   @include new-render-layer();
   @include pt-flex-container(row);
@@ -56,14 +56,14 @@ Styleguide pt-control-group
   // equally-specific styles (e.g. we don't want mouse interactions or focus
   // changes to change the z-index of a disabled element).
 
-  .pt-button,
-  .pt-input,
-  .pt-select {
+  .#{$ns}-button,
+  .#{$ns}-input,
+  .#{$ns}-select {
     // create a new stacking context
     position: relative;
   }
 
-  .pt-input {
+  .#{$ns}-input {
     z-index: index($control-group-stack, "input-default");
     // inherit radius since it's most likely to be zero
     border-radius: inherit;
@@ -73,7 +73,7 @@ Styleguide pt-control-group
       border-radius: $pt-border-radius;
     }
 
-    &[class*="pt-intent"] {
+    &[class*="#{$ns}-intent"] {
       z-index: index($control-group-stack, "intent-input-default");
 
       &:focus {
@@ -83,12 +83,12 @@ Styleguide pt-control-group
 
     &[readonly],
     &:disabled,
-    &.pt-disabled {
+    &.#{$ns}-disabled {
       z-index: index($control-group-stack, "input-disabled");
     }
   }
 
-  .pt-input-group[class*="pt-intent"] .pt-input {
+  .#{$ns}-input-group[class*="#{$ns}-intent"] .#{$ns}-input {
     z-index: index($control-group-stack, "intent-input-default");
 
     &:focus {
@@ -96,8 +96,8 @@ Styleguide pt-control-group
     }
   }
 
-  .pt-button,
-  .pt-select select {
+  .#{$ns}-button,
+  .#{$ns}-select select {
     z-index: index($control-group-stack, "button-default");
     // inherit radius since it's most likely to be zero
     border-radius: inherit;
@@ -118,11 +118,11 @@ Styleguide pt-control-group
 
     &[readonly],
     &:disabled,
-    &.pt-disabled {
+    &.#{$ns}-disabled {
       z-index: index($control-group-stack, "button-disabled");
     }
 
-    &[class*="pt-intent"] {
+    &[class*="#{$ns}-intent"] {
       z-index: index($control-group-stack, "intent-button-default");
 
       &:focus {
@@ -139,32 +139,32 @@ Styleguide pt-control-group
 
       &[readonly],
       &:disabled,
-      &.pt-disabled {
+      &.#{$ns}-disabled {
         z-index: index($control-group-stack, "intent-button-disabled");
       }
     }
   }
 
   // input group contents appear above input always
-  .pt-input-group > .pt-icon,
-  .pt-input-group > .pt-button,
-  .pt-input-group > .pt-input-action {
+  .#{$ns}-input-group > .#{$ns}-icon,
+  .#{$ns}-input-group > .#{$ns}-button,
+  .#{$ns}-input-group > .#{$ns}-input-action {
     z-index: index($control-group-stack, "input-group-children");
   }
 
   // keep the select-menu carets on top of everything always (particularly when
-  // .pt-selects are focused).
-  .pt-select::after {
+  // .#{$ns}-selects are focused).
+  .#{$ns}-select::after {
     z-index: index($control-group-stack, "select-caret");
   }
 
   // have consecutive elements share a border
-  &:not(.pt-vertical) {
+  &:not(.#{$ns}-vertical) {
     > * {
       margin-right: -$button-border-width;
     }
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       > * {
         margin-right: 0;
       }
@@ -172,7 +172,7 @@ Styleguide pt-control-group
       // consecutive buttons within a button group look okay out of the box, but
       // we need need to make a small correction for non-grouped buttons. this
       // replicates what's already done in dark theme button groups.
-      > .pt-button + .pt-button {
+      > .#{$ns}-button + .#{$ns}-button {
         margin-left: $button-border-width;
       }
     }
@@ -190,7 +190,7 @@ Styleguide pt-control-group
   }
 
   // bring back border radius on these buttons
-  .pt-input-group .pt-button {
+  .#{$ns}-input-group .#{$ns}-button {
     border-radius: $pt-border-radius;
   }
 
@@ -198,27 +198,27 @@ Styleguide pt-control-group
   Responsive control groups
 
   Markup:
-  <div class="pt-control-group">
-    <div class="pt-input-group pt-fill">
-      <span class="pt-icon pt-icon-people"></span>
-      <input type="text" class="pt-input" placeholder="Find collaborators..." />
+  <div class="#{$ns}-control-group">
+    <div class="#{$ns}-input-group #{$ns}-fill">
+      <span class="#{$ns}-icon #{$ns}-icon-people"></span>
+      <input type="text" class="#{$ns}-input" placeholder="Find collaborators..." />
     </div>
-    <button class="pt-button pt-intent-primary">Add</button>
+    <button class="#{$ns}-button #{$ns}-intent-primary">Add</button>
   </div>
-  <div class="pt-control-group pt-fill">
-    <button class="pt-button pt-icon-minus pt-fixed"></button>
-    <input type="text" class="pt-input" placeholder="Enter a value..." />
-    <button class="pt-button pt-icon-plus pt-fixed"></button>
+  <div class="#{$ns}-control-group #{$ns}-fill">
+    <button class="#{$ns}-button #{$ns}-icon-minus #{$ns}-fixed"></button>
+    <input type="text" class="#{$ns}-input" placeholder="Enter a value..." />
+    <button class="#{$ns}-button #{$ns}-icon-plus #{$ns}-fixed"></button>
   </div>
 
-  Styleguide pt-control-group.pt-fill
+  Styleguide control-group-fill
   */
 
-  > .pt-fill {
+  > .#{$ns}-fill {
     flex: 1 1 auto;
   }
 
-  &.pt-fill > *:not(.pt-fixed) {
+  &.#{$ns}-fill > *:not(.#{$ns}-fixed) {
     flex: 1 1 auto;
   }
 
@@ -226,22 +226,22 @@ Styleguide pt-control-group
   Vertical control groups
 
   Markup:
-  <div class="pt-control-group pt-vertical" style="width: 300px;">
-    <div class="pt-input-group pt-large">
-      <span class="pt-icon pt-icon-person"></span>
-      <input type="text" class="pt-input" placeholder="Username" />
+  <div class="#{$ns}-control-group #{$ns}-vertical" style="width: 300px;">
+    <div class="#{$ns}-input-group #{$ns}-large">
+      <span class="#{$ns}-icon #{$ns}-icon-person"></span>
+      <input type="text" class="#{$ns}-input" placeholder="Username" />
     </div>
-    <div class="pt-input-group pt-large">
-      <span class="pt-icon pt-icon-lock"></span>
-      <input type="password" class="pt-input" placeholder="Password" />
+    <div class="#{$ns}-input-group #{$ns}-large">
+      <span class="#{$ns}-icon #{$ns}-icon-lock"></span>
+      <input type="password" class="#{$ns}-input" placeholder="Password" />
     </div>
-    <button class="pt-button pt-large pt-intent-primary">Login</button>
+    <button class="#{$ns}-button #{$ns}-large #{$ns}-intent-primary">Login</button>
   </div>
 
-  Styleguide pt-control-group.pt-vertical
+  Styleguide control-group-vertical
   */
 
-  &.pt-vertical {
+  &.#{$ns}-vertical {
     flex-direction: column;
 
     > * {
diff --git a/packages/core/src/components/forms/_controls.scss b/packages/core/src/components/forms/_controls.scss
index 4975b6ac38..d2e8ccdd56 100644
--- a/packages/core/src/components/forms/_controls.scss
+++ b/packages/core/src/components/forms/_controls.scss
@@ -19,7 +19,7 @@ $control-checked-background-color: nth(map-get($button-intents, "primary"), 1) !
 $control-checked-background-color-hover: nth(map-get($button-intents, "primary"), 2) !default;
 $control-checked-background-color-active: nth(map-get($button-intents, "primary"), 3) !default;
 
-.pt-control {
+.#{$ns}-control {
   display: block;
   position: relative;
   margin-bottom: $pt-grid-size;
@@ -30,12 +30,12 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   text-transform: none;
   line-height: $control-indicator-size;
 
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     cursor: not-allowed;
     color: $pt-text-color-disabled;
   }
 
-  &.pt-inline {
+  &.#{$ns}-inline {
     display: inline-block;
     margin-right: $pt-grid-size * 2;
   }
@@ -48,7 +48,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
     z-index: -1; // don't let it intercept clicks
   }
 
-  .pt-control-indicator {
+  .#{$ns}-control-indicator {
     @include pt-icon($pt-icon-size-standard);
     position: absolute;
     top: 0;
@@ -66,7 +66,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
     user-select: none;
   }
 
-  input:checked ~ .pt-control-indicator {
+  input:checked ~ .#{$ns}-control-indicator {
     box-shadow: $button-intent-box-shadow;
     background-color: $control-checked-background-color;
     background-image: $button-intent-gradient;
@@ -74,40 +74,40 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   }
 
   &:hover {
-    .pt-control-indicator {
+    .#{$ns}-control-indicator {
       background-color: $control-background-color-hover;
     }
 
-    input:checked ~ .pt-control-indicator {
+    input:checked ~ .#{$ns}-control-indicator {
       box-shadow: $button-intent-box-shadow;
       background-color: $control-checked-background-color-hover;
     }
   }
 
   input:not(:disabled):active {
-    ~ .pt-control-indicator {
+    ~ .#{$ns}-control-indicator {
       box-shadow: $button-box-shadow-active;
       background: $control-background-color-active;
     }
 
-    &:checked ~ .pt-control-indicator {
+    &:checked ~ .#{$ns}-control-indicator {
       box-shadow: $button-intent-box-shadow-active;
       background: $control-checked-background-color-active;
     }
   }
 
-  input:focus ~ .pt-control-indicator {
+  input:focus ~ .#{$ns}-control-indicator {
     @include focus-outline();
   }
 
   input:disabled {
-    ~ .pt-control-indicator {
+    ~ .#{$ns}-control-indicator {
       box-shadow: none;
       background: $button-background-color-disabled;
       cursor: not-allowed;
     }
 
-    &:checked ~ .pt-control-indicator {
+    &:checked ~ .#{$ns}-control-indicator {
       box-shadow: none;
       background: rgba($control-checked-background-color, 0.5);
     }
@@ -117,24 +117,24 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   Checkbox
 
   Markup:
-  <label class="pt-control pt-checkbox {{.modifier}}">
+  <label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
     <input type="checkbox" {{:modifier}} />
-    <span class="pt-control-indicator"></span>
+    <span class="#{$ns}-control-indicator"></span>
     Checkbox
   </label>
 
   :checked  - Checked
-  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).
+  :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
   :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
                    <code>input.indeterminate = true</code>.
-  .pt-align-right - Right-aligned indicator
-  .pt-large - Large
+  .#{$ns}-align-right - Right-aligned indicator
+  .#{$ns}-large - Large
 
-  Styleguide pt-checkbox
+  Styleguide checkbox
   */
 
-  &.pt-checkbox {
-    .pt-control-indicator {
+  &.#{$ns}-checkbox {
+    .#{$ns}-control-indicator {
       border-radius: $pt-border-radius;
       font-size: $control-indicator-size;
     }
@@ -147,11 +147,11 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
     }
 
     // CSS API support
-    input:checked ~ .pt-control-indicator:empty::before {
+    input:checked ~ .#{$ns}-control-indicator:empty::before {
       content: $pt-icon-small-tick;
     }
 
-    input:indeterminate ~ .pt-control-indicator:empty::before {
+    input:indeterminate ~ .#{$ns}-control-indicator:empty::before {
       content: $pt-icon-small-minus;
     }
   }
@@ -160,31 +160,31 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   Radio
 
   Markup:
-  <label class="pt-control pt-radio {{.modifier}}">
+  <label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
     <input type="radio" name="docs-radio-regular" {{:modifier}} />
-    <span class="pt-control-indicator"></span>
+    <span class="#{$ns}-control-indicator"></span>
     Radio
   </label>
 
   :checked  - Selected
-  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).
-  .pt-align-right - Right-aligned indicator
-  .pt-large - Large
+  :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+  .#{$ns}-align-right - Right-aligned indicator
+  .#{$ns}-large - Large
 
-  Styleguide pt-radio
+  Styleguide radio
   */
 
   // stylelint-disable-next-line order/order
   $radio-indicator-font-size: $pt-grid-size * 0.6 !default;
   $radio-indicator-font-size-large: $pt-grid-size * 0.8 !default;
 
-  &.pt-radio {
-    .pt-control-indicator {
+  &.#{$ns}-radio {
+    .#{$ns}-control-indicator {
       border-radius: 50%;
       font-size: $radio-indicator-font-size;
     }
 
-    input:checked ~ .pt-control-indicator::before {
+    input:checked ~ .#{$ns}-control-indicator::before {
       display: inline-block;
       position: absolute;
       top: 50%;
@@ -197,11 +197,11 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
       content: "";
     }
 
-    input:checked:disabled ~ .pt-control-indicator::before {
+    input:checked:disabled ~ .#{$ns}-control-indicator::before {
       box-shadow: none;
     }
 
-    input:focus ~ .pt-control-indicator {
+    input:focus ~ .#{$ns}-control-indicator {
       -moz-outline-radius: $control-indicator-size;
     }
   }
@@ -210,18 +210,18 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   Switch
 
   Markup:
-  <label class="pt-control pt-switch {{.modifier}}">
+  <label class="#{$ns}-control #{$ns}-switch {{.modifier}}">
     <input type="checkbox" {{:modifier}} />
-    <span class="pt-control-indicator"></span>
+    <span class="#{$ns}-control-indicator"></span>
     Switch
   </label>
 
   :checked  - Selected
-  :disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-control</code> to change text color (not shown below).
-  .pt-align-right - Right-aligned indicator
-  .pt-large - Large
+  :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+  .#{$ns}-align-right - Right-aligned indicator
+  .#{$ns}-large - Large
 
-  Styleguide pt-switch
+  Styleguide switch
   */
 
   // stylelint-disable-next-line order/order
@@ -255,10 +255,10 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   $dark-switch-indicator-background-color: $dark-gray4 !default;
   $dark-switch-indicator-background-color-disabled: rgba($black, 0.4) !default;
 
-  &.pt-switch {
+  &.#{$ns}-switch {
     padding-left: $switch-width + $pt-grid-size;
 
-    .pt-control-indicator {
+    .#{$ns}-control-indicator {
       border: none;
       border-radius: $switch-width;
       box-shadow: none;
@@ -283,7 +283,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
       }
     }
 
-    input:checked ~ .pt-control-indicator {
+    input:checked ~ .#{$ns}-control-indicator {
       box-shadow: none;
       background-color: $switch-checked-background-color;
       width: $switch-width;
@@ -296,22 +296,22 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
     }
 
     &:hover {
-      .pt-control-indicator {
+      .#{$ns}-control-indicator {
         background-color: $switch-background-color-hover;
       }
 
-      input:checked ~ .pt-control-indicator {
+      input:checked ~ .#{$ns}-control-indicator {
         background-color: $switch-checked-background-color-hover;
       }
     }
 
     input:not(:disabled):active {
-      ~ .pt-control-indicator {
+      ~ .#{$ns}-control-indicator {
         box-shadow: none;
         background-color: $switch-background-color-active;
       }
 
-      &:checked ~ .pt-control-indicator {
+      &:checked ~ .#{$ns}-control-indicator {
         background-color: $control-checked-background-color-active;
 
         &::before {
@@ -321,7 +321,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
     }
 
     input:disabled {
-      ~ .pt-control-indicator {
+      ~ .#{$ns}-control-indicator {
         background-color: $switch-background-color-disabled;
 
         &::before {
@@ -330,30 +330,30 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
         }
       }
 
-      &:checked ~ .pt-control-indicator {
+      &:checked ~ .#{$ns}-control-indicator {
         background-color: $switch-checked-background-color-disabled;
       }
     }
   }
 
   // right-aligned indicator is glued to the right side of the container
-  &.pt-align-right {
+  &.#{$ns}-align-right {
     padding-right: $control-indicator-size + $pt-grid-size;
     padding-left: 0;
 
-    .pt-control-indicator {
+    .#{$ns}-control-indicator {
       right: 0;
       left: auto;
     }
   }
 
-  &.pt-large {
+  &.#{$ns}-large {
     min-height: $control-indicator-size-large;
     padding-left: $control-indicator-size-large + $pt-grid-size;
     line-height: $control-indicator-size-large;
     font-size: $pt-font-size-large;
 
-    .pt-control-indicator {
+    .#{$ns}-control-indicator {
       width: $control-indicator-size-large;
       height: $control-indicator-size-large;
       line-height: $control-indicator-size-large;
@@ -361,18 +361,18 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
       font-size: $control-indicator-size-large;
     }
 
-    &.pt-checkbox input:checked ~ .pt-control-indicator::before {
+    &.#{$ns}-checkbox input:checked ~ .#{$ns}-control-indicator::before {
       top: 1px;
     }
 
-    &.pt-radio .pt-control-indicator {
+    &.#{$ns}-radio .#{$ns}-control-indicator {
       font-size: $radio-indicator-font-size-large;
     }
 
-    &.pt-switch {
+    &.#{$ns}-switch {
       padding-left: $switch-width-large + $pt-grid-size;
 
-      .pt-control-indicator {
+      .#{$ns}-control-indicator {
         width: $switch-width-large;
         height: $switch-height-large;
 
@@ -382,7 +382,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
         }
       }
 
-      input:checked ~ .pt-control-indicator {
+      input:checked ~ .#{$ns}-control-indicator {
         width: $switch-width-large;
         height: $switch-height-large;
 
@@ -393,70 +393,70 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $pt-dark-text-color;
 
-    &.pt-disabled {
+    &.#{$ns}-disabled {
       color: $pt-dark-text-color-disabled;
     }
 
-    .pt-control-indicator {
+    .#{$ns}-control-indicator {
       box-shadow: $dark-button-box-shadow;
       background-color: $dark-control-background-color;
       background-image: $dark-button-gradient;
     }
 
-    input:checked ~ .pt-control-indicator {
+    input:checked ~ .#{$ns}-control-indicator {
       box-shadow: $dark-button-intent-box-shadow;
     }
 
     &:hover {
-      .pt-control-indicator {
+      .#{$ns}-control-indicator {
         background-color: $dark-control-background-color-hover;
       }
     }
 
     input:not(:disabled):active {
-      ~ .pt-control-indicator {
+      ~ .#{$ns}-control-indicator {
         box-shadow: $dark-button-box-shadow-active;
         background: $dark-control-background-color-active;
       }
 
-      &:checked ~ .pt-control-indicator {
+      &:checked ~ .#{$ns}-control-indicator {
         box-shadow: $dark-button-intent-box-shadow-active;
         background-color: $control-checked-background-color-active;
       }
     }
 
     input:disabled {
-      ~ .pt-control-indicator {
+      ~ .#{$ns}-control-indicator {
         box-shadow: none;
         background: $dark-button-background-color-disabled;
         cursor: not-allowed;
       }
 
-      &:checked ~ .pt-control-indicator {
+      &:checked ~ .#{$ns}-control-indicator {
         box-shadow: none;
         background: rgba($control-checked-background-color-active, 0.5);
       }
     }
 
-    &.pt-checkbox {
+    &.#{$ns}-checkbox {
       input:checked {
-        &:disabled ~ .pt-control-indicator::before {
+        &:disabled ~ .#{$ns}-control-indicator::before {
           color: $dark-button-color-disabled;
         }
       }
     }
 
-    &.pt-radio {
-      input:checked:disabled ~ .pt-control-indicator::before {
+    &.#{$ns}-radio {
+      input:checked:disabled ~ .#{$ns}-control-indicator::before {
         background: $dark-button-color-disabled;
       }
     }
 
-    &.pt-switch {
-      .pt-control-indicator {
+    &.#{$ns}-switch {
+      .#{$ns}-control-indicator {
         box-shadow: none;
         background: $dark-switch-background-color;
 
@@ -466,7 +466,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
         }
       }
 
-      input:checked ~ .pt-control-indicator {
+      input:checked ~ .#{$ns}-control-indicator {
         box-shadow: none;
         background-color: $dark-switch-checked-background-color;
 
@@ -476,17 +476,17 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
       }
 
       &:hover {
-        .pt-control-indicator {
+        .#{$ns}-control-indicator {
           background: $dark-switch-background-color-hover;
         }
 
-        input:checked ~ .pt-control-indicator {
+        input:checked ~ .#{$ns}-control-indicator {
           background: $dark-switch-checked-background-color-hover;
         }
       }
 
       input:not(:disabled):active {
-        ~ .pt-control-indicator {
+        ~ .#{$ns}-control-indicator {
           box-shadow: none;
           background: $dark-switch-background-color-active;
 
@@ -497,7 +497,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
           }
         }
 
-        &:checked ~ .pt-control-indicator {
+        &:checked ~ .#{$ns}-control-indicator {
           background: $dark-switch-checked-background-color-active;
 
           &::before {
@@ -507,7 +507,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
       }
 
       input:disabled {
-        ~ .pt-control-indicator {
+        ~ .#{$ns}-control-indicator {
           background: $dark-switch-background-color-disabled;
 
           &::before {
@@ -517,7 +517,7 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
           // stylelint-enable max-nesting-depth
         }
 
-        &:checked ~ .pt-control-indicator {
+        &:checked ~ .#{$ns}-control-indicator {
           background: $dark-switch-checked-background-color-disabled;
         }
       }
@@ -528,23 +528,23 @@ $control-checked-background-color-active: nth(map-get($button-intents, "primary"
   Inline labels
 
   Markup:
-  <label class="pt-label">A group of related options</label>
-  <label class="pt-control pt-checkbox pt-inline">
+  <label class="#{$ns}-label">A group of related options</label>
+  <label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
     <input type="checkbox" />
-    <span class="pt-control-indicator"></span>
+    <span class="#{$ns}-control-indicator"></span>
     First
   </label>
-  <label class="pt-control pt-checkbox pt-inline">
+  <label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
     <input type="checkbox" />
-    <span class="pt-control-indicator"></span>
+    <span class="#{$ns}-control-indicator"></span>
     Second
   </label>
-  <label class="pt-control pt-checkbox pt-inline">
+  <label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
     <input type="checkbox" />
-    <span class="pt-control-indicator"></span>
+    <span class="#{$ns}-control-indicator"></span>
     Third
   </label>
 
-  Styleguide pt-checkbox.pt-inline
+  Styleguide checkbox-inline
   */
 }
diff --git a/packages/core/src/components/forms/_file-input.scss b/packages/core/src/components/forms/_file-input.scss
index e8f6035943..e3e0e53617 100644
--- a/packages/core/src/components/forms/_file-input.scss
+++ b/packages/core/src/components/forms/_file-input.scss
@@ -8,16 +8,16 @@
 File input
 
 Markup:
-<label class="pt-file-input {{.modifier}}">
+<label class="#{$ns}-file-input {{.modifier}}">
   <input type="file" {{:modifier}}/>
-  <span class="pt-file-upload-input">Choose file...</span>
+  <span class="#{$ns}-file-upload-input">Choose file...</span>
 </label>
 
 :disabled - Disabled
-.pt-large - Larger size
-.pt-fill - Take up full width of parent element
+.#{$ns}-large - Larger size
+.#{$ns}-fill - Take up full width of parent element
 
-Styleguide pt-file-input
+Styleguide file-input
 */
 
 $file-input-button-width: $pt-grid-size * 7;
@@ -25,7 +25,7 @@ $file-input-button-width-large: $pt-grid-size * 8.5;
 $file-input-button-padding: ($pt-input-height - $pt-button-height-small) / 2;
 $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) / 2;
 
-.pt-file-input {
+.#{$ns}-file-input {
   display: inline-block;
   position: relative;
   cursor: pointer;
@@ -40,15 +40,15 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
     // pt-file-input wraps and hides the native element for better control over
     // visual styles. to disable, we need to disable the hidden child input, not
     // the surrounding wrapper. see #689 for gory details.
-    &:disabled + .pt-file-upload-input,
-    &.pt-disabled + .pt-file-upload-input {
+    &:disabled + .#{$ns}-file-upload-input,
+    &.#{$ns}-disabled + .#{$ns}-file-upload-input {
       @include pt-input-disabled();
 
       &::after {
         @include pt-button-disabled();
       }
 
-      .pt-dark & {
+      .#{$ns}-dark & {
         @include pt-dark-input-disabled();
 
         &::after {
@@ -58,17 +58,17 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
     }
   }
 
-  &.pt-fill {
+  &.#{$ns}-fill {
     width: 100%;
   }
 
-  &.pt-large,
-  .pt-large & {
+  &.#{$ns}-large,
+  .#{$ns}-large & {
     height: $pt-input-height-large;
   }
 }
 
-.pt-file-upload-input {
+.#{$ns}-file-upload-input {
   @include pt-input();
   @include overflow-ellipsis();
   position: absolute;
@@ -100,7 +100,7 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
     @include pt-button-active();
   }
 
-  .pt-large & {
+  .#{$ns}-large & {
     @include pt-input-large();
     padding-right: $file-input-button-width-large + $input-padding-horizontal;
 
@@ -112,7 +112,7 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include pt-dark-input();
     color: $pt-dark-text-color-muted;
 
@@ -133,4 +133,4 @@ $file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) /
 // hack to force the button shadow to display since
 // it doesn't render correct via the `pt-button` mixin
 // stylelint-disable-next-line
-.pt-file-upload-input::after { box-shadow: $button-box-shadow; }
+.#{$ns}-file-upload-input::after { box-shadow: $button-box-shadow; }
diff --git a/packages/core/src/components/forms/_form-group.scss b/packages/core/src/components/forms/_form-group.scss
index 693339b601..9407894e2c 100644
--- a/packages/core/src/components/forms/_form-group.scss
+++ b/packages/core/src/components/forms/_form-group.scss
@@ -8,113 +8,113 @@
 Form groups
 
 Markup:
-<div class="pt-form-group">
-  <label class="pt-label" for="example-form-group-input-a">
+<div class="#{$ns}-form-group">
+  <label class="#{$ns}-label" for="example-form-group-input-a">
     Label A
-    <span class="pt-text-muted">(required)</span>
+    <span class="#{$ns}-text-muted">(required)</span>
   </label>
-  <div class="pt-form-content">
-    <input id="example-form-group-input-a" class="pt-input" style="width: 300px;" placeholder="Placeholder text" type="text" dir="auto" />
-    <div class="pt-form-helper-text">Helper text with details / user feedback</div>
+  <div class="#{$ns}-form-content">
+    <input id="example-form-group-input-a" class="#{$ns}-input" style="width: 300px;" placeholder="Placeholder text" type="text" dir="auto" />
+    <div class="#{$ns}-form-helper-text">Helper text with details / user feedback</div>
   </div>
 </div>
-<div class="pt-form-group pt-intent-danger">
-  <label class="pt-label" for="example-form-group-input-b">
+<div class="#{$ns}-form-group #{$ns}-intent-danger">
+  <label class="#{$ns}-label" for="example-form-group-input-b">
     Label B
-    <span class="pt-text-muted">(required)</span>
+    <span class="#{$ns}-text-muted">(required)</span>
   </label>
-  <div class="pt-form-content">
-    <div class="pt-input-group pt-intent-danger">
-      <span class="pt-icon pt-icon-calendar"></span>
-      <input id="example-form-group-input-b" class="pt-input" style="width: 200px;" type="text" placeholder="Placeholder text" dir="auto" />
+  <div class="#{$ns}-form-content">
+    <div class="#{$ns}-input-group #{$ns}-intent-danger">
+      <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
+      <input id="example-form-group-input-b" class="#{$ns}-input" style="width: 200px;" type="text" placeholder="Placeholder text" dir="auto" />
     </div>
-    <div class="pt-form-helper-text">Please enter a value</div>
+    <div class="#{$ns}-form-helper-text">Please enter a value</div>
   </div>
 </div>
-<div class="pt-form-group">
-  <label class="pt-label" for="example-form-group-switch-c">
+<div class="#{$ns}-form-group">
+  <label class="#{$ns}-label" for="example-form-group-switch-c">
     Label C
-    <span class="pt-text-muted">(required)</span>
+    <span class="#{$ns}-text-muted">(required)</span>
   </label>
-  <div class="pt-form-content">
-    <label class="pt-control pt-switch">
+  <div class="#{$ns}-form-content">
+    <label class="#{$ns}-control #{$ns}-switch">
       <input id="example-form-group-switch-c" type="checkbox" />
-      <span class="pt-control-indicator"></span>
+      <span class="#{$ns}-control-indicator"></span>
       Switch C
     </label>
-    <div class="pt-form-helper-text">Helper text with details / user feedback</div>
+    <div class="#{$ns}-form-helper-text">Helper text with details / user feedback</div>
   </div>
 </div>
-<div class="pt-form-group pt-inline">
-  <label class="pt-label" for="example-form-group-input-d">
+<div class="#{$ns}-form-group #{$ns}-inline">
+  <label class="#{$ns}-label" for="example-form-group-input-d">
     Label D
-    <span class="pt-text-muted">(optional)</span>
+    <span class="#{$ns}-text-muted">(optional)</span>
   </label>
-  <div class="pt-form-content">
-    <div class="pt-input-group">
-      <span class="pt-icon pt-icon-calendar"></span>
-      <input id="example-form-group-input-d" class="pt-input" style="width: 200px;" type="text" placeholder="Placeholder text" dir="auto" />
+  <div class="#{$ns}-form-content">
+    <div class="#{$ns}-input-group">
+      <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
+      <input id="example-form-group-input-d" class="#{$ns}-input" style="width: 200px;" type="text" placeholder="Placeholder text" dir="auto" />
     </div>
-    <div class="pt-form-helper-text">Helper text with details / user feedback</div>
+    <div class="#{$ns}-form-helper-text">Helper text with details / user feedback</div>
   </div>
 </div>
-<div class="pt-form-group pt-inline pt-large pt-disabled">
-  <label class="pt-label" for="example-form-group-input-e">
+<div class="#{$ns}-form-group #{$ns}-inline #{$ns}-large #{$ns}-disabled">
+  <label class="#{$ns}-label" for="example-form-group-input-e">
     Label E
-    <span class="pt-text-muted">(optional)</span>
+    <span class="#{$ns}-text-muted">(optional)</span>
   </label>
-  <div class="pt-form-content">
-    <div class="pt-input-group pt-large pt-disabled">
-      <span class="pt-icon pt-icon-calendar"></span>
-      <input id="example-form-group-input-e" class="pt-input" disabled style="width: 200px;" type="text" placeholder="Placeholder text" dir="auto" />
+  <div class="#{$ns}-form-content">
+    <div class="#{$ns}-input-group #{$ns}-large #{$ns}-disabled">
+      <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
+      <input id="example-form-group-input-e" class="#{$ns}-input" disabled style="width: 200px;" type="text" placeholder="Placeholder text" dir="auto" />
     </div>
-    <div class="pt-form-helper-text">Helper text with details / user feedback</div>
+    <div class="#{$ns}-form-helper-text">Helper text with details / user feedback</div>
   </div>
 </div>
-<div class="pt-form-group pt-inline">
-  <label class="pt-label" for="example-form-group-switch-f">
+<div class="#{$ns}-form-group #{$ns}-inline">
+  <label class="#{$ns}-label" for="example-form-group-switch-f">
     Label F
   </label>
-  <div class="pt-form-content">
-    <label class="pt-control pt-switch">
+  <div class="#{$ns}-form-content">
+    <label class="#{$ns}-control #{$ns}-switch">
       <input id="example-form-group-switch-f" type="checkbox" />
-      <span class="pt-control-indicator"></span>
+      <span class="#{$ns}-control-indicator"></span>
       Switch F
     </label>
-    <div class="pt-form-helper-text">Helper text with details / user feedback</div>
+    <div class="#{$ns}-form-helper-text">Helper text with details / user feedback</div>
   </div>
 </div>
-<div class="pt-form-group pt-inline pt-large pt-disabled">
-  <label class="pt-label" for="example-form-group-switch-g">
+<div class="#{$ns}-form-group #{$ns}-inline #{$ns}-large #{$ns}-disabled">
+  <label class="#{$ns}-label" for="example-form-group-switch-g">
     Label G
   </label>
-  <div class="pt-form-content">
-    <label class="pt-control pt-switch pt-large pt-disabled">
+  <div class="#{$ns}-form-content">
+    <label class="#{$ns}-control #{$ns}-switch #{$ns}-large #{$ns}-disabled">
       <input id="example-form-group-switch-g" type="checkbox" disabled />
-      <span class="pt-control-indicator"></span>
+      <span class="#{$ns}-control-indicator"></span>
       Switch G
     </label>
-    <div class="pt-form-helper-text">Helper text with details / user feedback</div>
+    <div class="#{$ns}-form-helper-text">Helper text with details / user feedback</div>
   </div>
 </div>
 
-Styleguide pt-form-group
+Styleguide form-group
 */
 
-.pt-form-group {
+.#{$ns}-form-group {
   display: flex;
   flex-direction: column;
   margin: 0 0 ($pt-grid-size * 1.5);
 
-  label.pt-label {
+  label.#{$ns}-label {
     margin-bottom: $pt-grid-size / 2;
   }
 
-  .pt-control {
+  .#{$ns}-control {
     margin-top: $pt-grid-size / 2;
   }
 
-  .pt-form-helper-text {
+  .#{$ns}-form-helper-text {
     margin-top: $pt-grid-size / 2;
     color: $pt-text-color-muted;
     font-size: $pt-font-size-small;
@@ -122,55 +122,55 @@ Styleguide pt-form-group
 
   // stylelint-disable-next-line order/declaration-block-order
   @each $intent, $color in $pt-intent-text-colors {
-    &.pt-intent-#{$intent} {
-      .pt-form-helper-text {
+    &.#{$ns}-intent-#{$intent} {
+      .#{$ns}-form-helper-text {
         color: $color;
       }
     }
   }
 
-  &.pt-inline {
+  &.#{$ns}-inline {
     flex-direction: row;
     align-items: baseline;
 
-    &.pt-large label.pt-label {
+    &.#{$ns}-large label.#{$ns}-label {
       margin: 0 $pt-grid-size 0 0;
       line-height: $pt-input-height-large;
     }
 
-    label.pt-label {
+    label.#{$ns}-label {
       margin: 0 $pt-grid-size 0 0;
       line-height: $pt-input-height;
     }
   }
 
-  &.pt-disabled {
-    .pt-label,
-    .pt-text-muted,
-    .pt-form-helper-text {
+  &.#{$ns}-disabled {
+    .#{$ns}-label,
+    .#{$ns}-text-muted,
+    .#{$ns}-form-helper-text {
       // pt-disable always overrides over styles
       // stylelint-disable-next-line declaration-no-important
       color: $pt-text-color-disabled !important;
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @each $intent, $color in $pt-dark-intent-text-colors {
-      &.pt-intent-#{$intent} {
-        .pt-form-helper-text {
+      &.#{$ns}-intent-#{$intent} {
+        .#{$ns}-form-helper-text {
           color: $color;
         }
       }
     }
 
-    .pt-form-helper-text {
+    .#{$ns}-form-helper-text {
       color: $pt-dark-text-color-muted;
     }
 
-    &.pt-disabled {
-      .pt-label,
-      .pt-text-muted,
-      .pt-form-helper-text {
+    &.#{$ns}-disabled {
+      .#{$ns}-label,
+      .#{$ns}-text-muted,
+      .#{$ns}-form-helper-text {
         // pt-disable always overrides over styles
         // stylelint-disable-next-line declaration-no-important
         color: $pt-dark-text-color-disabled !important;
diff --git a/packages/core/src/components/forms/_input-group.scss b/packages/core/src/components/forms/_input-group.scss
index 22339be27f..d21cc3dee7 100644
--- a/packages/core/src/components/forms/_input-group.scss
+++ b/packages/core/src/components/forms/_input-group.scss
@@ -9,27 +9,27 @@
 Input groups
 
 Markup:
-<div class="pt-input-group {{.modifier}}">
-  <span class="pt-icon pt-icon-filter"></span>
-  <input type="text" class="pt-input" {{:modifier}} placeholder="Filter histogram..." />
+<div class="#{$ns}-input-group {{.modifier}}">
+  <span class="#{$ns}-icon #{$ns}-icon-filter"></span>
+  <input type="text" class="#{$ns}-input" {{:modifier}} placeholder="Filter histogram..." />
 </div>
-<div class="pt-input-group {{.modifier}}">
-  <input type="password" class="pt-input" {{:modifier}} placeholder="Enter your password..." />
-  <button class="pt-button pt-minimal pt-intent-warning pt-icon-lock" {{:modifier}}></button>
+<div class="#{$ns}-input-group {{.modifier}}">
+  <input type="password" class="#{$ns}-input" {{:modifier}} placeholder="Enter your password..." />
+  <button class="#{$ns}-button #{$ns}-minimal #{$ns}-intent-warning #{$ns}-icon-lock" {{:modifier}}></button>
 </div>
-<div class="pt-input-group {{.modifier}}">
-  <span class="pt-icon pt-icon-search"></span>
-  <input type="text" class="pt-input" {{:modifier}} placeholder="Search" />
-  <button class="pt-button pt-minimal pt-intent-primary pt-icon-arrow-right" {{:modifier}}></button>
+<div class="#{$ns}-input-group {{.modifier}}">
+  <span class="#{$ns}-icon #{$ns}-icon-search"></span>
+  <input type="text" class="#{$ns}-input" {{:modifier}} placeholder="Search" />
+  <button class="#{$ns}-button #{$ns}-minimal #{$ns}-intent-primary #{$ns}-icon-arrow-right" {{:modifier}}></button>
 </div>
 
-:disabled - Disabled input. Must be added separately to the <code>&#60;input&#62;</code> and <code>&#60;button&#62;</code>. Also add <code>.pt-disabled</code> to <code>.pt-input-group</code> for icon coloring (not shown below).
-.pt-round - Rounded caps. Button will also be rounded.
-.pt-large - Large group. Children will adjust size accordingly.
-.pt-intent-primary - Primary intent. (All 4 intents are supported.)
-.pt-fill - Take up full width of parent element.
+:disabled - Disabled input. Must be added separately to the <code>&#60;input&#62;</code> and <code>&#60;button&#62;</code>. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-input-group</code> for icon coloring (not shown below).
+.#{$ns}-round - Rounded caps. Button will also be rounded.
+.#{$ns}-large - Large group. Children will adjust size accordingly.
+.#{$ns}-intent-primary - Primary intent. (All 4 intents are supported.)
+.#{$ns}-fill - Take up full width of parent element.
 
-Styleguide pt-input-group
+Styleguide input-group
 */
 
 // 3px space between small button and regular input
@@ -37,11 +37,11 @@ $input-button-height: $pt-button-height - 6px !default;
 // 5px space between regular button and large input
 $input-button-height-large: $pt-button-height !default;
 
-.pt-input-group {
+.#{$ns}-input-group {
   display: block;
   position: relative;
 
-  .pt-input {
+  .#{$ns}-input {
     // explicit position prevents shadow clipping https://github.com/palantir/blueprint/pull/490#issuecomment-273342170
     position: relative;
     width: 100%;
@@ -56,9 +56,9 @@ $input-button-height-large: $pt-button-height !default;
     }
   }
 
-  .pt-input-action,
-  > .pt-button,
-  > .pt-icon {
+  .#{$ns}-input-action,
+  > .#{$ns}-button,
+  > .#{$ns}-icon {
     position: absolute;
     top: 0;
 
@@ -72,7 +72,7 @@ $input-button-height-large: $pt-button-height !default;
     }
   }
 
-  .pt-button {
+  .#{$ns}-button {
     @include pt-button-height($input-button-height);
     margin: ($pt-input-height - $input-button-height) / 2;
     padding: $button-padding-small;
@@ -82,7 +82,7 @@ $input-button-height-large: $pt-button-height !default;
   }
 
   // direct descendant to exclude icons in buttons
-  > .pt-icon {
+  > .#{$ns}-icon {
     @include pt-icon($pt-icon-size-standard);
 
     // bump icon up so it sits above input
@@ -93,24 +93,24 @@ $input-button-height-large: $pt-button-height !default;
 
   // adjusting the margin of spinners in input groups
   // we have to avoid targetting buttons that contain a spinner
-  .pt-input-action > .pt-spinner {
+  .#{$ns}-input-action > .#{$ns}-spinner {
     margin: ($pt-input-height - $spinner-width * $spinner-width-factor-small) / 2;
   }
 
-  .pt-tag {
+  .#{$ns}-tag {
     margin: $pt-grid-size / 2;
   }
 
   // all buttons go gray in default state and assume their native colors only when hovered
   // or when input is focused. this prevents distracting colors in the UI.
-  .pt-input:not(:focus) + .pt-button,
-  .pt-input:not(:focus) + .pt-input-action .pt-button {
-    &.pt-minimal:not(:hover):not(:focus) {
+  .#{$ns}-input:not(:focus) + .#{$ns}-button,
+  .#{$ns}-input:not(:focus) + .#{$ns}-input-action .#{$ns}-button {
+    &.#{$ns}-minimal:not(:hover):not(:focus) {
       color: $pt-text-color-muted;
 
       // same goes for dark
       // stylelint-disable-next-line selector-max-compound-selectors
-      .pt-dark & {
+      .#{$ns}-dark & {
         color: $pt-dark-text-color-muted;
       }
 
@@ -119,7 +119,7 @@ $input-button-height-large: $pt-button-height !default;
       }
     }
 
-    &.pt-minimal:disabled {
+    &.#{$ns}-minimal:disabled {
       // override more specific selector above
       // stylelint-disable declaration-no-important
       color: $pt-icon-color-disabled !important;
@@ -131,26 +131,26 @@ $input-button-height-large: $pt-button-height !default;
   }
 
   // this class echoes `input:disabled` on the child input, but each action must individually be disabled
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     // note that enabled buttons inside this input group are still clickable
     cursor: not-allowed;
 
-    .pt-icon {
+    .#{$ns}-icon {
       color: $pt-icon-color-disabled;
     }
   }
 
-  &.pt-large {
-    .pt-button {
+  &.#{$ns}-large {
+    .#{$ns}-button {
       @include pt-button-height($input-button-height-large);
       margin: ($pt-input-height-large - $input-button-height-large) / 2;
     }
 
-    > .pt-icon {
+    > .#{$ns}-icon {
       margin: ($pt-input-height-large - $pt-icon-size-standard) / 2;
     }
 
-    .pt-input {
+    .#{$ns}-input {
       @include pt-input-large();
 
       &:not(:first-child) {
@@ -162,44 +162,44 @@ $input-button-height-large: $pt-button-height !default;
       }
     }
 
-    .pt-input-action > .pt-spinner {
+    .#{$ns}-input-action > .#{$ns}-spinner {
       margin: ($pt-input-height-large - $spinner-width * $spinner-width-factor-small) / 2;
     }
   }
 
-  &.pt-fill {
+  &.#{$ns}-fill {
     flex: 1 1 auto;
     width: 100%;
   }
 
-  &.pt-round {
-    .pt-button,
-    .pt-input,
-    .pt-tag {
+  &.#{$ns}-round {
+    .#{$ns}-button,
+    .#{$ns}-input,
+    .#{$ns}-tag {
       border-radius: $pt-input-height;
     }
   }
 
-  .pt-dark & {
-    .pt-icon {
+  .#{$ns}-dark & {
+    .#{$ns}-icon {
       color: $pt-dark-icon-color;
     }
 
-    &.pt-disabled .pt-icon {
+    &.#{$ns}-disabled .#{$ns}-icon {
       color: $pt-dark-icon-color-disabled;
     }
   }
 
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
-      .pt-input {
+    &.#{$ns}-intent-#{$intent} {
+      .#{$ns}-input {
         @include pt-input-intent($color);
       }
 
-      > .pt-icon {
+      > .#{$ns}-icon {
         color: map-get($pt-intent-text-colors, $intent);
 
-        .pt-dark & {
+        .#{$ns}-dark & {
           color: map-get($pt-dark-intent-text-colors, $intent);
         }
       }
diff --git a/packages/core/src/components/forms/_input.scss b/packages/core/src/components/forms/_input.scss
index 7efa56c2e5..c350ede235 100644
--- a/packages/core/src/components/forms/_input.scss
+++ b/packages/core/src/components/forms/_input.scss
@@ -7,42 +7,42 @@
 Text inputs
 
 Markup:
-<input class="pt-input {{.modifier}}" {{:modifier}} type="text" placeholder="Text input" dir="auto" />
+<input class="#{$ns}-input {{.modifier}}" {{:modifier}} type="text" placeholder="Text input" dir="auto" />
 
 :disabled - Disabled
 :readonly - Readonly
-.pt-round - Rounded ends
-.pt-large - Larger size
-.pt-intent-primary - Primary intent
-.pt-intent-success - Success intent
-.pt-intent-warning - Warning intent
-.pt-intent-danger - Danger intent
-.pt-fill - Take up full width of parent element
-
-Styleguide pt-input
+.#{$ns}-round - Rounded ends
+.#{$ns}-large - Larger size
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-success - Success intent
+.#{$ns}-intent-warning - Warning intent
+.#{$ns}-intent-danger - Danger intent
+.#{$ns}-fill - Take up full width of parent element
+
+Styleguide input
 */
 
-.pt-input {
+.#{$ns}-input {
   @include pt-input();
 
-  &.pt-large {
+  &.#{$ns}-large {
     @include pt-input-large();
   }
 
-  &.pt-fill {
+  &.#{$ns}-fill {
     flex: 1 1 auto;
     width: 100%;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include pt-dark-input();
   }
 
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       @include pt-input-intent($color);
 
-      .pt-dark & {
+      .#{$ns}-dark & {
         @include pt-dark-input-intent($color);
       }
     }
@@ -57,46 +57,46 @@ Styleguide pt-input
 Search inputs
 
 Markup:
-<div class="pt-input-group {{.modifier}}">
-  <span class="pt-icon pt-icon-search"></span>
-  <input class="pt-input" {{:modifier}} type="search" placeholder="Search input" dir="auto" />
+<div class="#{$ns}-input-group {{.modifier}}">
+  <span class="#{$ns}-icon #{$ns}-icon-search"></span>
+  <input class="#{$ns}-input" {{:modifier}} type="search" placeholder="Search input" dir="auto" />
 </div>
 
-:disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-input-group</code> for icon coloring (not shown below).
-.pt-large - Large
+:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-input-group</code> for icon coloring (not shown below).
+.#{$ns}-large - Large
 
-Styleguide pt-input.pt-search
+Styleguide input-search
 */
 
 /*
 Textareas
 
 Markup:
-<textarea class="pt-input {{.modifier}}" {{:modifier}} dir="auto"></textarea>
+<textarea class="#{$ns}-input {{.modifier}}" {{:modifier}} dir="auto"></textarea>
 
 :disabled - Disabled
 :readonly - Readonly
-.pt-large - Larger font size
-.pt-intent-primary - Primary intent
-.pt-intent-danger  - Danger intent
-.pt-fill  - Take up full width of parent element
+.#{$ns}-large - Larger font size
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-danger  - Danger intent
+.#{$ns}-fill  - Take up full width of parent element
 
-Styleguide pt-textarea
+Styleguide textarea
 */
 
 // stylelint-disable selector-no-qualifying-type
-textarea.pt-input {
+textarea.#{$ns}-input {
   max-width: 100%;
   height: auto;
   padding: $input-padding-horizontal;
   line-height: $pt-line-height;
 
-  &.pt-large {
+  &.#{$ns}-large {
     line-height: $pt-line-height;
     font-size: $pt-font-size-large;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include pt-dark-input();
   }
 }
diff --git a/packages/core/src/components/forms/_label.scss b/packages/core/src/components/forms/_label.scss
index ecd8f52190..1881852371 100644
--- a/packages/core/src/components/forms/_label.scss
+++ b/packages/core/src/components/forms/_label.scss
@@ -7,66 +7,66 @@
 Labels
 
 Markup:
-<label class="pt-label {{.modifier}}">
+<label class="#{$ns}-label {{.modifier}}">
   Label A
-  <span class="pt-text-muted">(required)</span>
-  <input class="pt-input" style="width: 180px;" type="text" placeholder="Text input" dir="auto" />
+  <span class="#{$ns}-text-muted">(required)</span>
+  <input class="#{$ns}-input" style="width: 180px;" type="text" placeholder="Text input" dir="auto" />
 </label>
-<label class="pt-label {{.modifier}}">
+<label class="#{$ns}-label {{.modifier}}">
   Label B
-  <span class="pt-text-muted">(optional)</span>
-  <div class="pt-input-group">
-    <span class="pt-icon pt-icon-calendar"></span>
-    <input class="pt-input" style="width: 180px;" type="text" placeholder="Input group" dir="auto" />
+  <span class="#{$ns}-text-muted">(optional)</span>
+  <div class="#{$ns}-input-group">
+    <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
+    <input class="#{$ns}-input" style="width: 180px;" type="text" placeholder="Input group" dir="auto" />
   </div>
 </label>
 
-.pt-inline - Inline
+.#{$ns}-inline - Inline
 
-Styleguide pt-label
+Styleguide label
 */
 
 // stylelint-disable-next-line selector-no-qualifying-type
-label.pt-label {
+label.#{$ns}-label {
   display: block;
   margin: 0 0 ($pt-grid-size * 1.5);
 
-  .pt-input,
-  .pt-select,
-  .pt-popover-wrapper {
+  .#{$ns}-input,
+  .#{$ns}-select,
+  .#{$ns}-popover-wrapper {
     display: block;
     margin-top: $pt-grid-size / 2;
     text-transform: none;
   }
 
-  .pt-select select {
+  .#{$ns}-select select {
     width: 100%;
     vertical-align: top;
     font-weight: 400;
   }
 
-  &.pt-inline {
+  &.#{$ns}-inline {
     line-height: $pt-input-height;
 
-    .pt-input,
-    .pt-input-group,
-    .pt-select,
-    .pt-popover-wrapper {
+    .#{$ns}-input,
+    .#{$ns}-input-group,
+    .#{$ns}-select,
+    .#{$ns}-popover-wrapper {
       display: inline-block;
       margin: 0 0 0 ($pt-grid-size / 2);
       vertical-align: top;
     }
 
-    .pt-input-group .pt-input {
+    .#{$ns}-input-group .#{$ns}-input {
       margin-left: 0;
     }
 
-    &.pt-large {
+    &.#{$ns}-large {
       line-height: $pt-input-height-large;
     }
   }
 
-  &:not(.pt-inline) .pt-popover-target {
+  &:not(.#{$ns}-inline) .#{$ns}-popover-target {
     display: block;
   }
 
@@ -74,21 +74,21 @@ label.pt-label {
   Disabled labels
 
   Markup:
-  <label class="pt-label pt-disabled">
+  <label class="#{$ns}-label #{$ns}-disabled">
     Label A
-    <span class="pt-text-muted">(optional)</span>
-    <input disabled class="pt-input" style="width: 200px;" type="text" placeholder="Text input" dir="auto" />
+    <span class="#{$ns}-text-muted">(optional)</span>
+    <input disabled class="#{$ns}-input" style="width: 200px;" type="text" placeholder="Text input" dir="auto" />
   </label>
-  <label class="pt-label pt-disabled">
+  <label class="#{$ns}-label #{$ns}-disabled">
     Label B
-    <div class="pt-input-group pt-disabled">
-      <span class="pt-icon pt-icon-calendar"></span>
-      <input disabled class="pt-input" style="width: 200px;" type="text" placeholder="Input group" dir="auto" />
+    <div class="#{$ns}-input-group #{$ns}-disabled">
+      <span class="#{$ns}-icon #{$ns}-icon-calendar"></span>
+      <input disabled class="#{$ns}-input" style="width: 200px;" type="text" placeholder="Input group" dir="auto" />
     </div>
   </label>
-  <label class="pt-label pt-disabled">
+  <label class="#{$ns}-label #{$ns}-disabled">
     Label C
-    <div class="pt-select pt-disabled">
+    <div class="#{$ns}-select #{$ns}-disabled">
       <select disabled>
         <option selected>Choose an item...</option>
         <option value="1">One</option>
@@ -96,22 +96,22 @@ label.pt-label {
     </div>
   </label>
 
-  Styleguide pt-label.pt-disabled
+  Styleguide label-disabled
   */
 
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     &,
-    .pt-text-muted {
+    .#{$ns}-text-muted {
       color: $pt-text-color-disabled;
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $pt-dark-heading-color;
 
-    &.pt-disabled {
+    &.#{$ns}-disabled {
       &,
-      .pt-text-muted {
+      .#{$ns}-text-muted {
         color: $pt-dark-text-color-disabled;
       }
     }
diff --git a/packages/core/src/components/forms/_numeric-input.scss b/packages/core/src/components/forms/_numeric-input.scss
index 73c4e41008..86b6be7f48 100644
--- a/packages/core/src/components/forms/_numeric-input.scss
+++ b/packages/core/src/components/forms/_numeric-input.scss
@@ -2,10 +2,10 @@
 @import "../../common/variables";
 @import "./common";
 
-.pt-numeric-input {
+.#{$ns}-numeric-input {
 
   // we need a very-specific selector here to override specificicty of selectors defined elsewhere.
-  .pt-button-group.pt-vertical > .pt-button {
+  .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
     // let the buttons shrink to equal heights
     flex: 1 1 ($pt-button-height / 2 - 1);
     width: $pt-button-height;
@@ -22,8 +22,8 @@
   }
 
   // fix button border radii when the buttons are on the left
-  .pt-button-group.pt-vertical {
-    &:first-child > .pt-button {
+  .#{$ns}-button-group.#{$ns}-vertical {
+    &:first-child > .#{$ns}-button {
       &:first-child {
         border-radius: $pt-border-radius 0 0 0;
       }
@@ -34,7 +34,7 @@
     }
   }
 
-  &.pt-large .pt-button-group.pt-vertical > .pt-button {
+  &.#{$ns}-large .#{$ns}-button-group.#{$ns}-vertical > .#{$ns}-button {
     width: $pt-button-height-large;
   }
 }
diff --git a/packages/core/src/components/forms/_select.scss b/packages/core/src/components/forms/_select.scss
index 60f6e4e2b5..10b18b690e 100644
--- a/packages/core/src/components/forms/_select.scss
+++ b/packages/core/src/components/forms/_select.scss
@@ -8,7 +8,7 @@
 Selects
 
 Markup:
-<div class="pt-select {{.modifier}}">
+<div class="#{$ns}-select {{.modifier}}">
   <select {{:modifier}}>
     <option selected>Choose an item...</option>
     <option value="1">One</option>
@@ -18,15 +18,15 @@ Markup:
   </select>
 </div>
 
-:disabled - Disabled. Also add <code>.pt-disabled</code> to <code>.pt-select</code> for icon coloring (not shown below).
-.pt-minimal - Minimal appearance
-.pt-large - Large
-.pt-fill - Expand to fill parent container
+:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-select</code> for icon coloring (not shown below).
+.#{$ns}-minimal - Minimal appearance
+.#{$ns}-large - Large
+.#{$ns}-fill - Expand to fill parent container
 
-Styleguide pt-select
+Styleguide select
 */
 
-.pt-select {
+.#{$ns}-select {
   display: inline-block;
   position: relative;
   vertical-align: middle;
@@ -49,11 +49,11 @@ Styleguide pt-select
     @extend %pt-select-arrow;
   }
 
-  &.pt-minimal select {
+  &.#{$ns}-minimal select {
     @extend %pt-select-minimal;
   }
 
-  &.pt-large {
+  &.#{$ns}-large {
     &::after {
       top: 0;
       right: $pt-grid-size * 1.2;
@@ -65,14 +65,14 @@ Styleguide pt-select
     }
   }
 
-  &.pt-fill {
+  &.#{$ns}-fill {
     &,
     select {
       width: 100%;
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     select {
       @extend %pt-dark-select;
     }
@@ -92,9 +92,9 @@ Styleguide pt-select
 Inline
 
 Markup:
-<label class="pt-label {{.modifier}}">
+<label class="#{$ns}-label {{.modifier}}">
   Label A
-  <div class="pt-select">
+  <div class="#{$ns}-select">
     <select>
       <option selected>Choose an item...</option>
       <option value="1">One</option>
@@ -102,7 +102,7 @@ Markup:
   </div>
 </label>
 
-.pt-inline - Inline
+.#{$ns}-inline - Inline
 
-Styleguide pt-select.pt-inline
+Styleguide select-inline
 */
diff --git a/packages/core/src/components/forms/checkbox.md b/packages/core/src/components/forms/checkbox.md
index 34244a6eaa..aa017d1a8f 100644
--- a/packages/core/src/components/forms/checkbox.md
+++ b/packages/core/src/components/forms/checkbox.md
@@ -1,8 +1,8 @@
 @# Checkboxes
 
-Blueprint's custom checkboxes use an extra `.pt-control-indicator` element after the `<input>` to
+Blueprint's custom checkboxes use an extra `.@ns-control-indicator` element after the `<input>` to
 achieve their custom styling. You should then wrap the whole thing in a `<label>` with the classes
-`.pt-control.pt-checkbox`.
+`.@ns-control.@ns-checkbox`.
 
 Note that attribute modifiers (`:checked`, `:disabled`) are applied on the internal `<input>`
 element. Further note that `:indeterminate` can only be set via JavaScript (the `Checkbox` React
@@ -12,7 +12,7 @@ component supports it handily with a prop).
 
 @## CSS API
 
-@css pt-checkbox
+@css checkbox
 
 @## JavaScript API
 
@@ -25,8 +25,8 @@ Make sure to review the [getting started docs for installation info](#blueprint/
 
 // advanced usage for JSX content
 <Checkbox checked={this.state.isEnabled} onChange={this.handleEnabledChange}>
-<span className="pt-icon-standard pt-icon-user" />
-Gilad Gray
+    <Icon icon="user" />
+    Gilad <strong>Gray</strong>
 </Checkbox>
 ```
 
@@ -38,11 +38,11 @@ The most common options are detailed below.
 
 @## Inline controls
 
-Checkboxes, radios, and switches all support the `.pt-inline` modifier to make them `display:
+Checkboxes, radios, and switches all support the `.@ns-inline` modifier to make them `display:
 inline-block`. Note that this modifier functions slightly differently on these elements than it
-does on `.pt-label`. On `.pt-label`, it only adjusts the layout of text _within_ the label and not
+does on `.@ns-label`. On `.@ns-label`, it only adjusts the layout of text _within_ the label and not
 the display of the label itself.
 
 Here's an example of how you might group together some controls and label them.
 
-@css pt-checkbox.pt-inline
+@css checkbox-inline
diff --git a/packages/core/src/components/forms/control-group.md b/packages/core/src/components/forms/control-group.md
index b44d6089ab..5069b3da5f 100644
--- a/packages/core/src/components/forms/control-group.md
+++ b/packages/core/src/components/forms/control-group.md
@@ -1,44 +1,44 @@
 @# Control groups
 
-A `.pt-control-group` renders several distinct controls as one unit, squaring the borders between
-them. It supports any number of `.pt-button`, `.pt-input`, `.pt-input-group`, and `.pt-select`
+A `.@ns-control-group` renders several distinct controls as one unit, squaring the borders between
+them. It supports any number of `.@ns-button`, `.@ns-input`, `.@ns-input-group`, and `.@ns-select`
 elements as direct children.
 
-Note that `.pt-control-group` does not cascade any modifiers to its children. For example, each
-child must be marked individually as `.pt-large` for uniform large appearance.
+Note that `.@ns-control-group` does not cascade any modifiers to its children. For example, each
+child must be marked individually as `.@ns-large` for uniform large appearance.
 
-<div class="pt-callout pt-intent-success pt-icon-comparison">
-    <h4 class="pt-callout-title">Control group vs. input group</h4>
+<div class="@ns-callout @ns-intent-success @ns-icon-comparison">
+    <h4 class="@ns-callout-title">Control group vs. input group</h4>
     <p>Both components group multiple elements into a single unit, but their usage patterns are
     different.</p>
-    <p>Think of `.pt-control-group` as a parent with multiple children, each of them a
+    <p>Think of `.@ns-control-group` as a parent with multiple children, each of them a
     "control."</p>
-    <p>Conversely, a `.pt-input-group` is a single control, and should function like so. A
+    <p>Conversely, a `.@ns-input-group` is a single control, and should function like so. A
     button inside of an input group should only affect that input; if its reach is further, then it
     should be promoted to live in a control group.</p>
 </div>
 
-@css pt-control-group
+@css control-group
 
 @## Responsive control groups
 
-Add the class `pt-fill` to a control group to make all elements expand equally to fill the
-available space. Then add the class `pt-fixed` to individual elements to revert them to their
+Add the class `@ns-fill` to a control group to make all elements expand equally to fill the
+available space. Then add the class `@ns-fixed` to individual elements to revert them to their
 original default sizes.
 
-Alternatively, add the class `pt-fill` to an individual element (instead of to the container)
+Alternatively, add the class `@ns-fill` to an individual element (instead of to the container)
 to expand it to fill the available space while other elements retain their original sizes.
 
 You can adjust the specific size of an element with the `flex-basis` CSS property.
 
-@css pt-control-group.pt-fill
+@css control-group-fill
 
 @## Vertical control groups
 
-Add the class `pt-vertical` to create a vertical control group. Controls in a vertical group
+Add the class `@ns-vertical` to create a vertical control group. Controls in a vertical group
 will all have the same width as the widest control.
 
-@css pt-control-group.pt-vertical
+@css control-group-vertical
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/forms/file-input.md b/packages/core/src/components/forms/file-input.md
index 065106f9ee..3deca31815 100644
--- a/packages/core/src/components/forms/file-input.md
+++ b/packages/core/src/components/forms/file-input.md
@@ -1,17 +1,17 @@
 @# File input
 
-Use the standard `input type="file"` along with a `span` with class `pt-file-upload-input`.
-Wrap that all in a `label` with class `pt-file-input`.
+Use the standard `input type="file"` along with a `span` with class `@ns-file-upload-input`.
+Wrap that all in a `label` with class `@ns-file-input`.
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Static file name</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Static file name</h4>
     File name does not update on file selection. To get this behavior,
     you must implement it separately in JS.
 </div>
 
 @## CSS API
 
-@css pt-file-input
+@css file-input
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/forms/form-group.md b/packages/core/src/components/forms/form-group.md
index fa5877ac9c..c72462db29 100644
--- a/packages/core/src/components/forms/form-group.md
+++ b/packages/core/src/components/forms/form-group.md
@@ -9,14 +9,14 @@ They also support additional helper text to aid with user navigation.
 - Link each label to its respective control element with a `for={#id}` attribute on the `<label>` and
 `id={#id}` on the control.
 
-- Add `.pt-intent-*` or `.pt-disabled` to `.pt-form-group` to style the label and helper text.
+- Add `.@ns-intent-*` or `.@ns-disabled` to `.@ns-form-group` to style the label and helper text.
 Similar to labels, nested controls need to be styled separately.
 
-- Add `.pt-inline` to `.pt-form-group` to place the label to the left of the control.
+- Add `.@ns-inline` to `.@ns-form-group` to place the label to the left of the control.
 
-- Add `.pt-large` to `.pt-form-group` to align the label when used with large inline Blueprint controls.
+- Add `.@ns-large` to `.@ns-form-group` to align the label when used with large inline Blueprint controls.
 
-@css pt-form-group
+@css form-group
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/forms/formGroup.tsx b/packages/core/src/components/forms/formGroup.tsx
index aceb4845ec..ab20bc90e2 100644
--- a/packages/core/src/components/forms/formGroup.tsx
+++ b/packages/core/src/components/forms/formGroup.tsx
@@ -16,7 +16,10 @@ export interface IFormGroupProps extends IIntentProps, IProps {
      */
     disabled?: boolean;
 
-    /** Optional helper text. The given content will be wrapped in `.pt-form-helper-text` and displayed beneath `children`. */
+    /**
+     * Optional helper text. The given content will be wrapped in
+     * `Classes.FORM_HELPER_TEXT` and displayed beneath `children`.
+     */
     helperText?: React.ReactNode;
 
     /** Whether to render the label and children on a single line. */
@@ -45,10 +48,11 @@ export interface IFormGroupProps extends IIntentProps, IProps {
 
 export class FormGroup extends React.PureComponent<IFormGroupProps, {}> {
     /**
-     * Element used to render `required` message when a boolean value is provided for that prop.
-     * Modifying the value of this property will change the default globally in your app.
+     * Element used to render `required` message when a boolean value is
+     * provided for that prop. Modifying the value of this property will change
+     * the default globally in your app.
      *
-     * Defaults to `<span class="pt-text-muted">(required)</span>`.
+     * Defaults to `<span class={Classes.TEXT_MUTED}>(required)</span>`.
      */
     public static DEFAULT_REQUIRED_CONTENT = <span className={Classes.TEXT_MUTED}>(required)</span>;
 
diff --git a/packages/core/src/components/forms/input-group.md b/packages/core/src/components/forms/input-group.md
index 561b95af45..8f8192d1a7 100644
--- a/packages/core/src/components/forms/input-group.md
+++ b/packages/core/src/components/forms/input-group.md
@@ -8,13 +8,13 @@ field.
 
 @## CSS API
 
-You can place a single `.pt-icon` or `.pt-button.pt-icon-*` on either end of the input. The order is
+You can place a single `.@ns-icon` or `.@ns-button.@ns-icon-*` on either end of the input. The order is
 dictated by the HTML markup: an element specified before the `input` appears on the left edge, and
 vice versa. You do not need to apply sizing classes to the children&mdash;they inherit the size of
 the parent input.
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Icons only</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Icons only</h4>
     <p>You cannot use buttons with text in the CSS API for input groups. The padding for text inputs
     in CSS cannot accomodate buttons whose width varies due to text content. You should use icons on
     buttons instead.</p>
@@ -23,14 +23,14 @@ the parent input.
     component _does_ support arbitrary content in its right element.
 </div>
 
-@css pt-input-group
+@css input-group
 
 @## JavaScript API
 
 The `InputGroup` component is available in the __@blueprintjs/core__ package. Make sure to review
 the [getting started docs for installation info](#blueprint/getting-started).
 
-The `InputGroup` React component encapsulates the `.pt-input-group`
+The `InputGroup` React component encapsulates the `.@ns-input-group`
 [CSS API](#core/components/forms/input-group.css-api): it supports one non-interactive icon on the
 left side and one arbitrary element on the right side. Unlike the CSS API, the React Component
 supports _content of any length_ on the right side, not just icon buttons, because it is able to
diff --git a/packages/core/src/components/forms/input.md b/packages/core/src/components/forms/input.md
index 1487c5d642..3ce003b8a9 100644
--- a/packages/core/src/components/forms/input.md
+++ b/packages/core/src/components/forms/input.md
@@ -1,17 +1,17 @@
 @# Text inputs
 
-Use the `pt-input` class on an `input[type="text"]`. You should also specify `dir="auto"`
+Use the `@ns-input` class on an `input[type="text"]`. You should also specify `dir="auto"`
 [to better support RTL languages](http://www.w3.org/International/questions/qa-html-dir#dirauto)
 (in all browsers except Internet Explorer).
 
-@css pt-input
+@css input
 
 @## Search field
 
 Changing the `<input>` element's `type` attribute to `"search"` styles it to look like a search
-field, giving it a rounded appearance. This style is equivalent to the `.pt-round` modifier, but it
+field, giving it a rounded appearance. This style is equivalent to the `.@ns-round` modifier, but it
 is applied automatically for `[type="search"]` inputs.
 
 Note that some browsers also implement a handler for the `esc` key to clear the text in a search field.
 
-@css pt-input.pt-search
+@css input-search
diff --git a/packages/core/src/components/forms/label.md b/packages/core/src/components/forms/label.md
index 37c0903c53..3fa0555424 100644
--- a/packages/core/src/components/forms/label.md
+++ b/packages/core/src/components/forms/label.md
@@ -2,8 +2,8 @@
 
 Labels enhance the usability of your forms.
 
-<div class="pt-callout pt-intent-success pt-icon-comparison">
-    <h4 class="pt-callout-title">Simple labels vs. form groups</h4>
+<div class="@ns-callout @ns-intent-success @ns-icon-comparison">
+    <h4 class="@ns-callout-title">Simple labels vs. form groups</h4>
     <p>Blueprint provides two ways of connecting label text to control fields, depending on the complexity of the control.</p>
     <p>Simple labels are a basic way to connect a label with a single control.</p>
     <p>Form groups support more complex control layouts but require more markup to maintain consistent visuals.</p>
@@ -15,23 +15,23 @@ Labels enhance the usability of your forms.
 
 Simple labels are useful for basic forms for a single `<input>`.
 
-- Add extra information to the label with `span.pt-text-muted`.
+- Add extra information to the label with `span.@ns-text-muted`.
 
 - Putting the `<input>` element _inside_ a `<label>` element increases the area where the user
 can click to activate the control. Notice how in the examples below, clicking a `<label>` focuses its `<input>`.
 
-@css pt-label
+@css label
 
 @### Disabled labels
 
-Add the `.pt-label` and `.pt-disabled` class modifiers to a `<label>` to make the label appear
+Add the `.@ns-label` and `.@ns-disabled` class modifiers to a `<label>` to make the label appear
 disabled.
 
 This styles the label text, but does not disable any nested children like inputs or selects. You
 must add the `:disabled` attribute directly to any nested elements to disable them. Similarly the respective
-`pt-*` form control will need a `.pt-disabled` modifier. See the examples below.
+`@ns-*` form control will need a `.@ns-disabled` modifier. See the examples below.
 
-@css pt-label.pt-disabled
+@css label-disabled
 
 @## JavaScript API
 
@@ -44,7 +44,7 @@ This component is a simple wrapper around the corresponding CSS API. It supports
     helperText="Helper text with details..."
     text="Label A"
 >
-    <input className="pt-input" id="text-input" placeholder="Placeholder text" />
+    <input className="@ns-input" id="text-input" placeholder="Placeholder text" />
 </Label>
 ```
 
diff --git a/packages/core/src/components/forms/numeric-input.md b/packages/core/src/components/forms/numeric-input.md
index 3e8104d1d8..79140ce5fa 100644
--- a/packages/core/src/components/forms/numeric-input.md
+++ b/packages/core/src/components/forms/numeric-input.md
@@ -42,7 +42,7 @@ custom `onKeyDown` callback) and when the field loses focus (via a custom
 `onBlur` callback). If the input is invalid when either of these callbacks is
 trigged, the field will be cleared.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     This example contains non-core functionality that is meant to demonstrate
     the extensibility of the `NumericInput` component. The correctness of the
     custom evaluation code has not been tested robustly.
@@ -61,7 +61,7 @@ Make sure to review the [getting started docs for installation info](#blueprint/
 
 `NumericInput` can be styled with the same set of CSS classes that modify
 regular [control groups](#core/components/forms/control-group). The most appropriate
-such modifier for `NumericInput` is `pt-fill`, which when passed as a
+such modifier for `NumericInput` is `@ns-fill`, which when passed as a
 `className` will make the component expand to fill all available width.
 
 @### Uncontrolled mode
diff --git a/packages/core/src/components/forms/numericInput.tsx b/packages/core/src/components/forms/numericInput.tsx
index c775f1d77d..0864235068 100644
--- a/packages/core/src/components/forms/numericInput.tsx
+++ b/packages/core/src/components/forms/numericInput.tsx
@@ -58,8 +58,8 @@ export interface INumericInputProps extends IIntentProps, IProps {
 
     /**
      * If set to `true`, the input will display with larger styling.
-     * This is equivalent to setting `pt-large` via className on the
-     * parent `.pt-control-group` and on the child `.pt-input-group`.
+     * This is equivalent to setting `Classes.LARGE` via className on the
+     * parent control group and on the child input group.
      * @default false
      */
     large?: boolean;
diff --git a/packages/core/src/components/forms/radio.md b/packages/core/src/components/forms/radio.md
index 1d68120c7d..98fa35e42b 100644
--- a/packages/core/src/components/forms/radio.md
+++ b/packages/core/src/components/forms/radio.md
@@ -1,8 +1,8 @@
 @# Radios
 
-Blueprint's custom radio buttons use an extra `.pt-control-indicator` element after the `<input>`
+Blueprint's custom radio buttons use an extra `.@ns-control-indicator` element after the `<input>`
 to achieve their custom styling. You should then wrap the whole thing in a `<label>` with the
-classes `.pt-control.pt-radio`.
+classes `.@ns-control.@ns-radio`.
 
 Note that attribute modifiers (`:checked`, `:disabled`) are applied on the internal `<input>`
 element.
@@ -11,7 +11,7 @@ element.
 
 @## CSS API
 
-@css pt-radio
+@css radio
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/forms/select-forms.md b/packages/core/src/components/forms/select-forms.md
index fcd3ee9d62..97aed40106 100644
--- a/packages/core/src/components/forms/select-forms.md
+++ b/packages/core/src/components/forms/select-forms.md
@@ -3,15 +3,15 @@
 Styling `<select>` tags requires a wrapper element to customize the dropdown caret. Put class
 modifiers on the wrapper and attribute modifiers directly on the `<select>`.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Check out [dropdown menus](#core/components/menu.dropdown-menus) for a simple JavaScript
     alternative to the `<select>` tag.
 </div>
 
-@css pt-select
+@css select
 
 @## Labeled static dropdown
 
 You can label `<select>` tags, similar to how you label any other form control.
 
-@css pt-select.pt-inline
+@css select-inline
diff --git a/packages/core/src/components/forms/switch.md b/packages/core/src/components/forms/switch.md
index ccf88a4e3a..9649eecd9b 100644
--- a/packages/core/src/components/forms/switch.md
+++ b/packages/core/src/components/forms/switch.md
@@ -7,7 +7,7 @@ simulates on/off instead of checked/unchecked.
 
 @## CSS API
 
-@css pt-switch
+@css switch
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/forms/text-area.md b/packages/core/src/components/forms/text-area.md
index 33a6df829e..436d708805 100644
--- a/packages/core/src/components/forms/text-area.md
+++ b/packages/core/src/components/forms/text-area.md
@@ -8,7 +8,7 @@ You should also specify `dir="auto"` on text areas
 
 @## CSS API
 
-@css pt-textarea
+@css textarea
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/hotkeys/_hotkeys.scss b/packages/core/src/components/hotkeys/_hotkeys.scss
index 5282128bef..dc92fbb187 100644
--- a/packages/core/src/components/hotkeys/_hotkeys.scss
+++ b/packages/core/src/components/hotkeys/_hotkeys.scss
@@ -6,7 +6,7 @@
 $kbd-key-size: 25px !default;
 $modifier-key-padding: 3px 8px 3px 6px !default;
 
-.pt-key {
+.#{$ns}-key {
   display: inline-block;
   border-radius: $pt-border-radius - 1;
   box-shadow: $pt-elevation-shadow-2;
@@ -21,11 +21,11 @@ $modifier-key-padding: 3px 8px 3px 6px !default;
   font-family: inherit;
   font-size: $pt-font-size-small;
 
-  &.pt-modifier-key {
+  &.#{$ns}-modifier-key {
     padding: $modifier-key-padding;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: $pt-dark-elevation-shadow-2,
                 inset 0 1px 0 rgba($white, 0.05);
     background: $dark-gray5;
@@ -33,33 +33,33 @@ $modifier-key-padding: 3px 8px 3px 6px !default;
   }
 }
 
-.pt-key-combo .pt-key:not(:last-child) {
+.#{$ns}-key-combo .#{$ns}-key:not(:last-child) {
   margin-right: $pt-grid-size / 2;
 }
 
-.pt-hotkey-dialog {
+.#{$ns}-hotkey-dialog {
   top: $pt-grid-size * 4;
   padding-bottom: 0;
 
-  .pt-dialog-body {
+  .#{$ns}-dialog-body {
     margin: 0;
     padding: 0;
   }
 
-  .pt-key-combo {
+  .#{$ns}-key-combo {
     flex: 1 0 auto;
     width: $pt-grid-size * 16;
     text-align: right;
   }
 }
 
-.pt-hotkey-column {
+.#{$ns}-hotkey-column {
   margin: auto;
   max-height: 80vh;
   overflow-y: auto;
   padding: $pt-grid-size * 3;
 
-  .pt-hotkey-group {
+  .#{$ns}-hotkey-group {
     margin-bottom: $pt-grid-size * 3;
 
     &:not(:first-child) {
@@ -68,7 +68,7 @@ $modifier-key-padding: 3px 8px 3px 6px !default;
   }
 }
 
-.pt-hotkey {
+.#{$ns}-hotkey {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
diff --git a/packages/core/src/components/hotkeys/hotkeys.md b/packages/core/src/components/hotkeys/hotkeys.md
index b383cd2013..55825b60a2 100644
--- a/packages/core/src/components/hotkeys/hotkeys.md
+++ b/packages/core/src/components/hotkeys/hotkeys.md
@@ -30,12 +30,12 @@ dark theme class), call the `setHotkeysDialogProps` function with `IDialogProps`
 @## Piano example
 
 Also known as the keyboard keyboard. First, click the keys or press
-<span class="pt-key-combo">
-    <kbd class="pt-key pt-modifier-key">
-        <span class="pt-icon-standard pt-icon-key-shift"></span>
+<span class="@ns-key-combo">
+    <kbd class="@ns-key @ns-modifier-key">
+        <span class="@ns-icon-standard @ns-icon-key-shift"></span>
         shift
     </kbd>
-    <kbd class="pt-key">P</kbd>
+    <kbd class="@ns-key">P</kbd>
 </span>
 to focus the piano, then press the keys on your keyboard to play some music!
 
diff --git a/packages/core/src/components/hotkeys/keyCombo.tsx b/packages/core/src/components/hotkeys/keyCombo.tsx
index 67cf83eed5..741d40a038 100644
--- a/packages/core/src/components/hotkeys/keyCombo.tsx
+++ b/packages/core/src/components/hotkeys/keyCombo.tsx
@@ -30,7 +30,7 @@ export interface IKeyComboProps extends IProps {
 
     /**
      * Whether to render in a minimal style.
-     * If `false`, each key in the combo will be rendered inside a `kbd.pt-key`.
+     * If `false`, each key in the combo will be rendered inside a `<kbd>` tag.
      * If `true`, only the icon or short name of a key will be rendered with no wrapper styles.
      * @default false
      */
diff --git a/packages/core/src/components/icon/_icon.scss b/packages/core/src/components/icon/_icon.scss
index 56568f09b4..8393389b97 100644
--- a/packages/core/src/components/icon/_icon.scss
+++ b/packages/core/src/components/icon/_icon.scss
@@ -7,21 +7,21 @@
   display: inline-block;
 
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       color: $color;
     }
   }
 }
 
-span.pt-icon-standard {
+span.#{$ns}-icon-standard {
   @include pt-icon($pt-icon-size-standard);
 }
 
-span.pt-icon-large {
+span.#{$ns}-icon-large {
   @include pt-icon($pt-icon-size-large);
 }
 
-span.pt-icon {
+span.#{$ns}-icon {
   line-height: 1;
   font-family: $icons20-family;
   font-size: inherit;
@@ -34,12 +34,12 @@ span.pt-icon {
 }
 
 @each $name, $content in $icons {
-  .pt-icon-#{$name}::before {
+  .#{$ns}-icon-#{$name}::before {
     content: $content;
   }
 }
 
-svg.pt-icon {
+svg.#{$ns}-icon {
   // respect dimensions exactly
   flex: 0 0 auto;
   vertical-align: top;
diff --git a/packages/core/src/components/icon/icon.md b/packages/core/src/components/icon/icon.md
index 05b1b55fbc..93fd12a35f 100644
--- a/packages/core/src/components/icon/icon.md
+++ b/packages/core/src/components/icon/icon.md
@@ -1,11 +1,11 @@
 @# Icon
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     See [**Icons**](#icons) for a searchable list of all available UI icons.
 </div>
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">SVG icons in 2.0</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">SVG icons in 2.0</h4>
     Blueprint 2.0 introduced SVG icon support and moved icon resources to a separate __@blueprintjs/icons__ package.
     The `Icon` component now renders SVG paths and the icon classes are no longer used by any Blueprint React component.
     Icon font support has been preserved but should be considered a legacy feature that will be removed in a
@@ -51,7 +51,7 @@ import { IconNames } from "@blueprintjs/icons";
 ```html
 <Icon icon="globe" iconSize={30} />
 <!-- renders the following HTML markup: -->
-<svg class="pt-icon" data-icon="globe" width="30" height="30" viewBox="0 0 20 20">
+<svg class="@ns-icon" data-icon="globe" width="30" height="30" viewBox="0 0 20 20">
     <title>globe</title>
     <path ... />
 </svg>
@@ -61,8 +61,8 @@ import { IconNames } from "@blueprintjs/icons";
 
 @## CSS API
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Icon fonts are legacy in 2.0</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Icon fonts are legacy in 2.0</h4>
     Blueprint's icon fonts should be considered a legacy feature and will be removed in a future major version.
     The SVGs rendered by the React component do not suffer from the blurriness of icon fonts, and browser
     support is equivalent.
@@ -71,21 +71,21 @@ import { IconNames } from "@blueprintjs/icons";
 The CSS-only icons API uses the __icon fonts__ from the __@blueprintjs/icons__ package.
 
 To use Blueprint UI icons via CSS, you must apply two classes to a `<span>` element:
-- a __sizing class__, either `pt-icon-standard` (16px) or `pt-icon-large` (20px)
-- an __icon name class__, such as `pt-icon-projects`
+- a __sizing class__, either `@ns-icon-standard` (16px) or `@ns-icon-large` (20px)
+- an __icon name class__, such as `@ns-icon-projects`
 
-Icon classes also support the four `.pt-intent-*` modifiers to color the image.
+Icon classes also support the four `.@ns-intent-*` modifiers to color the image.
 
 ```html
-<span class="pt-icon-{{size}} pt-icon-{{name}}"></span>
+<span class="@ns-icon-{{size}} @ns-icon-{{name}}"></span>
 
-<span class="pt-icon-standard pt-icon-projects"></span>
-<span class="pt-icon-large pt-icon-geosearch pt-intent-success"></span>
+<span class="@ns-icon-standard @ns-icon-projects"></span>
+<span class="@ns-icon-large @ns-icon-geosearch @ns-intent-success"></span>
 ```
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Non-standard sizes</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Non-standard sizes</h4>
     Generally, font icons should only be used at either 16px or 20px. However, if a non-standard size is
     necessary, set a `font-size` that is whole multiple of 16 or 20 with the relevant size class.
-    You can instead use the class `pt-icon` to make the icon inherit its size from surrounding text.
+    You can instead use the class `@ns-icon` to make the icon inherit its size from surrounding text.
 </div>
diff --git a/packages/core/src/components/menu/_common.scss b/packages/core/src/components/menu/_common.scss
index 92e6fc1142..d0bbb52d53 100644
--- a/packages/core/src/components/menu/_common.scss
+++ b/packages/core/src/components/menu/_common.scss
@@ -7,7 +7,7 @@ $menu-item-border-radius: $pt-border-radius - 1 !default;
 
 // Set line-height of menu items to be a multiple of the font size. This is
 // needed because if the line-height does not extend far enough past the font's
-// baseline, clipping will occur when the .pt-text-overflow-ellipsis class is
+// baseline, clipping will occur when the .#{$ns}-text-overflow-ellipsis class is
 // applied to it (#2177). Also, line-height should be an even value, or content
 // will be misaligned by one pixel (Chrome quirk).
 $menu-item-line-height-factor: 1.4;
@@ -31,7 +31,7 @@ $dark-menu-item-color-active: $dark-minimal-button-background-color-active !defa
 
 // customize modifier classes with params.
 // setting modifier to "" will generally apply it as default styles due to & selectors
-@mixin menu-item($disabled-selector: ".pt-disabled", $hover-selector: ":hover") {
+@mixin menu-item($disabled-selector: ".#{$ns}-disabled", $hover-selector: ":hover") {
   @include pt-flex-container(row, $menu-item-padding);
   align-items: flex-start;
   border-radius: $menu-item-border-radius;
@@ -41,7 +41,7 @@ $dark-menu-item-color-active: $dark-minimal-button-background-color-active !defa
   color: inherit;
   user-select: none;
 
-  > .pt-fill {
+  > .#{$ns}-fill {
     word-break: break-word;
   }
 
@@ -57,12 +57,12 @@ $dark-menu-item-color-active: $dark-minimal-button-background-color-active !defa
     color: $pt-text-color-disabled;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include dark-menu-item($disabled-selector, $hover-selector);
   }
 }
 
-@mixin dark-menu-item($disabled-selector: ".pt-disabled", $hover-selector: ":hover") {
+@mixin dark-menu-item($disabled-selector: ".#{$ns}-disabled", $hover-selector: ":hover") {
   color: inherit;
 
   &#{$hover-selector} {
@@ -78,21 +78,21 @@ $dark-menu-item-color-active: $dark-minimal-button-background-color-active !defa
 
 @mixin menu-item-intent($text-colors: $pt-intent-text-colors) {
   @each $intent, $color in $text-colors {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       color: $color;
 
-      .pt-icon {
+      .#{$ns}-icon {
         color: inherit;
       }
 
       &::before,
       &::after,
-      .pt-menu-item-label {
+      .#{$ns}-menu-item-label {
         color: $color;
       }
 
       &:hover,
-      &.pt-active {
+      &.#{$ns}-active {
         background-color: nth(map-get($button-intents, $intent), 1);
       }
 
@@ -102,11 +102,11 @@ $dark-menu-item-color-active: $dark-minimal-button-background-color-active !defa
 
       &:hover,
       &:active,
-      &.pt-active {
+      &.#{$ns}-active {
         &,
         &::before,
         &::after,
-        .pt-menu-item-label {
+        .#{$ns}-menu-item-label {
           color: $white;
         }
       }
@@ -125,7 +125,7 @@ $dark-menu-item-color-active: $dark-minimal-button-background-color-active !defa
   margin: $half-grid-size;
   border-top: 1px solid $pt-divider-black;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     border-top-color: $pt-dark-divider-white;
   }
 }
diff --git a/packages/core/src/components/menu/_menu.scss b/packages/core/src/components/menu/_menu.scss
index c0661c1de7..30ba620d73 100644
--- a/packages/core/src/components/menu/_menu.scss
+++ b/packages/core/src/components/menu/_menu.scss
@@ -12,28 +12,28 @@
 Menus
 
 Markup:
-<ul class="pt-menu {{.modifier}} pt-elevation-1">
+<ul class="#{$ns}-menu {{.modifier}} #{$ns}-elevation-1">
   <li>
-    <a class="pt-menu-item pt-icon-people" tabindex="0">Share...</a>
+    <a class="#{$ns}-menu-item #{$ns}-icon-people" tabindex="0">Share...</a>
   </li>
   <li>
-    <a class="pt-menu-item pt-icon-circle-arrow-right" tabindex="0">Move...</a>
+    <a class="#{$ns}-menu-item #{$ns}-icon-circle-arrow-right" tabindex="0">Move...</a>
   </li>
   <li>
-    <a class="pt-menu-item pt-icon-edit" tabindex="0">Rename</a>
+    <a class="#{$ns}-menu-item #{$ns}-icon-edit" tabindex="0">Rename</a>
   </li>
-  <li class="pt-menu-divider"></li>
+  <li class="#{$ns}-menu-divider"></li>
   <li>
-    <a class="pt-menu-item pt-icon-trash pt-intent-danger" tabindex="0">Delete</a>
+    <a class="#{$ns}-menu-item #{$ns}-icon-trash #{$ns}-intent-danger" tabindex="0">Delete</a>
   </li>
 </ul>
 
-.pt-large - Large size (only supported on <code>.pt-menu</code>)
+.#{$ns}-large - Large size (only supported on <code>.#{$ns}-menu</code>)
 
-Styleguide pt-menu
+Styleguide menu
 */
 
-.pt-menu {
+.#{$ns}-menu {
   margin: 0;
   border-radius: $pt-border-radius;
   background: $menu-background-color;
@@ -44,11 +44,11 @@ Styleguide pt-menu
   color: $pt-text-color;
 }
 
-.pt-menu-divider {
+.#{$ns}-menu-divider {
   @include menu-divider();
 }
 
-.pt-menu-item {
+.#{$ns}-menu-item {
   @include menu-item();
   @include menu-item-intent();
 
@@ -59,12 +59,12 @@ Styleguide pt-menu
   }
 
   &::before,
-  .pt-icon {
+  .#{$ns}-icon {
     margin-top: ($menu-item-line-height - $pt-icon-size-standard) / 2;
     color: $pt-icon-color;
   }
 
-  .pt-menu-item-label {
+  .#{$ns}-menu-item-label {
     color: $pt-text-color-muted;
   }
 
@@ -72,14 +72,14 @@ Styleguide pt-menu
     color: inherit;
   }
 
-  &.pt-active,
+  &.#{$ns}-active,
   &:active {
     background-color: $menu-item-color-active;
   }
 
   // pt-disable always overrides over styles
   // stylelint-disable declaration-no-important
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     // override global a:focus styles
     outline: none !important;
     background-color: inherit !important;
@@ -87,17 +87,17 @@ Styleguide pt-menu
     color: $pt-text-color-disabled !important;
 
     &::before,
-    .pt-icon,
-    .pt-menu-item-label {
+    .#{$ns}-icon,
+    .#{$ns}-menu-item-label {
       color: $pt-icon-color-disabled !important;
     }
   }
   // stylelint-enable declaration-no-important
 
-  .pt-large & {
+  .#{$ns}-large & {
     @include menu-item-large();
 
-    .pt-icon {
+    .#{$ns}-icon {
       // SVG icons remain standard size when menu is large
       margin-top: ($menu-item-line-height-large - $pt-icon-size-standard) / 2;
     }
@@ -110,7 +110,7 @@ Styleguide pt-menu
   }
 }
 
-button.pt-menu-item {
+button.#{$ns}-menu-item {
   border: none;
   background: none;
   width: 100%;
@@ -121,77 +121,77 @@ button.pt-menu-item {
 Menu headers
 
 Markup:
-<ul class="pt-menu pt-elevation-1">
-  <li class="pt-menu-header"><h6>Layouts</h6></li>
-  <li><button type="button" class="pt-menu-item pt-icon-layout-auto">Auto</button></li>
-  <li><button type="button" class="pt-menu-item pt-icon-layout-circle">Circle</button></li>
-  <li><button type="button" class="pt-menu-item pt-icon-layout-grid">Grid</button></li>
-  <li class="pt-menu-header"><h6>Views</h6></li>
-  <li><button type="button" class="pt-menu-item pt-icon-history">History</button></li>
-  <li><button type="button" class="pt-menu-item pt-icon-star">Favorites</button></li>
-  <li><button type="button" class="pt-menu-item pt-icon-envelope">Messages</button></li>
+<ul class="#{$ns}-menu #{$ns}-elevation-1">
+  <li class="#{$ns}-menu-header"><h6>Layouts</h6></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-auto">Auto</button></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-circle">Circle</button></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-grid">Grid</button></li>
+  <li class="#{$ns}-menu-header"><h6>Views</h6></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-history">History</button></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-star">Favorites</button></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-envelope">Messages</button></li>
 </ul>
 
-Styleguide pt-menu.pt-menu-header
+Styleguide menu-header
 */
 
-.pt-menu-header {
+.#{$ns}-menu-header {
   @include menu-header($heading-selector: "> h6");
 
-  .pt-large & {
+  .#{$ns}-large & {
     @include menu-header-large($heading-selector: "> h6");
   }
 }
 
 // dark theme
-.pt-dark {
-  .pt-menu {
+.#{$ns}-dark {
+  .#{$ns}-menu {
     background: $dark-menu-background-color;
     color: $pt-dark-text-color;
   }
 
-  .pt-menu-item {
+  .#{$ns}-menu-item {
     @include menu-item-intent($pt-dark-intent-text-colors);
 
     &::before,
-    .pt-icon {
+    .#{$ns}-icon {
       color: $pt-dark-icon-color;
     }
 
-    .pt-menu-item-label {
+    .#{$ns}-menu-item-label {
       color: $pt-dark-text-color-muted;
     }
 
-    &.pt-active,
+    &.#{$ns}-active,
     &:active {
       background-color: $dark-menu-item-color-active;
     }
 
     // pt-disable always overrides over styles
     // stylelint-disable declaration-no-important
-    &.pt-disabled {
+    &.#{$ns}-disabled {
       color: $pt-dark-text-color-disabled !important;
 
       &::before,
-      .pt-icon,
-      .pt-menu-item-label {
+      .#{$ns}-icon,
+      .#{$ns}-menu-item-label {
         color: $pt-dark-icon-color-disabled !important;
       }
     }
     // stylelint-enable declaration-no-important
   }
 
-  .pt-menu-divider,
-  .pt-menu-header {
+  .#{$ns}-menu-divider,
+  .#{$ns}-menu-header {
     border-color: $pt-dark-divider-white;
   }
 
-  .pt-menu-header > h6 {
+  .#{$ns}-menu-header > h6 {
     color: $pt-dark-heading-color;
   }
 }
 
 // #402 support menu inside label
-.pt-label .pt-menu {
+.#{$ns}-label .#{$ns}-menu {
   margin-top: $pt-grid-size / 2;
 }
diff --git a/packages/core/src/components/menu/_submenu.scss b/packages/core/src/components/menu/_submenu.scss
index d8433ed92e..2462450b58 100644
--- a/packages/core/src/components/menu/_submenu.scss
+++ b/packages/core/src/components/menu/_submenu.scss
@@ -5,37 +5,37 @@
 @import "~@blueprintjs/icons/src/icons";
 @import "./common";
 
-.pt-submenu {
-  > .pt-popover-wrapper {
+.#{$ns}-submenu {
+  > .#{$ns}-popover-wrapper {
     display: inherit;
 
-    > .pt-popover-target {
+    > .#{$ns}-popover-target {
       display: inherit;
       // override very specific selector for popovers in button groups
       // stylelint-disable-next-line declaration-no-important
       float: none !important;
     }
 
-    > .pt-popover-open > .pt-menu-item {
+    > .#{$ns}-popover-open > .#{$ns}-menu-item {
       // keep a trail of hovered items as submenus are opened
       // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
-      @extend .pt-menu-item:hover;
+      @extend .#{$ns}-menu-item:hover;
     }
   }
 
   // horizontal padding leaves some space from parent menu item, and extends mouse zone
-  .pt-popover {
+  .#{$ns}-popover {
     box-shadow: none;
     padding: 0 $half-grid-size;
 
-    > .pt-popover-content {
+    > .#{$ns}-popover-content {
       box-shadow: $pt-popover-box-shadow;
     }
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       box-shadow: none;
 
-      > .pt-popover-content {
+      > .#{$ns}-popover-content {
         box-shadow: $pt-dark-popover-box-shadow;
       }
     }
diff --git a/packages/core/src/components/menu/menu.md b/packages/core/src/components/menu/menu.md
index c4e2a54c4d..93f3914c13 100644
--- a/packages/core/src/components/menu/menu.md
+++ b/packages/core/src/components/menu/menu.md
@@ -41,9 +41,9 @@ class MenuExample extends React.Component<{}, {}> {
 
 @### Menu
 
-A `Menu`'s children (menu items and dividers) are rendered as the contents of a `.pt-menu` element.
+A `Menu`'s children (menu items and dividers) are rendered as the contents of a `.@ns-menu` element.
 
-You can add the `pt-large` class to the `Menu` to make a larger version of the menu.
+You can add the `@ns-large` class to the `Menu` to make a larger version of the menu.
 
 @interface IMenuProps
 
@@ -51,7 +51,7 @@ You can add the `pt-large` class to the `Menu` to make a larger version of the m
 
 A `MenuItem` is a single interactive item in a `Menu`.
 
-This component renders an `a.pt-menu-item`. Make the `MenuItem` a link by providing the `href`,
+This component renders an `a.@ns-menu-item`. Make the `MenuItem` a link by providing the `href`,
 `target`, and `onClick` props as necessary.
 
 Create submenus by nesting `MenuItem`s inside each other as `children`. Use the `text` prop
@@ -81,8 +81,8 @@ there is not enough room to the right.
 </Menu>
 ```
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">JavaScript only</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">JavaScript only</h4>
     Submenus are only supported in the React components. They cannot be created with CSS alone because
     they rely on the [`Popover`](#core/components/popover) component for positioning and transitions.
 </div>
@@ -100,7 +100,7 @@ element as the `content` property of a `Popover`:
 
 When the user clicks a menu item that is not disabled and is not part of a submenu, the popover is
 automatically dismissed (in other words, the menu closes). This is because the `MenuItem` component
-adds the `pt-popover-dismiss` class to these items by default (see
+adds the `@ns-popover-dismiss` class to these items by default (see
 [Popover JavaScript API](#core/components/popover) for more information). If you want to opt out of
 this behavior, you can add the `shouldDismissPopover` prop to a `MenuItem`.
 
@@ -111,46 +111,46 @@ dismiss the `Popover`. Selecting other menu items does dismiss the popover.
 
 @## CSS API
 
-Menus can be constructed manually using the HTML markup and `pt-menu-*` classes below. However, you
+Menus can be constructed manually using the HTML markup and `@ns-menu-*` classes below. However, you
 should use the menu [React components](#core/components/menu.javscript-api) instead wherever possible,
 as they abstract away the tedious parts of implementing a menu.
 
-* Begin with a `ul.pt-menu`. Each `li` child denotes a single entry in the menu.
+* Begin with a `ul.@ns-menu`. Each `li` child denotes a single entry in the menu.
 
-* Put a `.pt-menu-item` element inside an `li` to create a clickable entry. Use either `<button>` or
+* Put a `.@ns-menu-item` element inside an `li` to create a clickable entry. Use either `<button>` or
   `<a>` tags for menu items to denote interactivity.
 
 * Add icons to menu items the same way you would to buttons: simply add the appropriate
-  `pt-icon-<name>` class\*.
+  `@ns-icon-<name>` class\*.
 
-* Make menu items active with the class `pt-active` (along with `pt-intent-*` if suitable).
+* Make menu items active with the class `@ns-active` (along with `@ns-intent-*` if suitable).
 
-* Make menu items non-interactive with the class `pt-disabled`.
+* Make menu items non-interactive with the class `@ns-disabled`.
 
 * Wrap menu item text in a `<span>` element for proper alignment. (Note that React automatically
   does this.)
 
-* Add a right-aligned label to a menu item by adding a `span.pt-menu-item-label` inside the
-  `.pt-menu-item`, after the content. Add an icon to the label by adding icon classes to the label
-  element (`pt-icon-standard` size is recommended).
+* Add a right-aligned label to a menu item by adding a `span.@ns-menu-item-label` inside the
+  `.@ns-menu-item`, after the content. Add an icon to the label by adding icon classes to the label
+  element (`@ns-icon-standard` size is recommended).
 
-* Add a divider between items with `li.pt-menu-divider`.
+* Add a divider between items with `li.@ns-menu-divider`.
 
 * If you want the popover to close when the user clicks a menu item, add the class
-  `pt-popover-dismiss` to any relevant menu items.
+  `@ns-popover-dismiss` to any relevant menu items.
 
-<small>\* You do not need to add a `pt-icon-<sizing>` class to menu items—icon sizing is
-defined as part of `.pt-menu-item`.</small>
+<small>\* You do not need to add a `@ns-icon-<sizing>` class to menu items—icon sizing is
+defined as part of `.@ns-menu-item`.</small>
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Note that the following examples are `display: inline-block`; you may need to adjust
     menu width in your own usage.
 </div>
 
-@css pt-menu
+@css menu
 
 @### Section headers
 
-Add an `li.pt-menu-header`. Wrap the text in an `<h6>` tag for proper typography and borders.
+Add an `li.@ns-menu-header`. Wrap the text in an `<h6>` tag for proper typography and borders.
 
-@css pt-menu.pt-menu-header
+@css menu-header
diff --git a/packages/core/src/components/navbar/_navbar.scss b/packages/core/src/components/navbar/_navbar.scss
index 98eb7d31ca..467fd194ba 100644
--- a/packages/core/src/components/navbar/_navbar.scss
+++ b/packages/core/src/components/navbar/_navbar.scss
@@ -7,24 +7,24 @@
 Navbars
 
 Markup:
-<nav class="pt-navbar {{.modifier}}">
-  <div class="pt-navbar-group pt-align-left">
-    <div class="pt-navbar-heading">Blueprint</div>
-    <input class="pt-input" placeholder="Search files..." type="text" />
+<nav class="#{$ns}-navbar {{.modifier}}">
+  <div class="#{$ns}-navbar-group #{$ns}-align-left">
+    <div class="#{$ns}-navbar-heading">Blueprint</div>
+    <input class="#{$ns}-input" placeholder="Search files..." type="text" />
   </div>
-  <div class="pt-navbar-group pt-align-right">
-    <button class="pt-button pt-minimal pt-icon-home">Home</button>
-    <button class="pt-button pt-minimal pt-icon-document">Files</button>
-    <span class="pt-navbar-divider"></span>
-    <button class="pt-button pt-minimal pt-icon-user"></button>
-    <button class="pt-button pt-minimal pt-icon-notifications"></button>
-    <button class="pt-button pt-minimal pt-icon-cog"></button>
+  <div class="#{$ns}-navbar-group #{$ns}-align-right">
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-home">Home</button>
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-document">Files</button>
+    <span class="#{$ns}-navbar-divider"></span>
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-user"></button>
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-notifications"></button>
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-cog"></button>
   </div>
 </nav>
 
-.pt-dark - Dark theme
+.#{$ns}-dark - Dark theme
 
-Styleguide pt-navbar
+Styleguide navbar
 */
 
 $navbar-padding: $pt-grid-size * 1.5 !default;
@@ -32,7 +32,7 @@ $navbar-padding: $pt-grid-size * 1.5 !default;
 $navbar-background-color: $white !default;
 $dark-navbar-background-color: $dark-gray5 !default;
 
-.pt-navbar {
+.#{$ns}-navbar {
   position: relative;
   z-index: $pt-z-index-content;
   box-shadow: $pt-elevation-shadow-1;
@@ -40,60 +40,60 @@ $dark-navbar-background-color: $dark-gray5 !default;
   height: $pt-navbar-height;
   padding: 0 $navbar-padding;
 
-  &.pt-dark,
-  .pt-dark & {
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
     background-color: $dark-navbar-background-color;
   }
 
   // shadow for dark navbar in light theme apps
-  &.pt-dark {
+  &.#{$ns}-dark {
     box-shadow: inset $pt-dark-elevation-shadow-1;
   }
 
   // shadow for dark navbar in dark theme apps
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: $pt-dark-elevation-shadow-1;
   }
 
-  &.pt-fixed-top {
+  &.#{$ns}-fixed-top {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
   }
 
-  .pt-logo {
+  .#{$ns}-logo {
     // logo must be centered in 50px square
     margin-right: $navbar-padding;
     width: $pt-navbar-height - $navbar-padding * 2;
   }
 }
 
-.pt-navbar-heading {
+.#{$ns}-navbar-heading {
   margin-right: $navbar-padding;
   font-size: $pt-font-size-large;
 }
 
-.pt-navbar-group {
+.#{$ns}-navbar-group {
   display: flex;
   align-items: center;
   height: $pt-navbar-height;
 
-  &.pt-align-left {
+  &.#{$ns}-align-left {
     float: left;
   }
 
-  &.pt-align-right {
+  &.#{$ns}-align-right {
     float: right;
   }
 }
 
-.pt-navbar-divider {
+.#{$ns}-navbar-divider {
   margin: 0 $pt-grid-size;
   border-left: 1px solid $pt-divider-black;
   height: $pt-navbar-height - $pt-grid-size * 3;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     border-left-color: $pt-dark-divider-white;
   }
 }
@@ -102,21 +102,21 @@ $dark-navbar-background-color: $dark-gray5 !default;
 Fixed width
 
 Markup:
-<nav class="pt-navbar pt-dark">
+<nav class="#{$ns}-navbar #{$ns}-dark">
   <div style="margin: 0 auto; width: 480px;"> <!-- ADD ME -->
-    <div class="pt-navbar-group pt-align-left">
-      <div class="pt-navbar-heading">Blueprint</div>
+    <div class="#{$ns}-navbar-group #{$ns}-align-left">
+      <div class="#{$ns}-navbar-heading">Blueprint</div>
     </div>
-    <div class="pt-navbar-group pt-align-right">
-      <button class="pt-button pt-minimal pt-icon-home">Home</button>
-      <button class="pt-button pt-minimal pt-icon-document">Files</button>
-      <span class="pt-navbar-divider"></span>
-      <button class="pt-button pt-minimal pt-icon-user"></button>
-      <button class="pt-button pt-minimal pt-icon-notifications"></button>
-      <button class="pt-button pt-minimal pt-icon-cog"></button>
+    <div class="#{$ns}-navbar-group #{$ns}-align-right">
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-home">Home</button>
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-document">Files</button>
+      <span class="#{$ns}-navbar-divider"></span>
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-user"></button>
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-notifications"></button>
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-cog"></button>
     </div>
   </div>
 </nav>
 
-Styleguide pt-navbar.pt-container
+Styleguide navbar-container
 */
diff --git a/packages/core/src/components/navbar/navbar.md b/packages/core/src/components/navbar/navbar.md
index 3a5a2f6a21..19ec5e50fb 100644
--- a/packages/core/src/components/navbar/navbar.md
+++ b/packages/core/src/components/navbar/navbar.md
@@ -2,30 +2,30 @@
 
 Navbars present useful navigation controls at the top of an application.
 
-The `.pt-navbar` CSS component can have up to two groups of elements: a left-aligned group and a
+The `.@ns-navbar` CSS component can have up to two groups of elements: a left-aligned group and a
 right-aligned group. These groups can contain multiple elements, which are laid out horizontally.
 
 @## CSS API
 
 Use the following classes to construct a navbar:
 
-* `nav.pt-navbar` &ndash; The parent element. Use a `<nav>` element for accessibility.
-* `.pt-navbar-group.pt-align-(left|right)` &ndash; Left- or right-aligned group.
-* `.pt-navbar-heading` &ndash; Larger text for your application title.
-* `.pt-navbar-divider` &ndash; Thin vertical line that can be placed between groups of elements.
+* `nav.@ns-navbar` &ndash; The parent element. Use a `<nav>` element for accessibility.
+* `.@ns-navbar-group.@ns-align-(left|right)` &ndash; Left- or right-aligned group.
+* `.@ns-navbar-heading` &ndash; Larger text for your application title.
+* `.@ns-navbar-divider` &ndash; Thin vertical line that can be placed between groups of elements.
 
-@css pt-navbar
+@css navbar
 
 @### Fixed to viewport top
 
-Add the `.pt-fixed-top` class to the `.pt-navbar` to attach it to the top of the viewport using
+Add the `.@ns-fixed-top` class to the `.@ns-navbar` to attach it to the top of the viewport using
 `position: fixed; top: 0;`. This is so-called "sticky" behavior: the navbar stays at the top of the
 screen as the user scrolls through the document.
 
 This modifier is not illustrated here because it breaks the documentation flow.
 
-<div class="pt-callout pt-intent-danger pt-icon-error">
-    <h4 class="pt-callout-title">Body padding required</h4>
+<div class="@ns-callout @ns-intent-danger @ns-icon-error">
+    <h4 class="@ns-callout-title">Body padding required</h4>
     The fixed navbar will lie on top of your other content unless you add padding to the top of the
     `<body>` element equal to the height of the navbar. Use the `$pt-navbar-height` Sass variable to
     access the height of the navbar (50px).
@@ -36,10 +36,10 @@ This modifier is not illustrated here because it breaks the documentation flow.
 If your application is inside a fixed-width container (instead of spanning the entire viewport), you
 can align the navbar to match.
 
-Wrap your `.pt-navbar-group`s in an element with your desired `width` and `margin: 0 auto;` to
+Wrap your `.@ns-navbar-group`s in an element with your desired `width` and `margin: 0 auto;` to
 horizontally center it.
 
-@css pt-navbar.pt-container
+@css navbar-container
 
 @## JavaScript API
 
@@ -57,8 +57,8 @@ them supports the full range of HTML props.
     <NavbarGroup align={Alignment.LEFT}>
         <NavbarHeading>Blueprint</NavbarHeading>
         <NavbarDivider />
-        <Button className="pt-minimal" icon="home" text="Home" />
-        <Button className="pt-minimal" icon="document" text="Files" />
+        <Button className="@ns-minimal" icon="home" text="Home" />
+        <Button className="@ns-minimal" icon="document" text="Files" />
     </NavbarGroup>
 </Navbar>
 ```
diff --git a/packages/core/src/components/non-ideal-state/_non-ideal-state.scss b/packages/core/src/components/non-ideal-state/_non-ideal-state.scss
index c75d070276..681acdbadc 100644
--- a/packages/core/src/components/non-ideal-state/_non-ideal-state.scss
+++ b/packages/core/src/components/non-ideal-state/_non-ideal-state.scss
@@ -8,20 +8,20 @@
 Non-ideal state
 
 Markup:
-<div class="pt-non-ideal-state">
-  <div class="pt-non-ideal-state-visual pt-non-ideal-state-icon">
-    <span class="pt-icon pt-icon-folder-open"></span>
+<div class="#{$ns}-non-ideal-state">
+  <div class="#{$ns}-non-ideal-state-visual #{$ns}-non-ideal-state-icon">
+    <span class="#{$ns}-icon #{$ns}-icon-folder-open"></span>
   </div>
-  <h4 class="pt-non-ideal-state-title">This folder is empty</h4>
-  <div class="pt-non-ideal-state-description">
+  <h4 class="#{$ns}-non-ideal-state-title">This folder is empty</h4>
+  <div class="#{$ns}-non-ideal-state-description">
     Create a new file to populate the folder.
   </div>
 </div>
 
-Styleguide pt-non-ideal-state
+Styleguide non-ideal-state
 */
 
-.pt-non-ideal-state {
+.#{$ns}-non-ideal-state {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -32,21 +32,21 @@ Styleguide pt-non-ideal-state
   height: 100%;
 }
 
-.pt-non-ideal-state > :not(:last-child) {
+.#{$ns}-non-ideal-state > :not(:last-child) {
   margin-bottom: $pt-grid-size * 2;
 }
 
-.pt-non-ideal-state-icon .pt-icon {
+.#{$ns}-non-ideal-state-icon .#{$ns}-icon {
   color: $pt-icon-color-disabled;
   font-size: $pt-icon-size-large * 3;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $pt-dark-icon-color-disabled;
   }
 }
 
-.pt-non-ideal-state-title,
-.pt-non-ideal-state-description {
+.#{$ns}-non-ideal-state-title,
+.#{$ns}-non-ideal-state-description {
   max-width: 100%; // for Internet Explorer (https://github.com/palantir/blueprint/issues/1193)
   text-align: center;
 }
diff --git a/packages/core/src/components/non-ideal-state/non-ideal-state.md b/packages/core/src/components/non-ideal-state/non-ideal-state.md
index 64de848438..58828fd595 100644
--- a/packages/core/src/components/non-ideal-state/non-ideal-state.md
+++ b/packages/core/src/components/non-ideal-state/non-ideal-state.md
@@ -20,7 +20,7 @@ In this case, a good practice is to add a call to action directing the user what
 You may use the provided styles without using the React component described below.
 See the example below.
 
-@css pt-non-ideal-state
+@css non-ideal-state
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/overlay/_overlay.scss b/packages/core/src/components/overlay/_overlay.scss
index 2103965ce0..aecda03278 100644
--- a/packages/core/src/components/overlay/_overlay.scss
+++ b/packages/core/src/components/overlay/_overlay.scss
@@ -6,27 +6,27 @@
 $overlay-background-color: rgba($black, 0.7) !default;
 
 // restricts scrolling of underlying content while the overlay is open
-body.pt-overlay-open {
+body.#{$ns}-overlay-open {
   overflow: hidden;
 }
 
-.pt-overlay {
+.#{$ns}-overlay {
   // 0-out all positions so page won't jump when position changes (0s already there)
   @include position-all(static, 0);
   z-index: $pt-z-index-overlay;
 
-  &:not(.pt-overlay-open) {
+  &:not(.#{$ns}-overlay-open) {
     // because of the 0-position covering the viewport,
     // we must ignore the mouse when not open
     pointer-events: none;
   }
 
-  &.pt-overlay-scroll-container {
+  &.#{$ns}-overlay-scroll-container {
     // scroll container covers the entire viewport
     position: fixed;
     overflow: auto;
 
-    &.pt-overlay-inline {
+    &.#{$ns}-overlay-inline {
       // when rendered inline, we want the overlay to position itself relative to
       // its parent container, not relative to the whole window. thus, we change
       // to position:absolute.
@@ -34,7 +34,7 @@ body.pt-overlay-open {
     }
   }
 
-  &.pt-overlay-inline {
+  &.#{$ns}-overlay-inline {
     // inline overlays can overflow container by default (see Dialog & Popover)
     overflow: visible;
   }
@@ -42,13 +42,13 @@ body.pt-overlay-open {
 
 // this class is added to each Overlay child so that users won't need to
 // explicitly manage the position mode for inline and non-inline rendering.
-.pt-overlay-content {
+.#{$ns}-overlay-content {
   // default fixed pulls it out of the flow and makes it viewport-relative
   position: fixed;
   z-index: $pt-z-index-overlay;
 
-  .pt-overlay-inline &,
-  .pt-overlay-scroll-container & {
+  .#{$ns}-overlay-inline &,
+  .#{$ns}-overlay-scroll-container & {
     // but inline (or scrollable) overlays want their children to respect
     // the parent positioning context. also allows the content to scroll.
     position: absolute;
@@ -56,10 +56,10 @@ body.pt-overlay-open {
 }
 
 // fixed position so the backdrop forecefully covers the whole screen
-.pt-overlay-backdrop {
+.#{$ns}-overlay-backdrop {
   @include position-all(fixed, 0);
   @include react-transition(
-    "pt-overlay",
+    "#{$ns}-overlay",
     (opacity: 0 1),
     $pt-transition-duration * 2,
     $before: "&"
@@ -74,7 +74,7 @@ body.pt-overlay-open {
   }
 
   // as mentioned above: when inline, Overlay backdrop must respect parent
-  .pt-overlay-inline & {
+  .#{$ns}-overlay-inline & {
     position: absolute;
   }
 }
diff --git a/packages/core/src/components/overlay/overlay.md b/packages/core/src/components/overlay/overlay.md
index a2af892fe0..0184838eff 100644
--- a/packages/core/src/components/overlay/overlay.md
+++ b/packages/core/src/components/overlay/overlay.md
@@ -28,8 +28,8 @@ optional backdrop element will be inserted before the children if `hasBackdrop={
 The `onClose` callback prop is invoked when user interaction causes the overlay to close,
 but your application is responsible for updating the state that actually closes the overlay.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">A note about overlay content positioning</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">A note about overlay content positioning</h4>
     When rendered inline, content will automatically be set to `position: absolute` to respect
     document flow. Otherwise, content will be set to `position: fixed` to cover the entire viewport.
 </div>
@@ -49,11 +49,11 @@ but your application is responsible for updating the state that actually closes
 
 Overlays rely heavily on fixed and absolute positioning. By default, a large overlay will not cause
 the page to scroll, and any overflowing content will be hidden. Fortunately, Blueprint makes
-scrolling support very easy: simply pass `"pt-overlay-scroll-container"` as the Overlay `className`,
+scrolling support very easy: simply pass `"@ns-overlay-scroll-container"` as the Overlay `className`,
 and we'll take care of the rest.
 
 ```tsx
-<Overlay className="pt-overlay-scroll-container" ... />
+<Overlay className="@ns-overlay-scroll-container" ... />
 ```
 
 The `Dialog` component applies this CSS class automatically.
diff --git a/packages/core/src/components/overlay/overlay.tsx b/packages/core/src/components/overlay/overlay.tsx
index 46d16b2c51..eb7262d378 100644
--- a/packages/core/src/components/overlay/overlay.tsx
+++ b/packages/core/src/components/overlay/overlay.tsx
@@ -120,7 +120,7 @@ export interface IOverlayProps extends IOverlayableProps, IBackdropProps, IProps
     /**
      * Name of the transition for internal `CSSTransition`.
      * Providing your own name here will require defining new CSS transition properties.
-     * @default "pt-overlay"
+     * @default Classes.OVERLAY
      */
     transitionName?: string;
 }
diff --git a/packages/core/src/components/popover/_common.scss b/packages/core/src/components/popover/_common.scss
index 4cac289a57..eddb0bd77e 100644
--- a/packages/core/src/components/popover/_common.scss
+++ b/packages/core/src/components/popover/_common.scss
@@ -23,7 +23,7 @@ $dark-popover-background-color: $dark-gray4 !default;
   // we have to slide it over by that amount first and then by the set offset value
   $computed-arrow-offset: ($arrow-diagonal-half-size - $arrow-square-size) * 0.5 + $arrow-offset;
 
-  .pt-popover-arrow {
+  .#{$ns}-popover-arrow {
     position: absolute;
     width: $arrow-square-size;
     height: $arrow-square-size;
@@ -37,11 +37,11 @@ $dark-popover-background-color: $dark-gray4 !default;
   }
 
   // shift content away from target edge to make space for the arrow
-  .pt-tether-element-attached-bottom.pt-tether-target-attached-top > & {
+  .#{$ns}-tether-element-attached-bottom.#{$ns}-tether-target-attached-top > & {
     margin-top: -$content-margin;
     margin-bottom: $content-margin;
 
-    > .pt-popover-arrow {
+    > .#{$ns}-popover-arrow {
       bottom: $arrow-position;
 
       svg {
@@ -50,10 +50,10 @@ $dark-popover-background-color: $dark-gray4 !default;
     }
   }
 
-  .pt-tether-element-attached-left.pt-tether-target-attached-right > & {
+  .#{$ns}-tether-element-attached-left.#{$ns}-tether-target-attached-right > & {
     margin-left: $content-margin;
 
-    > .pt-popover-arrow {
+    > .#{$ns}-popover-arrow {
       left: $arrow-position;
 
       svg {
@@ -62,10 +62,10 @@ $dark-popover-background-color: $dark-gray4 !default;
     }
   }
 
-  .pt-tether-element-attached-top.pt-tether-target-attached-bottom > & {
+  .#{$ns}-tether-element-attached-top.#{$ns}-tether-target-attached-bottom > & {
     margin-top: $content-margin;
 
-    > .pt-popover-arrow {
+    > .#{$ns}-popover-arrow {
       top: $arrow-position;
 
       svg {
@@ -74,14 +74,14 @@ $dark-popover-background-color: $dark-gray4 !default;
     }
   }
 
-  .pt-tether-element-attached-right.pt-tether-target-attached-left > & {
+  .#{$ns}-tether-element-attached-right.#{$ns}-tether-target-attached-left > & {
     // we keep the positive right margin for ease of arrow positioning.
     margin-right: $content-margin;
     // div will expand to the right and parent div won't be repositioned,
     // so we need to use negative left margin to move content.
     margin-left: -$content-margin;
 
-    > .pt-popover-arrow {
+    > .#{$ns}-popover-arrow {
       right: $arrow-position;
 
       svg {
@@ -91,12 +91,12 @@ $dark-popover-background-color: $dark-gray4 !default;
   }
 
   // "center" and "middle" attachments
-  .pt-tether-element-attached-middle > & > .pt-popover-arrow {
+  .#{$ns}-tether-element-attached-middle > & > .#{$ns}-popover-arrow {
     top: 50%;
     transform: translateY(-50%);
   }
 
-  .pt-tether-element-attached-center > & > .pt-popover-arrow {
+  .#{$ns}-tether-element-attached-center > & > .#{$ns}-popover-arrow {
     right: 50%;
     transform: translateX(50%);
   }
@@ -105,14 +105,14 @@ $dark-popover-background-color: $dark-gray4 !default;
   @each $side in (top, right, left, bottom) {
     // giant selector is 1 character too long :(
     // stylelint-disable-next-line max-line-length
-    .pt-tether-element-attached-#{$side}.pt-tether-target-attached-#{$side} > & > .pt-popover-arrow {
+    .#{$ns}-tether-element-attached-#{$side}.#{$ns}-tether-target-attached-#{$side} > & > .#{$ns}-popover-arrow {
       #{$side}: $computed-arrow-offset;
     }
   }
 
   @each $top in (top, middle, bottom) {
     @each $left in (left, center, right) {
-      .pt-tether-element-attached-#{$top}.pt-tether-element-attached-#{$left} > & {
+      .#{$ns}-tether-element-attached-#{$top}.#{$ns}-tether-element-attached-#{$left} > & {
         @if ($top == middle) {
           // "middle" is tether's way of saying "top == center"
           transform-origin: center $left;
@@ -135,21 +135,21 @@ $dark-popover-background-color: $dark-gray4 !default;
 ) {
   box-shadow: $shadows;
 
-  .pt-popover-content {
+  .#{$ns}-popover-content {
     background: $background-color;
     color: $text-color;
   }
 
-  .pt-popover-arrow::before {
+  .#{$ns}-popover-arrow::before {
     box-shadow: 1px 1px 6px rgba($black, $arrow-drop-shadow-opacity);
   }
 
-  .pt-popover-arrow-border {
+  .#{$ns}-popover-arrow-border {
     fill: $black;
     fill-opacity: $arrow-border-shadow-opacity;
   }
 
-  .pt-popover-arrow-fill {
+  .#{$ns}-popover-arrow-fill {
     fill: $background-color;
   }
 }
@@ -157,34 +157,34 @@ $dark-popover-background-color: $dark-gray4 !default;
 @mixin popover-inline-position() {
   position: absolute;
 
-  &.pt-tether-element-attached-bottom.pt-tether-target-attached-top    { bottom: 100%; }
-  &.pt-tether-element-attached-left.pt-tether-target-attached-right    { left: 100%; }
-  &.pt-tether-element-attached-top.pt-tether-target-attached-bottom    { top: 100%; }
-  &.pt-tether-element-attached-right.pt-tether-target-attached-left    { right: 100%; }
+  &.#{$ns}-tether-element-attached-bottom.#{$ns}-tether-target-attached-top    { bottom: 100%; }
+  &.#{$ns}-tether-element-attached-left.#{$ns}-tether-target-attached-right    { left: 100%; }
+  &.#{$ns}-tether-element-attached-top.#{$ns}-tether-target-attached-bottom    { top: 100%; }
+  &.#{$ns}-tether-element-attached-right.#{$ns}-tether-target-attached-left    { right: 100%; }
 
-  &.pt-tether-element-attached-top.pt-tether-target-attached-top       { top: 0; }
-  &.pt-tether-element-attached-right.pt-tether-target-attached-right   { right: 0; }
-  &.pt-tether-element-attached-bottom.pt-tether-target-attached-bottom { bottom: 0; }
-  &.pt-tether-element-attached-left.pt-tether-target-attached-left     { left: 0; }
+  &.#{$ns}-tether-element-attached-top.#{$ns}-tether-target-attached-top       { top: 0; }
+  &.#{$ns}-tether-element-attached-right.#{$ns}-tether-target-attached-right   { right: 0; }
+  &.#{$ns}-tether-element-attached-bottom.#{$ns}-tether-target-attached-bottom { bottom: 0; }
+  &.#{$ns}-tether-element-attached-left.#{$ns}-tether-target-attached-left     { left: 0; }
 
-  &.pt-tether-element-attached-middle {
+  &.#{$ns}-tether-element-attached-middle {
     top: 50%;
     transform: translateY(-50%);
   }
 
-  &.pt-tether-element-attached-center {
+  &.#{$ns}-tether-element-attached-center {
     left: 50%;
     transform: translateX(-50%);
   }
 }
 
 @mixin fade-transition() {
-  @include react-transition("pt-popover", (opacity: 0 1), $before: "&");
+  @include react-transition("#{$ns}-popover", (opacity: 0 1), $before: "&");
 }
 
 @mixin scale-transition() {
   @include react-transition(
-    "pt-popover",
+    "#{$ns}-popover",
     (transform: scale(0.3) scale(1)),
     $duration: $pt-transition-duration * 3,
     $easing: $pt-transition-ease-bounce,
diff --git a/packages/core/src/components/popover/_popover.scss b/packages/core/src/components/popover/_popover.scss
index 93ddd3c31a..a659b8e10a 100644
--- a/packages/core/src/components/popover/_popover.scss
+++ b/packages/core/src/components/popover/_popover.scss
@@ -5,7 +5,7 @@
 
 $popover-width: $pt-grid-size * 35 !default;
 
-.pt-popover {
+.#{$ns}-popover {
   @include popover-sizing(
     $arrow-square-size: 30px,
     $arrow-offset: 4px,
@@ -23,13 +23,13 @@ $popover-width: $pt-grid-size * 35 !default;
   z-index: $pt-z-index-overlay;
   border-radius: $pt-border-radius;
 
-  .pt-popover-content {
+  .#{$ns}-popover-content {
     position: relative;
     border-radius: $pt-border-radius;
   }
 
-  &.pt-popover-content-sizing {
-    .pt-popover-content {
+  &.#{$ns}-popover-content-sizing {
+    .#{$ns}-popover-content {
       max-width: $popover-width;
       padding: $pt-grid-size * 2;
     }
@@ -37,23 +37,23 @@ $popover-width: $pt-grid-size * 35 !default;
     // only inline popovers get a width if this class is applied.
     // note that an inline overlay will be an immediate next sibling
     // of the popover target as of Blueprint 2.0.
-    .pt-popover-target + .pt-overlay & {
+    .#{$ns}-popover-target + .#{$ns}-overlay & {
       width: $popover-width;
     }
   }
 
-  &.pt-minimal {
+  &.#{$ns}-minimal {
     // popovers with no obvious trigger will never have margin because the arrow
     // is hidden so it is safe to remove in all cases always
     margin: 0 !important; // stylelint-disable-line declaration-no-important
 
-    .pt-popover-arrow {
+    .#{$ns}-popover-arrow {
       display: none;
     }
 
-    &.pt-popover {
+    &.#{$ns}-popover {
       @include react-transition(
-        "pt-popover",
+        "#{$ns}-popover",
         (transform: scale(1) scale(1)),
         $duration: $pt-transition-duration,
         $after: "> &"
@@ -61,8 +61,8 @@ $popover-width: $pt-grid-size * 35 !default;
     }
   }
 
-  &.pt-dark,
-  .pt-dark & {
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
     @include popover-appearance(
       $dark-popover-background-color,
       inherit,
@@ -74,7 +74,7 @@ $popover-width: $pt-grid-size * 35 !default;
 }
 
 // the box-shadow under the arrow SVG paths
-.pt-popover-arrow::before {
+.#{$ns}-popover-arrow::before {
   display: block;
   position: absolute;
   transform: rotate(45deg);
@@ -83,15 +83,15 @@ $popover-width: $pt-grid-size * 35 !default;
 }
 
 // remove arrow when popover is pinned inside its container
-.pt-tether-pinned .pt-popover-arrow {
+.#{$ns}-tether-pinned .#{$ns}-popover-arrow {
   display: none;
 }
 
-.pt-popover-backdrop {
+.#{$ns}-popover-backdrop {
   background: rgba($white, 0);
 }
 
-.pt-transition-container {
+.#{$ns}-transition-container {
   @include fade-transition();
 
   // ensure element size exactly equals its children, no edge-case 4px spacing!
@@ -104,7 +104,7 @@ $popover-width: $pt-grid-size * 35 !default;
   }
 
   // popover content should ignore pointer events during a popover's exit transition
-  &.pt-popover-leave .pt-popover-content {
+  &.#{$ns}-popover-leave .#{$ns}-popover-content {
     pointer-events: none;
   }
 
@@ -114,24 +114,24 @@ $popover-width: $pt-grid-size * 35 !default;
   }
 }
 
-.pt-popover-wrapper {
+.#{$ns}-popover-wrapper {
   display: inline-block;
   position: relative;
   vertical-align: top;
 
   // position the transition container using CSS when it is inline
-  .pt-transition-container {
+  .#{$ns}-transition-container {
     @include popover-inline-position();
   }
 
   // make sure inline overlays don't inherit from absolute positioning in cases
   // where overlays are nested (i.e. Popover within Dialog)
-  .pt-overlay-inline {
+  .#{$ns}-overlay-inline {
     position: static;
   }
 }
 
 // fix positioning of popovers inside button groups (lots of extra nested elements)
-.pt-button-group .pt-popover-target {
+.#{$ns}-button-group .#{$ns}-popover-target {
   display: block;
 }
diff --git a/packages/core/src/components/popover/popover.md b/packages/core/src/components/popover/popover.md
index 510060023f..45651eabf5 100644
--- a/packages/core/src/components/popover/popover.md
+++ b/packages/core/src/components/popover/popover.md
@@ -52,19 +52,19 @@ The __target__ acts as the trigger for the popover; user interaction will show t
 positioned on the page next to the target; the `position` prop determines the relative position (on
 which side of the target).
 
-Internally, the provided target is wrapped in a `span.pt-popover-target`. This in turn is wrapped in a `span.pt-popover-wrapper`. The extra `pt-popover-wrapper` is present so that both the popover and target will be wrapped in a single element when rendering popovers [inline](#core/components/popover.inline-rendering).
+Internally, the provided target is wrapped in a `span.@ns-popover-target`. This in turn is wrapped in a `span.@ns-popover-wrapper`. The extra `@ns-popover-wrapper` is present so that both the popover and target will be wrapped in a single element when rendering popovers [inline](#core/components/popover.inline-rendering).
 
 ```tsx
-<span class="pt-popover-wrapper">
-    <span class="pt-popover-target">
+<span class="@ns-popover-wrapper">
+    <span class="@ns-popover-target">
         <Button text="My target" />
     </span>
     <!-- inline Popover would render here -->
 </span>
 ```
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Button targets</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Button targets</h4>
     Buttons make great popover targets, but the `disabled` attribute on a `<button>` blocks all
     events, which interferes with the popover functioning. If you need to disable a button that
     triggers a popover, you should use [`AnchorButton`](#core/components/button.anchor-button) instead.
@@ -76,20 +76,20 @@ const { Button, Intent, Popover, PopoverInteractionKind, Position } = "@blueprin
 
 export class PopoverExample extends React.Component {
     public render() {
-        // popover content gets no padding by default; add the "pt-popover-content-sizing"
+        // popover content gets no padding by default; add the "@ns-popover-content-sizing"
         // class to the popover to set nice padding between its border and content,
         // and a default width when inline.
         return (
             <Popover
                 interactionKind={PopoverInteractionKind.CLICK}
-                popoverClassName="pt-popover-content-sizing"
+                popoverClassName="@ns-popover-content-sizing"
                 position={Position.RIGHT}
             >
                 <Button intent={Intent.PRIMARY}>Popover target</Button>
                 <div>
                     <h5>Popover title</h5>
                     <p>...</p>
-                    <Button className="pt-popover-dismiss">Dismiss</Button>
+                    <Button className="@ns-popover-dismiss">Dismiss</Button>
                 </div>
             </Popover>
         );
@@ -143,7 +143,7 @@ Modifiers are the tools through which you customize Popper.js's behavior. Popper
 - `arrowOffset` moves the popper a little bit to make room for the arrow
 - `updatePopoverState` saves off some popper data to `Popover` React state for fancy things
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     To understand all the Popper.js modifiers available to you, you'll want to read [the Popper.js Modifiers documentation](https://popper.js.org/popper-documentation.html#modifiers).
 </div>
 
@@ -162,8 +162,8 @@ It is important to pay attention to the value of the `nextOpenState` parameter a
 in your application logic whether you should care about a particular invocation (for instance,
 if the `nextOpenState` is not the same as the `Popover`'s current state).
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Disabling controlled popovers</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Disabling controlled popovers</h4>
     <p>If `disabled={true}`, a controlled popover will remain closed even if `isOpen={true}`.
     The popover will re-open when `disabled` is set to `false.</p>
 </div>
@@ -181,7 +181,7 @@ export class ControlledPopoverExample extends React.Component<{}, { isOpen: bool
             <div>
                 <h5>Popover Title</h5>
                 <p>...</p>
-                <button class="pt-button pt-popover-dismiss">Close popover</button>
+                <button class="@ns-button @ns-popover-dismiss">Close popover</button>
             </div>
         );
 
@@ -193,7 +193,7 @@ export class ControlledPopoverExample extends React.Component<{}, { isOpen: bool
                 onInteraction={(state) => this.handleInteraction(state)}
                 position={Position.RIGHT}
             >
-                <button className="pt-button pt-intent-primary">Popover target</button>
+                <button className="@ns-button @ns-intent-primary">Popover target</button>
             </Popover>
         );
     }
@@ -230,23 +230,23 @@ The following example demonstrates the various interaction kinds (note: these Po
 
 The __@blueprintjs/core__ package exports the above values in the `PopoverInteractionKind` enumeration.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Refer to the top-level [Popover example](#core/components/popover) to experiment with the various `PopoverInteractionKind`s.
 </div>
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Conditionally styling popover targets</h4>
-    When a popover is open, the target has a <code>.pt-popover-open</code> class applied to it.
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Conditionally styling popover targets</h4>
+    When a popover is open, the target has a <code>.@ns-popover-open</code> class applied to it.
     You can use this to style the target differently when the popover is open.
 </div>
 
 #### Click-to-close elements
 
 To enable click-to-close behavior on an element inside a popover, simply add the class
-`pt-popover-dismiss` to that element. For example, the "Dismiss" button in the top-level [Popover example](#core/components/popover) has this class. To enable this behavior on the entire popover, pass the
-`popoverClassName="pt-popover-dismiss"` prop.
+`@ns-popover-dismiss` to that element. For example, the "Dismiss" button in the top-level [Popover example](#core/components/popover) has this class. To enable this behavior on the entire popover, pass the
+`popoverClassName="@ns-popover-dismiss"` prop.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Dismiss elements won't have any effect in a popover with
     `PopoverInteractionKind.HOVER_TARGET_ONLY`, because there is no way to interact with the popover
     content itself (the popover is dismissed the moment the user mouses away from the target).
@@ -273,13 +273,13 @@ An error is thrown if used otherwise.
 #### Styling the backdrop
 
 By default, the popover backdrop is invisible, but you can easily add your own styles to
-`.pt-popover-backdrop` to customize the appearance of the backdrop (for example, you could give it
+`.@ns-popover-backdrop` to customize the appearance of the backdrop (for example, you could give it
 a translucent background color, like the backdrop for the [`Dialog`](#core/components/dialog) component).
 
 The backdrop element has the same opacity-fade transition as the `Dialog` backdrop.
 
-<div class="pt-callout pt-intent-danger pt-icon-error">
-    <h4 class="pt-callout-title">Dangerous edge case</h4>
+<div class="@ns-callout @ns-intent-danger @ns-icon-error">
+    <h4 class="@ns-callout-title">Dangerous edge case</h4>
     Rendering a `<Popover isOpen={true} hasBackdrop={true}>` outside the viewport bounds can easily break
     your application by covering the UI with an invisible non-interactive backdrop. This edge case
     must be handled by your application code or simply avoided if possible.
@@ -303,9 +303,9 @@ everything else on the page without needing to manually adjust z-indices, and Po
 
 @### Dark theme
 
-The `Popover` component automatically detects whether its trigger is nested inside a `.pt-dark`
+The `Popover` component automatically detects whether its trigger is nested inside a `.@ns-dark`
 container and applies the same class to itself. You can also explicitly apply the dark theme to
-the React component by providing the prop `popoverClassName="pt-dark"`.
+the React component by providing the prop `popoverClassName="@ns-dark"`.
 
 As a result, any component that you place inside a `Popover` (such as a `Menu`) automatically
 inherits the dark theme styles. Note that [`Tooltip`](#core/components/tooltip) uses `Popover` internally, so it also benefits
@@ -317,11 +317,17 @@ prop.
 @### Sizing
 
 Popovers by default have a `max-width` but no `max-height`. To constrain the height of a popover
-and make its content scrollable, set the appropriate CSS rules on `.pt-popover-content`:
+and make its content scrollable, add a custom class to your popover content element and attach
+styles to that class:
+
+```tsx
+<Popover content={<div class="custom-class">...</div>}>
+    ...
+</Popover>
+```
 
 ```css.scss
-// pass "my-popover" to `popoverClassName` prop.
-.my-popover .pt-popover-content {
+.custom-class {
     max-height: $pt-grid-size * 15;
     overflow-y: auto;
 }
@@ -346,7 +352,7 @@ documentation.
 
 @## Testing
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Your best resource for strategies in popover testing is
     [its own unit test suite.](https://github.com/palantir/blueprint/blob/develop/packages/core/test/popover/popoverTests.tsx)
 </div>
@@ -398,7 +404,7 @@ setTimeout(() => {
 
 If `inline` rendering is not an option, `Popover` instances expose `popoverElement` and
 `targetElement` refs of the actual DOM elements. Importantly, `popoverElement` points to the
-`.pt-popover` element inside the `Portal` so you can use it to easily query popover contents without
+`.@ns-popover` element inside the `Portal` so you can use it to easily query popover contents without
 knowing precisely where they are in the DOM. These properties exist primarily to simplify testing;
 do not rely on them for feature work.
 
@@ -406,6 +412,6 @@ do not rely on them for feature work.
 // using mount() from enzyme
 const wrapper = mount(<Popover content={<div className="test">test</div>} />);
 const { popoverElement } = wrapper.instance();
-// popoverElement is the parent element of .pt-popover
+// popoverElement is the parent element of .@ns-popover
 popoverElement.querySelector(".test").textContent; // "test"
 ```
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
index 6eb14957b9..000eeb714c 100644
--- a/packages/core/src/components/popover/popover.tsx
+++ b/packages/core/src/components/popover/popover.tsx
@@ -103,7 +103,7 @@ export interface IPopoverProps extends IOverlayableProps, IProps {
 
     /**
      * Whether to apply minimal styles to this popover, which includes removing the arrow
-     * and adding the `.pt-minimal` class to minimize and accelerate the transitions.
+     * and adding `Classes.MINIMAL` to minimize and accelerate the transitions.
      * @default false
      */
     minimal?: boolean;
@@ -144,7 +144,7 @@ export interface IPopoverProps extends IOverlayableProps, IProps {
     popoverDidOpen?: () => void;
 
     /**
-     * Ref supplied to the `pt-popover` element.
+     * Ref supplied to the `Classes.POPOVER` element.
      */
     popoverRef?: (ref: HTMLDivElement | null) => void;
 
@@ -174,7 +174,8 @@ export interface IPopoverProps extends IOverlayableProps, IProps {
     position?: Position | "auto";
 
     /**
-     * The name of the HTML tag to use when rendering the popover target wrapper element (`.pt-popover-target`).
+     * The name of the HTML tag to use when rendering the popover target wrapper
+     * element (`Classes.POPOVER_WRAPPER`).
      * @default "span"
      */
     rootElementTag?: string;
diff --git a/packages/core/src/components/portal/_portal.scss b/packages/core/src/components/portal/_portal.scss
index f772b4418b..4e80c03ee3 100644
--- a/packages/core/src/components/portal/_portal.scss
+++ b/packages/core/src/components/portal/_portal.scss
@@ -1,7 +1,7 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-.pt-portal {
+.#{$ns}-portal {
   // take the portal out of the document flow to prevent browsers from autoscrolling to the bottom
   // of the document (where portals are appended) when programmatically focusing within a portal
   // child element. also, don't use `fixed`, because then Tether'd elements won't reposition
diff --git a/packages/core/src/components/portal/portal.md b/packages/core/src/components/portal/portal.md
index fa5d82ab97..d10c25f77e 100644
--- a/packages/core/src/components/portal/portal.md
+++ b/packages/core/src/components/portal/portal.md
@@ -16,8 +16,8 @@ The children of a `Portal` component are appended to the `<body>` element.
 `Portal` is used inside [`Overlay`](#core/components/overlay) to actually overlay the content on the
 application.
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">A note about responsive layouts</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">A note about responsive layouts</h4>
     For a single-page app, if the `<body>` is styled with `width: 100%` and `height: 100%`, a `Portal`
     may take up extra whitespace and cause the window to undesirably scroll. To fix this, instead
     apply `position: absolute` to the `<body>` tag.
diff --git a/packages/core/src/components/progress/_progress-bar.scss b/packages/core/src/components/progress/_progress-bar.scss
index 155adb641a..6e95204a7a 100644
--- a/packages/core/src/components/progress/_progress-bar.scss
+++ b/packages/core/src/components/progress/_progress-bar.scss
@@ -8,23 +8,23 @@
 Progress bars
 
 Markup:
-<div class="pt-progress-bar {{.modifier}}">
-  <div class="pt-progress-meter" style="width: 25%"></div>
+<div class="#{$ns}-progress-bar {{.modifier}}">
+  <div class="#{$ns}-progress-meter" style="width: 25%"></div>
 </div>
-<div class="pt-progress-bar pt-intent-primary {{.modifier}}">
-  <div class="pt-progress-meter" style="width: 50%"></div>
+<div class="#{$ns}-progress-bar #{$ns}-intent-primary {{.modifier}}">
+  <div class="#{$ns}-progress-meter" style="width: 50%"></div>
 </div>
-<div class="pt-progress-bar pt-intent-success {{.modifier}}">
-  <div class="pt-progress-meter" style="width: 75%"></div>
+<div class="#{$ns}-progress-bar #{$ns}-intent-success {{.modifier}}">
+  <div class="#{$ns}-progress-meter" style="width: 75%"></div>
 </div>
-<div class="pt-progress-bar pt-intent-danger {{.modifier}}">
-  <div class="pt-progress-meter" style="width: 100%"></div>
+<div class="#{$ns}-progress-bar #{$ns}-intent-danger {{.modifier}}">
+  <div class="#{$ns}-progress-meter" style="width: 100%"></div>
 </div>
 
-.pt-no-stripes   - No stripes
-.pt-no-animation - No animation
+.#{$ns}-no-stripes   - No stripes
+.#{$ns}-no-animation - No animation
 
-Styleguide pt-progress-bar
+Styleguide progress-bar
 */
 
 $progress-bar-stripes-color: rgba($white, 0.2) !default;
@@ -53,7 +53,7 @@ $progress-bar-gradient: linear-gradient(
   }
 }
 
-.pt-progress-bar {
+.#{$ns}-progress-bar {
   display: block;
   position: relative;
   border-radius: $progress-bar-border-radius;
@@ -62,7 +62,7 @@ $progress-bar-gradient: linear-gradient(
   height: $progress-bar-height;
   overflow: hidden;
 
-  .pt-progress-meter {
+  .#{$ns}-progress-meter {
     position: absolute;
     border-radius: $progress-bar-border-radius;
     background: $progress-bar-gradient;
@@ -74,26 +74,26 @@ $progress-bar-gradient: linear-gradient(
     transition: width ($pt-transition-duration * 2) $pt-transition-ease;
   }
 
-  &:not(.pt-no-animation):not(.pt-no-stripes) .pt-progress-meter {
+  &:not(.#{$ns}-no-animation):not(.#{$ns}-no-stripes) .#{$ns}-progress-meter {
     animation: linear-progress-bar-stripes ($pt-transition-duration * 3) linear infinite reverse;
   }
 
-  &.pt-no-stripes .pt-progress-meter {
+  &.#{$ns}-no-stripes .#{$ns}-progress-meter {
     background-image: none;
   }
 }
 
-.pt-dark .pt-progress-bar,
-.pt-progress-bar.pt-dark {
+.#{$ns}-dark .#{$ns}-progress-bar,
+.#{$ns}-progress-bar.#{$ns}-dark {
   background: $dark-progress-track-color;
 
-  .pt-progress-meter {
+  .#{$ns}-progress-meter {
     background-color: $dark-progress-head-color;
   }
 }
 
 @each $intent, $color in $pt-intent-colors {
-  .pt-progress-bar.pt-intent-#{$intent} .pt-progress-meter {
+  .#{$ns}-progress-bar.#{$ns}-intent-#{$intent} .#{$ns}-progress-meter {
     background-color: $color;
   }
 }
diff --git a/packages/core/src/components/progress/progress-bar.md b/packages/core/src/components/progress/progress-bar.md
index 4c2f9723a9..cfcc12ed42 100644
--- a/packages/core/src/components/progress/progress-bar.md
+++ b/packages/core/src/components/progress/progress-bar.md
@@ -5,13 +5,13 @@ loading state.
 
 @## CSS API
 
-Set the current progress of the bar via a `width` style rule on the inner `.pt-progress-meter`
+Set the current progress of the bar via a `width` style rule on the inner `.@ns-progress-meter`
 element. This is a very simple CSS-only component, and input validation for `width` values is
 limited: values above `100%` appear as 100% progress and values below `0%` appear as 0%.
 
 Omitting `width` will result in an "indeterminate" progress meter that fills the entire bar.
 
-@css pt-progress-bar
+@css progress-bar
 
 @## JavaScript API
 
diff --git a/packages/core/src/components/skeleton/_skeleton.scss b/packages/core/src/components/skeleton/_skeleton.scss
index ca95ce29a3..e0ac66e3d8 100644
--- a/packages/core/src/components/skeleton/_skeleton.scss
+++ b/packages/core/src/components/skeleton/_skeleton.scss
@@ -7,18 +7,18 @@
 Skeletons
 
 Markup:
-<div class="pt-card">
+<div class="#{$ns}-card">
   <h5><a class="{{.modifier}}" href="#" tabindex="-1">Card heading</a></h5>
   <p class="{{.modifier}}">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget tortor felis.
     Fusce dapibus metus in dapibus mollis. Quisque eget ex diam.
   </p>
-  <button type="button" class="pt-button pt-icon-add {{.modifier}}" tabindex="-1">Submit</button>
+  <button type="button" class="#{$ns}-button #{$ns}-icon-add {{.modifier}}" tabindex="-1">Submit</button>
 </div>
 
-.pt-skeleton - Render this element as a skeleton, an outline of its true self.
+.#{$ns}-skeleton - Render this element as a skeleton, an outline of its true self.
 
-Styleguide pt-skeleton
+Styleguide skeleton
 */
 
 @keyframes glow {
@@ -37,7 +37,7 @@ Styleguide pt-skeleton
 // This class hides content with a glowing, rounded rectangle. CSS properties that should always
 // override consumer values use the "!important" rule.
 /* stylelint-disable declaration-no-important */
-.pt-skeleton {
+.#{$ns}-skeleton {
   border-color: $skeleton-color-start !important;
   border-radius: 2px;
   box-shadow: none !important;
diff --git a/packages/core/src/components/skeleton/skeleton.md b/packages/core/src/components/skeleton/skeleton.md
index 2bedd22ba6..0d83e17803 100644
--- a/packages/core/src/components/skeleton/skeleton.md
+++ b/packages/core/src/components/skeleton/skeleton.md
@@ -4,16 +4,16 @@ Skeletons allow you to show a loading state that mimics the shape of your yet-to
 
 @## CSS API
 
-Apply the class `.pt-skeleton` to elements that you would like to cover up with a loading animation.
+Apply the class `.@ns-skeleton` to elements that you would like to cover up with a loading animation.
 The skeleton inherits the dimensions of whatever element the class is applied to. This means that
 when using skeletons to show loading text, you should use some sort of placeholder text that is
 approximately the length of your expected text.
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Manually disable focusable elements</h4>
-    When using the `.pt-skeleton` class on focusable elements such as inputs and buttons, be sure to
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Manually disable focusable elements</h4>
+    When using the `.@ns-skeleton` class on focusable elements such as inputs and buttons, be sure to
     disable the element, via either the `disabled` or `tabindex="-1"` attributes. Failing to do so
     will allow these skeleton elements to be focused when they shouldn't be.
 </div>
 
-@css pt-skeleton
+@css skeleton
diff --git a/packages/core/src/components/slider/_slider.scss b/packages/core/src/components/slider/_slider.scss
index 580339922d..c6afeef5dc 100644
--- a/packages/core/src/components/slider/_slider.scss
+++ b/packages/core/src/components/slider/_slider.scss
@@ -12,7 +12,7 @@ $label-offset: $handle-size + 4px !default;
 $handle-height: $handle-size !default;
 $track-height: $track-size !default;
 
-.pt-slider {
+.#{$ns}-slider {
   @include slider-orientation($pt-input-height-large, $vertical: false);
   position: relative;
   outline: none;
@@ -27,34 +27,34 @@ $track-height: $track-size !default;
     cursor: grabbing;
   }
 
-  &.pt-disabled {
+  &.#{$ns}-disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
 
-  &.pt-slider-unlabeled {
+  &.#{$ns}-slider-unlabeled {
     height: $handle-size;
   }
 }
 
-.pt-slider-track,
-.pt-slider-progress {
+.#{$ns}-slider-track,
+.#{$ns}-slider-progress {
   @include slider-track-orientation($handle-size, $track-size, $vertical: false);
   position: absolute;
   border-radius: $pt-border-radius;
   background: rgba($gray1, 0.2);
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background: rgba($black, 0.5);
   }
 }
 
-.pt-slider-progress,
-.pt-dark .pt-slider-progress {
+.#{$ns}-slider-progress,
+.#{$ns}-dark .#{$ns}-slider-progress {
   background: $pt-intent-primary;
 }
 
-.pt-slider-handle {
+.#{$ns}-slider-handle {
   @include pt-button();
   position: absolute;
   top: 0;
@@ -77,20 +77,20 @@ $track-height: $track-size !default;
     cursor: grab;
   }
 
-  &.pt-active {
+  &.#{$ns}-active {
     @include pt-button-active();
     box-shadow: $button-box-shadow-overlay-active;
     cursor: grabbing;
   }
 
-  .pt-disabled & {
+  .#{$ns}-disabled & {
     box-shadow: none;
     background: $gray5;
     // easy way to avoid lots of special cases to ignore mouse states when disabled:
     pointer-events: none;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include pt-dark-button();
 
     &,
@@ -98,37 +98,37 @@ $track-height: $track-size !default;
       background-color: $dark-gray5;
     }
 
-    &.pt-active {
+    &.#{$ns}-active {
       background-color: $dark-gray3;
     }
   }
 
-  .pt-dark .pt-disabled & {
+  .#{$ns}-dark .#{$ns}-disabled & {
     border-color: $gray1;
     box-shadow: none;
     background: $gray1;
   }
 
-  .pt-slider-label {
+  .#{$ns}-slider-label {
     margin-left: $handle-size / 2;
     border-radius: $pt-border-radius;
     box-shadow: $pt-tooltip-box-shadow;
     background: $tooltip-background-color;
     color: $tooltip-text-color;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       box-shadow: $pt-dark-tooltip-box-shadow;
       background: $dark-tooltip-background-color;
       color: $dark-tooltip-text-color;
     }
 
-    .pt-disabled & {
+    .#{$ns}-disabled & {
       box-shadow: none;
     }
   }
 }
 
-.pt-slider-label {
+.#{$ns}-slider-label {
   @include slider-label-orientation($label-offset);
   display: inline-block;
   position: absolute;
@@ -138,8 +138,8 @@ $track-height: $track-size !default;
   font-size: $pt-font-size-small;
 }
 
-.pt-range-slider {
-  .pt-slider-handle {
+.#{$ns}-range-slider {
+  .#{$ns}-slider-handle {
     width: $handle-size / 2;
 
     &:first-of-type {
@@ -152,50 +152,50 @@ $track-height: $track-size !default;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
 
-      .pt-slider-label {
+      .#{$ns}-slider-label {
         margin-left: 0;
       }
     }
   }
 
-  .pt-slider-progress {
+  .#{$ns}-slider-progress {
     border-radius: 0;
   }
 }
 
-.pt-slider.pt-vertical {
+.#{$ns}-slider.#{$ns}-vertical {
   @include slider-orientation($pt-input-height-large, $vertical: true);
 
-  .pt-slider-track,
-  .pt-slider-progress {
+  .#{$ns}-slider-track,
+  .#{$ns}-slider-progress {
     @include slider-track-orientation($handle-size, $track-size, $vertical: true);
   }
 
-  .pt-slider-progress {
+  .#{$ns}-slider-progress {
     top: auto;
   }
 
-  .pt-slider-label {
+  .#{$ns}-slider-label {
     @include slider-label-orientation($label-offset, $vertical: true);
   }
 
-  .pt-slider-handle {
+  .#{$ns}-slider-handle {
     top: auto;
 
-    .pt-slider-label {
+    .#{$ns}-slider-label {
       margin-top: -$handle-size / 2;
       margin-left: 0;
     }
   }
 }
 
-.pt-range-slider.pt-vertical {
-  .pt-slider-handle {
+.#{$ns}-range-slider.#{$ns}-vertical {
+  .#{$ns}-slider-handle {
     margin-left: 0;
     width: $handle-size;
     height: $handle-size / 2;
 
-    .pt-slider-label {
+    .#{$ns}-slider-label {
       margin-left: 0;
     }
 
@@ -203,7 +203,7 @@ $track-height: $track-size !default;
       border-top-left-radius: 0;
       border-bottom-right-radius: $pt-border-radius;
 
-      .pt-slider-label {
+      .#{$ns}-slider-label {
         transform: translate($label-offset);
       }
     }
diff --git a/packages/core/src/components/spinner/_common.scss b/packages/core/src/components/spinner/_common.scss
index a2149f6930..27a85a7c3b 100644
--- a/packages/core/src/components/spinner/_common.scss
+++ b/packages/core/src/components/spinner/_common.scss
@@ -16,19 +16,19 @@ $spinner-speed-small: $pt-transition-duration * 4 !default;
 $spinner-speed-large: $pt-transition-duration * 4.5 !default;
 
 @mixin spinner-size($width-factor, $stroke-width, $speed) {
-  &:not(.pt-svg-spinner) {
+  &:not(.#{$ns}-svg-spinner) {
     width: $spinner-width * $width-factor;
 
-    .pt-spinner-svg-container {
+    .#{$ns}-spinner-svg-container {
       animation-duration: $speed;
     }
   }
 
-  &.pt-svg-spinner {
+  &.#{$ns}-svg-spinner {
     animation-duration: $speed;
   }
 
-  .pt-svg-spinner-transform-group {
+  .#{$ns}-svg-spinner-transform-group {
     transform: scale($width-factor);
   }
 
diff --git a/packages/core/src/components/spinner/_spinner.scss b/packages/core/src/components/spinner/_spinner.scss
index 4500d95e5c..fa531a8707 100644
--- a/packages/core/src/components/spinner/_spinner.scss
+++ b/packages/core/src/components/spinner/_spinner.scss
@@ -9,19 +9,19 @@
 Spinners
 
 Markup:
-<div class="pt-spinner {{.modifier}}">
-  <div class="pt-spinner-svg-container">
+<div class="#{$ns}-spinner {{.modifier}}">
+  <div class="#{$ns}-spinner-svg-container">
     <svg viewBox="0 0 100 100">
-      <path class="pt-spinner-track" d="M 50,50 m 0,-44.5 a 44.5,44.5 0 1 1 0,89 a 44.5,44.5 0 1 1 0,-89"></path>
-      <path class="pt-spinner-head" d="M 94.5 50 A 44.5 44.5 0 0 0 50 5.5"></path>
+      <path class="#{$ns}-spinner-track" d="M 50,50 m 0,-44.5 a 44.5,44.5 0 1 1 0,89 a 44.5,44.5 0 1 1 0,-89"></path>
+      <path class="#{$ns}-spinner-head" d="M 94.5 50 A 44.5 44.5 0 0 0 50 5.5"></path>
     </svg>
   </div>
 </div>
 
-.pt-small - Small spinner
-.pt-large - Large spinner
+.#{$ns}-small - Small spinner
+.#{$ns}-large - Large spinner
 
-Styleguide pt-spinner
+Styleguide spinner
 */
 
 @keyframes pt-spinner-animation {
@@ -32,24 +32,24 @@ Styleguide pt-spinner
 // see https://css-tricks.com/scale-svg/
 // how to Scale SVG to Fit the Available Width (and adjust the height to match) Option 4
 
-.pt-spinner {
+.#{$ns}-spinner {
   @include spinner-size($spinner-width-factor, $spinner-stroke-width, $spinner-speed);
 
   path {
     fill-opacity: 0;
   }
 
-  .pt-spinner-head {
+  .#{$ns}-spinner-head {
     transition: stroke-dashoffset ($pt-transition-duration * 2) $pt-transition-ease;
     stroke: $progress-head-color;
     stroke-linecap: round;
   }
 
-  .pt-spinner-track {
+  .#{$ns}-spinner-track {
     stroke: $progress-track-color;
   }
 
-  &.pt-small {
+  &.#{$ns}-small {
     @include spinner-size(
       $spinner-width-factor-small,
       $spinner-stroke-width-small,
@@ -57,7 +57,7 @@ Styleguide pt-spinner
     );
   }
 
-  &.pt-large {
+  &.#{$ns}-large {
     @include spinner-size(
       $spinner-width-factor-large,
       $spinner-stroke-width-large,
@@ -66,10 +66,10 @@ Styleguide pt-spinner
   }
 }
 
-.pt-spinner:not(.pt-svg-spinner) {
+.#{$ns}-spinner:not(.#{$ns}-svg-spinner) {
   display: inline-block;
 
-  .pt-spinner-svg-container {
+  .#{$ns}-spinner-svg-container {
     position: relative;
     width: 100%;
     height: 0;
@@ -78,7 +78,7 @@ Styleguide pt-spinner
     animation: pt-spinner-animation $spinner-speed linear infinite;
   }
 
-  &.pt-no-spin .pt-spinner-svg-container {
+  &.#{$ns}-no-spin .#{$ns}-spinner-svg-container {
     animation: none;
   }
 
@@ -91,31 +91,31 @@ Styleguide pt-spinner
   }
 }
 
-.pt-svg-spinner {
+.#{$ns}-svg-spinner {
   transform-origin: center;
   animation: pt-spinner-animation $spinner-speed linear infinite;
 
-  &.pt-no-spin {
+  &.#{$ns}-no-spin {
     animation: none;
   }
 }
 
-.pt-svg-spinner-transform-group {
+.#{$ns}-svg-spinner-transform-group {
   transform-origin: center;
 }
 
-.pt-dark .pt-spinner {
-  .pt-spinner-head {
+.#{$ns}-dark .#{$ns}-spinner {
+  .#{$ns}-spinner-head {
     stroke: $dark-progress-head-color;
   }
 
-  .pt-spinner-track {
+  .#{$ns}-spinner-track {
     stroke: $dark-progress-track-color;
   }
 }
 
 @each $intent, $color in $pt-intent-colors {
-  .pt-spinner.pt-intent-#{$intent} .pt-spinner-head {
+  .#{$ns}-spinner.#{$ns}-intent-#{$intent} .#{$ns}-spinner-head {
     stroke: $color;
   }
 }
diff --git a/packages/core/src/components/spinner/spinner.md b/packages/core/src/components/spinner/spinner.md
index 4ac2b2774e..9f7f63143d 100644
--- a/packages/core/src/components/spinner/spinner.md
+++ b/packages/core/src/components/spinner/spinner.md
@@ -8,7 +8,7 @@ You can create spinners manually by inserting their whole markup into your HTML.
 Spinners created via markup use same modifier classes as the
 [React `Spinner` component](#core/components/progress/spinner.javascript-api).
 
-@css pt-spinner
+@css spinner
 
 @## JavaScript API
 
@@ -24,8 +24,8 @@ indefinitely (this is the default appearance).
 Note that the CSS modifiers described in the [CSS API](#core/components/progress/spinner.css-api)
 are supported via the `className` prop.
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">IE11 compatibility note</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">IE11 compatibility note</h4>
     IE11 [does not support CSS transitions on SVG elements][msdn-css-svg] so spinners with known
     `value` will not smoothly transition as `value` changes. Indeterminate spinners still animate
     correctly because they rely on CSS animations, not transitions.
@@ -41,8 +41,8 @@ are supported via the `className` prop.
 
 Use the `SVGSpinner` component to render a spinner inside an SVG element.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Sizing note</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Sizing note</h4>
     Because of the way SVG elements are sized, you may need to manually scale the spinner inside your
     SVG to make it an appropriate size.
 </div>
diff --git a/packages/core/src/components/table/_table.scss b/packages/core/src/components/table/_table.scss
index e36c007596..fc99c3ece3 100644
--- a/packages/core/src/components/table/_table.scss
+++ b/packages/core/src/components/table/_table.scss
@@ -7,7 +7,7 @@
 Tables
 
 Markup:
-<table class="pt-html-table {{.modifier}}">
+<table class="#{$ns}-html-table {{.modifier}}">
   <thead>
     <tr>
       <th>Project</th>
@@ -34,12 +34,12 @@ Markup:
   </tbody>
 </table>
 
-.pt-small - Small, condensed appearance
-.pt-html-table-striped   - Striped appearance
-.pt-html-table-bordered  - Bordered appearance
-.pt-interactive  - Enables hover styles on rows
+.#{$ns}-small - Small, condensed appearance
+.#{$ns}-html-table-striped   - Striped appearance
+.#{$ns}-html-table-bordered  - Bordered appearance
+.#{$ns}-interactive  - Enables hover styles on rows
 
-Styleguide pt-html-table
+Styleguide html-table
 */
 
 $table-row-height: $pt-grid-size * 4 !default;
@@ -48,7 +48,7 @@ $table-border-width: 1px !default;
 $table-border-color: $pt-divider-black !default;
 $dark-table-border-color: $pt-dark-divider-white !default;
 
-table.pt-html-table {
+table.#{$ns}-html-table {
   border-spacing: 0;
   font-size: $pt-font-size;
 
@@ -75,7 +75,7 @@ table.pt-html-table {
     }
   }
 
-  &.pt-small {
+  &.#{$ns}-small {
     $small-vertical-padding: centered-text($table-row-height-small);
 
     th,
@@ -85,14 +85,14 @@ table.pt-html-table {
     }
   }
 
-  &.pt-html-table-striped {
+  &.#{$ns}-html-table-striped {
     tbody tr:nth-child(odd) td {
       background: rgba($gray5, 0.2);
     }
   }
 
   // Borders are applied as box-shadows (at the top and left borders of a cell) for better color control.
-  &.pt-html-table-bordered {
+  &.#{$ns}-html-table-bordered {
     th:not(:first-child) {
       box-shadow: inset $table-border-width 0 0 0 $table-border-color;
     }
@@ -105,7 +105,7 @@ table.pt-html-table {
       }
     }
 
-    &.pt-html-table-striped {
+    &.#{$ns}-html-table-striped {
       tbody tr:not(:first-child) td {
         box-shadow: none;
 
@@ -116,14 +116,14 @@ table.pt-html-table {
     }
   }
 
-  &.pt-interactive {
+  &.#{$ns}-interactive {
     tbody tr:hover td {
       background-color: rgba($gray5, 0.4);
       cursor: pointer;
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     // a bunch of deep compound selectors ahead, but there's not really a better way to do this right now
     // stylelint-disable selector-max-compound-selectors
 
@@ -143,14 +143,14 @@ table.pt-html-table {
       }
     }
 
-    &.pt-html-table-striped {
+    &.#{$ns}-html-table-striped {
       tbody tr:nth-child(odd) td {
         background: rgba($gray1, 0.15);
       }
     }
 
     // Borders are applied as box-shadows (at the top and left borders of a cell) for better color control.
-    &.pt-html-table-bordered {
+    &.#{$ns}-html-table-bordered {
       th:not(:first-child) {
         box-shadow: inset $table-border-width 0 0 0 $dark-table-border-color;
       }
@@ -163,7 +163,7 @@ table.pt-html-table {
         }
       }
 
-      &.pt-html-table-striped {
+      &.#{$ns}-html-table-striped {
         tbody tr:not(:first-child) td {
           box-shadow: inset $table-border-width 0 0 0 $dark-table-border-color;
 
@@ -176,7 +176,7 @@ table.pt-html-table {
       }
     }
 
-    &.pt-interactive {
+    &.#{$ns}-interactive {
       tbody tr:hover td {
         background-color: rgba($gray1, 0.3);
         cursor: pointer;
diff --git a/packages/core/src/components/table/table-html.md b/packages/core/src/components/table/table-html.md
index f6e5ff165a..2cdf2ba52e 100644
--- a/packages/core/src/components/table/table-html.md
+++ b/packages/core/src/components/table/table-html.md
@@ -2,8 +2,8 @@
 
 This component adds Blueprint styling to native HTML tables.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">This is not @blueprintjs/table</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">This is not @blueprintjs/table</h4>
     This table component is a simple CSS-only skin for HTML `<table>` elements.
     It is ideal for basic static tables. If you're looking for more complex
     spreadsheet-like features, check out [**@blueprintjs/table**](#table).
@@ -11,6 +11,6 @@ This component adds Blueprint styling to native HTML tables.
 
 @## CSS API
 
-Apply the `pt-html-table` class to a `<table>` element. You can apply modifiers as additional classes.
+Apply the `@ns-html-table` class to a `<table>` element. You can apply modifiers as additional classes.
 
-@css pt-html-table
+@css html-table
diff --git a/packages/core/src/components/tabs/_tabs.scss b/packages/core/src/components/tabs/_tabs.scss
index 6981662073..4128f9245e 100644
--- a/packages/core/src/components/tabs/_tabs.scss
+++ b/packages/core/src/components/tabs/_tabs.scss
@@ -8,20 +8,20 @@
 Tabs
 
 Markup:
-<div class="pt-tabs">
-    <ul class="pt-tab-list {{.modifier}}" role="tablist">
-        <li class="pt-tab" role="tab" aria-selected="true">Selected tab</li>
-        <li class="pt-tab" role="tab">Another tab</li>
-        <li class="pt-tab" role="tab" aria-disabled="true">Disabled tab</li>
+<div class="#{$ns}-tabs">
+    <ul class="#{$ns}-tab-list {{.modifier}}" role="tablist">
+        <li class="#{$ns}-tab" role="tab" aria-selected="true">Selected tab</li>
+        <li class="#{$ns}-tab" role="tab">Another tab</li>
+        <li class="#{$ns}-tab" role="tab" aria-disabled="true">Disabled tab</li>
     </ul>
-    <div class="pt-tab-panel" role="tabpanel">Selected panel</div>
-    <div class="pt-tab-panel" role="tabpanel" aria-hidden="true">Another panel</div>
-    <div class="pt-tab-panel" role="tabpanel" aria-hidden="true">Disabled panel</div>
+    <div class="#{$ns}-tab-panel" role="tabpanel">Selected panel</div>
+    <div class="#{$ns}-tab-panel" role="tabpanel" aria-hidden="true">Another panel</div>
+    <div class="#{$ns}-tab-panel" role="tabpanel" aria-hidden="true">Disabled panel</div>
 </div>
 
-.pt-large - Large tabs
+.#{$ns}-large - Large tabs
 
-Styleguide pt-tabs
+Styleguide tabs
 */
 
 $tab-color-selected: $pt-link-color !default;
@@ -29,22 +29,22 @@ $dark-tab-color-selected: $pt-dark-link-color !default;
 
 $tab-indicator-width: 3px !default;
 
-.pt-tabs.pt-vertical {
+.#{$ns}-tabs.#{$ns}-vertical {
   display: flex;
 
   // include '>' to ensure we're only modifying
   // these tabs, not tabs that might be further
   // down the DOM hierarchy (i.e. tabs in tabs)
-  > .pt-tab-list {
+  > .#{$ns}-tab-list {
     flex-direction: column;
     align-items: flex-start;
 
-    .pt-tab {
+    .#{$ns}-tab {
       width: 100%;
       padding: 0 $pt-grid-size;
     }
 
-    .pt-tab-indicator-wrapper .pt-tab-indicator {
+    .#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator {
       top: 0;
       right: 0;
       bottom: 0;
@@ -58,13 +58,13 @@ $tab-indicator-width: 3px !default;
   // same consideration here: avoid styling any
   // other tabs that might be contained in this
   // vertical tab component
-  > .pt-tab-panel {
+  > .#{$ns}-tab-panel {
     margin-top: 0;
     padding-left: $pt-grid-size * 2;
   }
 }
 
-.pt-tab-list {
+.#{$ns}-tab-list {
   display: flex;
   flex: 0 0 auto;
   align-items: flex-end;
@@ -81,7 +81,7 @@ $tab-indicator-width: 3px !default;
   }
 }
 
-.pt-tab {
+.#{$ns}-tab {
   @include overflow-ellipsis();
   flex: 0 0 auto;
   position: relative;
@@ -99,7 +99,7 @@ $tab-indicator-width: 3px !default;
     color: inherit;
   }
 
-  .pt-tab-indicator-wrapper ~ & {
+  .#{$ns}-tab-indicator-wrapper ~ & {
     // the bottom border is only for static markup, therefore
     // we never want a bottom border if there's a tab indicator
     // stylelint-disable-next-line declaration-no-important
@@ -125,13 +125,13 @@ $tab-indicator-width: 3px !default;
     -moz-outline-radius: 0;
   }
 
-  .pt-large > & {
+  .#{$ns}-large > & {
     line-height: $pt-button-height-large;
     font-size: $pt-font-size-large;
   }
 }
 
-.pt-tab-panel {
+.#{$ns}-tab-panel {
   margin-top: $pt-grid-size * 2;
 
   &[aria-hidden="true"] {
@@ -139,7 +139,7 @@ $tab-indicator-width: 3px !default;
   }
 }
 
-.pt-tab-indicator-wrapper {
+.#{$ns}-tab-indicator-wrapper {
   position: absolute;
   top: 0;
   left: 0;
@@ -149,7 +149,7 @@ $tab-indicator-width: 3px !default;
   transition-timing-function: $pt-transition-ease;
   pointer-events: none;
 
-  .pt-tab-indicator {
+  .#{$ns}-tab-indicator {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -158,13 +158,13 @@ $tab-indicator-width: 3px !default;
     height: $tab-indicator-width;
   }
 
-  &.pt-no-animation {
+  &.#{$ns}-no-animation {
     transition: none;
   }
 }
 
-.pt-dark {
-  .pt-tab {
+.#{$ns}-dark {
+  .#{$ns}-tab {
     color: $pt-dark-text-color;
 
     &[aria-disabled="true"] {
@@ -181,11 +181,11 @@ $tab-indicator-width: 3px !default;
     }
   }
 
-  .pt-tab-indicator {
+  .#{$ns}-tab-indicator {
     background-color: $dark-tab-color-selected;
   }
 }
 
-.pt-flex-expander {
+.#{$ns}-flex-expander {
   flex: 1 1;
 }
diff --git a/packages/core/src/components/tabs/tabs.md b/packages/core/src/components/tabs/tabs.md
index 09a2e8c51d..9ea46fc125 100644
--- a/packages/core/src/components/tabs/tabs.md
+++ b/packages/core/src/components/tabs/tabs.md
@@ -3,14 +3,14 @@
 @## CSS API
 
 In addition to the [JavaScript API](#core/components/tabs.javascript-api), Blueprint also offers tab styles with the
-class `pt-tabs`. You should add the proper accessibility attributes (`role`, `aria-selected`, and
+class `@ns-tabs`. You should add the proper accessibility attributes (`role`, `aria-selected`, and
 `aria-hidden`) if you choose to implement tabs with CSS.
 
-`.pt-tab-panel` elements with `aria-hidden="true"` are hidden automatically by the Blueprint CSS.
+`.@ns-tab-panel` elements with `aria-hidden="true"` are hidden automatically by the Blueprint CSS.
 You may also simply omit hidden tabs from your markup to improve performance (the `Tabs`
 JavaScript component does this by default).
 
-@css pt-tabs
+@css tabs
 
 @## JavaScript API
 
@@ -33,7 +33,7 @@ import { Tab, Tabs } from "@blueprintjs/core";
     <Tab id="rx" title="React" panel={<ReactPanel />} />
     <Tab id="bb" disabled title="Backbone" panel={<BackbonePanel />} />
     <Tabs.Expander />
-    <input className="pt-input" type="text" placeholder="Search..." />
+    <input className="@ns-input" type="text" placeholder="Search..." />
 </Tabs>
 ```
 
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index c4cc3c4e2c..236266910a 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -44,8 +44,7 @@ export interface ITabsProps extends IProps {
     id: TabId;
 
     /**
-     * If set to `true`, the tabs will display with larger styling.
-     * This is equivalent to setting `pt-large` on the `.pt-tab-list` element.
+     * If set to `true`, the tab titles will display with larger styling.
      * This will apply large styles only to the tabs at this level, not to nested tabs.
      * @default false
      */
@@ -125,9 +124,7 @@ export class Tabs extends AbstractPureComponent<ITabsProps, ITabsState> {
             <div className={Classes.TAB_INDICATOR_WRAPPER} style={indicatorWrapperStyle}>
                 <div className={Classes.TAB_INDICATOR} />
             </div>
-        ) : (
-            undefined
-        );
+        ) : null;
 
         const classes = classNames(Classes.TABS, { [Classes.VERTICAL]: this.props.vertical }, this.props.className);
         const tabListClasses = classNames(Classes.TAB_LIST, {
@@ -213,7 +210,7 @@ export class Tabs extends AbstractPureComponent<ITabsProps, ITabsState> {
         }) as TabElement[];
     }
 
-    /** Queries root HTML element for all `.pt-tab`s with optional filter selector */
+    /** Queries root HTML element for all tabs with optional filter selector */
     private getTabElements(subselector = "") {
         if (this.tablistElement == null) {
             return [];
diff --git a/packages/core/src/components/tag-input/_tag-input.scss b/packages/core/src/components/tag-input/_tag-input.scss
index 4db7abe9d1..d1c487ad08 100644
--- a/packages/core/src/components/tag-input/_tag-input.scss
+++ b/packages/core/src/components/tag-input/_tag-input.scss
@@ -10,8 +10,8 @@ $ti-padding: ($pt-input-height - $tag-height) / 2;
 $ti-icon-padding: ($pt-input-height - $pt-icon-size-standard) / 2;
 $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) / 2;
 
-.pt-tag-input {
-  @include pt-flex-container(row, $fill: ".pt-tag-input-values");
+.#{$ns}-tag-input {
+  @include pt-flex-container(row, $fill: ".#{$ns}-tag-input-values");
   align-items: flex-start;
   cursor: text;
   height: auto;
@@ -19,7 +19,7 @@ $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) / 2;
   padding-right: 0;
   padding-left: $ti-padding;
 
-  .pt-tag-input-icon {
+  .#{$ns}-tag-input-icon {
     // margins to center icon in one-line input
     margin-top: $ti-icon-padding;
     margin-right: $ti-icon-padding;
@@ -27,7 +27,7 @@ $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) / 2;
     color: $pt-icon-color;
   }
 
-  .pt-tag-input-values {
+  .#{$ns}-tag-input-values {
     @include pt-flex-container(row, $ti-padding);
     flex-wrap: wrap;
     align-items: center;
@@ -41,13 +41,13 @@ $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) / 2;
     }
   }
 
-  .pt-tag {
+  .#{$ns}-tag {
     // NOTE: in order to wrap long words, you must set explicit width on TagInput,
-    // or use .pt-fill CSS class modifier.
+    // or use .#{$ns}-fill CSS class modifier.
     overflow-wrap: break-word;
   }
 
-  .pt-input-ghost {
+  .#{$ns}-input-ghost {
     // input fills remaining line
     flex: 1 1 auto;
     // essentially a min-width, cuz flex allows it to grow or shrink:
@@ -55,65 +55,65 @@ $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) / 2;
     line-height: $tag-height;
 
     &:disabled,
-    &.pt-disabled {
+    &.#{$ns}-disabled {
       cursor: not-allowed;
     }
   }
 
-  .pt-button,
-  .pt-spinner {
+  .#{$ns}-button,
+  .#{$ns}-spinner {
     margin: ($pt-input-height - $pt-button-height-small) / 2;
     margin-left: 0;
   }
 
-  .pt-button {
+  .#{$ns}-button {
     @include pt-button-height-small();
   }
 
-  &.pt-large {
+  &.#{$ns}-large {
     @include pt-flex-margin(row, $ti-icon-padding-large);
     height: auto;
     min-height: $pt-input-height-large;
 
-    .pt-tag-input-icon {
+    .#{$ns}-tag-input-icon {
       margin-top: $ti-icon-padding-large;
       margin-left: $ti-icon-padding-large - $ti-padding;
     }
 
-    .pt-input-ghost {
+    .#{$ns}-input-ghost {
       line-height: $tag-height-large;
     }
 
-    .pt-button {
+    .#{$ns}-button {
       @include pt-button-height-default();
       margin: ($pt-input-height-large - $pt-button-height) / 2;
       margin-left: 0;
     }
 
-    .pt-spinner {
+    .#{$ns}-spinner {
       margin: ($pt-input-height-large - $pt-button-height-small) / 2;
       margin-left: 0;
     }
   }
 
-  &.pt-active {
+  &.#{$ns}-active {
     box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
     background-color: $input-background-color;
   }
 
-  .pt-dark &,
-  &.pt-dark {
-    .pt-tag-input-icon {
+  .#{$ns}-dark &,
+  &.#{$ns}-dark {
+    .#{$ns}-tag-input-icon {
       color: $pt-dark-icon-color;
     }
 
-    .pt-input-ghost {
+    .#{$ns}-input-ghost {
       @include pt-dark-input-placeholder();
 
       color: $dark-input-color;
     }
 
-    &.pt-active {
+    &.#{$ns}-active {
       box-shadow: dark-input-transition-shadow($dark-input-shadow-color-focus, true),
                   $pt-dark-input-box-shadow;
       background-color: $dark-input-background-color;
@@ -122,7 +122,7 @@ $ti-icon-padding-large: ($pt-input-height-large - $pt-icon-size-large) / 2;
 }
 
 // TODO: this is probably a useful modifier that we should pull into core, and use in EditableText
-.pt-input-ghost {
+.#{$ns}-input-ghost {
   @include pt-input-placeholder();
 
   // reset browser input styles (we're using an input solely because you can type in it)
diff --git a/packages/core/src/components/tag-input/tag-input.md b/packages/core/src/components/tag-input/tag-input.md
index 1971908152..c45ecf7d91 100644
--- a/packages/core/src/components/tag-input/tag-input.md
+++ b/packages/core/src/components/tag-input/tag-input.md
@@ -2,17 +2,17 @@
 
 Tag inputs render [`Tag`](#core/components/tag)s inside an input, followed by an actual text input. The container is merely styled to look like a Blueprint input; the actual editable element appears after the last tag. Clicking anywhere on the container will focus the text input for seamless interaction.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Disabling a tag input</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Disabling a tag input</h4>
     <p>Disabling this component requires setting the `disabled` prop to `true` and separately disabling the component's `rightElement` as appropriate (because `TagInput` accepts any `JSX.Element` as its `rightElement`).</p>
     <p>In the example below, when you slide the `Disabled` toggle switch on, the result becomes `<TagInput ... disabled={true} rightElement={<Button ... disabled={true} />} />`</p>
 </div>
 
 @reactExample TagInputExample
 
-**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd class="pt-key">enter</kbd> will **add new items** by invoking callbacks. If `addOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
+**`TagInput` must be controlled,** meaning the `values` prop is required and event handlers are strongly suggested. Typing in the input and pressing <kbd class="@ns-key">enter</kbd> will **add new items** by invoking callbacks. If `addOnBlur` is set to true, clicking out of the component will also trigger the callback to add new items. A `separator` prop is supported to allow multiple items to be added at once; the default splits on commas.
 
-**Tags can be removed** by clicking their <span class="pt-icon-standard pt-icon-cross"></span> buttons, or by pressing <kbd class="pt-key">backspace</kbd> repeatedly. Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning of the text input for these interactions.
+**Tags can be removed** by clicking their <span class="@ns-icon-standard @ns-icon-cross"></span> buttons, or by pressing <kbd class="@ns-key">backspace</kbd> repeatedly. Arrow keys can also be used to focus on a particular tag before removing it. The cursor must be at the beginning of the text input for these interactions.
 
 **`Tag` appearance can be customized** with `tagProps`: supply an object to apply the same props to every tag, or supply a callback to apply dynamic props per tag. Tag `values` must be an array of strings so you may need a transformation step between your state and these props.
 
@@ -20,9 +20,9 @@ Tag inputs render [`Tag`](#core/components/tag)s inside an input, followed by an
 
 The `<input>` element can be controlled directly via the `inputValue` and `onInputChange` props. Additional properties (such as custom event handlers) can be applied to the input via `inputProps`.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Handling long words</h4>
-    Set an explicit `width` on `.pt-tag-input` to cause long words to wrap onto multiple lines. Either supply a specific pixel value, or use `<TagInput className="pt-fill">` to fill its container's width (try this in the example above).
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Handling long words</h4>
+    Set an explicit `width` on `.@ns-tag-input` to cause long words to wrap onto multiple lines. Either supply a specific pixel value, or use `<TagInput className="@ns-fill">` to fill its container's width (try this in the example above).
 </div>
 
 @interface ITagInputProps
diff --git a/packages/core/src/components/tag-input/tagInput.tsx b/packages/core/src/components/tag-input/tagInput.tsx
index 28ea7f3787..bb0d6e5409 100644
--- a/packages/core/src/components/tag-input/tagInput.tsx
+++ b/packages/core/src/components/tag-input/tagInput.tsx
@@ -122,7 +122,7 @@ export interface ITagInputProps extends IProps {
 
     /**
      * Element to render on right side of input.
-     * For best results, use a small spinner or minimal button (button height will adjust if `TagInput` use `.pt-large`).
+     * For best results, use a small spinner or minimal button (button height will adjust if `TagInput` uses large styles).
      * Other elements will likely require custom styles for correct positioning.
      */
     rightElement?: JSX.Element;
diff --git a/packages/core/src/components/tag/_common.scss b/packages/core/src/components/tag/_common.scss
index b7a8cf7b5a..3fbfba5c09 100644
--- a/packages/core/src/components/tag/_common.scss
+++ b/packages/core/src/components/tag/_common.scss
@@ -27,22 +27,22 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
   color: $pt-dark-text-color;
   font-size: $pt-font-size-small;
 
-  &.pt-round {
+  &.#{$ns}-round {
     border-radius: $tag-height / 2;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include pt-tag-interactive($dark-tag-default-color, 1);
 
     background-color: $dark-tag-default-color;
     color: $pt-text-color;
   }
 
-  &.pt-tag-removable {
+  &.#{$ns}-tag-removable {
     padding-right: $tag-height;
   }
 
-  &.pt-active {
+  &.#{$ns}-active {
     @include focus-outline(0);
   }
 }
@@ -53,11 +53,11 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
   line-height: $pt-icon-size-large;
   font-size: $pt-font-size;
 
-  &.pt-round {
+  &.#{$ns}-round {
     border-radius: $tag-height-large / 2;
   }
 
-  &.pt-tag-removable {
+  &.#{$ns}-tag-removable {
     padding-right: $tag-height-large;
   }
 }
@@ -70,13 +70,13 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
 }
 
 @mixin pt-tag-minimal() {
-  &:not([class*="pt-intent-"]) {
+  &:not([class*="#{$ns}-intent-"]) {
     @include pt-tag-minimal-interactive($tag-default-color, 0.2);
 
     background-color: rgba($gray3, 0.2);
     color: $pt-text-color;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       @include pt-tag-minimal-interactive($dark-tag-default-color, 0.2);
 
       color: $pt-dark-text-color;
@@ -90,7 +90,7 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
   background-color: rgba($background-color, 0.15);
   color: $text-color;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include pt-tag-minimal-interactive($background-color, 0.25);
 
     background-color: rgba($background-color, 0.25);
@@ -99,7 +99,7 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
 }
 
 @mixin pt-tag-interactive($background-color, $opacity) {
-  &.pt-interactive {
+  &.#{$ns}-interactive {
     cursor: pointer;
 
     &:hover {
@@ -113,7 +113,7 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
 }
 
 @mixin pt-tag-minimal-interactive($background-color, $opacity) {
-  &.pt-interactive {
+  &.#{$ns}-interactive {
     cursor: pointer;
 
     &:hover {
@@ -153,7 +153,7 @@ $tag-padding-large: ($tag-height-large - $pt-icon-size-large) / 2 !default;
     content: $pt-icon-small-cross;
   }
 
-  .pt-large & {
+  .#{$ns}-large & {
     padding: $tag-padding-large;
 
     &:empty::before {
diff --git a/packages/core/src/components/tag/_tag.scss b/packages/core/src/components/tag/_tag.scss
index e003621738..88d7b68a91 100644
--- a/packages/core/src/components/tag/_tag.scss
+++ b/packages/core/src/components/tag/_tag.scss
@@ -9,44 +9,44 @@ Tags
 
 Markup:
 <p>
-  <span class="pt-tag {{.modifier}}">125</span>
-  <span class="pt-tag {{.modifier}}">Done</span>
-  <span class="pt-tag pt-tag-removable {{.modifier}}">
+  <span class="#{$ns}-tag {{.modifier}}">125</span>
+  <span class="#{$ns}-tag {{.modifier}}">Done</span>
+  <span class="#{$ns}-tag #{$ns}-tag-removable {{.modifier}}">
     Tracking
-    <button class="pt-tag-remove"></button>
+    <button class="#{$ns}-tag-remove"></button>
   </span>
-  <span class="pt-tag pt-tag-removable {{.modifier}}">
+  <span class="#{$ns}-tag #{$ns}-tag-removable {{.modifier}}">
     Crushed
-    <button class="pt-tag-remove"></button>
+    <button class="#{$ns}-tag-remove"></button>
   </span>
 </p>
-<span class="pt-tag pt-tag-removable {{.modifier}}">
+<span class="#{$ns}-tag #{$ns}-tag-removable {{.modifier}}">
   A rather long string of text that wraps to multiple lines
   demonstrates the position of the remove button.
-  <button class="pt-tag-remove"></button>
+  <button class="#{$ns}-tag-remove"></button>
 </span>
 
-.pt-large - Large
-.pt-round - Rounded corners, ideal for badges
-.pt-interactive - Hover and active effects
-.pt-intent-primary - Primary intent
-.pt-intent-success - Success intent
-.pt-intent-warning - Warning intent
-.pt-intent-danger  - Danger intent
+.#{$ns}-large - Large
+.#{$ns}-round - Rounded corners, ideal for badges
+.#{$ns}-interactive - Hover and active effects
+.#{$ns}-intent-primary - Primary intent
+.#{$ns}-intent-success - Success intent
+.#{$ns}-intent-warning - Warning intent
+.#{$ns}-intent-danger  - Danger intent
 
-Styleguide pt-tag
+Styleguide tag
 */
 
-.pt-tag {
+.#{$ns}-tag {
   @include pt-tag();
 
-  &.pt-large,
-  .pt-large & {
+  &.#{$ns}-large,
+  .#{$ns}-large & {
     @include pt-tag-large();
   }
 
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       @include pt-tag-intent($color);
     }
   }
@@ -55,29 +55,29 @@ Styleguide pt-tag
   Minimal tags
 
   Markup:
-  <div class="pt-tag pt-minimal {{.modifier}}">125</div>
-  <div class="pt-tag pt-minimal {{.modifier}}">Done</div>
-  <div class="pt-tag pt-minimal pt-tag-removable {{.modifier}}">
+  <div class="#{$ns}-tag #{$ns}-minimal {{.modifier}}">125</div>
+  <div class="#{$ns}-tag #{$ns}-minimal {{.modifier}}">Done</div>
+  <div class="#{$ns}-tag #{$ns}-minimal #{$ns}-tag-removable {{.modifier}}">
     Tracking
-    <button class="pt-tag-remove"></button>
+    <button class="#{$ns}-tag-remove"></button>
   </div>
 
-  .pt-large - Large
-  .pt-round - Rounded corners, ideal for badges
-  .pt-interactive - Hover and active effects
-  .pt-intent-primary - Primary intent
-  .pt-intent-success - Success intent
-  .pt-intent-warning - Warning intent
-  .pt-intent-danger  - Danger intent
+  .#{$ns}-large - Large
+  .#{$ns}-round - Rounded corners, ideal for badges
+  .#{$ns}-interactive - Hover and active effects
+  .#{$ns}-intent-primary - Primary intent
+  .#{$ns}-intent-success - Success intent
+  .#{$ns}-intent-warning - Warning intent
+  .#{$ns}-intent-danger  - Danger intent
 
-  Styleguide pt-tag.pt-minimal
+  Styleguide tag-minimal
   */
 
-  &.pt-minimal {
+  &.#{$ns}-minimal {
     @include pt-tag-minimal();
 
     @each $intent, $color in $pt-intent-colors {
-      &.pt-intent-#{$intent} {
+      &.#{$ns}-intent-#{$intent} {
         @include pt-tag-minimal-intent(
           $color,
           map-get($pt-intent-text-colors, $intent),
@@ -88,6 +88,6 @@ Styleguide pt-tag
   }
 }
 
-.pt-tag-remove {
+.#{$ns}-tag-remove {
   @include pt-tag-remove();
 }
diff --git a/packages/core/src/components/tag/tag.md b/packages/core/src/components/tag/tag.md
index 33e9c9706d..7d5af42a0f 100644
--- a/packages/core/src/components/tag/tag.md
+++ b/packages/core/src/components/tag/tag.md
@@ -6,27 +6,27 @@ Tags are great for lists of strings.
 
 @## CSS API
 
-An optional "remove" button can be added inside a tag as a `button.pt-tag-remove`. Also add the
-class `.pt-tag-removable` to the `.pt-tag` itself to adjust padding. The button is a separate
+An optional "remove" button can be added inside a tag as a `button.@ns-tag-remove`. Also add the
+class `.@ns-tag-removable` to the `.@ns-tag` itself to adjust padding. The button is a separate
 element to support interaction handlers in your framework of choice.
 
-A simple `.pt-tag` without the remove button can easily function as a badge.
+A simple `.@ns-tag` without the remove button can easily function as a badge.
 
-@css pt-tag
+@css tag
 
 @### Minimal tags
 
-Add the `.pt-minimal` modifier for a lighter tag appearance. The translucent background color
+Add the `.@ns-minimal` modifier for a lighter tag appearance. The translucent background color
 will adapt to its container's background color.
 
-@css pt-tag.pt-minimal
+@css tag-minimal
 
 @## JavaScript API
 
 The `Tag` component is available in the __@blueprintjs/core__ package.
 Make sure to review the [getting started docs for installation info](#blueprint/getting-started).
 
-Tag components render `.pt-tag` elements with optional close buttons. Provide tag content as `children`.
+Tag components render `.@ns-tag` elements with optional close buttons. Provide tag content as `children`.
 
 You can provide your own props to these components as if they were regular JSX HTML elements. If
 you provide a `className` prop, the class names you provide will be added alongside of the default
@@ -35,9 +35,9 @@ Blueprint class name.
 ```tsx
 <Tag intent={Intent.PRIMARY} onRemove={this.deleteTag}>Done</Tag>
 // renders:
-<span class="pt-tag pt-intent-primary pt-tag-removable">
+<span class="@ns-tag @ns-intent-primary @ns-tag-removable">
     Done
-    <button class="pt-tag-remove" onClick={this.deleteTag}></button>
+    <button class="@ns-tag-remove" onClick={this.deleteTag}></button>
 </span>
 ```
 
diff --git a/packages/core/src/components/toast/_toast.scss b/packages/core/src/components/toast/_toast.scss
index 7f47c3827a..caac561ea7 100644
--- a/packages/core/src/components/toast/_toast.scss
+++ b/packages/core/src/components/toast/_toast.scss
@@ -9,14 +9,14 @@ $toast-min-width: $pt-grid-size * 30 !default;
 $toast-max-width: $pt-grid-size * 50 !default;
 $toast-margin: $pt-grid-size * 2 !default;
 
-.pt-toast {
+.#{$ns}-toast {
   // toast transition properties
   $enter-translate: (transform: translateY(-$toast-height) translateY(0));
   $leave-blur: (opacity: 0 1, filter: blur($pt-grid-size) blur(0));
 
   // new toasts slide in from the top
   @include react-transition-phase(
-    "pt-toast",
+    "#{$ns}-toast",
     "enter",
     $enter-translate,
     $duration: $pt-transition-duration * 3,
@@ -24,7 +24,7 @@ $toast-margin: $pt-grid-size * 2 !default;
     $before: "&"
   );
   @include react-transition-phase(
-    "pt-toast",
+    "#{$ns}-toast",
     "enter",
     $enter-translate,
     $duration: $pt-transition-duration * 3,
@@ -34,7 +34,7 @@ $toast-margin: $pt-grid-size * 2 !default;
   );
   // leaving toasts simply fade away
   @include react-transition-phase(
-    "pt-toast",
+    "#{$ns}-toast",
     "exit",
     $leave-blur,
     $duration: $pt-transition-duration * 3,
@@ -42,7 +42,7 @@ $toast-margin: $pt-grid-size * 2 !default;
   );
   // younger siblings of leaving toasts wait a moment before moving to fill gap
   @include react-transition-phase(
-    "pt-toast",
+    "#{$ns}-toast",
     "exit",
     $enter-translate,
     $delay: $pt-transition-duration / 2,
@@ -65,29 +65,29 @@ $toast-margin: $pt-grid-size * 2 !default;
   // toast is interactive even though container isn't
   pointer-events: all;
 
-  .pt-button-group {
+  .#{$ns}-button-group {
     flex: 0 0 auto;
     padding: ($toast-height - $pt-button-height) / 2;
     padding-left: 0;
   }
 
-  > .pt-icon {
+  > .#{$ns}-icon {
     margin: ($toast-height - $pt-icon-size-standard) / 2;
     margin-right: 0;
     color: $pt-icon-color;
   }
 
-  &.pt-dark,
-  .pt-dark & {
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
     box-shadow: $pt-dark-elevation-shadow-3;
     background-color: $dark-gray5;
 
-    > .pt-icon {
+    > .#{$ns}-icon {
       color: $pt-dark-icon-color;
     }
   }
 
-  &[class*="pt-intent-"] {
+  &[class*="#{$ns}-intent-"] {
     a {
       color: rgba($white, 0.7);
 
@@ -96,17 +96,17 @@ $toast-margin: $pt-grid-size * 2 !default;
       }
     }
 
-    > .pt-icon {
+    > .#{$ns}-icon {
       color: $white;
     }
   }
 
   // HACKHACK custom colors for buttons on intent background so they always show up nice
   // stylelint-disable declaration-no-important
-  &[class*="pt-intent-"] .pt-button {
+  &[class*="#{$ns}-intent-"] .#{$ns}-button {
     &,
     &::before,
-    .pt-icon,
+    .#{$ns}-icon,
     &:active {
       color: rgba($white, 0.7) !important;
     }
@@ -134,19 +134,19 @@ $toast-margin: $pt-grid-size * 2 !default;
 
   // define these last so they override default dark colors above
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       background-color: $color;
       color: $white;
     }
   }
 }
 
-.pt-toast-message {
+.#{$ns}-toast-message {
   flex: 1 1 auto;
   padding: centered-text($toast-height);
 }
 
-.pt-toast-container {
+.#{$ns}-toast-container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -168,32 +168,32 @@ $toast-margin: $pt-grid-size * 2 !default;
   // container will not block clicks on elements behind it
   pointer-events: none;
 
-  &.pt-toast-container-top {
+  &.#{$ns}-toast-container-top {
     top: 0;
-    // clear opposite side cuz .pt-overlay has all sides 0'ed
+    // clear opposite side cuz .#{$ns}-overlay has all sides 0'ed
     bottom: auto;
   }
 
-  &.pt-toast-container-bottom {
+  &.#{$ns}-toast-container-bottom {
     flex-direction: column-reverse;
     top: auto;
     bottom: 0;
   }
 
-  &.pt-toast-container-left {
+  &.#{$ns}-toast-container-left {
     align-items: flex-start;
   }
 
-  &.pt-toast-container-right {
+  &.#{$ns}-toast-container-right {
     align-items: flex-end;
   }
 }
 
-.pt-toast-container-bottom .pt-toast {
+.#{$ns}-toast-container-bottom .#{$ns}-toast {
   // minimal diff in react-transition styles so we can avoid calling those mixins again
-  &.pt-toast-enter:not(.pt-toast-enter-active),
-  &.pt-toast-enter:not(.pt-toast-enter-active) ~ .pt-toast,
-  &.pt-toast-leave-active ~ .pt-toast {
+  &.#{$ns}-toast-enter:not(.#{$ns}-toast-enter-active),
+  &.#{$ns}-toast-enter:not(.#{$ns}-toast-enter-active) ~ .#{$ns}-toast,
+  &.#{$ns}-toast-leave-active ~ .#{$ns}-toast {
     transform: translateY($toast-margin + $toast-height);
   }
 }
diff --git a/packages/core/src/components/toast/toast.md b/packages/core/src/components/toast/toast.md
index f4c0f8f652..6170b30a52 100644
--- a/packages/core/src/components/toast/toast.md
+++ b/packages/core/src/components/toast/toast.md
@@ -38,14 +38,14 @@ There are three ways to use the `Toaster` component:
 1. `<Toaster><Toast />...</Toaster>`: Render a `<Toaster>` element with React `children`.
 1. `<Toaster ref={ref => ref.show({ ...toast })} />`: Render a `<Toaster>` element and use the `ref` prop to access its instance methods.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Working with multiple toasters</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Working with multiple toasters</h4>
     You can have multiple toasters in a single application, but you must ensure that each has a unique
     `position` to prevent overlap.
 </div>
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Toaster focus</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Toaster focus</h4>
     `Toaster` always disables `Overlay`'s `enforceFocus` behavior (meaning that you're not blocked
     from accessing other parts of the application while a toast is active), and by default also
     disables `autoFocus` (meaning that focus will not switch to a toast when it appears). You can
diff --git a/packages/core/src/components/tooltip/_tooltip.scss b/packages/core/src/components/tooltip/_tooltip.scss
index bf9aca5e0b..fef19d6630 100644
--- a/packages/core/src/components/tooltip/_tooltip.scss
+++ b/packages/core/src/components/tooltip/_tooltip.scss
@@ -5,7 +5,7 @@
 @import "../popover/common";
 @import "./common";
 
-.pt-tooltip {
+.#{$ns}-tooltip {
   @include popover-sizing(
     $arrow-square-size: 22px,
     $arrow-offset: 3px,
@@ -20,18 +20,18 @@
   );
   // lightweight scale for tooltips
   @include react-transition(
-    "pt-popover",
+    "#{$ns}-popover",
     (transform: scale(0.8) scale(1)),
     $duration: $pt-transition-duration,
     $after: "> &"
   );
 
-  .pt-popover-content {
+  .#{$ns}-popover-content {
     padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
   }
 
-  &.pt-dark,
-  .pt-dark & {
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
     @include popover-appearance(
       $dark-tooltip-background-color,
       $dark-tooltip-text-color,
@@ -42,25 +42,25 @@
   }
 
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
-      .pt-popover-content {
+    &.#{$ns}-intent-#{$intent} {
+      .#{$ns}-popover-content {
         background: $color;
         color: $white;
       }
 
-      .pt-popover-arrow-fill {
+      .#{$ns}-popover-arrow-fill {
         fill: $color;
       }
     }
   }
 }
 
-.pt-popover-target .pt-tooltip {
+.#{$ns}-popover-target .#{$ns}-tooltip {
   // inline tooltips don't get auto-sizing, so this sort of emulates it
   white-space: nowrap;
 }
 
-.pt-tooltip-indicator {
+.#{$ns}-tooltip-indicator {
   border-bottom: dotted 1px;
   cursor: help;
 }
diff --git a/packages/core/src/components/tooltip/tooltip.md b/packages/core/src/components/tooltip/tooltip.md
index 748b1b6885..78acc2608d 100644
--- a/packages/core/src/components/tooltip/tooltip.md
+++ b/packages/core/src/components/tooltip/tooltip.md
@@ -16,8 +16,8 @@ When creating a tooltip, you must specify both:
 
 The content will appear in a contrasting popover when the target is hovered over.
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Button targets</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Button targets</h4>
     Buttons make great tooltip targets, but the `disabled` attribute will prevent all
     events so the enclosing `Tooltip` will not know when to respond.
     Use [`AnchorButton`](#core/components/button.anchor-button) instead;
diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
index cad92ab6fb..920b7ee001 100644
--- a/packages/core/src/components/tooltip/tooltip.tsx
+++ b/packages/core/src/components/tooltip/tooltip.tsx
@@ -95,7 +95,7 @@ export interface ITooltipProps extends IProps, IIntentProps {
     position?: Position | "auto";
 
     /**
-     * The name of the HTML tag to use when rendering the popover target wrapper element (`.pt-popover-target`).
+     * The name of the HTML tag to use when rendering the popover target wrapper element (`Classes.POPOVER_WRAPPER`).
      * @default "span"
      */
     rootElementTag?: string;
diff --git a/packages/core/src/components/tree/_tree.scss b/packages/core/src/components/tree/_tree.scss
index 056b000a69..9f629d731a 100644
--- a/packages/core/src/components/tree/_tree.scss
+++ b/packages/core/src/components/tree/_tree.scss
@@ -9,28 +9,28 @@
 Trees
 
 Markup:
-<div class="pt-tree pt-elevation-0">
-  <ul class="pt-tree-node-list pt-tree-root">
-    <li class="pt-tree-node pt-tree-node-expanded">
-      <div class="pt-tree-node-content">
-        <span class="pt-tree-node-caret pt-tree-node-caret-open pt-icon-standard"></span>
-        <span class="pt-tree-node-icon pt-icon-standard pt-icon-folder-close"></span>
-        <span class="pt-tree-node-label">Label</span>
-        <span class="pt-tree-node-secondary-label">Secondary label</span>
+<div class="#{$ns}-tree #{$ns}-elevation-0">
+  <ul class="#{$ns}-tree-node-list #{$ns}-tree-root">
+    <li class="#{$ns}-tree-node #{$ns}-tree-node-expanded">
+      <div class="#{$ns}-tree-node-content">
+        <span class="#{$ns}-tree-node-caret #{$ns}-tree-node-caret-open #{$ns}-icon-standard"></span>
+        <span class="#{$ns}-tree-node-icon #{$ns}-icon-standard #{$ns}-icon-folder-close"></span>
+        <span class="#{$ns}-tree-node-label">Label</span>
+        <span class="#{$ns}-tree-node-secondary-label">Secondary label</span>
       </div>
-      <ul class="pt-tree-node-list">
-        <li class="pt-tree-node">
-          <div class="pt-tree-node-content">
-            <span class="pt-tree-node-caret-none pt-icon-standard"></span>
-            <span class="pt-tree-node-icon pt-icon-standard pt-icon-document"></span>
-          <span class="pt-tree-node-label">A Document</span>
+      <ul class="#{$ns}-tree-node-list">
+        <li class="#{$ns}-tree-node">
+          <div class="#{$ns}-tree-node-content">
+            <span class="#{$ns}-tree-node-caret-none #{$ns}-icon-standard"></span>
+            <span class="#{$ns}-tree-node-icon #{$ns}-icon-standard #{$ns}-icon-document"></span>
+          <span class="#{$ns}-tree-node-label">A Document</span>
           </div>
         </li>
-        <li class="pt-tree-node">
-          <div class="pt-tree-node-content">
-            <span class="pt-tree-node-caret-none pt-icon-standard"></span>
-            <span class="pt-tree-node-icon pt-icon-standard pt-icon-document"></span>
-            <span class="pt-tree-node-label">Another Document</span>
+        <li class="#{$ns}-tree-node">
+          <div class="#{$ns}-tree-node-content">
+            <span class="#{$ns}-tree-node-caret-none #{$ns}-icon-standard"></span>
+            <span class="#{$ns}-tree-node-icon #{$ns}-icon-standard #{$ns}-icon-document"></span>
+            <span class="#{$ns}-tree-node-label">Another Document</span>
           </div>
         </li>
       </ul>
@@ -38,19 +38,19 @@ Markup:
   </ul>
 </div>
 
-Styleguide pt-tree
+Styleguide tree
 */
 
 $tree-row-height: $pt-grid-size * 3 !default;
 $tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) / 2 !default;
 
-.pt-tree-node-list {
+.#{$ns}-tree-node-list {
   margin: 0;
   padding-left: 0;
   list-style: none;
 }
 
-.pt-tree-root {
+.#{$ns}-tree-root {
   // lets us position hover/selection effects based on the width of the whole tree
   position: relative;
   background-color: transparent;
@@ -59,12 +59,12 @@ $tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) / 2 !default;
 }
 
 @for $i from 0 through 20 {
-  .pt-tree-node-content-#{$i} {
+  .#{$ns}-tree-node-content-#{$i} {
     padding-left: ($tree-row-height - $tree-icon-spacing) * $i;
   }
 }
 
-.pt-tree-node-content {
+.#{$ns}-tree-node-content {
   display: flex;
   align-items: center;
   width: 100%;
@@ -76,42 +76,42 @@ $tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) / 2 !default;
   }
 }
 
-.pt-tree-node-caret,
-.pt-tree-node-caret-none {
+.#{$ns}-tree-node-caret,
+.#{$ns}-tree-node-caret-none {
   position: relative;
   min-width: $pt-grid-size * 3;
   // CSS API: override default icon styles, which appear first for some reason
   line-height: $tree-row-height !important; // stylelint-disable-line declaration-no-important
 }
 
-.pt-tree-node-caret {
+.#{$ns}-tree-node-caret {
   @include pt-icon-colors();
   transform: rotate(0deg);
   cursor: pointer;
   text-align: center;
   transition: transform ($pt-transition-duration * 2) $pt-transition-ease;
 
-  &.pt-tree-node-caret-open {
+  &.#{$ns}-tree-node-caret-open {
     transform: rotate(90deg);
   }
 
   // CSS API support
-  &.pt-icon-standard::before {
+  &.#{$ns}-icon-standard::before {
     content: $pt-icon-caret-right;
   }
 
-  .pt-icon {
+  .#{$ns}-icon {
     margin: $tree-icon-spacing;
   }
 }
 
-.pt-tree-node-icon {
+.#{$ns}-tree-node-icon {
   position: relative;
   margin-right: $tree-icon-spacing;
   color: $pt-icon-color;
 }
 
-.pt-tree-node-label {
+.#{$ns}-tree-node-label {
   @include overflow-ellipsis();
   flex: 1 1 auto;
   position: relative;
@@ -123,13 +123,13 @@ $tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) / 2 !default;
   }
 }
 
-.pt-tree-node-secondary-label {
+.#{$ns}-tree-node-secondary-label {
   padding: 0 ($pt-grid-size / 2);
   line-height: $tree-row-height;
   user-select: none;
 }
 
-.pt-tree-node.pt-tree-node-selected > .pt-tree-node-content {
+.#{$ns}-tree-node.#{$ns}-tree-node-selected > .#{$ns}-tree-node-content {
   background-color: $pt-intent-primary;
 
   &,
@@ -137,7 +137,7 @@ $tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) / 2 !default;
     color: $white;
   }
 
-  .pt-tree-node-caret {
+  .#{$ns}-tree-node-caret {
     &::before {
       color: rgba($white, 0.7);
     }
@@ -148,16 +148,16 @@ $tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) / 2 !default;
   }
 }
 
-.pt-dark {
-  .pt-tree-node-content:hover {
+.#{$ns}-dark {
+  .#{$ns}-tree-node-content:hover {
     background-color: rgba($gray1, 0.3);
   }
 
-  .pt-tree-node-icon {
+  .#{$ns}-tree-node-icon {
     color: $pt-dark-icon-color;
   }
 
-  .pt-tree-node.pt-tree-node-selected > .pt-tree-node-content {
+  .#{$ns}-tree-node.#{$ns}-tree-node-selected > .#{$ns}-tree-node-content {
     background-color: $pt-intent-primary;
   }
 }
diff --git a/packages/core/src/components/tree/tree.md b/packages/core/src/components/tree/tree.md
index ff7f55a09d..8deef12d6b 100644
--- a/packages/core/src/components/tree/tree.md
+++ b/packages/core/src/components/tree/tree.md
@@ -7,12 +7,12 @@ Trees display hierarchical data.
 See below for the [JavaScript API](#core/components/tree.javascript-api) for the `Tree` React component. However, you
 may also use the provided styles by themselves, without using the component.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
     Note that the following examples set a maximum width and background color for the tree;
     you may want to do this as well in your own usage.
 </div>
 
-@css pt-tree
+@css tree
 
 @## JavaScript API
 
diff --git a/packages/core/src/docs/accessibility.md b/packages/core/src/docs/accessibility.md
index 5c026a5709..84fdd6cef0 100644
--- a/packages/core/src/docs/accessibility.md
+++ b/packages/core/src/docs/accessibility.md
@@ -12,7 +12,7 @@ any time.
 
 Blueprint includes a utility that manages the appearance of focus styles. When enabled, focus styles
 will be hidden while the user interacts using the mouse and will appear when the
-<kbd class="pt-key">tab</kbd> key is pressed to begin keyboard navigation. Try this out for yourself
+<kbd class="@ns-key">tab</kbd> key is pressed to begin keyboard navigation. Try this out for yourself
 below.
 
 **You must explictly enable this feature in your app (and you probably want to):**
diff --git a/packages/core/src/docs/classes.md b/packages/core/src/docs/classes.md
new file mode 100644
index 0000000000..84fa554c64
--- /dev/null
+++ b/packages/core/src/docs/classes.md
@@ -0,0 +1,54 @@
+@# Classes
+
+Blueprint packages provide React components in JS files and associated styles in a CSS file. Each package exports a `Classes` constants object in JavaScript that contains keys of the form `NAMED_CONSTANT` for every CSS class used. This separation allows us to change CSS classes between versions without breaking downstream users (although in practice this happens very rarely).
+
+**Avoid referencing hardcoded Blueprint class names in your JS or CSS code.**
+
+```tsx
+// Don't do this! Avoid hardcoding Blueprint class names.
+<button className="@ns-button @ns-large">Don't do this!</button>
+```
+
+The **best practice** is to add your own class to an element and then reference that class whenever needed.
+
+```tsx
+<Button className="my-custom-class" text="customized button" />
+```
+```css.scss
+.my-custom-class {
+    width: 4000px;
+}
+```
+
+In cases where adding and styling a new class is impractical or undesirable, use the `Classes` constants or `$ns` Sass/Less variable. The `Classes` constants can be particularly useful when writing UI tests.
+
+```tsx
+// use Classes constants for forward-compatible custom elements.
+import { Classes } from "@blueprintjs/core"
+<a className={Classes.MENU_ITEM}>custom menu item</a>
+```
+
+```css.scss
+// interpolate the $ns variable to generate forward-compatible class names.
+// this approach is *not encouraged* as it increases maintenance cost.
+@import "~@blueprintjs/core/lib/scss/variables";
+.#{$ns}-menu-item {}
+```
+
+@## Namespacing
+
+All Blueprint CSS classes begin with a namespace prefix to isolate our styles from other frameworks: `.button` is a very common name, but only Blueprint defines `.@ns-button`.
+
+Beginning with Blueprint 3.0, this namespace will be versioned by major version of the library so two major versions can be used together on a single page. This means the namespace at the beginning of every class _will change in each subsequent major version_. In Blueprint 1.x and 2.x this namespace was `pt-`, but in Blueprint 3.0 it will change to `bp3-` and increase accordingly.
+
+### Custom namespace
+
+The namespace can be changed _at build time_ to produce a custom Blueprint build (though this usage is not recommended and we cannot offer support for it). This requires several things:
+
+1. You must use Sass and import Blueprint Sass source into your app, rather than using the CSS file distributed in the NPM package.
+1. Define the `$ns` Sass variable in your app styles before importing `blueprint.scss` to update the generated CSS.
+1. When bundling your code, set the `BLUEPRINT_NAMESPACE` environment variable to the same value to update the generated `Classes` constants. The easiest way to do this is on the command line: `BLUEPRINT_NAMESPACE="custom" webpack ...args`
+
+@## Linting
+
+The [**@blueprintjs/tslint-config**](https://www.npmjs.com/package/@blueprintjs/tslint-config) NPM package provides advanced configuration for [TSLint](http://palantir.github.io/tslint/), including a custom `blueprint-classes-constants` rule that will detect and warn about hardcoded `pt-`prefixed strings. See the package's [README](https://www.npmjs.com/package/@blueprintjs/tslint-config) for usage instructions.
diff --git a/packages/core/src/docs/color-aliases.md b/packages/core/src/docs/color-aliases.md
index ed141c8cac..4938337617 100644
--- a/packages/core/src/docs/color-aliases.md
+++ b/packages/core/src/docs/color-aliases.md
@@ -3,7 +3,7 @@
 These variables are semantic aliases of our [colors](#colors).
 They are used throughout Blueprint itself to ensure consistent color usage across components.
 
-<table class="pt-html-table docs-color-aliases-table">
+<table class="@ns-html-table docs-color-aliases-table">
     <thead>
         <tr>
             <th></th>
diff --git a/packages/core/src/docs/index.md b/packages/core/src/docs/index.md
index 5526521ebe..d55522a18d 100644
--- a/packages/core/src/docs/index.md
+++ b/packages/core/src/docs/index.md
@@ -13,6 +13,7 @@ The core package depends on __@blueprintjs/icons__ which provides 300+ UI icons
 Be sure to include the icons CSS file in your app alongside the core CSS file.
 
 @page accessibility
+@page classes
 @page colors
 @page typography
 @page variables
diff --git a/packages/core/src/docs/typography.md b/packages/core/src/docs/typography.md
index 698acb5e1c..00dbc82f48 100644
--- a/packages/core/src/docs/typography.md
+++ b/packages/core/src/docs/typography.md
@@ -9,7 +9,7 @@ Keep in mind these general web typography guidelines when building your applicat
 - If you choose to go with a custom text color, make sure the background behind it provides
 proper contrast.
 - Try not to explicitly write pixel values for your font-size or line-height CSS rules.
-Instead, reference the classes and variables we provide in Blueprint (`.pt-ui-text`,
+Instead, reference the classes and variables we provide in Blueprint (`.@ns-ui-text`,
 `$pt-font-size-large`, etc.).
 
 @## Fonts
@@ -28,22 +28,22 @@ font. We provide a class to use the default monospace font instead.
 
 The base font size for Blueprint web applications is 14px. This should be the default type size
 for most short strings of text which are not headings or titles. If you wish to reset some
-element's font size and line height to the default base styles, use the `.pt-ui-text` class.
+element's font size and line height to the default base styles, use the `.@ns-ui-text` class.
 For longer running text, see [running text styles](#core/typography.running-text).
 
-@css pt-ui-text
+@css ui-text
 
 @## Running text
 
 Longform text, such as rendered Markdown documents, benefit from additional spacing and slightly
-large font size. Apply `.pt-running-text` to the parent element to adjust spacing for the following
+large font size. Apply `.@ns-running-text` to the parent element to adjust spacing for the following
 elements:
 
 - `<p>` tags have increased line-height and font size.
 - `<h*>` tag margins are adjusted to provide clear separation between sections in a document.
-- `<ul>` and `<ol>` tags receive [`.pt-list`](#core/typography.lists) styles for legibility.
+- `<ul>` and `<ol>` tags receive [`.@ns-list`](#core/typography.lists) styles for legibility.
 
-@css pt-running-text
+@css running-text
 
 @## Links
 
@@ -69,8 +69,8 @@ Block quotes are treated as running text.
 
 Blueprint provides a small amount of global styling and a few modifier classes for list elements.
 
-`<ul>` and `<ol>` elements in blocks with the `.pt-running-text` modifier class will
-automatically assume the `.pt-list` styles to promote readability.
+`<ul>` and `<ol>` elements in blocks with the `.@ns-running-text` modifier class will
+automatically assume the `.@ns-list` styles to promote readability.
 
 @css lists
 
@@ -88,30 +88,30 @@ use the library of your choice for managing internationalized strings.
 
 @### Right-to-left text
 
-Use the utility class `.pt-rtl`.
+Use the utility class `.@ns-rtl`.
 
-@css pt-rtl
+@css rtl
 
 @## Dark theme
 
 Blueprint provides two UI color themes: light and dark. The light theme is active by default. The
-dark theme can be applied by adding the class `pt-dark` to a container element to theme all nested
+dark theme can be applied by adding the class `@ns-dark` to a container element to theme all nested
 elements.
 
-Once applied, the dark theme will cascade to nested `.pt-*` elements inside a `.pt-dark` container.
+Once applied, the dark theme will cascade to nested `.@ns-*` elements inside a `.@ns-dark` container.
 There is no way to nest light-themed elements inside a dark container.
 
-Most elements only support the dark theme when nested inside a `.pt-dark` container because it does
+Most elements only support the dark theme when nested inside a `.@ns-dark` container because it does
 not make sense to mark individual elements as dark. The dark container is therefore responsible for
 setting a dark background color.
 
-The following elements and components support the `.pt-dark` class directly (i.e, `.pt-app.pt-dark`)
+The following elements and components support the `.@ns-dark` class directly (i.e, `.@ns-app.@ns-dark`)
 and can be used as a container for nested dark children:
 
-- `.pt-app`
-- `.pt-card`
+- `.@ns-app`
+- `.@ns-card`
 - Overlays: `Dialog`, `Popover`, `Tooltip`, `Toast`
-- `Popover` and `Tooltip` will automatically detect when their trigger is inside a `.pt-dark`
+- `Popover` and `Tooltip` will automatically detect when their trigger is inside a `.@ns-dark`
 container and add the same class to themselves.
 
 Rather than illustrating dark components inline, this documentation site provides a site-wide switch
diff --git a/packages/core/src/docs/variables.md b/packages/core/src/docs/variables.md
index 347db617c3..e2f9aff26b 100644
--- a/packages/core/src/docs/variables.md
+++ b/packages/core/src/docs/variables.md
@@ -32,8 +32,8 @@ See the [Fonts section](#core/typography.fonts) for more information and usage g
 
 @## Icon variables
 
-Most icons should be displayed using the `span.pt-icon-*` classes or via modifier classes on
-components like `.pt-button`. In rare cases, you may need direct access to the content
+Most icons should be displayed using the `span.@ns-icon-*` classes or via modifier classes on
+components like `.@ns-button`. In rare cases, you may need direct access to the content
 string that generates each icon in the icon font. Blueprint provides these variables with
 straightforward names (see the [Icons section](#core/icons) for the full list of identifiers):
 
diff --git a/packages/core/test/controls/numericInputTests.tsx b/packages/core/test/controls/numericInputTests.tsx
index eee93647c7..770626e42e 100644
--- a/packages/core/test/controls/numericInputTests.tsx
+++ b/packages/core/test/controls/numericInputTests.tsx
@@ -93,7 +93,7 @@ describe("<NumericInput>", () => {
         });
 
         it(`renders the children in a ${Classes.CONTROL_GROUP} when buttons are visible`, () => {
-            // if the input is put into a .pt-control-group by itself, it'll have squared border radii
+            // if the input is put into a control group by itself, it'll have squared border radii
             // on the left, which we don't want.
             const component = mount(<NumericInput />);
 
@@ -104,7 +104,7 @@ describe("<NumericInput>", () => {
         });
 
         it(`does not render the children in a ${Classes.CONTROL_GROUP} when buttons are hidden`, () => {
-            // if the input is put into a .pt-control-group by itself, it'll have squared border radii
+            // if the input is put into a control group by itself, it'll have squared border radii
             // on the left, which we don't want.
             const component = mount(<NumericInput buttonPosition={null} />);
 
diff --git a/packages/core/test/tag-input/tagInputTests.tsx b/packages/core/test/tag-input/tagInputTests.tsx
index 72be5652e6..c69ff3ae55 100644
--- a/packages/core/test/tag-input/tagInputTests.tsx
+++ b/packages/core/test/tag-input/tagInputTests.tsx
@@ -417,7 +417,7 @@ describe("<TagInput>", () => {
         );
         assert.isTrue(
             wrapper
-                .find(".pt-input-ghost") // tslint:disable-line:blueprint-classes-constants
+                .find(`.${Classes.INPUT_GHOST}`)
                 .first()
                 .prop("disabled"),
             "input should be disabled",
diff --git a/packages/datetime/src/_common.scss b/packages/datetime/src/_common.scss
index 7f7e0b541a..d380adff45 100644
--- a/packages/datetime/src/_common.scss
+++ b/packages/datetime/src/_common.scss
@@ -1,7 +1,8 @@
 // Copyright 2017 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-@import "../../core/src/components/button/common";
+@import "~@blueprintjs/core/src/common/variables";
+@import "~@blueprintjs/icons/src/icons";
 
 $datepicker-min-width: $pt-grid-size * 21 !default;
 $datepicker-day-size: $pt-grid-size * 3 !default;
diff --git a/packages/datetime/src/_dateinput.scss b/packages/datetime/src/_dateinput.scss
index f80dc135c0..7afdcf8eb7 100644
--- a/packages/datetime/src/_dateinput.scss
+++ b/packages/datetime/src/_dateinput.scss
@@ -1,6 +1,6 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-.pt-dateinput-popover {
+.#{$ns}-dateinput-popover {
   padding: 0;
 }
diff --git a/packages/datetime/src/_datepicker.scss b/packages/datetime/src/_datepicker.scss
index a7786c6527..9dc0f26292 100644
--- a/packages/datetime/src/_datepicker.scss
+++ b/packages/datetime/src/_datepicker.scss
@@ -1,10 +1,8 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-@import "~@blueprintjs/icons/src/icons";
-@import "../../core/src/common/variables";
-@import "../../core/src/components/popover/common";
-@import "../../datetime/src/common";
+@import "~@blueprintjs/core/src/components/popover/common";
+@import "./common";
 
 $cell-size: $pt-grid-size * 3 !default;
 $header-height: $pt-grid-size * 4 !default;
@@ -21,7 +19,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
 
 // react-day-picker does not conform to our naming scheme
 // stylelint-disable selector-class-pattern
-.pt-datepicker {
+.#{$ns}-datepicker {
   position: relative;
   border-radius: $pt-border-radius;
   background: $datepicker-background-color;
@@ -154,7 +152,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
   }
 
-  .pt-datepicker-caption {
+  .#{$ns}-datepicker-caption {
     display: table-caption;
     border-bottom: 1px solid $pt-divider-black;
     padding: 0 $pt-grid-size;
@@ -178,7 +176,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
       -webkit-appearance: none;
       // stylelint-enable property-no-vendor-prefix
 
-      &:focus + .pt-datepicker-caption-caret {
+      &:focus + .#{$ns}-datepicker-caption-caret {
         display: inline;
       }
 
@@ -189,7 +187,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
   }
 
-  .pt-datepicker-caption-select {
+  .#{$ns}-datepicker-caption-select {
     display: inline-block;
     position: relative;
 
@@ -197,12 +195,12 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
       margin-right: $pt-grid-size;
     }
 
-    &:hover .pt-datepicker-caption-caret {
+    &:hover .#{$ns}-datepicker-caption-caret {
       fill: $pt-icon-color-hover;
     }
   }
 
-  .pt-datepicker-caption-caret {
+  .#{$ns}-datepicker-caption-caret {
     position: absolute;
     top: 2px;
     right: 0;
@@ -210,7 +208,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     pointer-events: none;
   }
 
-  .pt-datepicker-footer {
+  .#{$ns}-datepicker-footer {
     display: flex;
     justify-content: space-between;
     margin-top: $pt-grid-size;
@@ -220,12 +218,12 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
   }
 }
 
-.pt-datepicker-caption-measure {
+.#{$ns}-datepicker-caption-measure {
   padding-left: $pt-grid-size / 2;
   font-weight: 600;
 }
 
-.pt-dark .pt-datepicker {
+.#{$ns}-dark .#{$ns}-datepicker {
   background: $dark-datepicker-background-color;
 
   .DayPicker-WeekNumber {
@@ -261,7 +259,7 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     }
   }
 
-  .pt-datepicker-caption {
+  .#{$ns}-datepicker-caption {
     border-bottom-color: $pt-dark-divider-black;
 
     select {
@@ -275,16 +273,16 @@ $header-margin: ($header-height - $pt-input-height) / 2 !default;
     // we really need more than 4 compound selector
     // to target the particular structure of this markup
     // stylelint-disable-next-line
-    .pt-datepicker-caption-select:hover .pt-datepicker-caption-caret {
+    .#{$ns}-datepicker-caption-select:hover .#{$ns}-datepicker-caption-caret {
       fill: $pt-dark-icon-color-hover;
     }
 
-    .pt-datepicker-caption-caret {
+    .#{$ns}-datepicker-caption-caret {
       fill: $pt-dark-icon-color;
     }
   }
 
-  .pt-datepicker-footer {
+  .#{$ns}-datepicker-footer {
     border-top-color: $pt-dark-divider-black;
   }
 }
diff --git a/packages/datetime/src/_daterangepicker.scss b/packages/datetime/src/_daterangepicker.scss
index 1c4a2cab26..ed165b58e0 100644
--- a/packages/datetime/src/_daterangepicker.scss
+++ b/packages/datetime/src/_daterangepicker.scss
@@ -1,12 +1,11 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-@import "../../core/src/common/variables";
-@import "../../datetime/src/common";
+@import "./common";
 
 // react-day-picker does not conform to our naming scheme
 // stylelint-disable selector-class-pattern
-.pt-daterangepicker {
+.#{$ns}-daterangepicker {
   display: flex;
   white-space: nowrap;
 
@@ -18,19 +17,19 @@
     display: none;
   }
 
-  .pt-daterangepicker-shortcuts + .DayPicker {
+  .#{$ns}-daterangepicker-shortcuts + .DayPicker {
     border-left: 1px solid $pt-divider-black;
     min-width: $datepicker-min-width + $pt-grid-size;
     padding-left: $pt-grid-size;
   }
 
   // ensure min-widths are set correctly for variants of contiguous months, single month, and shortcuts
-  &.pt-daterangepicker-contiguous {
+  &.#{$ns}-daterangepicker-contiguous {
     .DayPicker {
       min-width: ($datepicker-min-width * 2) + $pt-grid-size;
     }
 
-    .pt-daterangepicker-shortcuts + .DayPicker {
+    .#{$ns}-daterangepicker-shortcuts + .DayPicker {
       min-width: ($datepicker-min-width + $pt-grid-size) * 2;
     }
 
@@ -39,12 +38,12 @@
     }
   }
 
-  &.pt-daterangepicker-single-month {
+  &.#{$ns}-daterangepicker-single-month {
     .DayPicker {
       min-width: $datepicker-min-width;
     }
 
-    .pt-daterangepicker-shortcuts + .DayPicker {
+    .#{$ns}-daterangepicker-shortcuts + .DayPicker {
       min-width: $datepicker-min-width + $pt-grid-size;
     }
   }
@@ -100,7 +99,7 @@
     }
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     .DayPicker-Day {
       &--hovered-range {
         // same for dark theme
@@ -122,7 +121,7 @@
   }
 }
 
-.pt-menu.pt-daterangepicker-shortcuts {
+.#{$ns}-menu.#{$ns}-daterangepicker-shortcuts {
   display: inline-block;
   margin-top: -$pt-grid-size / 2;
   margin-left: -$pt-grid-size / 2;
diff --git a/packages/datetime/src/_datetimepicker.scss b/packages/datetime/src/_datetimepicker.scss
index f541557f35..1160d6d38c 100644
--- a/packages/datetime/src/_datetimepicker.scss
+++ b/packages/datetime/src/_datetimepicker.scss
@@ -1,28 +1,28 @@
 // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-@import "../../core/src/common/variables";
+@import "./common";
 
-.pt-datetimepicker {
+.#{$ns}-datetimepicker {
   border-radius: $pt-border-radius;
   background-color: $white;
   padding: $pt-grid-size;
   text-align: center;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background: $dark-gray4;
 
-    .pt-datepicker {
+    .#{$ns}-datepicker {
       border-bottom: 1px solid $pt-dark-divider-black;
     }
   }
 
-  .pt-datepicker {
+  .#{$ns}-datepicker {
     border-bottom: 1px solid $pt-divider-black;
     padding: 0 0 $pt-grid-size;
   }
 
-  .pt-timepicker {
+  .#{$ns}-timepicker {
     margin-top: $pt-grid-size;
   }
 }
diff --git a/packages/datetime/src/_timepicker.scss b/packages/datetime/src/_timepicker.scss
index 4496a2aa3c..d93c5c1747 100644
--- a/packages/datetime/src/_timepicker.scss
+++ b/packages/datetime/src/_timepicker.scss
@@ -1,8 +1,8 @@
 // Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-@import "../../core/src/common/variables";
-@import "../../core/src/components/forms/common";
+@import "~@blueprintjs/core/src/components/forms/common";
+@import "./common";
 
 $timepicker-input-row-height: $pt-grid-size * 3 !default;
 // subtract two because of inset shadow
@@ -12,21 +12,21 @@ $timepicker-row-padding: 0 1px !default;
 $timepicker-divider-width: $pt-grid-size * 1.1 !default;
 $timepicker-control-width: $pt-grid-size * 3.3 !default;
 
-.pt-timepicker {
+.#{$ns}-timepicker {
   white-space: nowrap;
 
-  .pt-timepicker-arrow-row {
+  .#{$ns}-timepicker-arrow-row {
     padding: $timepicker-row-padding;
   }
 
-  .pt-timepicker-arrow-button {
+  .#{$ns}-timepicker-arrow-button {
     @include pt-icon-colors();
     display: inline-block;
     width: $timepicker-control-width;
     padding: ($pt-grid-size * 0.4) 0;
     text-align: center;
 
-    + .pt-timepicker-arrow-button {
+    + .#{$ns}-timepicker-arrow-button {
       margin-left: $timepicker-divider-width;
     }
 
@@ -35,7 +35,7 @@ $timepicker-control-width: $pt-grid-size * 3.3 !default;
     }
   }
 
-  .pt-timepicker-input-row {
+  .#{$ns}-timepicker-input-row {
     display: inline-block;
     border-radius: $pt-border-radius;
     box-shadow: $pt-input-box-shadow;
@@ -46,7 +46,7 @@ $timepicker-control-width: $pt-grid-size * 3.3 !default;
     line-height: $timepicker-input-row-inner-height;
   }
 
-  .pt-timepicker-divider-text {
+  .#{$ns}-timepicker-divider-text {
     display: inline-block;
     width: $timepicker-divider-width;
     text-align: center;
@@ -54,7 +54,7 @@ $timepicker-control-width: $pt-grid-size * 3.3 !default;
     font-size: $pt-font-size-large;
   }
 
-  .pt-timepicker-input {
+  .#{$ns}-timepicker-input {
     outline: 0;
     border: 0;
     border-radius: $pt-border-radius;
@@ -72,40 +72,40 @@ $timepicker-control-width: $pt-grid-size * 3.3 !default;
     }
   }
 
-  .pt-timepicker-ampm-select {
+  .#{$ns}-timepicker-ampm-select {
     margin-left: $pt-grid-size / 2;
   }
 
-  &.pt-disabled {
-    .pt-timepicker-input-row {
+  &.#{$ns}-disabled {
+    .#{$ns}-timepicker-input-row {
       @include pt-input-disabled();
     }
 
-    .pt-timepicker-input,
-    .pt-timepicker-divider-text {
+    .#{$ns}-timepicker-input,
+    .#{$ns}-timepicker-divider-text {
       cursor: not-allowed;
       color: $input-color-disabled;
     }
 
-    .pt-timepicker-arrow-button,
-    .pt-timepicker-arrow-button:hover {
+    .#{$ns}-timepicker-arrow-button,
+    .#{$ns}-timepicker-arrow-button:hover {
       cursor: not-allowed;
       color: $input-color-disabled;
     }
   }
 }
 
-.pt-dark .pt-timepicker {
-  .pt-timepicker-input-row {
+.#{$ns}-dark .#{$ns}-timepicker {
+  .#{$ns}-timepicker-input-row {
     box-shadow: $pt-dark-input-box-shadow;
     background: $dark-input-background-color;
   }
 
-  .pt-timepicker-divider-text {
+  .#{$ns}-timepicker-divider-text {
     color: $pt-dark-text-color-muted;
   }
 
-  .pt-timepicker-input {
+  .#{$ns}-timepicker-input {
     color: $pt-dark-text-color;
   }
 }
diff --git a/packages/datetime/src/blueprint-datetime.scss b/packages/datetime/src/blueprint-datetime.scss
index d3ea895508..77e3232650 100644
--- a/packages/datetime/src/blueprint-datetime.scss
+++ b/packages/datetime/src/blueprint-datetime.scss
@@ -5,42 +5,7 @@ Licensed under the terms of the LICENSE file distributed with this project.
 
 */
 
-/*
-Date & time
-
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-  <h5>Separate package required</h5>
-  The date and time components do not ship with the `@blueprintjs/core` package,
-  and must be installed separately as `@blueprintjs/datetime`.
-</div>
-
-This package provides several components for interacting with dates and times:
-
-- [`DatePicker`](#components.datetime.datepicker) for selecting a single date (day, month, year).
-
-- [`DateRangePicker`](#components.datetime.daterangepicker) for selecting date ranges.
-
-- [`TimePicker`](#components.datetime.timepicker) for selecting a time (hour, minute, second,
-  millisecond).
-
-- [`DateTimePicker`](#components.datetime.datetimepicker), which composes `DatePicker` and
-  `TimePicker` to select a date and time together.
-
-- [`DateInput`](#components.datetime.dateinput), which composes a text input with a `DatePicker` in
-  a `Popover`, for use in forms.
-
-They are available in the __@blueprintjs/datetime__ package on
-[NPM](https://www.npmjs.com/package/@blueprintjs/datetime).
-
-Make sure to review the [general usage docs for JS components](#components.usage).
-
-```sh
-npm install --save @blueprintjs/datetime
-```
-
-Styleguide components.datetime
-*/
-
+// package styles
 @import "datepicker";
 @import "daterangepicker";
 @import "timepicker";
diff --git a/packages/datetime/src/common/classes.ts b/packages/datetime/src/common/classes.ts
index f7b5a8f28e..ef7df8b5a7 100644
--- a/packages/datetime/src/common/classes.ts
+++ b/packages/datetime/src/common/classes.ts
@@ -4,43 +4,43 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-// tslint:disable:blueprint-classes-constants
+import { Classes } from "@blueprintjs/core";
 
-export const DATEINPUT = "pt-dateinput";
-export const DATEINPUT_POPOVER = "pt-dateinput-popover";
+const NS = Classes.getClassNamespace();
 
-export const DATEPICKER = "pt-datepicker";
-export const DATEPICKER_CAPTION = "pt-datepicker-caption";
-export const DATEPICKER_CAPTION_CARET = "pt-datepicker-caption-caret";
-export const DATEPICKER_CAPTION_MEASURE = "pt-datepicker-caption-measure";
-export const DATEPICKER_CAPTION_SELECT = "pt-datepicker-caption-select";
-export const DATEPICKER_DAY = "DayPicker-Day";
-export const DATEPICKER_DAY_DISABLED = "DayPicker-Day--disabled";
-export const DATEPICKER_DAY_OUTSIDE = "DayPicker-Day--outside";
-export const DATEPICKER_DAY_SELECTED = "DayPicker-Day--selected";
-export const DATEPICKER_FOOTER = "pt-datepicker-footer";
-export const DATEPICKER_MONTH_SELECT = "pt-datepicker-month-select";
-export const DATEPICKER_YEAR_SELECT = "pt-datepicker-year-select";
+export const DATEINPUT = `${NS}-dateinput`;
+export const DATEINPUT_POPOVER = `${DATEINPUT}-popover`;
 
-export const DATERANGEPICKER = "pt-daterangepicker";
-export const DATERANGEPICKER_CONTIGUOUS = "pt-daterangepicker-contiguous";
-export const DATERANGEPICKER_SINGLE_MONTH = "pt-daterangepicker-single-month";
-export const DATERANGEPICKER_DAY_SELECTED_RANGE = "DayPicker-Day--selected-range";
-export const DATERANGEPICKER_DAY_HOVERED_RANGE = "DayPicker-Day--hovered-range";
-export const DATERANGEPICKER_SHORTCUTS = "pt-daterangepicker-shortcuts";
+export const DATEPICKER = `${NS}-datepicker`;
+export const DATEPICKER_CAPTION = `${DATEPICKER}-caption`;
+export const DATEPICKER_CAPTION_CARET = `${DATEPICKER_CAPTION}-caret`;
+export const DATEPICKER_CAPTION_MEASURE = `${DATEPICKER_CAPTION}-measure`;
+export const DATEPICKER_CAPTION_SELECT = `${DATEPICKER_CAPTION}-select`;
+export const DATEPICKER_DAY = "DayPicker-Day";
+export const DATEPICKER_DAY_DISABLED = `${DATEPICKER_DAY}--disabled`;
+export const DATEPICKER_DAY_OUTSIDE = `${DATEPICKER_DAY}--outside`;
+export const DATEPICKER_DAY_SELECTED = `${DATEPICKER_DAY}--selected`;
+export const DATEPICKER_FOOTER = `${DATEPICKER}-footer`;
+export const DATEPICKER_MONTH_SELECT = `${DATEPICKER}-month-select`;
+export const DATEPICKER_YEAR_SELECT = `${DATEPICKER}-year-select`;
 
-export const DATETIMEPICKER = "pt-datetimepicker";
+export const DATERANGEPICKER = `${NS}-daterangepicker`;
+export const DATERANGEPICKER_CONTIGUOUS = `${DATERANGEPICKER}-contiguous`;
+export const DATERANGEPICKER_SINGLE_MONTH = `${DATERANGEPICKER}-single-month`;
+export const DATERANGEPICKER_DAY_SELECTED_RANGE = `${DATEPICKER_DAY}--selected-range`;
+export const DATERANGEPICKER_DAY_HOVERED_RANGE = `${DATEPICKER_DAY}--hovered-range`;
+export const DATERANGEPICKER_SHORTCUTS = `${DATERANGEPICKER}-shortcuts`;
 
-export const TIMEPICKER = "pt-timepicker";
-export const TIMEPICKER_ARROW_BUTTON = "pt-timepicker-arrow-button";
-export const TIMEPICKER_ARROW_ROW = "pt-timepicker-arrow-row";
-export const TIMEPICKER_DIVIDER_TEXT = "pt-timepicker-divider-text";
-export const TIMEPICKER_HOUR = "pt-timepicker-hour";
-export const TIMEPICKER_INPUT = "pt-timepicker-input";
-export const TIMEPICKER_INPUT_ROW = "pt-timepicker-input-row";
-export const TIMEPICKER_MILLISECOND = "pt-timepicker-millisecond";
-export const TIMEPICKER_MINUTE = "pt-timepicker-minute";
-export const TIMEPICKER_SECOND = "pt-timepicker-second";
-export const TIMEPICKER_AMPM_SELECT = "pt-timepicker-ampm-select";
+export const DATETIMEPICKER = `${NS}-datetimepicker`;
 
-// tslint:enable:blueprint-classes-constants
+export const TIMEPICKER = `${NS}-timepicker`;
+export const TIMEPICKER_ARROW_BUTTON = `${TIMEPICKER}-arrow-button`;
+export const TIMEPICKER_ARROW_ROW = `${TIMEPICKER}-arrow-row`;
+export const TIMEPICKER_DIVIDER_TEXT = `${TIMEPICKER}-divider-text`;
+export const TIMEPICKER_HOUR = `${TIMEPICKER}-hour`;
+export const TIMEPICKER_INPUT = `${TIMEPICKER}-input`;
+export const TIMEPICKER_INPUT_ROW = `${TIMEPICKER}-input-row`;
+export const TIMEPICKER_MILLISECOND = `${TIMEPICKER}-millisecond`;
+export const TIMEPICKER_MINUTE = `${TIMEPICKER}-minute`;
+export const TIMEPICKER_SECOND = `${TIMEPICKER}-second`;
+export const TIMEPICKER_AMPM_SELECT = `${TIMEPICKER}-ampm-select`;
diff --git a/packages/datetime/src/datepicker.md b/packages/datetime/src/datepicker.md
index d70f647879..736ab98c31 100644
--- a/packages/datetime/src/datepicker.md
+++ b/packages/datetime/src/datepicker.md
@@ -38,7 +38,7 @@ by using the component in controlled mode and with the `modifiers` prop:
 
 ```css.scss
 // in CSS
-.pt-datepicker .DayPicker-Day--isSunday {
+.@ns-datepicker .DayPicker-Day--isSunday {
   // CSS rules to make the day appear disabled
 }
 ```
diff --git a/packages/docs-app/src/examples/core-examples/common/fileMenu.tsx b/packages/docs-app/src/examples/core-examples/common/fileMenu.tsx
index c244617d5e..2804049f08 100644
--- a/packages/docs-app/src/examples/core-examples/common/fileMenu.tsx
+++ b/packages/docs-app/src/examples/core-examples/common/fileMenu.tsx
@@ -4,15 +4,15 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { Menu, MenuDivider, MenuItem } from "@blueprintjs/core";
+import { IProps, Menu, MenuDivider, MenuItem } from "@blueprintjs/core";
 import * as React from "react";
 
-export interface IFileMenuProps {
+export interface IFileMenuProps extends IProps {
     shouldDismissPopover?: boolean;
 }
 
 export const FileMenu: React.SFC<IFileMenuProps> = props => (
-    <Menu>
+    <Menu className={props.className}>
         <MenuItem text="New" icon="document" {...props} />
         <MenuItem text="Open" icon="folder-shared" {...props} />
         <MenuItem text="Close" icon="add-to-folder" {...props} />
diff --git a/packages/docs-app/src/examples/core-examples/popoverSizingExample.tsx b/packages/docs-app/src/examples/core-examples/popoverSizingExample.tsx
index c8812134ab..93845f2dff 100644
--- a/packages/docs-app/src/examples/core-examples/popoverSizingExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/popoverSizingExample.tsx
@@ -11,12 +11,14 @@ import { BaseExample } from "@blueprintjs/docs-theme";
 import { FileMenu } from "./common/fileMenu";
 
 export class PopoverSizingExample extends BaseExample<{}> {
-    protected className = "docs-popover-sizing-example";
-
     protected renderExample() {
         return (
             <div>
-                <Popover content={<FileMenu />} position={Position.BOTTOM_LEFT} usePortal={false}>
+                <Popover
+                    content={<FileMenu className="docs-popover-sizing-example" />}
+                    position={Position.BOTTOM_LEFT}
+                    usePortal={false}
+                >
                     <Button>Open...</Button>
                 </Popover>
             </div>
diff --git a/packages/docs-app/src/getting-started.md b/packages/docs-app/src/getting-started.md
index 16e4b12263..144ef6853a 100644
--- a/packages/docs-app/src/getting-started.md
+++ b/packages/docs-app/src/getting-started.md
@@ -145,7 +145,7 @@ npm install --save @types/moment
 
 Blueprint's declaration files require **TypeScript 2.3+** for default generic parameter arguments: `<P = {}>`.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
   For more information, see [Understanding TypeScript](#blueprint/getting-started.understanding-typescript) below.
 </div>
 
diff --git a/packages/docs-app/src/index.scss b/packages/docs-app/src/index.scss
index aabb9a4960..6f23575167 100644
--- a/packages/docs-app/src/index.scss
+++ b/packages/docs-app/src/index.scss
@@ -29,6 +29,6 @@ Licensed under the terms of the LICENSE file distributed with this project.
 @import "styles/sections";
 
 
-.docs-releases-menu .pt-menu {
+.docs-releases-menu .#{$ns}-menu {
   min-width: 270px;
 }
diff --git a/packages/docs-app/src/reading-the-docs.md b/packages/docs-app/src/reading-the-docs.md
index c189de6173..89483b526d 100644
--- a/packages/docs-app/src/reading-the-docs.md
+++ b/packages/docs-app/src/reading-the-docs.md
@@ -33,7 +33,7 @@ const option: IOption = { label: "Name", value: "Gilad" };
 Simply ignoring the type annotations (any italics in code blocks) will produce valid ES2015 code.
 Familiarity with the syntax is suggested so you can follow our examples source code.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
   For more information, see the TypeScript Handbook for [basic types][basic-types]
   and [consuming declaration files][decl-files].
 </div>
diff --git a/packages/docs-app/src/styles/_colors.scss b/packages/docs-app/src/styles/_colors.scss
index fb34710005..62b9422eac 100644
--- a/packages/docs-app/src/styles/_colors.scss
+++ b/packages/docs-app/src/styles/_colors.scss
@@ -81,7 +81,7 @@ $swatch-copied-message: "#{$pt-icon-tick} Copied to clipboard";
     border-bottom-right-radius: 0;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: $pt-dark-elevation-shadow-0;
     background: transparent;
 
@@ -173,7 +173,7 @@ label.docs-color-scheme-label { margin: ($pt-grid-size * 2) 0; }
                 0 1px 1px rgba($black, $pt-drop-shadow-opacity);
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     border-color: rgba($white, $pt-dark-border-shadow-opacity);
 
     &:hover .docs-color-swatch-trigger {
@@ -222,7 +222,7 @@ label.docs-color-scheme-label { margin: ($pt-grid-size * 2) 0; }
     pointer-events: none;
     user-select: none;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       box-shadow: inset 0 0 0 1px $pt-dark-divider-white;
     }
   }
@@ -293,7 +293,7 @@ $bubble-size: $pt-grid-size * 2;
   height: $bubble-size;
   vertical-align: middle;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: inset border-shadow(0.2, $white);
   }
 }
diff --git a/packages/docs-app/src/styles/_examples.scss b/packages/docs-app/src/styles/_examples.scss
index fe41299145..7ee1071a3a 100644
--- a/packages/docs-app/src/styles/_examples.scss
+++ b/packages/docs-app/src/styles/_examples.scss
@@ -7,11 +7,11 @@
 // Specific Example Customizations
 
 .docs-example-wrapper {
-  .pt-slider:not(:last-child) {
+  .#{$ns}-slider:not(:last-child) {
     margin-bottom: $options-margin;
   }
 
-  .pt-callout {
+  .#{$ns}-callout {
     margin: 0;
   }
 }
@@ -20,7 +20,7 @@
   display: flex;
   justify-content: space-between;
 
-  .pt-card {
+  .#{$ns}-card {
     width: floor(($content-width - $pt-grid-size * 10) / 3);
 
     &:hover a {
@@ -34,16 +34,16 @@
 }
 
 .docs-datetime-example {
-  > .pt-datepicker {
+  > .#{$ns}-datepicker {
     margin-bottom: $pt-grid-size * 2;
   }
 
-  > .pt-datetimepicker {
+  > .#{$ns}-datetimepicker {
     display: inline-block;
     margin-bottom: $pt-grid-size * 2;
   }
 
-  .pt-icon-arrow-right {
+  .#{$ns}-icon-arrow-right {
     margin: 0 ($pt-grid-size / 2);
   }
 }
@@ -53,7 +53,7 @@
   align-items: center;
   height: $pt-grid-size * 6;
 
-  .pt-button + .pt-button {
+  .#{$ns}-button + .#{$ns}-button {
     margin-left: $pt-grid-size;
   }
 }
@@ -76,7 +76,7 @@
   );
 
   @include react-transition-phase(
-    "pt-overlay",
+    "#{$ns}-overlay",
     "enter",
     $enter,
     $pt-transition-duration * 3,
@@ -84,7 +84,7 @@
     $before: "&"
   );
   @include react-transition-phase(
-    "pt-overlay",
+    "#{$ns}-overlay",
     "exit",
     $leave,
     $pt-transition-duration * 5,
@@ -110,7 +110,7 @@
   background: $light-gray3;
   padding: $options-margin;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background: $dark-gray5;
   }
 
@@ -143,7 +143,7 @@
     margin-right: $options-margin;
   }
 
-  .pt-input-group {
+  .#{$ns}-input-group {
     width: $pt-grid-size * 30;
 
     &:first-child {
@@ -164,27 +164,27 @@
   &.docs-slider-example-vertical {
     display: flex;
 
-    .pt-slider {
+    .#{$ns}-slider {
       margin-right: $pt-grid-size * 10;
       margin-bottom: 0;
     }
   }
 }
 
-.docs-tabs-example .pt-navbar .pt-tab {
+.docs-tabs-example .#{$ns}-navbar .#{$ns}-tab {
   line-height: $pt-navbar-height;
 }
 
-.docs-example-wrapper .pt-navbar {
+.docs-example-wrapper .#{$ns}-navbar {
   position: static;
   width: 100%;
 }
 
-.docs-tag-example .pt-tag:not(:last-child) {
+.docs-tag-example .#{$ns}-tag:not(:last-child) {
   margin-right: $pt-grid-size * 0.5;
 }
 
-.pt-progress-bar.docs-toast-progress {
+.#{$ns}-progress-bar.docs-toast-progress {
   margin-top: $pt-grid-size / 2;
   margin-bottom: 0;
 }
@@ -197,7 +197,7 @@
     height: 350px;
     overflow: scroll;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background: $dark-gray5;
     }
   }
@@ -211,7 +211,7 @@
     min-height: 200%;
   }
 
-  .pt-popover & {
+  .#{$ns}-popover & {
     padding: $pt-grid-size;
   }
 }
@@ -223,7 +223,7 @@
     color: $pt-text-color-muted;
     font-style: italic;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       color: $pt-dark-text-color-muted;
     }
   }
@@ -250,12 +250,12 @@
     align-items: flex-end;
   }
 
-  .pt-popover-wrapper {
+  .#{$ns}-popover-wrapper {
     // Add a bit of space between borders of consecutive buttons.
     margin: $pt-grid-size / 2;
   }
 
-  .pt-popover-content {
+  .#{$ns}-popover-content {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -275,23 +275,21 @@
 }
 
 .docs-popover-minimal-example {
-  .pt-button:first-child {
+  .#{$ns}-button:first-child {
     margin-right: $pt-grid-size;
   }
 }
 
 .docs-popover-interaction-kind-example {
-  .pt-button {
+  .#{$ns}-button {
     margin-right: $pt-grid-size;
     font-family: $pt-font-family-monospace;
   }
 }
 
 .docs-popover-sizing-example {
-  .pt-popover-content {
-    max-height: $pt-grid-size * 15;
-    overflow-y: auto;
-  }
+  max-height: $pt-grid-size * 15;
+  overflow-y: auto;
 }
 
 .docs-popover-inline-example {
@@ -307,7 +305,7 @@
     overflow-x: scroll;
     overflow-y: hidden;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background: $dark-gray5;
     }
 
@@ -338,7 +336,7 @@
 }
 
 .docs-popover-inline-example-popover {
-  .pt-popover-content {
+  .#{$ns}-popover-content {
     padding: $pt-grid-size;
     white-space: nowrap;
   }
@@ -356,7 +354,7 @@
   justify-content: center;
 }
 
-.docs-menu-example .pt-menu {
+.docs-menu-example .#{$ns}-menu {
   max-width: 280px;
 }
 
@@ -366,7 +364,7 @@
 }
 
 // only for date input and date range input examples
-.pt-popover-wrapper + .docs-date-range {
+.#{$ns}-popover-wrapper + .docs-date-range {
   margin-left: $pt-grid-size * 2;
 }
 
diff --git a/packages/docs-app/src/styles/_icons.scss b/packages/docs-app/src/styles/_icons.scss
index e3367a4b4f..b9d7d4ccc3 100644
--- a/packages/docs-app/src/styles/_icons.scss
+++ b/packages/docs-app/src/styles/_icons.scss
@@ -10,7 +10,7 @@ $hover-transition: $pt-transition-duration $pt-transition-ease;
 $icons-per-row: 5;
 
 .docs-icons {
-  .pt-input-group {
+  .#{$ns}-input-group {
     margin: ($pt-grid-size * 5) 0;
   }
 
@@ -52,18 +52,18 @@ $icons-per-row: 5;
     background-color: $light-gray3;
   }
 
-  .pt-icon,
-  .pt-icon-large,
+  .#{$ns}-icon,
+  .#{$ns}-icon-large,
   .docs-icon-svg {
     position: relative;
   }
 
-  .pt-icon,
-  .pt-icon-large {
+  .#{$ns}-icon,
+  .#{$ns}-icon-large {
     color: $pt-icon-color;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     &::before {
       background-color: $dark-gray3;
     }
@@ -72,8 +72,8 @@ $icons-per-row: 5;
       background-color: $dark-gray2;
     }
 
-    .pt-icon,
-    .pt-icon-large {
+    .#{$ns}-icon,
+    .#{$ns}-icon-large {
       color: $pt-dark-icon-color;
     }
   }
diff --git a/packages/docs-app/src/styles/_nav.scss b/packages/docs-app/src/styles/_nav.scss
index 6a9be2dedb..a3e129ec2d 100644
--- a/packages/docs-app/src/styles/_nav.scss
+++ b/packages/docs-app/src/styles/_nav.scss
@@ -44,7 +44,7 @@ $dark-package-colors: (
   svg {
     fill: $dark-gray5;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       fill: $gray5;
     }
   }
@@ -55,7 +55,7 @@ $dark-package-colors: (
   font-size: $pt-grid-size * 2;
   font-weight: 600;
 
-  .pt-tag {
+  .#{$ns}-tag {
     display: block;
     margin-top: 3px;
     margin-left: $pt-grid-size / 2;
@@ -78,7 +78,7 @@ $dark-package-colors: (
   @include pt-flex-container(row);
   align-items: center;
 
-  .pt-menu-item {
+  .#{$ns}-menu-item {
     flex: 1 1 auto;
     text-transform: uppercase;
     font-weight: 600;
@@ -93,7 +93,7 @@ $dark-package-colors: (
         background-color: rgba($color, 0.1);
         fill: $color;
 
-        .pt-dark & {
+        .#{$ns}-dark & {
           background-color: rgba($dark-color, 0.15);
           fill: $dark-color;
         }
@@ -102,11 +102,11 @@ $dark-package-colors: (
       // stylelint-disable max-nesting-depth
       &:hover,
       &.docs-nav-expanded {
-        .pt-menu-item,
-        + .docs-nav-menu .pt-menu-item.pt-active {
+        .#{$ns}-menu-item,
+        + .docs-nav-menu .#{$ns}-menu-item.#{$ns}-active {
           color: $color;
 
-          .pt-dark & {
+          .#{$ns}-dark & {
             color: $dark-color;
           }
         }
@@ -115,7 +115,7 @@ $dark-package-colors: (
           background-color: rgba($color, 0.8);
           fill: $white;
 
-          .pt-dark & {
+          .#{$ns}-dark & {
             background-color: rgba($dark-color, 0.8);
           }
         }
@@ -123,7 +123,7 @@ $dark-package-colors: (
         &:active .docs-nav-package-icon {
           background-color: $color;
 
-          .pt-dark & {
+          .#{$ns}-dark & {
             background-color: $dark-color;
           }
         }
diff --git a/packages/docs-app/src/styles/_resources.scss b/packages/docs-app/src/styles/_resources.scss
index af9b2d06e6..22dfd42957 100644
--- a/packages/docs-app/src/styles/_resources.scss
+++ b/packages/docs-app/src/styles/_resources.scss
@@ -39,7 +39,7 @@ $dark-asset-background-color: rgba($light-gray1, 0.1);
     background-color: $asset-background-color;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     small {
       color: $pt-dark-text-color-muted;
     }
diff --git a/packages/docs-app/src/styles/_sections.scss b/packages/docs-app/src/styles/_sections.scss
index 4575917322..86353743e5 100644
--- a/packages/docs-app/src/styles/_sections.scss
+++ b/packages/docs-app/src/styles/_sections.scss
@@ -16,8 +16,8 @@
 // Generate a selector for KSS examples that match or are nested inside this reference.
 @function reference-all($ref) {
   // exact reference + children, not a simple prefix.
-  // so "pt-button" captures "pt-button.pt-minimal", not "pt-button-group"
-  @return reference($ref), reference($ref + ".", "^=");
+  // so "button" captures "button-minimal", not "button-group"
+  @return reference($ref, "^=");
 }
 
 // Generate a selector for a React example by name
@@ -26,14 +26,14 @@
 }
 
 // Adjust the flex-basis of examples to fit X per row.
-// `.pt-fill` modifiers will always occupy an entire row.
+// `.#{$ns}-fill` modifiers will always occupy an entire row.
 // (Default styles give flex-basis of 100% to each example.)
 @mixin examples-per-row($amount) {
   .docs-example {
     flex-basis: floor(100% / $amount);
     padding-right: $pt-grid-size * 2;
 
-    &[data-modifier=".pt-fill"] {
+    &[data-modifier=".#{$ns}-fill"] {
       flex-basis: 100%;
       padding-right: 0;
     }
@@ -42,71 +42,71 @@
 
 // CSS examples
 
-#{reference("pt-file-input")},
-#{reference("pt-label")},
-#{reference("pt-menu")},
-#{reference("pt-select.pt-inline")},
-#{reference("pt-skeleton")},
-#{reference("pt-tag")},
-#{reference("pt-tag.pt-minimal")} {
+#{reference("file-input")},
+#{reference("label")},
+#{reference("menu")},
+#{reference("select-inline")},
+#{reference("skeleton")},
+#{reference("tag")},
+#{reference("tag-minimal")} {
   @include examples-per-row(2);
 }
 
-#{reference-all("pt-input")},
-#{reference("pt-button")},
-#{reference("pt-button.pt-minimal")},
-#{reference("pt-card")},
-#{reference("pt-input-group")},
-#{reference("pt-progress-bar")},
-#{reference("pt-spinner")},
-#{reference("pt-textarea")} {
+#{reference-all("input")},
+#{reference("button")},
+#{reference("button-minimal")},
+#{reference("card")},
+#{reference("input-group")},
+#{reference("progress-bar")},
+#{reference("spinner")},
+#{reference("textarea")} {
   @include examples-per-row(3);
 }
 
-#{reference("pt-checkbox")},
-#{reference("pt-radio")},
-#{reference("pt-switch")} {
+#{reference("checkbox")},
+#{reference("radio")},
+#{reference("switch")} {
   .docs-example {
     flex-basis: 10%;
   }
 }
 
-#{reference-all("pt-button")},
+#{page("button")},
 #{example("AlertExample")},
 #{example("ToastExample")} {
   // put more space between buttons in all button sections
-  .pt-button + .pt-button:not(.pt-fill) {
+  .#{$ns}-button + .#{$ns}-button:not(.#{$ns}-fill) {
     margin-left: $pt-grid-size;
   }
 
-  .pt-button.pt-fill + .pt-button.pt-fill {
+  .#{$ns}-button.#{$ns}-fill + .#{$ns}-button.#{$ns}-fill {
     margin-top: $pt-grid-size;
   }
 }
 
-#{reference("pt-button-group.pt-vertical")} {
-  .pt-button-group {
+#{reference("button-group-vertical")} {
+  .#{$ns}-button-group {
     margin-right: $pt-grid-size * 2;
   }
 }
 
-#{reference-all("pt-control-group")} {
+#{reference-all("control-group")} {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
-  .pt-control-group:not(:last-child) {
+  .#{$ns}-control-group:not(:last-child) {
     margin-bottom: $pt-grid-size * 2;
   }
 }
 
-#{reference("pt-input-group")} {
-  .pt-input-group {
+#{reference("input-group")} {
+  .#{$ns}-input-group {
     margin-bottom: $pt-grid-size;
   }
 }
 
-#{reference("pt-select")} {
+#{reference("select")} {
   @include examples-per-row(4);
 
   .docs-example {
@@ -114,7 +114,7 @@
   }
 }
 
-#{reference("pt-select.pt-inline")} {
+#{reference("select-inline")} {
   justify-content: initial;
 
   .docs-example {
@@ -123,8 +123,8 @@
   }
 }
 
-#{reference("pt-menu")},
-#{reference("pt-menu.pt-menu-header")} {
+#{reference("menu")},
+#{reference("menu-header")} {
   justify-content: initial;
 
   .docs-example {
@@ -138,19 +138,19 @@
   }
 }
 
-#{reference("pt-spinner")} {
+#{reference("spinner")} {
   .docs-react-example > svg {
     width: $pt-grid-size * 10;
     height: $pt-grid-size * 10;
   }
 }
 
-#{reference("pt-tree")} {
-  .pt-tree {
+#{reference("tree")} {
+  .#{$ns}-tree {
     background-color: $white;
     width: $pt-grid-size * 35;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background-color: $dark-gray4;
     }
   }
@@ -229,7 +229,7 @@
   }
 }
 
-#{example("HotkeyTester")} .pt-key-combo {
+#{example("HotkeyTester")} .#{$ns}-key-combo {
   display: inline-block;
 }
 
@@ -247,11 +247,11 @@
 }
 
 #{example("TreeExample")} {
-  .pt-tree {
+  .#{$ns}-tree {
     background-color: $white;
     width: $pt-grid-size * 35;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background-color: $dark-gray4;
     }
   }
@@ -266,7 +266,7 @@
   }
 
   // make all tables the same width
-  .pt-table-container {
+  .#{$ns}-table-container {
     width: 100%;
   }
 }
@@ -281,7 +281,7 @@
   .docs-popover-position-label-side {
     color: $cobalt3;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       color: $cobalt5;
     }
   }
@@ -289,7 +289,7 @@
   .docs-popover-position-label-alignment {
     color: $forest3;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       color: $forest5;
     }
   }
diff --git a/packages/docs-app/src/whats-new.md b/packages/docs-app/src/whats-new.md
index 91957fbfd2..9dccd1da7c 100644
--- a/packages/docs-app/src/whats-new.md
+++ b/packages/docs-app/src/whats-new.md
@@ -15,6 +15,6 @@ Blueprint 2.0 features JavaScript API refactors, smaller & more modular packages
 - `Popover2` is now the default `Popover`. It uses [Popper.js](https://popper.js.org/) instead of [Tether](http://tether.io/), which provides much better auto-positioning capabilities and solves a number of outstanding bugs out-of-the-box.
 - All Labs components (in `@blueprintjs/labs`) have been moved into separate packages so that you no longer have to deal with the `0.x` version range for many components that are used widely in production.
 
-<a class="pt-button pt-intent-primary" href="https://github.com/palantir/blueprint/wiki/What's-new-in-Blueprint-2.0" target="_blank" style="margin-top: 30px;">
+<a class="@ns-button @ns-intent-primary" href="https://github.com/palantir/blueprint/wiki/What's-new-in-Blueprint-2.0" target="_blank" style="margin-top: 30px;">
     View the full changelog on the wiki
 </a>
diff --git a/packages/docs-data/compile-docs-data b/packages/docs-data/compile-docs-data
index 1b81e97283..1745da95f2 100755
--- a/packages/docs-data/compile-docs-data
+++ b/packages/docs-data/compile-docs-data
@@ -1,10 +1,12 @@
 #!/usr/bin/env node
+
 /**
  * @license Copyright 2017 Palantir Technologies, Inc. All rights reserved.
  * @fileoverview Generates data for packages/docs-app
  */
 
 // @ts-check
+const { Classes } = require("@blueprintjs/core/lib/cjs/common");
 const { execSync, spawn } = require("child_process");
 const dm = require("documentalist");
 const fs = require("fs");
@@ -67,7 +69,7 @@ function generateDocumentalistData() {
 function transformDocumentalistData(key, value) {
     // remove all class declarations as they're currently unused and only increase bundle size
     if (value != null && value.kind !== "class") {
-        return value;
+        return replaceNS(value);
     }
     return undefined;
 }
@@ -137,3 +139,8 @@ function strMapToObj(strMap) {
     }
     return obj;
 }
+
+/** @param {any} text replace `#{$ns}` with Blueprint class namespace. if not a string, simply returns `text`. */
+function replaceNS(text) {
+    return typeof text === "string" ? text.replace(/#{\$ns}|@ns/g, Classes.getClassNamespace()) : text;
+}
diff --git a/packages/docs-data/package.json b/packages/docs-data/package.json
index 4e6efb6bc8..d51eede99c 100644
--- a/packages/docs-data/package.json
+++ b/packages/docs-data/package.json
@@ -10,6 +10,7 @@
     "test": "exit 0"
   },
   "dependencies": {
+    "@blueprintjs/core": "^2.0.0",
     "@blueprintjs/docs-theme": "^2.0.0",
     "documentalist": "^1.2.0",
     "glob": "^7.1.2",
diff --git a/packages/docs-theme/src/components/scrollbar.ts b/packages/docs-theme/src/components/scrollbar.ts
index d34e5986db..29938c8c50 100644
--- a/packages/docs-theme/src/components/scrollbar.ts
+++ b/packages/docs-theme/src/components/scrollbar.ts
@@ -4,6 +4,8 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+import { Classes } from "@blueprintjs/core";
+
 /**
  * Inject some CSS style rules into a new `<style>` element to add padding equal to the
  * width of the scrollbar when an `Overlay` is open, such that page content will not
@@ -12,8 +14,9 @@
 export function addScrollbarStyle() {
     const width = getScrollbarWidth();
     const stylesheet = createStyleSheet();
-    stylesheet.insertRule(`.pt-overlay-open .docs-banner { padding-right: ${20 + width}px; }`, 0);
-    stylesheet.insertRule(`.pt-overlay-open .docs-root { padding-right: ${width}px }`, 0);
+    const NS = Classes.getClassNamespace();
+    stylesheet.insertRule(`.${NS}-overlay-open .docs-banner { padding-right: ${20 + width}px; }`, 0);
+    stylesheet.insertRule(`.${NS}-overlay-open .docs-root { padding-right: ${width}px }`, 0);
 }
 
 function createStyleSheet() {
diff --git a/packages/docs-theme/src/styles/_api.scss b/packages/docs-theme/src/styles/_api.scss
index 3037bc8ea0..8e7637de6e 100644
--- a/packages/docs-theme/src/styles/_api.scss
+++ b/packages/docs-theme/src/styles/_api.scss
@@ -7,7 +7,7 @@
 .docs-api-overlay {
   .docs-modifiers {
     @include react-transition-phase(
-      "pt-overlay",
+      "#{$ns}-overlay",
       "enter",
       (transform: (translateX(100%), translateX(0))),
       $pt-transition-duration * 2,
@@ -15,7 +15,7 @@
       $before: "&"
     );
     @include react-transition-phase(
-      "pt-overlay",
+      "#{$ns}-overlay",
       "exit",
       (transform: (translateX(100%), translateX(0))),
       $pt-transition-duration,
@@ -60,7 +60,7 @@
     }
   }
 
-  &.pt-dark {
+  &.#{$ns}-dark {
     .docs-modifiers {
       box-shadow: $pt-dark-elevation-shadow-4;
       background-color: $dark-sidebar-background-color;
diff --git a/packages/docs-theme/src/styles/_banner.scss b/packages/docs-theme/src/styles/_banner.scss
index d7a23642f6..01a0ef3c8f 100644
--- a/packages/docs-theme/src/styles/_banner.scss
+++ b/packages/docs-theme/src/styles/_banner.scss
@@ -28,7 +28,7 @@ $banner-height: $pt-grid-size * 4;
   color: $white !important;
 
   @each $intent, $colors in $button-intents {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       background: nth($colors, 1);
 
       &:hover {
@@ -45,7 +45,7 @@ $banner-height: $pt-grid-size * 4;
     text-decoration: none;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: 0 1px 0 $pt-divider-black;
   }
 
diff --git a/packages/docs-theme/src/styles/_content.scss b/packages/docs-theme/src/styles/_content.scss
index 54350bb895..681af85e1a 100644
--- a/packages/docs-theme/src/styles/_content.scss
+++ b/packages/docs-theme/src/styles/_content.scss
@@ -43,7 +43,7 @@ $dark-example-background-color: $dark-content-background-color;
   padding: $link-icon-padding;
   line-height: $pt-icon-size-standard;
 
-  .pt-icon-standard {
+  .#{$ns}-icon-standard {
     vertical-align: top;
   }
 
@@ -61,7 +61,7 @@ $dark-example-background-color: $dark-content-background-color;
     text-decoration: none;
   }
 
-  .pt-icon {
+  .#{$ns}-icon {
     margin-right: $pt-grid-size / 2;
   }
 }
@@ -79,7 +79,7 @@ $dark-example-background-color: $dark-content-background-color;
     display: none;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     border-color: $pt-dark-divider-black;
     background-color: $dark-example-background-color;
   }
diff --git a/packages/docs-theme/src/styles/_examples.scss b/packages/docs-theme/src/styles/_examples.scss
index f61402b1db..d50a91361f 100644
--- a/packages/docs-theme/src/styles/_examples.scss
+++ b/packages/docs-theme/src/styles/_examples.scss
@@ -19,7 +19,7 @@
   }
 }
 
-.docs-react-options-column .pt-control:not(.pt-inline) {
+.docs-react-options-column .#{$ns}-control:not(.#{$ns}-inline) {
   margin-right: 0;
 }
 
diff --git a/packages/docs-theme/src/styles/_layout.scss b/packages/docs-theme/src/styles/_layout.scss
index 48cc75033c..d696a0e142 100644
--- a/packages/docs-theme/src/styles/_layout.scss
+++ b/packages/docs-theme/src/styles/_layout.scss
@@ -12,7 +12,7 @@ $dark-nav-item-color-hover: $dark-minimal-button-background-color-hover;
 $dark-nav-item-color-active: $dark-minimal-button-background-color-active;
 
 body {
-  // vertical scrollbar is always visible for the `.pt-overlay-open` padding (from `scrollbar.ts`)
+  // vertical scrollbar is always visible for the `.#{$ns}-overlay-open` padding (from `scrollbar.ts`)
   overflow-y: scroll;
 }
 
@@ -35,7 +35,7 @@ Page layout elements
 .docs-root {
   background-color: $content-background-color;
 
-  &.pt-dark {
+  &.#{$ns}-dark {
     background-color: $dark-content-background-color;
   }
 }
@@ -70,7 +70,7 @@ Page layout elements
   margin-left: -$background-shift;
   padding-left: $background-shift;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: 1px 0 0 $pt-dark-divider-black;
     background-color: $dark-sidebar-background-color;
   }
@@ -88,7 +88,7 @@ Page layout elements
   background-color: $content-background-color;
   padding-right: $sidebar-padding * 2;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background-color: $dark-content-background-color;
   }
 }
@@ -103,14 +103,14 @@ Lefthand navigation menu
 */
 
 .docs-nav-menu {
-  .pt-menu-item {
+  .#{$ns}-menu-item {
     align-items: center;
     padding-right: $pt-grid-size;
     padding-left: 0;
     white-space: initial;
 
     &:hover,
-    &.pt-active,
+    &.#{$ns}-active,
     &.docs-nav-expanded {
       // bold text instead of background color
       background-color: transparent !important; // stylelint-disable-line declaration-no-important
@@ -173,7 +173,7 @@ Lefthand navigation menu
   .docs-markup,
   .docs-modifiers,
   .docs-title,
-  .docs-section > .pt-running-text {
+  .docs-section > .#{$ns}-running-text {
     display: none;
   }
 }
diff --git a/packages/docs-theme/src/styles/_navbar.scss b/packages/docs-theme/src/styles/_navbar.scss
index 6b6a3893e2..bdd0085c0b 100644
--- a/packages/docs-theme/src/styles/_navbar.scss
+++ b/packages/docs-theme/src/styles/_navbar.scss
@@ -9,7 +9,7 @@ $nav-divider-offset: $pt-grid-size * 5;
 @mixin divider-gradient($color, $dark-color) {
   background-image: linear-gradient(to right, rgba($color, 0) 0%, $color 40%);
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background-image: linear-gradient(to right, rgba($dark-color, 0) 0%, $dark-color 40%);
   }
 }
diff --git a/packages/docs-theme/src/styles/_navigator.scss b/packages/docs-theme/src/styles/_navigator.scss
index 4761e64e23..175a028353 100644
--- a/packages/docs-theme/src/styles/_navigator.scss
+++ b/packages/docs-theme/src/styles/_navigator.scss
@@ -7,12 +7,12 @@ $navigator-width: $pt-grid-size * 40;
   left: calc(50% - #{$navigator-width / 2});
   width: $navigator-width;
 
-  .pt-menu-item small {
+  .#{$ns}-menu-item small {
     // center-align text and SVG icons
     display: flex;
   }
 
-  .pt-menu-item.pt-active small {
+  .#{$ns}-menu-item.#{$ns}-active small {
     color: rgba($white, 0.7);
   }
 }
diff --git a/packages/docs-theme/src/styles/_overrides.scss b/packages/docs-theme/src/styles/_overrides.scss
index ad57e298c9..8f1468fa19 100644
--- a/packages/docs-theme/src/styles/_overrides.scss
+++ b/packages/docs-theme/src/styles/_overrides.scss
@@ -1,11 +1,11 @@
 // Copyright 2017 Palantir Technologies, Inc. All rights reserved.
 // Licensed under the terms of the LICENSE file distributed with this project.
 
-.pt-html-table {
+.#{$ns}-html-table {
   width: 100%;
 }
 
-.pt-progress-bar {
+.#{$ns}-progress-bar {
   margin-bottom: $pt-grid-size;
 }
 
@@ -14,6 +14,6 @@ input[type="search"] {
   box-sizing: border-box;
 }
 
-.pt-callout p:last-child {
+.#{$ns}-callout p:last-child {
   margin: 0;
 }
diff --git a/packages/docs-theme/src/styles/_props.scss b/packages/docs-theme/src/styles/_props.scss
index 581687af5b..d8853decc5 100644
--- a/packages/docs-theme/src/styles/_props.scss
+++ b/packages/docs-theme/src/styles/_props.scss
@@ -37,7 +37,7 @@
 
   &:empty { display: none; }
 
-  .pt-tag {
+  .#{$ns}-tag {
     margin-top: $tag-top-margin;
     margin-right: $pt-grid-size;
   }
@@ -61,7 +61,7 @@
 .docs-prop-is-required code {
   color: $green3;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $green4;
   }
 
@@ -89,7 +89,7 @@
     box-shadow: 0 1px 0 $pt-divider-black;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     box-shadow: 0 1px 0 $pt-dark-divider-white;
 
     + .docs-section {
diff --git a/packages/docs-theme/src/styles/_syntax.scss b/packages/docs-theme/src/styles/_syntax.scss
index b54c9fd40d..42801948fa 100644
--- a/packages/docs-theme/src/styles/_syntax.scss
+++ b/packages/docs-theme/src/styles/_syntax.scss
@@ -91,7 +91,7 @@ $dark-syntax-token-colors: (
     font-style: italic;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     @include syntax($dark-syntax-token-colors);
     background: $dark-syntax-background-color;
     color: $dark-syntax-text-color;
diff --git a/packages/icons/src/_icons.scss b/packages/icons/src/_icons.scss
index 49ee31bbd1..38babb3264 100644
--- a/packages/icons/src/_icons.scss
+++ b/packages/icons/src/_icons.scss
@@ -4,10 +4,13 @@
 @import "generated/icon-variables";
 @import "generated/icon-map";
 
+$pt-namespace: "pt" !default;
+$ns: $pt-namespace;
+
 $icon-classes: (
-  ".pt-icon",
-  ".pt-icon-standard",
-  ".pt-icon-large"
+  ".#{$ns}-icon",
+  ".#{$ns}-icon-standard",
+  ".#{$ns}-icon-large"
 ) !default;
 
 @mixin pt-icon-font-smoothing() {
@@ -33,7 +36,7 @@ $icon-classes: (
     color: $pt-icon-color-hover;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $pt-dark-icon-color;
 
     &:hover {
diff --git a/packages/icons/src/index.md b/packages/icons/src/index.md
index 2cb9ca26af..3f769d0f8b 100644
--- a/packages/icons/src/index.md
+++ b/packages/icons/src/index.md
@@ -11,8 +11,8 @@ There are two ways of using Blueprint UI icons, described in more detail in the
 [**Icon component documentation**](#core/components/icon):
 
 1. React component renders SVG paths: `<Icon icon="more" />`
-2. CSS classes use icon fonts: `<span className="pt-icon-standard pt-icon-more" />`
+2. CSS classes use icon fonts: `<span className="@ns-icon-standard @ns-icon-more" />`
 
-Many Blueprint [components](#core/components) support an `icon` prop to control a React `<Icon>` component, which accepts both the full name `pt-icon-projects` and the short name `projects`.
+Many Blueprint [components](#core/components) support an `icon` prop to control a React `<Icon>` component, which accepts both the full name `@ns-icon-projects` and the short name `projects`.
 
 @reactDocs Icons
diff --git a/packages/labs/src/index.md b/packages/labs/src/index.md
index f524470a76..ab3507d5ca 100644
--- a/packages/labs/src/index.md
+++ b/packages/labs/src/index.md
@@ -4,8 +4,8 @@ reference: labs
 
 @# Labs
 
-<div class="pt-callout pt-intent-warning pt-icon-info-sign">
-    <h4 class="pt-callout-title">Under construction</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Under construction</h4>
     The **[@blueprintjs/labs](https://www.npmjs.com/package/@blueprintjs/labs)** NPM package contains **unstable React components under active development by team members**. It is an incubator and staging area for components as we refine the API design; as such, this package will never reach 1.0.0, and every minor version should be considered breaking.
 </div>
 
diff --git a/packages/landing-app/src/_svgs.scss b/packages/landing-app/src/_svgs.scss
index a762640ca5..1f5fd96d30 100644
--- a/packages/landing-app/src/_svgs.scss
+++ b/packages/landing-app/src/_svgs.scss
@@ -1,6 +1,6 @@
 $initial-delay: 2s;
 
-.pt-wireframes {
+.landing-wireframes {
   position: absolute;
   top: 0;
   left: 50%;
@@ -8,7 +8,7 @@ $initial-delay: 2s;
   pointer-events: none;
 }
 
-.pt-wireframe {
+.landing-wireframe {
   position: absolute;
 
   svg g {
@@ -21,122 +21,72 @@ $initial-delay: 2s;
   }
 }
 
-// Disable SVG animation on live site while we tweak performance.
-// See https://github.com/palantir/blueprint/issues/108
-
-// Only do SVG stroke animation when not on mobile
-// $mobile-breakpoint: 425px;
-
-// @media not all and (max-width: $mobile-breakpoint) {
-//   .pt-wireframe svg g {
-//     path,
-//     line,
-//     circle,
-//     use {
-//       animation: pt-sketch-wireframe 7s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
-//       stroke-dasharray: 1000;
-//       stroke-dashoffset: 1000;
-//     }
-//   }
-// }
-
-@keyframes pt-sketch-wireframe {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@mixin pt-wireframe-mixin($delay) {
-  svg g {
-    path,
-    line,
-    circle,
-    use {
-      animation-delay: $initial-delay + $delay;
-    }
-  }
-}
-
-.pt-logo-wireframe-alert {
-  @include pt-wireframe-mixin(1s);
+.landing-logo-wireframe-alert {
   top: 186px;
   right: 280px;
 }
 
-.pt-logo-wireframe-buttons {
-  @include pt-wireframe-mixin(0s);
+.landing-logo-wireframe-buttons {
   top: 32px;
   right: 252px;
 }
 
-.pt-logo-wireframe-calendar {
-  @include pt-wireframe-mixin(3s);
+.landing-logo-wireframe-calendar {
   top: 389px;
   right: 238px;
 }
 
-.pt-logo-wireframe-checkboxes {
-  @include pt-wireframe-mixin(5s);
+.landing-logo-wireframe-checkboxes {
   top: 434px;
   left: 300px;
 }
 
-.pt-logo-wireframe-file-upload {
-  @include pt-wireframe-mixin(1s);
+.landing-logo-wireframe-file-upload {
   top: 620px;
   left: 3px;
 }
 
-.pt-logo-wireframe-input-groups {
-  @include pt-wireframe-mixin(1s);
+.landing-logo-wireframe-input-groups {
   top: 34px;
   left: -197px;
 }
 
-.pt-logo-wireframe-inputs {
-  @include pt-wireframe-mixin(1s);
+.landing-logo-wireframe-inputs {
   top: 34px;
   left: 130px;
 }
 
-.pt-logo-wireframe-labels {
-  @include pt-wireframe-mixin(1s);
+.landing-logo-wireframe-labels {
   top: 150px;
   left: 500px;
 }
 
-.pt-logo-wireframe-radios {
-  @include pt-wireframe-mixin(5s);
+.landing-logo-wireframe-radios {
   top: 284px;
   left: 300px;
 }
 
-.pt-logo-wireframe-select-menus {
-  @include pt-wireframe-mixin(1s);
+.landing-logo-wireframe-select-menus {
   top: 30px;
   left: 500px;
 }
 
-.pt-logo-wireframe-sliders {
-  @include pt-wireframe-mixin(1s);
+.landing-logo-wireframe-sliders {
   top: 300px;
   left: 500px;
 }
 
-.pt-logo-wireframe-switches {
-  @include pt-wireframe-mixin(5s);
+.landing-logo-wireframe-switches {
   top: 354px;
   left: 300px;
 }
 
-.pt-logo-wireframe-time-selections {
-  @include pt-wireframe-mixin(1s);
+.landing-logo-wireframe-time-selections {
   top: 450px;
   left: 500px;
 }
 
-.pt-logo-wireframe-toggles {
-  @include pt-wireframe-mixin(3s);
+.landing-logo-wireframe-toggles {
   top: 250px;
   left: -201px;
 }
diff --git a/packages/landing-app/src/index.html b/packages/landing-app/src/index.html
index 4c424b6e72..529af2623e 100644
--- a/packages/landing-app/src/index.html
+++ b/packages/landing-app/src/index.html
@@ -36,30 +36,30 @@
   <body>
     <header>
       <canvas id="pt-logo-background"></canvas>
-      <div class="pt-wireframes"></div>
+      <div class="landing-wireframes"></div>
       <canvas id="pt-logo"></canvas>
-      <div class="pt-container">
+      <div class="landing-container">
         <h1>Blueprint</h1>
         <h3>A React-based UI toolkit for the web</h3>
         <div>
-          <a class="pt-button pt-large pt-minimal" href="docs/v2/">Documentation</a>
+          <a class="landing-button pt-button pt-large pt-minimal" href="docs/v2/">Documentation</a>
           <span class="pt-icon-standard pt-icon-dot"></span>
-          <a class="pt-button pt-large pt-minimal" href="https://github.com/palantir/blueprint" target="_blank">GitHub</a>
+          <a class="landing-button pt-button pt-large pt-minimal" href="https://github.com/palantir/blueprint" target="_blank">GitHub</a>
         </div>
       </div>
     </header>
     <footer class="pt-dark">
-      <div class="pt-about">
-        <div class="pt-container">
+      <div class="landing-about">
+        <div class="landing-container">
           <img src="assets/palantir.svg" alt="Palantir">
           <p>Blueprint is an open source project<br>developed at Palantir.</p>
-          <div class="pt-separator"></div>
+          <div class="landing-separator"></div>
           <p>We’re hiring designers and engineers!</p>
-          <a class="pt-button pt-intent-primary" href="https://www.palantir.com/careers/" target="_blank">View openings</a>
+          <a class="landing-button pt-button pt-intent-primary" href="https://www.palantir.com/careers/" target="_blank">View openings</a>
         </div>
       </div>
-      <div class="pt-copyright">
-        <div class="pt-container">
+      <div class="landing-copyright">
+        <div class="landing-container">
           <div id="copyright">© 2014–2018 Palantir Technologies</div>
           <div>Licensed under <a href="https://github.com/palantir/blueprint/blob/develop/LICENSE" target="_blank">Apache-2.0</a></div>
         </div>
diff --git a/packages/landing-app/src/index.scss b/packages/landing-app/src/index.scss
index 70130d7f0b..813f95bf35 100644
--- a/packages/landing-app/src/index.scss
+++ b/packages/landing-app/src/index.scss
@@ -28,7 +28,7 @@ body {
   padding: 0;
 }
 
-.pt-container {
+.landing-container {
   margin: 0 auto;
   max-width: $container-width;
   padding: 0 $pt-grid-size * 2;
@@ -43,7 +43,7 @@ header {
   text-align: center;
   user-select: none;
 
-  .pt-container {
+  .landing-container {
     @include position-all(absolute, 0);
     z-index: $pt-z-index-base;
     pointer-events: none;
@@ -66,7 +66,7 @@ header {
     font-weight: 400;
   }
 
-  .pt-button.pt-minimal {
+  .#{$ns}-button.landing-button {
     position: relative;
     color: rgba($white, 0.7);
     pointer-events: all;
@@ -82,7 +82,7 @@ header {
     }
   }
 
-  .pt-icon-dot {
+  .#{$ns}-icon-dot {
     margin: $pt-grid-size / 2;
     color: rgba($white, 0.5);
   }
@@ -96,8 +96,8 @@ footer {
   background-color: transparent;
 }
 
-.pt-about {
-  .pt-container {
+.landing-about {
+  .landing-container {
     @include pt-flex-container(column, $pt-grid-size * 3);
     align-items: center;
     padding-top: $pt-grid-size * 6;
@@ -117,14 +117,14 @@ footer {
     font-weight: 300;
   }
 
-  .pt-separator {
+  .landing-separator {
     background-color: $dark-gray5;
     width: $pt-grid-size * 4;
     height: 2px;
   }
 }
 
-.pt-copyright {
+.landing-copyright {
   &::before {
     display: block;
     background-image: linear-gradient(
@@ -137,7 +137,7 @@ footer {
     content: "";
   }
 
-  .pt-container {
+  .landing-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -159,19 +159,19 @@ footer {
       font-size: $pt-grid-size * 1.8;
     }
 
-    .pt-icon-dot {
+    .#{$ns}-icon-dot {
       display: block;
     }
   }
 }
 
 @media (max-width: $tablet-breakpoint) {
-  .pt-copyright {
-    .pt-container {
+  .landing-copyright {
+    .landing-container {
       flex-direction: column;
     }
 
-    .pt-button {
+    .landing-button {
       margin: $pt-grid-size / 2;
     }
   }
diff --git a/packages/landing-app/src/index.tsx b/packages/landing-app/src/index.tsx
index 8ffb0ab4f6..38a9dc272e 100644
--- a/packages/landing-app/src/index.tsx
+++ b/packages/landing-app/src/index.tsx
@@ -16,6 +16,6 @@ initializeLogo(
     document.getElementById("pt-logo-background") as HTMLCanvasElement,
 );
 
-initializeSVGs(document.querySelector(".pt-wireframes") as HTMLElement);
+initializeSVGs(document.querySelector(".landing-wireframes") as HTMLElement);
 
 document.getElementById("copyright").innerHTML = `© 2014–${new Date().getFullYear()} Palantir Technologies`;
diff --git a/packages/landing-app/src/svgs/index.ts b/packages/landing-app/src/svgs/index.ts
index 352fece48d..e3eda904b3 100644
--- a/packages/landing-app/src/svgs/index.ts
+++ b/packages/landing-app/src/svgs/index.ts
@@ -24,8 +24,7 @@ const HERO_SVGS: Record<string, string> = {
 
 function injectSVG(elem: HTMLElement, id: string) {
     const wrapper = document.createElement("div");
-    // tslint:disable-next-line:blueprint-classes-constants
-    wrapper.classList.add("pt-wireframe", `pt-logo-wireframe-${id}`);
+    wrapper.classList.add("landing-wireframe", `landing-logo-wireframe-${id}`);
     wrapper.innerHTML = HERO_SVGS[id];
     elem.appendChild(wrapper);
 }
diff --git a/packages/select/src/common/classes.ts b/packages/select/src/common/classes.ts
index 8a7d10630f..ce438c172d 100644
--- a/packages/select/src/common/classes.ts
+++ b/packages/select/src/common/classes.ts
@@ -4,13 +4,13 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-// tslint:disable:blueprint-classes-constants
+import { Classes } from "@blueprintjs/core";
 
-export const MULTISELECT = "pt-multi-select";
+const NS = Classes.getClassNamespace();
+
+export const MULTISELECT = `${NS}-multi-select`;
 export const MULTISELECT_POPOVER = `${MULTISELECT}-popover`;
-export const OMNIBAR = "pt-omnibar";
+export const OMNIBAR = `${NS}-omnibar`;
 export const OMNIBAR_OVERLAY = `${OMNIBAR}-overlay`;
-export const SELECT = "pt-select";
+export const SELECT = `${NS}-select`;
 export const SELECT_POPOVER = `${SELECT}-popover`;
-
-// tslint:enable:blueprint-classes-constants
diff --git a/packages/select/src/components/omnibar/_omnibar.scss b/packages/select/src/components/omnibar/_omnibar.scss
index c9dddb2271..2113fa702f 100644
--- a/packages/select/src/components/omnibar/_omnibar.scss
+++ b/packages/select/src/components/omnibar/_omnibar.scss
@@ -8,14 +8,14 @@ $omnibar-height: 60vh !default;
 $omnibar-width: $pt-grid-size * 50 !default;
 $omnibar-input-height: $pt-grid-size * 4;
 
-.pt-omnibar {
+.#{$ns}-omnibar {
   $omnibar-transition-props: (
     filter: (blur($pt-grid-size * 2), blur(0)),
     opacity: (0.2, 1),
   );
 
   @include react-transition(
-    "pt-overlay",
+    "#{$ns}-overlay",
     $omnibar-transition-props,
     $duration: $pt-transition-duration * 2,
     $easing: $pt-transition-ease,
@@ -29,7 +29,7 @@ $omnibar-input-height: $pt-grid-size * 4;
   background-color: $white;
   width: $omnibar-width;
 
-  .pt-input {
+  .#{$ns}-input {
     border-radius: 0;
     background-color: transparent;
 
@@ -39,7 +39,7 @@ $omnibar-input-height: $pt-grid-size * 4;
     }
   }
 
-  .pt-menu {
+  .#{$ns}-menu {
     border-radius: 0;
     box-shadow: inset 0 1px 0 $pt-divider-black;
     background-color: transparent;
@@ -51,13 +51,13 @@ $omnibar-input-height: $pt-grid-size * 4;
     }
   }
 
-  .pt-dark &,
-  &.pt-dark {
+  .#{$ns}-dark &,
+  &.#{$ns}-dark {
     box-shadow: $pt-dark-elevation-shadow-4;
     background-color: $dark-gray4;
   }
 }
 
-.pt-omnibar-overlay .pt-overlay-backdrop {
+.#{$ns}-omnibar-overlay .#{$ns}-overlay-backdrop {
   background-color: rgba($black, 0.2);
 }
diff --git a/packages/select/src/components/select/_multi-select.scss b/packages/select/src/components/select/_multi-select.scss
index 641df8f627..45943f8ee8 100644
--- a/packages/select/src/components/select/_multi-select.scss
+++ b/packages/select/src/components/select/_multi-select.scss
@@ -4,12 +4,12 @@
 @import "~@blueprintjs/core/src/common/variables";
 @import "../select/select";
 
-.pt-multi-select {
+.#{$ns}-multi-select {
   min-width: $pt-grid-size * 15;
 }
 
-.pt-multi-select-popover {
-  .pt-menu {
+.#{$ns}-multi-select-popover {
+  .#{$ns}-menu {
     max-width: $select-popover-max-width;
     max-height: $select-popover-max-height;
     overflow: auto;
diff --git a/packages/select/src/components/select/_select.scss b/packages/select/src/components/select/_select.scss
index 3b5d3577ff..d7f7071b1d 100644
--- a/packages/select/src/components/select/_select.scss
+++ b/packages/select/src/components/select/_select.scss
@@ -6,25 +6,25 @@
 $select-popover-max-height: $pt-grid-size * 30 !default;
 $select-popover-max-width: $pt-grid-size * 40 !default;
 
-.pt-select-popover {
-  .pt-popover-content {
+.#{$ns}-select-popover {
+  .#{$ns}-popover-content {
     // use padding on container rather than margin on input group
     // because top margin leaves some empty space with no background color.
     padding: $pt-grid-size / 2;
   }
 
-  .pt-input-group {
+  .#{$ns}-input-group {
     margin-bottom: 0;
   }
 
-  .pt-menu {
+  .#{$ns}-menu {
     max-width: $select-popover-max-width;
     max-height: $select-popover-max-height;
     overflow: auto;
     padding: 0;
 
     &:not(:first-child) {
-      // adjust padding to account for that on .pt-popover-content above
+      // adjust padding to account for that on .#{$ns}-popover-content above
       padding-top: $pt-grid-size / 2;
     }
   }
diff --git a/packages/select/src/components/select/multi-select.md b/packages/select/src/components/select/multi-select.md
index 527beed894..59f421dad9 100644
--- a/packages/select/src/components/select/multi-select.md
+++ b/packages/select/src/components/select/multi-select.md
@@ -2,8 +2,8 @@
 
 Use `MultiSelect<T>` for choosing multiple items in a list. The component renders a [`TagInput`](#core/components/tag-input) wrapped in a `Popover`. Similarly to [`Select`](#select/select-component), you can pass in a predicate to customize the filtering algorithm. Selection of a `MultiSelect<T>` is controlled: listen to changes with `onItemSelect`.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Generic components and custom filtering</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Generic components and custom filtering</h4>
     For more information on controlled usage, generic components and custom filtering, visit the documentation for [`Select<T>`](#select/select-component).
 </div>
 
diff --git a/packages/select/src/components/select/select-component.md b/packages/select/src/components/select/select-component.md
index a70ea4f1b9..a697da7eca 100644
--- a/packages/select/src/components/select/select-component.md
+++ b/packages/select/src/components/select/select-component.md
@@ -2,8 +2,8 @@
 
 Use `Select<T>` for choosing one item from a list. The component's children will be wrapped in a [`Popover`](#labs/popover) that contains the list and an optional `InputGroup` to filter it. Provide a predicate to customize the filtering algorithm. The value of a `Select<T>` (the currently chosen item) is uncontrolled: listen to changes with `onItemSelect`.
 
-<div class="pt-callout pt-intent-primary pt-icon-info-sign">
-    <h4 class="pt-callout-title">Disabling a Select</h4>
+<div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">
+    <h4 class="@ns-callout-title">Disabling a Select</h4>
     <p>Disabling the component requires setting the `disabled` prop to `true`
     and separately disabling the component's children as appropriate (because `Select` accepts arbitrary children).</p>
     <p>For example, `<Select ... disabled={true}><Button ... disabled={true} /></Select>`</p>
diff --git a/packages/table-dev-app/src/index.scss b/packages/table-dev-app/src/index.scss
index c3d4788c67..9735f408da 100644
--- a/packages/table-dev-app/src/index.scss
+++ b/packages/table-dev-app/src/index.scss
@@ -22,7 +22,7 @@ body {
   background-color: #F5F8FA;
 }
 
-body.pt-dark {
+body.#{$ns}-dark {
   background-color: #293742;
 }
 
@@ -90,7 +90,7 @@ body.pt-dark {
   z-index: 3;
 }
 
-.pt-dark .sidebar {
+.#{$ns}-dark .sidebar {
   background-color: #202B33;
   box-shadow: 0 0 0 1px #182026; /* override pt-elevation-0 styles */
   z-index: 1;
@@ -117,12 +117,12 @@ body.pt-dark {
   padding: 10px 0 3px;
 }
 
-.pt-dark .sidebar h4 {
+.#{$ns}-dark .sidebar h4 {
   border-top-color:#182026;
   color: #A7B6C2;
 }
 
-.pt-dark .sidebar h6 {
+.#{$ns}-dark .sidebar h6 {
   color: #A7B6C2;
 }
 
@@ -130,7 +130,7 @@ body.pt-dark {
   margin-left: 15px;
 }
 
-.sidebar > .pt-button + .pt-button {
+.sidebar > .#{$ns}-button + .#{$ns}-button {
   margin-top: 3px;
 }
 
@@ -139,7 +139,7 @@ label.tbl-select-label {
   margin-bottom: 7px;
 }
 
-.tbl-select-label .pt-select {
+.tbl-select-label .#{$ns}-select {
   float: right;
 }
 
@@ -162,7 +162,7 @@ label.tbl-select-label {
   background-color: rgba(219, 55, 55, 0.1);
 }
 
-.tbl-select-label.pt-disabled {
+.tbl-select-label.#{$ns}-disabled {
   cursor: not-allowed;
 }
 
@@ -182,6 +182,6 @@ label.tbl-select-label {
   margin-top: 3px;
 }
 
-.pt-dark .tbl-custom-column-header-type {
+.#{$ns}-dark .tbl-custom-column-header-type {
   color: #BFCCD6; /* $gray5 */
 }
diff --git a/packages/table/src/cell/_borders.scss b/packages/table/src/cell/_borders.scss
index e6412dfbec..6832a36fe5 100644
--- a/packages/table/src/cell/_borders.scss
+++ b/packages/table/src/cell/_borders.scss
@@ -17,28 +17,28 @@ for all borders with minimal duplication. See the bottom of this file.
   $inset-border-right-frozen: inset (-$frozen-border-width) 0 0 $border-color;
   $inset-border-bottom-frozen: inset 0 (-$frozen-border-width) 0 $border-color;
 
-  .pt-table-container {
+  .#{$ns}-table-container {
     box-shadow: 0 0 0 $border-width $border-color;
   }
 
-  .pt-table-menu {
+  .#{$ns}-table-menu {
     box-shadow: $border-bottom-default, $border-right-default;
   }
 
-  .pt-table-header {
+  .#{$ns}-table-header {
     box-shadow: $border-bottom-default;
   }
 
-  .pt-table-cell {
+  .#{$ns}-table-cell {
     box-shadow: $inset-border-bottom-default, $inset-border-right-default;
   }
 
-  .pt-table-horizontal-cell-divider {
+  .#{$ns}-table-horizontal-cell-divider {
     box-shadow: inset 0 $border-width 0 $border-color;
     height: $border-width;
   }
 
-  .pt-table-column-headers .pt-table-header {
+  .#{$ns}-table-column-headers .#{$ns}-table-header {
     box-shadow: $border-bottom-default, $inset-border-right-default;
 
     &::before {
@@ -48,7 +48,7 @@ for all borders with minimal duplication. See the bottom of this file.
     }
   }
 
-  .pt-table-row-headers .pt-table-header {
+  .#{$ns}-table-row-headers .#{$ns}-table-header {
     box-shadow: $inset-border-bottom-default, $border-right-default;
 
     &::before {
@@ -58,37 +58,37 @@ for all borders with minimal duplication. See the bottom of this file.
     }
   }
 
-  .pt-table-body {
-    .pt-table-last-in-row {
+  .#{$ns}-table-body {
+    .#{$ns}-table-last-in-row {
       box-shadow: $inset-border-bottom-default, $border-right-default;
     }
 
-    .pt-table-last-in-column {
+    .#{$ns}-table-last-in-column {
       box-shadow: $border-bottom-default, $inset-border-right-default;
     }
 
-    .pt-table-last-in-row.pt-table-last-in-column {
+    .#{$ns}-table-last-in-row.#{$ns}-table-last-in-column {
       box-shadow: $border-bottom-default, $border-right-default;
     }
   }
 
-  .pt-table-quadrant-top-left {
-    .pt-table-cell {
-      &.pt-table-last-in-row {
+  .#{$ns}-table-quadrant-top-left {
+    .#{$ns}-table-cell {
+      &.#{$ns}-table-last-in-row {
         box-shadow: $inset-border-bottom-default, $inset-border-right-frozen;
       }
 
-      &.pt-table-last-in-column {
+      &.#{$ns}-table-last-in-column {
         box-shadow: $inset-border-bottom-frozen, $inset-border-right-default;
       }
 
-      &.pt-table-last-in-column.pt-table-last-in-row {
+      &.#{$ns}-table-last-in-column.#{$ns}-table-last-in-row {
         box-shadow: $inset-border-bottom-frozen, $inset-border-right-frozen;
       }
     }
 
-    .pt-table-header {
-      &.pt-table-last-in-row {
+    .#{$ns}-table-header {
+      &.#{$ns}-table-last-in-row {
         box-shadow: $border-bottom-default, $inset-border-right-frozen;
 
         &::before {
@@ -98,7 +98,7 @@ for all borders with minimal duplication. See the bottom of this file.
         }
       }
 
-      &.pt-table-last-in-column {
+      &.#{$ns}-table-last-in-column {
         box-shadow: $inset-border-bottom-frozen, $border-right-default;
 
         &::before {
@@ -110,18 +110,18 @@ for all borders with minimal duplication. See the bottom of this file.
     }
   }
 
-  .pt-table-quadrant-left .pt-table-cell.pt-table-last-in-row {
+  .#{$ns}-table-quadrant-left .#{$ns}-table-cell.#{$ns}-table-last-in-row {
     box-shadow: $inset-border-bottom-default, $inset-border-right-frozen;
   }
 
-  .pt-table-quadrant-top .pt-table-cell.pt-table-last-in-column {
+  .#{$ns}-table-quadrant-top .#{$ns}-table-cell.#{$ns}-table-last-in-column {
     box-shadow: $inset-border-bottom-frozen, $inset-border-right-default;
   }
 }
 
 @include pt-table-borders-mixin($cell-border-width, $frozen-cell-border-width, $cell-border-color);
 
-.pt-dark {
+.#{$ns}-dark {
   @include pt-table-borders-mixin(
     $cell-border-width,
     $frozen-cell-border-width,
diff --git a/packages/table/src/cell/_cell.scss b/packages/table/src/cell/_cell.scss
index e8e22f6b14..fa27068d0a 100644
--- a/packages/table/src/cell/_cell.scss
+++ b/packages/table/src/cell/_cell.scss
@@ -4,20 +4,20 @@
 @import "../common/variables";
 @import "./common";
 
-.pt-table-cell {
+.#{$ns}-table-cell {
   @include cell();
   @include cell-cursors();
 
-  &.pt-table-truncated-cell {
+  &.#{$ns}-table-truncated-cell {
     overflow: hidden;
   }
 
-  &.pt-large,
-  .pt-large & {
+  &.#{$ns}-large,
+  .#{$ns}-large & {
     @include cell-large();
   }
 
-  &.pt-loading {
+  &.#{$ns}-loading {
     @include cell-content-align-vertical();
     color: transparent;
   }
@@ -28,35 +28,35 @@
   }
 }
 
-.pt-table-cell-interactive {
+.#{$ns}-table-cell-interactive {
   z-index: $interactive-cell-z-index;
 }
 
-.pt-table-striped {
-  .pt-table-cell-ledger-even {
+.#{$ns}-table-striped {
+  .#{$ns}-table-cell-ledger-even {
     background-color: $cell-background-color;
   }
 
-  .pt-table-cell-ledger-odd {
+  .#{$ns}-table-cell-ledger-odd {
     background-color: mix($table-background-color, $cell-background-color, 50%);
   }
 
-  .pt-dark & {
-    .pt-table-cell-ledger-even {
+  .#{$ns}-dark & {
+    .#{$ns}-table-cell-ledger-even {
       background-color: $dark-cell-background-color;
     }
 
-    .pt-table-cell-ledger-odd {
+    .#{$ns}-table-cell-ledger-odd {
       background-color: mix($dark-table-background-color, $dark-cell-background-color, 50%);
     }
   }
 }
 
-.pt-table-editable-name input {
+.#{$ns}-table-editable-name input {
   height: $cell-height; // fixed height for IE11
 }
 
-.pt-table-editable-text {
+.#{$ns}-table-editable-text {
   position: absolute;
   top: 0;
   right: 0;
diff --git a/packages/table/src/cell/_common.scss b/packages/table/src/cell/_common.scss
index 7b8b2a9c29..d144ea8775 100644
--- a/packages/table/src/cell/_common.scss
+++ b/packages/table/src/cell/_common.scss
@@ -29,19 +29,19 @@ $cell-transition-duration: $pt-transition-duration * 3;
   font-size: $pt-font-size-small;
   transition: color $cell-transition-duration;
 
-  .pt-dark & {
-    &:not([class*="pt-intent-"]):not(.pt-loading) {
+  .#{$ns}-dark & {
+    &:not([class*="#{$ns}-intent-"]):not(.#{$ns}-loading) {
       color: $dark-cell-text-color;
     }
   }
 
   @each $intent, $color in $pt-intent-colors {
-    &.pt-intent-#{$intent} {
+    &.#{$ns}-intent-#{$intent} {
       background-color: rgba($color, $cell-background-color-opacity);
       color: map-get($pt-intent-text-colors, $intent);
     }
 
-    .pt-dark &.pt-intent-#{$intent} {
+    .#{$ns}-dark &.#{$ns}-intent-#{$intent} {
       background: rgba($color, $cell-background-color-opacity);
       color: map-get($pt-dark-intent-text-colors, $intent);
     }
@@ -55,11 +55,11 @@ $cell-transition-duration: $pt-transition-duration * 3;
 }
 
 @mixin cell-cursors() {
-  .pt-table-editing-enabled & {
+  .#{$ns}-table-editing-enabled & {
     cursor: $select-text-cursor;
   }
 
-  .pt-table-selection-enabled & {
+  .#{$ns}-table-selection-enabled & {
     cursor: $select-cell-cursor;
   }
 }
diff --git a/packages/table/src/cell/formats/_formats.scss b/packages/table/src/cell/formats/_formats.scss
index f29760cdb5..9f394bc589 100644
--- a/packages/table/src/cell/formats/_formats.scss
+++ b/packages/table/src/cell/formats/_formats.scss
@@ -3,11 +3,11 @@
 @import "../../common/variables";
 @import "../common";
 
-.pt-table-null {
+.#{$ns}-table-null {
   color: $pt-text-color-disabled;
 }
 
-.pt-table-truncated-value {
+.#{$ns}-table-truncated-value {
   position: absolute;
   top: 0;
   // note: changing this value can throw off the width calculation in truncated popover
@@ -19,7 +19,7 @@
   text-overflow: ellipsis;
 }
 
-.pt-table-truncated-format-text {
+.#{$ns}-table-truncated-format-text {
   position: absolute;
   top: 0;
   // note: changing this value can throw off the width calculation in truncated popover
@@ -31,7 +31,7 @@
   text-overflow: ellipsis;
 }
 
-.pt-table-truncated-popover-target {
+.#{$ns}-table-truncated-popover-target {
   position: absolute;
   top: 0;
   right: $pt-grid-size / 2;
@@ -44,14 +44,14 @@
   padding: 0 $pt-grid-size / 2;
   text-align: center;
 
-  .pt-icon-standard {
+  .#{$ns}-icon-standard {
     line-height: $cell-height;
   }
 
-  &.pt-popover-open {
+  &.#{$ns}-popover-open {
     opacity: 1;
 
-    .pt-icon-standard {
+    .#{$ns}-icon-standard {
       color: $pt-intent-primary;
     }
   }
@@ -61,7 +61,7 @@
   }
 }
 
-.pt-table-truncated-popover {
+.#{$ns}-table-truncated-popover {
   min-width: 20 * $pt-grid-size;
   max-width: 60 * $pt-grid-size;
   max-height: 30 * $pt-grid-size;
@@ -70,11 +70,11 @@
   font-family: $pt-font-family-monospace;
 }
 
-.pt-table-popover-whitespace-pre {
+.#{$ns}-table-popover-whitespace-pre {
   white-space: pre;
 }
 
-.pt-table-popover-whitespace-normal {
+.#{$ns}-table-popover-whitespace-normal {
   white-space: normal;
 }
 
diff --git a/packages/table/src/common/_loading.scss b/packages/table/src/common/_loading.scss
index 9ef30be638..afd2252ee6 100644
--- a/packages/table/src/common/_loading.scss
+++ b/packages/table/src/common/_loading.scss
@@ -15,7 +15,7 @@
 }
 
 @mixin table-skeleton() {
-  .pt-skeleton {
+  .#{$ns}-skeleton {
     opacity: 0;
     height: $pt-grid-size * 0.5;
     animation: $cell-transition-duration linear forwards skeleton-fade-in, $skeleton-animation;
diff --git a/packages/table/src/common/classes.ts b/packages/table/src/common/classes.ts
index 8c05c1c336..f87c3cdcce 100644
--- a/packages/table/src/common/classes.ts
+++ b/packages/table/src/common/classes.ts
@@ -4,94 +4,96 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-// tslint:disable:blueprint-classes-constants
+import { Classes } from "@blueprintjs/core";
 
-export const TABLE_BODY = "pt-table-body";
-export const TABLE_BODY_CELLS = "pt-table-body-cells";
-export const TABLE_BODY_SCROLL_CLIENT = "pt-table-body-scroll-client";
-export const TABLE_BODY_VIRTUAL_CLIENT = "pt-table-body-virtual-client";
-export const TABLE_BOTTOM_CONTAINER = "pt-table-bottom-container";
-export const TABLE_CELL = "pt-table-cell";
-export const TABLE_CELL_CLIENT = "pt-table-cell-client";
-export const TABLE_CELL_GHOST = "pt-table-cell-ghost";
-export const TABLE_CELL_INTERACTIVE = "pt-table-cell-interactive";
-export const TABLE_CELL_LEDGER_EVEN = "pt-table-cell-ledger-even";
-export const TABLE_CELL_LEDGER_ODD = "pt-table-cell-ledger-odd";
-export const TABLE_COLUMN_HEADER_TR = "pt-table-column-header-tr";
-export const TABLE_COLUMN_HEADERS = "pt-table-column-headers";
-export const TABLE_COLUMN_HEADER_CELL = "pt-table-column-header-cell";
-export const TABLE_COLUMN_NAME = "pt-table-column-name";
-export const TABLE_COLUMN_NAME_TEXT = "pt-table-column-name-text";
-export const TABLE_CONTAINER = "pt-table-container";
-export const TABLE_DRAGGING = "pt-table-dragging";
-export const TABLE_EDITABLE_NAME = "pt-table-editable-name";
-export const TABLE_EDITABLE_TEXT = "pt-table-editable-text";
-export const TABLE_FOCUS_REGION = "pt-table-focus-region";
-export const TABLE_HAS_INTERACTION_BAR = "pt-table-has-interaction-bar";
-export const TABLE_HAS_REORDER_HANDLE = "pt-table-has-reorder-handle";
-export const TABLE_HEADER = "pt-table-header";
-export const TABLE_HEADER_ACTIVE = "pt-table-header-active";
-export const TABLE_HEADER_CONTENT = "pt-table-header-content";
-export const TABLE_HEADER_REORDERABLE = "pt-table-header-reorderable";
-export const TABLE_HEADER_SELECTED = "pt-table-header-selected";
-export const TABLE_HORIZONTAL_CELL_DIVIDER = "pt-table-horizontal-cell-divider";
-export const TABLE_HORIZONTAL_GUIDE = "pt-table-horizontal-guide";
-export const TABLE_INTERACTION_BAR = "pt-table-interaction-bar";
-export const TABLE_LAST_IN_COLUMN = "pt-table-last-in-column";
-export const TABLE_LAST_IN_ROW = "pt-table-last-in-row";
-export const TABLE_MENU = "pt-table-menu";
-export const TABLE_NO_HORIZONTAL_SCROLL = "pt-table-no-horizontal-scroll";
-export const TABLE_NO_LAYOUT = "pt-table-no-layout";
-export const TABLE_NO_ROWS = "pt-table-no-rows";
-export const TABLE_NO_VERTICAL_SCROLL = "pt-table-no-vertical-scroll";
-export const TABLE_NO_WRAP_TEXT = "pt-table-no-wrap-text";
-export const TABLE_NULL = "pt-table-null";
-export const TABLE_OVERLAY = "pt-table-overlay";
-export const TABLE_OVERLAY_LAYER = "pt-table-overlay-layer";
-export const TABLE_OVERLAY_REORDERING_CURSOR = "pt-table-reordering-cursor-overlay";
-export const TABLE_POPOVER_WHITESPACE_NORMAL = "pt-table-popover-whitespace-normal";
-export const TABLE_POPOVER_WHITESPACE_PRE = "pt-table-popover-whitespace-pre";
-export const TABLE_QUADRANT = "pt-table-quadrant";
-export const TABLE_QUADRANT_BODY_CONTAINER = "pt-table-quadrant-body-container";
-export const TABLE_QUADRANT_LEFT = "pt-table-quadrant-left";
-export const TABLE_QUADRANT_MAIN = "pt-table-quadrant-main";
-export const TABLE_QUADRANT_SCROLL_CONTAINER = "pt-table-quadrant-scroll-container";
-export const TABLE_QUADRANT_STACK = "pt-table-quadrant-stack";
-export const TABLE_QUADRANT_TOP = "pt-table-quadrant-top";
-export const TABLE_QUADRANT_TOP_LEFT = "pt-table-quadrant-top-left";
-export const TABLE_REGION = "pt-table-region";
-export const TABLE_REORDER_HANDLE = "pt-table-reorder-handle";
-export const TABLE_REORDER_HANDLE_TARGET = "pt-table-reorder-handle-target";
-export const TABLE_REORDERING = "pt-table-reordering";
-export const TABLE_RESIZE_GUIDES = "pt-table-resize-guides";
-export const TABLE_RESIZE_HANDLE = "pt-table-resize-handle";
-export const TABLE_RESIZE_HANDLE_TARGET = "pt-table-resize-handle-target";
-export const TABLE_RESIZE_HORIZONTAL = "pt-table-resize-horizontal";
-export const TABLE_RESIZE_SENSOR = "pt-table-resize-sensor";
-export const TABLE_RESIZE_SENSOR_EXPAND = "pt-table-resize-sensor-expand";
-export const TABLE_RESIZE_SENSOR_SHRINK = "pt-table-resize-sensor-shrink";
-export const TABLE_RESIZE_VERTICAL = "pt-table-resize-vertical";
-export const TABLE_ROUNDED_LAYOUT = "pt-table-rounded-layout";
-export const TABLE_ROW_HEADERS = "pt-table-row-headers";
-export const TABLE_ROW_HEADERS_CELLS_CONTAINER = "pt-table-row-headers-cells-container";
-export const TABLE_ROW_NAME = "pt-table-row-name";
-export const TABLE_ROW_NAME_TEXT = "pt-table-row-name-text";
-export const TABLE_SELECTION_ENABLED = "pt-table-selection-enabled";
-export const TABLE_SELECTION_REGION = "pt-table-selection-region";
-export const TABLE_TH_MENU = "pt-table-th-menu";
-export const TABLE_TH_MENU_CONTAINER = "pt-table-th-menu-container";
-export const TABLE_TH_MENU_CONTAINER_BACKGROUND = "pt-table-th-menu-container-background";
-export const TABLE_TH_MENU_OPEN = "pt-table-th-menu-open";
-export const TABLE_THEAD = "pt-table-thead";
-export const TABLE_TOP_CONTAINER = "pt-table-top-container";
-export const TABLE_TRUNCATED_CELL = "pt-table-truncated-cell";
-export const TABLE_TRUNCATED_FORMAT = "pt-table-truncated-format";
-export const TABLE_TRUNCATED_FORMAT_TEXT = "pt-table-truncated-format-text";
-export const TABLE_TRUNCATED_POPOVER = "pt-table-truncated-popover";
-export const TABLE_TRUNCATED_POPOVER_TARGET = "pt-table-truncated-popover-target";
-export const TABLE_TRUNCATED_TEXT = "pt-table-truncated-text";
-export const TABLE_TRUNCATED_VALUE = "pt-table-truncated-value";
-export const TABLE_VERTICAL_GUIDE = "pt-table-vertical-guide";
+const NS = Classes.getClassNamespace();
+
+export const TABLE_BODY = `${NS}-table-body`;
+export const TABLE_BODY_CELLS = `${NS}-table-body-cells`;
+export const TABLE_BODY_SCROLL_CLIENT = `${NS}-table-body-scroll-client`;
+export const TABLE_BODY_VIRTUAL_CLIENT = `${NS}-table-body-virtual-client`;
+export const TABLE_BOTTOM_CONTAINER = `${NS}-table-bottom-container`;
+export const TABLE_CELL = `${NS}-table-cell`;
+export const TABLE_CELL_CLIENT = `${NS}-table-cell-client`;
+export const TABLE_CELL_GHOST = `${NS}-table-cell-ghost`;
+export const TABLE_CELL_INTERACTIVE = `${NS}-table-cell-interactive`;
+export const TABLE_CELL_LEDGER_EVEN = `${NS}-table-cell-ledger-even`;
+export const TABLE_CELL_LEDGER_ODD = `${NS}-table-cell-ledger-odd`;
+export const TABLE_COLUMN_HEADER_TR = `${NS}-table-column-header-tr`;
+export const TABLE_COLUMN_HEADERS = `${NS}-table-column-headers`;
+export const TABLE_COLUMN_HEADER_CELL = `${NS}-table-column-header-cell`;
+export const TABLE_COLUMN_NAME = `${NS}-table-column-name`;
+export const TABLE_COLUMN_NAME_TEXT = `${NS}-table-column-name-text`;
+export const TABLE_CONTAINER = `${NS}-table-container`;
+export const TABLE_DRAGGING = `${NS}-table-dragging`;
+export const TABLE_EDITABLE_NAME = `${NS}-table-editable-name`;
+export const TABLE_EDITABLE_TEXT = `${NS}-table-editable-text`;
+export const TABLE_FOCUS_REGION = `${NS}-table-focus-region`;
+export const TABLE_HAS_INTERACTION_BAR = `${NS}-table-has-interaction-bar`;
+export const TABLE_HAS_REORDER_HANDLE = `${NS}-table-has-reorder-handle`;
+export const TABLE_HEADER = `${NS}-table-header`;
+export const TABLE_HEADER_ACTIVE = `${NS}-table-header-active`;
+export const TABLE_HEADER_CONTENT = `${NS}-table-header-content`;
+export const TABLE_HEADER_REORDERABLE = `${NS}-table-header-reorderable`;
+export const TABLE_HEADER_SELECTED = `${NS}-table-header-selected`;
+export const TABLE_HORIZONTAL_CELL_DIVIDER = `${NS}-table-horizontal-cell-divider`;
+export const TABLE_HORIZONTAL_GUIDE = `${NS}-table-horizontal-guide`;
+export const TABLE_INTERACTION_BAR = `${NS}-table-interaction-bar`;
+export const TABLE_LAST_IN_COLUMN = `${NS}-table-last-in-column`;
+export const TABLE_LAST_IN_ROW = `${NS}-table-last-in-row`;
+export const TABLE_MENU = `${NS}-table-menu`;
+export const TABLE_NO_HORIZONTAL_SCROLL = `${NS}-table-no-horizontal-scroll`;
+export const TABLE_NO_LAYOUT = `${NS}-table-no-layout`;
+export const TABLE_NO_ROWS = `${NS}-table-no-rows`;
+export const TABLE_NO_VERTICAL_SCROLL = `${NS}-table-no-vertical-scroll`;
+export const TABLE_NO_WRAP_TEXT = `${NS}-table-no-wrap-text`;
+export const TABLE_NULL = `${NS}-table-null`;
+export const TABLE_OVERLAY = `${NS}-table-overlay`;
+export const TABLE_OVERLAY_LAYER = `${NS}-table-overlay-layer`;
+export const TABLE_OVERLAY_REORDERING_CURSOR = `${NS}-table-reordering-cursor-overlay`;
+export const TABLE_POPOVER_WHITESPACE_NORMAL = `${NS}-table-popover-whitespace-normal`;
+export const TABLE_POPOVER_WHITESPACE_PRE = `${NS}-table-popover-whitespace-pre`;
+export const TABLE_QUADRANT = `${NS}-table-quadrant`;
+export const TABLE_QUADRANT_BODY_CONTAINER = `${NS}-table-quadrant-body-container`;
+export const TABLE_QUADRANT_LEFT = `${NS}-table-quadrant-left`;
+export const TABLE_QUADRANT_MAIN = `${NS}-table-quadrant-main`;
+export const TABLE_QUADRANT_SCROLL_CONTAINER = `${NS}-table-quadrant-scroll-container`;
+export const TABLE_QUADRANT_STACK = `${NS}-table-quadrant-stack`;
+export const TABLE_QUADRANT_TOP = `${NS}-table-quadrant-top`;
+export const TABLE_QUADRANT_TOP_LEFT = `${NS}-table-quadrant-top-left`;
+export const TABLE_REGION = `${NS}-table-region`;
+export const TABLE_REORDER_HANDLE = `${NS}-table-reorder-handle`;
+export const TABLE_REORDER_HANDLE_TARGET = `${NS}-table-reorder-handle-target`;
+export const TABLE_REORDERING = `${NS}-table-reordering`;
+export const TABLE_RESIZE_GUIDES = `${NS}-table-resize-guides`;
+export const TABLE_RESIZE_HANDLE = `${NS}-table-resize-handle`;
+export const TABLE_RESIZE_HANDLE_TARGET = `${NS}-table-resize-handle-target`;
+export const TABLE_RESIZE_HORIZONTAL = `${NS}-table-resize-horizontal`;
+export const TABLE_RESIZE_SENSOR = `${NS}-table-resize-sensor`;
+export const TABLE_RESIZE_SENSOR_EXPAND = `${NS}-table-resize-sensor-expand`;
+export const TABLE_RESIZE_SENSOR_SHRINK = `${NS}-table-resize-sensor-shrink`;
+export const TABLE_RESIZE_VERTICAL = `${NS}-table-resize-vertical`;
+export const TABLE_ROUNDED_LAYOUT = `${NS}-table-rounded-layout`;
+export const TABLE_ROW_HEADERS = `${NS}-table-row-headers`;
+export const TABLE_ROW_HEADERS_CELLS_CONTAINER = `${NS}-table-row-headers-cells-container`;
+export const TABLE_ROW_NAME = `${NS}-table-row-name`;
+export const TABLE_ROW_NAME_TEXT = `${NS}-table-row-name-text`;
+export const TABLE_SELECTION_ENABLED = `${NS}-table-selection-enabled`;
+export const TABLE_SELECTION_REGION = `${NS}-table-selection-region`;
+export const TABLE_TH_MENU = `${NS}-table-th-menu`;
+export const TABLE_TH_MENU_CONTAINER = `${NS}-table-th-menu-container`;
+export const TABLE_TH_MENU_CONTAINER_BACKGROUND = `${NS}-table-th-menu-container-background`;
+export const TABLE_TH_MENU_OPEN = `${NS}-table-th-menu-open`;
+export const TABLE_THEAD = `${NS}-table-thead`;
+export const TABLE_TOP_CONTAINER = `${NS}-table-top-container`;
+export const TABLE_TRUNCATED_CELL = `${NS}-table-truncated-cell`;
+export const TABLE_TRUNCATED_FORMAT = `${NS}-table-truncated-format`;
+export const TABLE_TRUNCATED_FORMAT_TEXT = `${NS}-table-truncated-format-text`;
+export const TABLE_TRUNCATED_POPOVER = `${NS}-table-truncated-popover`;
+export const TABLE_TRUNCATED_POPOVER_TARGET = `${NS}-table-truncated-popover-target`;
+export const TABLE_TRUNCATED_TEXT = `${NS}-table-truncated-text`;
+export const TABLE_TRUNCATED_VALUE = `${NS}-table-truncated-value`;
+export const TABLE_VERTICAL_GUIDE = `${NS}-table-vertical-guide`;
 
 /** Common code for row and column index class generator functions, since they're essentially the same. */
 function dimensionIndexClass(classPrefix: string, index: string | number) {
@@ -108,22 +110,20 @@ function dimensionIndexClass(classPrefix: string, index: string | number) {
 
 /** Return CSS class for table colummn index, whether or not 'pt-table-col-' prefix is included. */
 export function columnIndexClass(columnIndex: string | number) {
-    return dimensionIndexClass("pt-table-col-", columnIndex);
+    return dimensionIndexClass(`${NS}-table-col-`, columnIndex);
 }
 
 /** Return CSS class for table row index, whether or not 'pt-table-row-' prefix is included. */
 export function rowIndexClass(rowIndex: string | number) {
-    return dimensionIndexClass("pt-table-row-", rowIndex);
+    return dimensionIndexClass(`${NS}-table-row-`, rowIndex);
 }
 
 /** Return CSS class for table colummn cell index, whether or not 'pt-table-cell-col-' prefix is included. */
 export function columnCellIndexClass(columnIndex: string | number) {
-    return dimensionIndexClass("pt-table-cell-col-", columnIndex);
+    return dimensionIndexClass(`${NS}-table-cell-col-`, columnIndex);
 }
 
 /** Return CSS class for table row cell index, whether or not 'pt-table-cell-row-' prefix is included. */
 export function rowCellIndexClass(rowIndex: string | number) {
-    return dimensionIndexClass("pt-table-cell-row-", rowIndex);
+    return dimensionIndexClass(`${NS}-table-cell-row-`, rowIndex);
 }
-
-// tslint:enable:blueprint-classes-constants
diff --git a/packages/table/src/docs/table.md b/packages/table/src/docs/table.md
index 3ff86254e6..f554478312 100644
--- a/packages/table/src/docs/table.md
+++ b/packages/table/src/docs/table.md
@@ -2,9 +2,9 @@
 
 A highly interactive React `Table` component.
 
-<div class="pt-callout pt-large pt-intent-primary pt-icon-info-sign">
+<div class="@ns-callout @ns-large @ns-intent-primary @ns-icon-info-sign">
   If you are looking instead for the Blueprint-styled HTML table, see
-  [`.pt-html-table` in **@blueprintjs/core**](#core/components/table-html).
+  [`.@ns-html-table` in **@blueprintjs/core**](#core/components/table-html).
 </div>
 
 ### Features
diff --git a/packages/table/src/headers/_headers.scss b/packages/table/src/headers/_headers.scss
index 4174d831a6..4cca1f281c 100644
--- a/packages/table/src/headers/_headers.scss
+++ b/packages/table/src/headers/_headers.scss
@@ -29,7 +29,7 @@ $dark-selectable-header-menu-selected-background:
 $dark-selectable-header-menu-selected-hover-background:
   menu-background(mix($pt-intent-primary, $dark-header-hover-background-color, 10%));
 
-.pt-table-header {
+.#{$ns}-table-header {
   flex: 1 1 auto;
   align-items: flex-start;
   justify-content: space-between;
@@ -47,26 +47,26 @@ $dark-selectable-header-menu-selected-hover-background:
     content: "";
   }
 
-  .pt-table-row-name,
-  .pt-table-column-name,
-  .pt-table-header-content {
+  .#{$ns}-table-row-name,
+  .#{$ns}-table-column-name,
+  .#{$ns}-table-header-content {
     // push these above the ::before content
     position: relative;
     width: 100%;
   }
 
-  .pt-table-selection-enabled &:hover,
-  &.pt-table-header-active {
+  .#{$ns}-table-selection-enabled &:hover,
+  &.#{$ns}-table-header-active {
     &::before {
       background-color: $header-hover-background-color;
 
-      .pt-dark & {
+      .#{$ns}-dark & {
         background-color: $dark-header-hover-background-color;
       }
     }
   }
 
-  &.pt-table-header-selected::before {
+  &.#{$ns}-table-header-selected::before {
     background-image: linear-gradient(
       90deg,
       rgba($header-selected-background-color, 0.1),
@@ -75,25 +75,25 @@ $dark-selectable-header-menu-selected-hover-background:
   }
 }
 
-.pt-table-th-menu-container {
+.#{$ns}-table-th-menu-container {
   flex-shrink: 0;
   position: absolute;
   right: $cell-border-width; // don't overlap box-shadow border
   opacity: 0; // hide until header is hovered
   text-align: right;
 
-  .pt-table-header:hover &,
-  .pt-table-header-active &,
-  &.pt-table-th-menu-open {
+  .#{$ns}-table-header:hover &,
+  .#{$ns}-table-header-active &,
+  &.#{$ns}-table-th-menu-open {
     opacity: 1;
   }
 
-  .pt-table-interaction-bar & {
+  .#{$ns}-table-interaction-bar & {
     line-height: $interaction-bar-height;
   }
 }
 
-.pt-table-th-menu-container-background {
+.#{$ns}-table-th-menu-container-background {
   position: absolute;
   top: 0;
   right: 0;
@@ -101,68 +101,68 @@ $dark-selectable-header-menu-selected-hover-background:
   height: $column-header-min-height;
   pointer-events: none; // don't swallow clicks meant for the underlying header cell
 
-  .pt-table-interaction-bar & {
+  .#{$ns}-table-interaction-bar & {
     height: $interaction-bar-height;
   }
 
-  .pt-table-th-menu-open & {
+  .#{$ns}-table-th-menu-open & {
     background-image: $header-menu-hover-background;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background-image: $dark-header-menu-hover-background;
     }
   }
 
   // background doesn't change on hover when selection is disabled; match the default background
-  .pt-table-header:hover &,
-  .pt-table-header-active &,
-  .pt-table-th-menu-open & {
+  .#{$ns}-table-header:hover &,
+  .#{$ns}-table-header-active &,
+  .#{$ns}-table-th-menu-open & {
     background-image: $header-menu-hover-background;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background-image: $dark-header-menu-hover-background;
     }
   }
 
   // background changes on hover/select when selection is enabled; need to match the new background
-  .pt-table-selection-enabled .pt-table-header:hover &,
-  .pt-table-selection-enabled .pt-table-header-active & {
+  .#{$ns}-table-selection-enabled .#{$ns}-table-header:hover &,
+  .#{$ns}-table-selection-enabled .#{$ns}-table-header-active & {
     background-image: $selectable-header-menu-hover-background;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background-image: $dark-selectable-header-menu-hover-background;
     }
   }
 
-  .pt-table-selection-enabled .pt-table-header.pt-table-header-selected & {
+  .#{$ns}-table-selection-enabled .#{$ns}-table-header.#{$ns}-table-header-selected & {
     background-image: $selectable-header-menu-selected-background;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background-image: $dark-selectable-header-menu-selected-background;
     }
   }
 
-  .pt-table-selection-enabled .pt-table-header.pt-table-header-selected:hover & {
+  .#{$ns}-table-selection-enabled .#{$ns}-table-header.#{$ns}-table-header-selected:hover & {
     background-image: $selectable-header-menu-selected-hover-background;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       background-image: $dark-selectable-header-menu-selected-hover-background;
     }
   }
 }
 
-.pt-table-th-menu {
+.#{$ns}-table-th-menu {
   cursor: $action-cursor;
   width: $column-header-min-height; // create a larger, more accessible click target
   height: $column-header-min-height;
 
-  .pt-table-interaction-bar & {
+  .#{$ns}-table-interaction-bar & {
     right: $cell-border-width;
     width: $interaction-bar-height;
     height: $interaction-bar-height;
     text-align: center;
 
-    .pt-icon {
+    .#{$ns}-icon {
       $icon-margin: ($interaction-bar-height - $pt-icon-size-standard) / 2;
 
       margin: $icon-margin;
@@ -171,7 +171,7 @@ $dark-selectable-header-menu-selected-hover-background:
     }
   }
 
-  .pt-icon {
+  .#{$ns}-icon {
     $icon-offset: ($column-header-min-height - $pt-icon-size-standard) / 2;
 
     margin-top: $icon-offset;
@@ -183,49 +183,49 @@ $dark-selectable-header-menu-selected-hover-background:
 
     // light theme
 
-    .pt-table-selection-enabled & {
+    .#{$ns}-table-selection-enabled & {
       background-color: $header-hover-background-color;
     }
 
-    .pt-table-selection-enabled .pt-table-header.pt-table-header-selected & {
+    .#{$ns}-table-selection-enabled .#{$ns}-table-header.#{$ns}-table-header-selected & {
       background-color: $selectable-header-menu-selected-background;
     }
 
     // dark theme
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       box-shadow: inset 0 0 0 1px rgba($white, $pt-drop-shadow-opacity);
       background-color: $dark-header-background-color;
       color: $pt-dark-icon-color;
     }
 
-    .pt-dark .pt-table-selection-enabled & {
+    .#{$ns}-dark .#{$ns}-table-selection-enabled & {
       background-color: $dark-header-hover-background-color;
     }
 
     // need to use a long selector here to properly scope the style
-    // stylelint-disable-next-line selector-max-compound-selectors
-    .pt-dark .pt-table-selection-enabled .pt-table-header.pt-table-header-selected & {
+    // stylelint-disable-next-line selector-max-compound-selectors,max-line-length
+    .#{$ns}-dark .#{$ns}-table-selection-enabled .#{$ns}-table-header.#{$ns}-table-header-selected & {
       background-color: $dark-selectable-header-menu-selected-background;
     }
   }
 
-  &:hover .pt-icon {
+  &:hover .#{$ns}-icon {
     box-shadow: inset 0 0 0 1px rgba($black, $pt-drop-shadow-opacity * 2);
     color: $pt-icon-color-hover;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       box-shadow: inset 0 0 0 1px rgba($white, $pt-drop-shadow-opacity * 2);
       color: $pt-dark-icon-color-hover;
     }
   }
 
-  &.pt-popover-open .pt-icon {
+  &.#{$ns}-popover-open .#{$ns}-icon {
     box-shadow: none;
     background-color: $pt-icon-color-selected;
     color: $white;
 
-    .pt-dark & {
+    .#{$ns}-dark & {
       box-shadow: none;
       background-color: $pt-dark-icon-color-selected;
       color: $white;
@@ -233,32 +233,32 @@ $dark-selectable-header-menu-selected-hover-background:
   }
 }
 
-.pt-table-thead {
+.#{$ns}-table-thead {
   display: block;
   white-space: nowrap;
 }
 
-.pt-table-column-header-tr {
+.#{$ns}-table-column-header-tr {
   display: flex;
 
-  .pt-table-header {
+  .#{$ns}-table-header {
     // Using a fixed flex layout give us columns that match their height. Fixes #45
     flex: 0 0;
   }
 }
 
-.pt-table-column-headers .pt-table-interaction-bar {
+.#{$ns}-table-column-headers .#{$ns}-table-interaction-bar {
   position: relative;
   height: $interaction-bar-height;
 }
 
-.pt-table-column-headers .pt-table-header {
+.#{$ns}-table-column-headers .#{$ns}-table-header {
   min-height: $column-header-min-height;
   vertical-align: top;
   line-height: $column-header-min-height;
 }
 
-.pt-table-row-headers .pt-table-header {
+.#{$ns}-table-row-headers .#{$ns}-table-header {
   min-width: $row-header-min-width;
   // prevent text from leaking out of the cell during scroll, before the header
   // width is updated on scroll end.
@@ -266,31 +266,31 @@ $dark-selectable-header-menu-selected-hover-background:
   line-height: $cell-height;
 }
 
-.pt-table-column-name-text,
-.pt-table-row-name-text {
+.#{$ns}-table-column-name-text,
+.#{$ns}-table-row-name-text {
   flex-grow: 1;
   pointer-events: none;
 }
 
-.pt-table-truncated-text {
+.#{$ns}-table-truncated-text {
   max-height: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.pt-table-no-wrap-text {
+.#{$ns}-table-no-wrap-text {
   white-space: nowrap;
 }
 
-.pt-table-column-name-text {
+.#{$ns}-table-column-name-text {
   padding: $cell-padding;
 }
 
-.pt-table-editable-name {
+.#{$ns}-table-editable-name {
   display: block;
   pointer-events: all;
 
-  &.pt-editable-text {
+  &.#{$ns}-editable-text {
     &::before {
       top: -$cell-padding-vertical + $cell-border-width - 2px;
       right: -$cell-padding-horizontal + $cell-border-width - 1px;
@@ -299,11 +299,11 @@ $dark-selectable-header-menu-selected-hover-background:
       border-radius: 0;
     }
 
-    &:not(.pt-editable-editing)::before {
+    &:not(.#{$ns}-editable-editing)::before {
       box-shadow: none;
     }
 
-    &.pt-editable-editing {
+    &.#{$ns}-editable-editing {
       &::before {
         top: -$cell-padding-vertical + $cell-border-width - 1px;
         right: -$cell-padding-horizontal + $cell-border-width;
@@ -312,7 +312,7 @@ $dark-selectable-header-menu-selected-hover-background:
         cursor: $select-text-cursor;
       }
 
-      &.pt-table-editable-text {
+      &.#{$ns}-table-editable-text {
         &::before {
           right: $cell-border-width;
           left: $cell-border-width - 1px;
@@ -321,36 +321,36 @@ $dark-selectable-header-menu-selected-hover-background:
     }
   }
 
-  .pt-table-column-name &.pt-editable-text {
+  .#{$ns}-table-column-name &.#{$ns}-editable-text {
     &::before {
       bottom: -$cell-padding-vertical - 1px;
     }
 
-    &.pt-editable-editing::before {
+    &.#{$ns}-editable-editing::before {
       bottom: -$cell-padding-vertical;
     }
   }
 }
 
-.pt-table-column-name-text .pt-table-editable-name input {
+.#{$ns}-table-column-name-text .#{$ns}-table-editable-name input {
   height: $large-cell-height; // fixed height for IE11
 }
 
-.pt-table-column-name {
+.#{$ns}-table-column-name {
   display: flex;
   flex-direction: column;
   text-align: left;
   font-size: $pt-font-size;
 }
 
-.pt-table-row-name {
+.#{$ns}-table-row-name {
   display: block;
   padding: 0 $pt-grid-size / 2;
   text-align: right;
   font-size: $pt-font-size-small;
 }
 
-.pt-table-header-content {
+.#{$ns}-table-header-content {
   white-space: normal;
   font-size: $pt-font-size;
 
@@ -377,29 +377,29 @@ $dark-selectable-header-menu-selected-hover-background:
   // stylelint-enable selector-class-pattern
 }
 
-.pt-table-column-name,
-.pt-table-row-name {
+.#{$ns}-table-column-name,
+.#{$ns}-table-row-name {
   transition: color $cell-transition-duration;
 }
 
-.pt-table-header.pt-loading {
+.#{$ns}-table-header.#{$ns}-loading {
   @include cell-content-align-vertical();
 
-  .pt-table-column-name,
-  .pt-table-row-name {
+  .#{$ns}-table-column-name,
+  .#{$ns}-table-row-name {
     flex: 1;
   }
 
-  .pt-table-column-name-text {
+  .#{$ns}-table-column-name-text {
     @include cell-content-align-vertical();
     padding: $pt-grid-size;
 
-    .pt-skeleton {
+    .#{$ns}-skeleton {
       height: $column-name-text-skeleton-height;
     }
   }
 
-  .pt-table-row-name {
+  .#{$ns}-table-row-name {
     @include cell-content-align-vertical();
   }
 }
diff --git a/packages/table/src/headers/headerCell.tsx b/packages/table/src/headers/headerCell.tsx
index 29698bdba9..2018bae288 100644
--- a/packages/table/src/headers/headerCell.tsx
+++ b/packages/table/src/headers/headerCell.tsx
@@ -27,7 +27,7 @@ export interface IHeaderCellProps extends IProps {
     /**
      * If `true`, the row/column `name` will be replaced with a fixed-height skeleton, and the
      * `resizeHandle` will not be rendered. If passing in additional children to this component, you
-     * will also want to conditionally apply the `.pt-skeleton` class where appropriate.
+     * will also want to conditionally apply `Classes.SKELETON` where appropriate.
      * @default false
      */
     loading?: boolean;
diff --git a/packages/table/src/interactions/_interactions.scss b/packages/table/src/interactions/_interactions.scss
index 30d6607bc1..41f873c8f3 100644
--- a/packages/table/src/interactions/_interactions.scss
+++ b/packages/table/src/interactions/_interactions.scss
@@ -22,48 +22,49 @@ $reorder-handle-width: 22px !default;
 }
 
 @mixin reorderable-header() {
-  &.pt-table-header-reorderable {
+  &.#{$ns}-table-header-reorderable {
     @include grabbable();
 
-    .pt-table-interaction-bar {
+    .#{$ns}-table-interaction-bar {
       @include grabbable();
     }
   }
 }
 
-.pt-table-selection-enabled {
-  &.pt-table-column-headers .pt-table-header {
+.#{$ns}-table-selection-enabled {
+  &.#{$ns}-table-column-headers .#{$ns}-table-header {
     @include reorderable-header();
     cursor: $select-column-cursor;
   }
 
-  &.pt-table-row-headers .pt-table-header {
+  &.#{$ns}-table-row-headers .#{$ns}-table-header {
     @include reorderable-header();
     cursor: $select-row-cursor;
   }
 
-  &.pt-table-menu {
+  &.#{$ns}-table-menu {
     cursor: $select-table-cursor;
   }
 
-  .pt-editable-text::before,
-  .pt-editable-content {
+  .#{$ns}-editable-text::before,
+  .#{$ns}-editable-content {
     cursor: $select-cell-cursor;
   }
 }
 
-.pt-table-column-header-cell.pt-table-has-reorder-handle:not(.pt-table-has-interaction-bar) {
-  .pt-table-column-name-text {
+// stylelint-disable-next-line max-line-length
+.#{$ns}-table-column-header-cell.#{$ns}-table-has-reorder-handle:not(.#{$ns}-table-has-interaction-bar) {
+  .#{$ns}-table-column-name-text {
     padding-left: $reorder-handle-width;
   }
 
   // keep the editable cell input flush with the cell's left border
-  .pt-table-editable-name::before {
+  .#{$ns}-table-editable-name::before {
     left: -$reorder-handle-width;
   }
 }
 
-.pt-table-reorder-handle-target {
+.#{$ns}-table-reorder-handle-target {
   @include grabbable();
   display: flex;
   align-items: center;
@@ -83,7 +84,7 @@ $reorder-handle-width: 22px !default;
     color: $pt-intent-primary;
   }
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $pt-dark-text-color-disabled;
 
     &:hover {
@@ -96,14 +97,14 @@ $reorder-handle-width: 22px !default;
   }
 }
 
-.pt-table-reorder-handle {
+.#{$ns}-table-reorder-handle {
   // center icon within handle
   display: flex;
 }
 
 // The wide, transparent, clickable target that contains the
 // thin resize handle bar
-.pt-table-resize-handle-target {
+.#{$ns}-table-resize-handle-target {
   position: absolute;
   opacity: 0;
   // Move the handle target above the following cell
@@ -113,11 +114,11 @@ $reorder-handle-width: 22px !default;
   user-select: none;
 
   &:hover,
-  &.pt-table-dragging {
+  &.#{$ns}-table-dragging {
     opacity: 1;
   }
 
-  &.pt-table-resize-vertical {
+  &.#{$ns}-table-resize-vertical {
     top: 0;
     right: 0;
     bottom: -$cell-border-width;
@@ -125,7 +126,7 @@ $reorder-handle-width: 22px !default;
     width: $resize-handle-target-width;
   }
 
-  &.pt-table-resize-horizontal {
+  &.#{$ns}-table-resize-horizontal {
     right: -$cell-border-width;
     bottom: 0;
     left: 0;
@@ -134,46 +135,46 @@ $reorder-handle-width: 22px !default;
   }
 }
 
-.pt-table-resize-handle {
+.#{$ns}-table-resize-handle {
   position: absolute;
   z-index: $pt-z-index-overlay;
   background-color: $resize-handle-color;
 
-  &.pt-table-dragging {
+  &.#{$ns}-table-dragging {
     background-color: $resize-handle-dragging-color;
   }
 }
 
-.pt-table-resize-vertical .pt-table-resize-handle {
+.#{$ns}-table-resize-vertical .#{$ns}-table-resize-handle {
   top: 0;
   bottom: 0;
   left: $resize-handle-padding;
   width: $resize-handle-width;
 }
 
-.pt-table-resize-horizontal .pt-table-resize-handle {
+.#{$ns}-table-resize-horizontal .#{$ns}-table-resize-handle {
   top: $resize-handle-padding;
   right: 0;
   left: 0;
   height: $resize-handle-width;
 }
 
-.pt-table-resize-guides .pt-table-horizontal-guide {
+.#{$ns}-table-resize-guides .#{$ns}-table-horizontal-guide {
   margin-top: $resize-handle-position-correction;
   background-color: $resize-handle-dragging-color;
   height: $resize-handle-width;
 
-  &.pt-table-horizontal-guide-flush-top {
+  &.#{$ns}-table-horizontal-guide-flush-top {
     margin-top: 0;
   }
 }
 
-.pt-table-resize-guides .pt-table-vertical-guide {
+.#{$ns}-table-resize-guides .#{$ns}-table-vertical-guide {
   margin-left: $resize-handle-position-correction;
   background-color: $resize-handle-dragging-color;
   width: $resize-handle-width;
 
-  &.pt-table-vertical-guide-flush-left {
+  &.#{$ns}-table-vertical-guide-flush-left {
     margin-left: 0;
   }
 }
diff --git a/packages/table/src/layers/_layers.scss b/packages/table/src/layers/_layers.scss
index e52ca05c35..cc5c332200 100644
--- a/packages/table/src/layers/_layers.scss
+++ b/packages/table/src/layers/_layers.scss
@@ -6,7 +6,7 @@
 $region-default-color: $gray3 !default;
 $region-selected-color: $pt-intent-primary !default;
 
-.pt-table-overlay-layer {
+.#{$ns}-table-overlay-layer {
   position: absolute;
   top: 0;
   right: 0;
@@ -17,56 +17,56 @@ $region-selected-color: $pt-intent-primary !default;
   pointer-events: none;
 }
 
-.pt-table-overlay {
+.#{$ns}-table-overlay {
   position: absolute;
 }
 
-.pt-table-region {
+.#{$ns}-table-region {
   border: $cell-border-width solid $region-default-color;
   background-color: rgba($region-default-color, 0.1);
 }
 
-.pt-table-selection-region {
+.#{$ns}-table-selection-region {
   border: $cell-border-width solid $region-selected-color;
   background-color: rgba($region-selected-color, 0.1);
 
-  .pt-table-column-headers & {
+  .#{$ns}-table-column-headers & {
     // Issue #120 - Don't actually overlay a color since it causes artifacts.
     background-color: transparent;
   }
 
-  .pt-table-row-headers & {
+  .#{$ns}-table-row-headers & {
     // Issue #120
     background-color: transparent;
   }
 }
 
-.pt-table-focus-region {
+.#{$ns}-table-focus-region {
   border: 2px solid $blue3;
 }
 
-.pt-table-column-headers .pt-table-region {
+.#{$ns}-table-column-headers .#{$ns}-table-region {
   border-bottom: none;
 }
 
-.pt-table-row-headers .pt-table-region {
+.#{$ns}-table-row-headers .#{$ns}-table-region {
   border-right: none;
 }
 
-.pt-table-vertical-guide {
+.#{$ns}-table-vertical-guide {
   top: 0;
   bottom: 0;
 }
 
-.pt-table-horizontal-guide {
+.#{$ns}-table-horizontal-guide {
   right: 0;
   left: 0;
 }
 
-.pt-table-reordering-cursor-overlay {
+.#{$ns}-table-reordering-cursor-overlay {
   cursor: grabbing;
 
-  .pt-table-reordering & {
+  .#{$ns}-table-reordering & {
     pointer-events: all;
   }
 }
diff --git a/packages/table/src/quadrants/_quadrants.scss b/packages/table/src/quadrants/_quadrants.scss
index 1e81f3b548..68498397b2 100644
--- a/packages/table/src/quadrants/_quadrants.scss
+++ b/packages/table/src/quadrants/_quadrants.scss
@@ -12,25 +12,25 @@ $table-quadrant-z-index-top-left: $table-quadrant-z-index-left + 1;
 // overflow within their parents; it should be large enough to hide a scrollbar of typical width.
 $table-quadrant-scroll-container-overflow: 20px;
 
-.pt-table-quadrant-stack {
+.#{$ns}-table-quadrant-stack {
   display: flex;
   position: relative;
   height: 100%;
 }
 
-.pt-table-quadrant {
+.#{$ns}-table-quadrant {
   position: absolute;
   top: 0;
   left: 0;
   background: $table-background-color;
   overflow: hidden;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background-color: $dark-table-background-color;
   }
 }
 
-.pt-table-quadrant-scroll-container {
+.#{$ns}-table-quadrant-scroll-container {
   @include force-hardware-acceleration();
   position: relative;
   top: 0;
@@ -43,20 +43,20 @@ $table-quadrant-scroll-container-overflow: 20px;
   // We disable x or y scrolling when we are displaying "ghost" cells that
   // overflow the body.
 
-  .pt-table-no-vertical-scroll & {
+  .#{$ns}-table-no-vertical-scroll & {
     overflow-y: hidden;
   }
 
-  .pt-table-no-horizontal-scroll & {
+  .#{$ns}-table-no-horizontal-scroll & {
     overflow-x: hidden;
   }
 }
 
-.pt-table-quadrant-body-container {
+.#{$ns}-table-quadrant-body-container {
   position: relative;
 }
 
-.pt-table-quadrant-main {
+.#{$ns}-table-quadrant-main {
   // use `relative` to ensure the table can size itself according to the MAIN quadrant's contents alone.
   // other quadrants should remain `absolute` to ensure they're taken out of the document flow.
   position: relative;
@@ -67,36 +67,36 @@ $table-quadrant-scroll-container-overflow: 20px;
   width: 100%;
   height: 100%;
 
-  .pt-table-quadrant-scroll-container {
+  .#{$ns}-table-quadrant-scroll-container {
     // the MAIN quadrant's scroll bars should be visible and should be flush with the right and
     // bottom edges of the table.
     width: 100%;
     height: 100%;
   }
 
-  .pt-table-cell-client {
+  .#{$ns}-table-cell-client {
     background: $white;
   }
 }
 
-.pt-table-quadrant-top {
+.#{$ns}-table-quadrant-top {
   right: 0;
   z-index: $table-quadrant-z-index-top;
 
-  .pt-table-quadrant-scroll-container {
+  .#{$ns}-table-quadrant-scroll-container {
     bottom: -$table-quadrant-scroll-container-overflow;
     overflow-y: hidden;
   }
 }
 
-.pt-table-quadrant-left {
+.#{$ns}-table-quadrant-left {
   bottom: 0;
   z-index: $table-quadrant-z-index-left;
 
   // animate width changes on scroll end
   transition: width $pt-transition-duration $pt-transition-ease;
 
-  .pt-table-quadrant-scroll-container {
+  .#{$ns}-table-quadrant-scroll-container {
     position: absolute;
     top: 0;
     right: -$table-quadrant-scroll-container-overflow;
@@ -108,18 +108,18 @@ $table-quadrant-scroll-container-overflow: 20px;
   // require at least 1px of width to show the left selection border if
   // necessary. this will be needed when selection includes cells in the first
   // column (#1444).
-  .pt-table-body-virtual-client {
+  .#{$ns}-table-body-virtual-client {
     min-width: 1px;
   }
 }
 
-.pt-table-quadrant-top-left {
+.#{$ns}-table-quadrant-top-left {
   z-index: $table-quadrant-z-index-top-left;
 
   // animate width changes on scroll end
   transition: width $pt-transition-duration $pt-transition-ease;
 
-  .pt-table-quadrant-scroll-container {
+  .#{$ns}-table-quadrant-scroll-container {
     right: -$table-quadrant-scroll-container-overflow;
     bottom: -$table-quadrant-scroll-container-overflow;
     overflow-x: hidden;
@@ -127,7 +127,7 @@ $table-quadrant-scroll-container-overflow: 20px;
   }
 
   // correct missing bottom-right corner in the menu-element (addresses #1444).
-  .pt-table-body-virtual-client {
+  .#{$ns}-table-body-virtual-client {
     min-width: 1px;
   }
 }
diff --git a/packages/table/src/table.scss b/packages/table/src/table.scss
index c6219a74c4..f2122ec2fc 100644
--- a/packages/table/src/table.scss
+++ b/packages/table/src/table.scss
@@ -21,7 +21,7 @@ $column-z-index: $body-z-index + 1 !default;
 $row-z-index: $column-z-index + 1 !default;
 $menu-z-index: $row-z-index + 1 !default;
 
-.pt-table-container {
+.#{$ns}-table-container {
   @include force-hardware-acceleration();
   display: flex;
   flex-direction: column;
@@ -32,41 +32,41 @@ $menu-z-index: $row-z-index + 1 !default;
   max-height: 100%;
   overflow: hidden;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background-color: $dark-table-background-color;
   }
 
-  .pt-loading {
+  .#{$ns}-loading {
     @include table-skeleton();
     color: transparent;
   }
 }
 
-.pt-table-top-container {
+.#{$ns}-table-top-container {
   display: flex;
   flex: 0 0 auto;
   min-height: 0%; // Must use % unit for IE11
 
-  .pt-table-container.pt-table-no-rows & {
+  .#{$ns}-table-container.#{$ns}-table-no-rows & {
     // edge case when there are no rows: keep bottom borders visible on menu
     // element and column headers
     padding-bottom: 1px;
   }
 }
 
-.pt-table-bottom-container {
+.#{$ns}-table-bottom-container {
   display: flex;
   flex: 1 1 auto;
   height: 100%; // IE 11
   min-height: 0%; // Must use % unit for IE11
   color: $cell-text-color;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     color: $dark-cell-text-color;
   }
 }
 
-.pt-table-menu {
+.#{$ns}-table-menu {
   flex: 0 0 auto;
   // Stay above the moving table-header
   position: relative;
@@ -74,12 +74,12 @@ $menu-z-index: $row-z-index + 1 !default;
 
   background-color: $header-background-color;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background-color: $dark-header-background-color;
   }
 }
 
-.pt-table-column-headers {
+.#{$ns}-table-column-headers {
   display: block;
 
   // allow absolute position for region overlays
@@ -90,13 +90,13 @@ $menu-z-index: $row-z-index + 1 !default;
   background-color: $header-background-color;
   color: $column-header-text-color;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background-color: $dark-header-background-color;
     color: $dark-column-header-text-color;
   }
 }
 
-.pt-table-row-headers {
+.#{$ns}-table-row-headers {
   flex: 0 0 auto;
   // allow absolute position for region overlay
   position: relative;
@@ -109,46 +109,46 @@ $menu-z-index: $row-z-index + 1 !default;
   // animate width changes on scroll end
   transition: width $pt-transition-duration $pt-transition-ease;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background-color: $dark-header-background-color;
     color: $dark-row-header-text-color;
   }
 }
 
-.pt-table-body {
+.#{$ns}-table-body {
   flex: 1 1 100%;
   position: relative;
   z-index: $body-z-index;
   overflow: scroll;
 }
 
-.pt-table-body-virtual-client {
+.#{$ns}-table-body-virtual-client {
   position: relative;
 }
 
-.pt-table-cell-client {
+.#{$ns}-table-cell-client {
   background: $cell-background-color;
 
-  .pt-dark & {
+  .#{$ns}-dark & {
     background: $dark-cell-background-color;
   }
 }
 
-.pt-table-tbody {
+.#{$ns}-table-tbody {
   display: block;
   white-space: nowrap;
 }
 
-.pt-table-cell {
+.#{$ns}-table-cell {
   display: inline-block;
 }
 
-.pt-table-no-layout {
+.#{$ns}-table-no-layout {
   display: inline-block;
   position: absolute;
 }
 
-.pt-table-scrollbar-measure {
+.#{$ns}-table-scrollbar-measure {
   position: absolute;
   top: -9999px;
   width: $pt-grid-size * 10;
diff --git a/packages/table/test/editableCellTests.tsx b/packages/table/test/editableCellTests.tsx
index 1349d21c96..f9f8d6b455 100644
--- a/packages/table/test/editableCellTests.tsx
+++ b/packages/table/test/editableCellTests.tsx
@@ -46,7 +46,7 @@ describe("<EditableCell>", () => {
 
         // start editing
         elem.setState({ isEditing: true, dirtyValue: "test-value-5000" });
-        const input = elem.find(`.${Classes.TABLE_EDITABLE_TEXT} input`);
+        const input = elem.find("input");
         expect(input.length).to.equal(1);
 
         // make changes
@@ -54,7 +54,7 @@ describe("<EditableCell>", () => {
         expect(onChange.called).to.be.true;
         expect(onCancel.called).to.be.false;
         expect(onConfirm.called).to.be.false;
-        expect(elem.find(`.${Classes.TABLE_EDITABLE_TEXT} .pt-editable-content`).text()).to.equal("new-text");
+        expect(elem.text()).to.equal("new-text");
 
         // confirm
         input.simulate("blur");
@@ -81,19 +81,19 @@ describe("<EditableCell>", () => {
         expect(onChange.called).to.be.true;
         expect(onCancel.called).to.be.false;
         expect(onConfirm.called).to.be.false;
-        expect(elem.find(`.${Classes.TABLE_EDITABLE_TEXT} .pt-editable-content`).text()).to.equal("new-text");
+        expect(elem.text()).to.equal("new-text");
 
         // confirm
         input.simulate("blur");
         expect(onCancel.called).to.be.false;
         expect(onConfirm.called).to.be.true;
         // cell shows user-entered text until re-render
-        expect(elem.find(`.${Classes.TABLE_EDITABLE_TEXT}`).text()).to.equal("new-text");
+        expect(elem.text()).to.equal("new-text");
 
         // set non-value prop, forces EditableCell update
         elem.setProps({ onChange: null });
         // value resets to prop
-        expect(elem.find(`.${Classes.TABLE_EDITABLE_TEXT}`).text()).to.equal("test-value-5000");
+        expect(elem.text()).to.equal("test-value-5000");
     });
 
     it("passes index prop to callbacks if index was provided", () => {
@@ -119,13 +119,11 @@ describe("<EditableCell>", () => {
         elem.setState({ isEditing: true, dirtyValue: "" });
 
         // change value
-        const input = elem.find(`.${Classes.TABLE_EDITABLE_TEXT} input`);
-        expect(input.length).to.equal(1);
-        input.simulate("change", { target: { value: CHANGED_VALUE } });
+        elem.find("input").simulate("change", { target: { value: CHANGED_VALUE } });
         expect(onChangeSpy.firstCall.args).to.deep.equal([CHANGED_VALUE, ROW_INDEX, COLUMN_INDEX]);
 
         // confirm
-        input.simulate("blur");
+        elem.find("input").simulate("blur");
         expect(onChangeSpy.firstCall.args).to.deep.equal([CHANGED_VALUE, ROW_INDEX, COLUMN_INDEX]);
     });
 });
diff --git a/packages/table/test/editableNameTests.tsx b/packages/table/test/editableNameTests.tsx
index 15f5cb9547..9a752fe299 100644
--- a/packages/table/test/editableNameTests.tsx
+++ b/packages/table/test/editableNameTests.tsx
@@ -9,13 +9,13 @@ import { mount } from "enzyme";
 import * as React from "react";
 import * as sinon from "sinon";
 
-import { Classes } from "@blueprintjs/core";
+import { EditableText } from "@blueprintjs/core";
 import { EditableName } from "../src/index";
 
 describe("<EditableName>", () => {
     it("renders", () => {
         const elem = mount(<EditableName name="test-name-5000" />);
-        expect(elem.find(`.${Classes.EDITABLE_TEXT_CONTENT}`).text()).to.equal("test-name-5000");
+        expect(elem.find(EditableText).text()).to.equal("test-name-5000");
     });
 
     it("edits", () => {
@@ -27,16 +27,18 @@ describe("<EditableName>", () => {
         );
 
         // focus
-        elem.find(`.${Classes.EDITABLE_TEXT}`).simulate("focus");
+        elem.find(EditableText).simulate("focus");
 
         // edit
         const input = elem
-            .find(`.${Classes.EDITABLE_TEXT_INPUT}`)
+            .find(EditableText)
+            .find("input")
             .simulate("change", { target: { value: "my-changed-name" } });
+
         expect(onChange.called).to.be.true;
         expect(onCancel.called).to.be.false;
         expect(onConfirm.called).to.be.false;
-        expect(elem.find(`.${Classes.EDITABLE_TEXT_CONTENT}`).text()).to.equal("my-changed-name");
+        expect(elem.find(EditableText).text()).to.equal("my-changed-name");
 
         // confirm
         input.simulate("blur");
diff --git a/packages/timezone/src/common/classes.ts b/packages/timezone/src/common/classes.ts
index 793da8bc46..a5aed93048 100644
--- a/packages/timezone/src/common/classes.ts
+++ b/packages/timezone/src/common/classes.ts
@@ -4,6 +4,9 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-// tslint:disable-next-line:blueprint-classes-constants
-export const TIMEZONE_PICKER = "pt-timezone-picker";
+import { Classes } from "@blueprintjs/core";
+
+const NS = Classes.getClassNamespace();
+
+export const TIMEZONE_PICKER = `${NS}-timezone-picker`;
 export const TIMEZONE_PICKER_POPOVER = `${TIMEZONE_PICKER}-popover`;
diff --git a/packages/timezone/src/components/timezone-picker/_timezone-picker.scss b/packages/timezone/src/components/timezone-picker/_timezone-picker.scss
index b26ee3d8e0..05472f1d92 100644
--- a/packages/timezone/src/components/timezone-picker/_timezone-picker.scss
+++ b/packages/timezone/src/components/timezone-picker/_timezone-picker.scss
@@ -5,6 +5,6 @@
 @import "~@blueprintjs/core/src/components/forms/common";
 @import "~@blueprintjs/core/src/components/tag/common";
 
-.pt-timezone-picker-popover {
+.#{$ns}-timezone-picker-popover {
   min-width: 370px;
 }
diff --git a/packages/timezone/src/components/timezone-picker/timezone-picker.md b/packages/timezone/src/components/timezone-picker/timezone-picker.md
index b762eeadb5..c188a3da00 100644
--- a/packages/timezone/src/components/timezone-picker/timezone-picker.md
+++ b/packages/timezone/src/components/timezone-picker/timezone-picker.md
@@ -24,8 +24,8 @@ using the most populous location for each offset.
 Moment Timezone uses a similar [heuristic for guessing](http://momentjs.com/timezone/docs/#/using-timezones/guessing-user-timezone/)
 the user's timezone.
 
-<div class="pt-callout pt-intent-warning pt-icon-warning-sign">
-    <h4 class="pt-callout-title">Local timezone detection</h4>
+<div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">
+    <h4 class="@ns-callout-title">Local timezone detection</h4>
     We detect the local timezone when the `showLocalTimezone` prop is enabled and cannot guarantee correctness in all browsers.
     In supported browsers, the [i18n API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions) is used.
     In other browsers, `Date` methods and a population heuristic are used.