diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
index 9a15526870..b66c3ba23d 100644
--- a/packages/core/src/common/classes.ts
+++ b/packages/core/src/common/classes.ts
@@ -4,26 +4,39 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+import { Elevation } from "../components/card/card";
 import { Alignment } from "./alignment";
 import { Intent } from "./intent";
 
 // modifiers
-export const DARK = "pt-dark";
 export const ACTIVE = "pt-active";
-export const MINIMAL = "pt-minimal";
-export const DISABLED = "pt-disabled";
-export const SMALL = "pt-small";
-export const LARGE = "pt-large";
-export const LOADING = "pt-loading";
-export const INTERACTIVE = "pt-interactive";
 export const ALIGN_LEFT = "pt-align-left";
 export const ALIGN_RIGHT = "pt-align-right";
-export const INLINE = "pt-inline";
+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 VERTICAL = "pt-vertical";
+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 ELEVATION_0 = elevationClass(Elevation.ZERO);
+export const ELEVATION_1 = elevationClass(Elevation.ONE);
+export const ELEVATION_2 = elevationClass(Elevation.TWO);
+export const ELEVATION_3 = elevationClass(Elevation.THREE);
+export const ELEVATION_4 = elevationClass(Elevation.FOUR);
+
+export const INTENT_PRIMARY = intentClass(Intent.PRIMARY);
+export const INTENT_SUCCESS = intentClass(Intent.SUCCESS);
+export const INTENT_WARNING = intentClass(Intent.WARNING);
+export const INTENT_DANGER = intentClass(Intent.DANGER);
 
 // text utilities
 export const TEXT_MUTED = "pt-text-muted";
@@ -61,6 +74,7 @@ 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";
 
@@ -81,12 +95,12 @@ 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 ELEVATION_0 = "pt-elevation-0";
-export const ELEVATION_1 = "pt-elevation-1";
-export const ELEVATION_2 = "pt-elevation-2";
-export const ELEVATION_3 = "pt-elevation-3";
-export const ELEVATION_4 = "pt-elevation-4";
+export const FLEX_EXPANDER = "pt-flex-expander";
 
 export const HTML_TABLE = "pt-html-table";
 export const HTML_TABLE_STRIPED = "pt-html-table-striped";
@@ -94,6 +108,7 @@ 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";
@@ -103,10 +118,15 @@ export const FILE_UPLOAD_INPUT = "pt-file-upload-input";
 
 export const INPUT_GHOST = "pt-input-ghost";
 
-export const INTENT_PRIMARY = "pt-intent-primary";
-export const INTENT_SUCCESS = "pt-intent-success";
-export const INTENT_WARNING = "pt-intent-warning";
-export const INTENT_DANGER = "pt-intent-danger";
+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";
@@ -145,6 +165,7 @@ 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";
@@ -164,14 +185,21 @@ export const SELECT = "pt-select";
 export const SKELETON = "pt-skeleton";
 
 export const SLIDER = "pt-slider";
-export const SLIDER_HANDLE = `${SLIDER}-handle`;
-export const SLIDER_LABEL = `${SLIDER}-label`;
+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";
@@ -189,6 +217,7 @@ 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";
@@ -221,6 +250,13 @@ export function alignmentClass(alignment: Alignment) {
     }
 }
 
+export function elevationClass(elevation: Elevation) {
+    if (elevation == null) {
+        return undefined;
+    }
+    return `pt-elevation-${elevation}`;
+}
+
 /** Return CSS class for icon, whether or not 'pt-icon-' prefix is included */
 export function iconClass(iconName?: string) {
     if (iconName == null) {
diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
index 3ee88922d4..5b0750ff73 100644
--- a/packages/core/src/components/card/card.tsx
+++ b/packages/core/src/components/card/card.tsx
@@ -45,14 +45,6 @@ export enum Elevation {
     FOUR = 4,
 }
 
-const ELEVATION_CLASSES = [
-    Classes.ELEVATION_0,
-    Classes.ELEVATION_1,
-    Classes.ELEVATION_2,
-    Classes.ELEVATION_3,
-    Classes.ELEVATION_4,
-];
-
 export class Card extends React.PureComponent<ICardProps, {}> {
     public static displayName = "Blueprint2.Card";
     public static defaultProps: ICardProps = {
@@ -65,7 +57,7 @@ export class Card extends React.PureComponent<ICardProps, {}> {
         const classes = classNames(
             Classes.CARD,
             { [Classes.INTERACTIVE]: interactive },
-            ELEVATION_CLASSES[elevation],
+            Classes.elevationClass(elevation),
             className,
         );
         return <div className={classes} {...htmlProps} />;
diff --git a/packages/core/src/components/collapse/collapse.tsx b/packages/core/src/components/collapse/collapse.tsx
index 8e02e96e71..bdddfd9bf6 100644
--- a/packages/core/src/components/collapse/collapse.tsx
+++ b/packages/core/src/components/collapse/collapse.tsx
@@ -150,7 +150,7 @@ export class Collapse extends AbstractPureComponent<ICollapseProps, ICollapseSta
                 style: containerStyle,
             },
             <div
-                className="pt-collapse-body"
+                className={Classes.COLLAPSE_BODY}
                 ref={this.contentsRefHandler}
                 style={contentsStyle}
                 aria-hidden={!isContentVisible && this.props.keepChildrenMounted}
diff --git a/packages/core/src/components/editable-text/editableText.tsx b/packages/core/src/components/editable-text/editableText.tsx
index 86728bbfd7..9b1045b9f1 100644
--- a/packages/core/src/components/editable-text/editableText.tsx
+++ b/packages/core/src/components/editable-text/editableText.tsx
@@ -156,9 +156,9 @@ export class EditableText extends AbstractPureComponent<IEditableTextProps, IEdi
             Classes.intentClass(this.props.intent),
             {
                 [Classes.DISABLED]: disabled,
-                "pt-editable-editing": this.state.isEditing,
-                "pt-editable-placeholder": !hasValue,
-                "pt-multiline": multiline,
+                [Classes.EDITABLE_TEXT_EDITING]: this.state.isEditing,
+                [Classes.EDITABLE_TEXT_PLACEHOLDER]: !hasValue,
+                [Classes.MULTILINE]: multiline,
             },
             this.props.className,
         );
@@ -183,7 +183,7 @@ export class EditableText extends AbstractPureComponent<IEditableTextProps, IEdi
         return (
             <div className={classes} onFocus={this.handleFocus} tabIndex={tabIndex}>
                 {this.maybeRenderInput(value)}
-                <span className="pt-editable-content" ref={this.refHandlers.content} style={contentStyle}>
+                <span className={Classes.EDITABLE_TEXT_CONTENT} ref={this.refHandlers.content} style={contentStyle}>
                     {hasValue ? value : this.props.placeholder}
                 </span>
             </div>
@@ -283,7 +283,7 @@ export class EditableText extends AbstractPureComponent<IEditableTextProps, IEdi
             return undefined;
         }
         const props: React.HTMLProps<HTMLInputElement | HTMLTextAreaElement> = {
-            className: "pt-editable-input",
+            className: Classes.EDITABLE_TEXT_INPUT,
             maxLength,
             onBlur: this.toggleEditing,
             onChange: this.handleTextChange,
diff --git a/packages/core/src/components/forms/inputGroup.tsx b/packages/core/src/components/forms/inputGroup.tsx
index a9f5c6214d..28d1231c5e 100644
--- a/packages/core/src/components/forms/inputGroup.tsx
+++ b/packages/core/src/components/forms/inputGroup.tsx
@@ -111,7 +111,7 @@ export class InputGroup extends React.PureComponent<IInputGroupProps & HTMLInput
             return undefined;
         }
         return (
-            <span className="pt-input-action" ref={this.refHandlers.rightElement}>
+            <span className={Classes.INPUT_ACTION} ref={this.refHandlers.rightElement}>
                 {rightElement}
             </span>
         );
diff --git a/packages/core/src/components/hotkeys/hotkey.tsx b/packages/core/src/components/hotkeys/hotkey.tsx
index b9d6bea582..619514ea08 100644
--- a/packages/core/src/components/hotkeys/hotkey.tsx
+++ b/packages/core/src/components/hotkeys/hotkey.tsx
@@ -7,7 +7,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { AbstractPureComponent, IProps } from "../../common";
+import { AbstractPureComponent, Classes, IProps } from "../../common";
 import { KeyCombo } from "./keyCombo";
 
 export interface IHotkeyProps extends IProps {
@@ -85,10 +85,10 @@ export class Hotkey extends AbstractPureComponent<IHotkeyProps, {}> {
     public render() {
         const { label, className, ...spreadableProps } = this.props;
 
-        const rootClasses = classNames("pt-hotkey", className);
+        const rootClasses = classNames(Classes.HOTKEY, className);
         return (
             <div className={rootClasses}>
-                <div className="pt-hotkey-label">{label}</div>
+                <div className={Classes.HOTKEY_LABEL}>{label}</div>
                 <KeyCombo {...spreadableProps} />
             </div>
         );
diff --git a/packages/core/src/components/hotkeys/hotkeys.tsx b/packages/core/src/components/hotkeys/hotkeys.tsx
index 69bd444d49..08efd4134d 100644
--- a/packages/core/src/components/hotkeys/hotkeys.tsx
+++ b/packages/core/src/components/hotkeys/hotkeys.tsx
@@ -7,7 +7,7 @@
 import * as React from "react";
 
 import classNames from "classnames";
-import { AbstractPureComponent, IProps } from "../../common";
+import { AbstractPureComponent, Classes, IProps } from "../../common";
 import { HOTKEYS_HOTKEY_CHILDREN } from "../../common/errors";
 import { isElementOfType } from "../../common/utils";
 import { Hotkey, IHotkeyProps } from "./hotkey";
@@ -58,7 +58,7 @@ export class Hotkeys extends AbstractPureComponent<IHotkeysProps, {}> {
             const groupLabel = hotkey.group;
             if (groupLabel !== lastGroup) {
                 elems.push(
-                    <h4 key={`group-${elems.length}`} className="pt-hotkey-group">
+                    <h4 key={`group-${elems.length}`} className={Classes.HOTKEY_GROUP}>
                         {groupLabel}
                     </h4>,
                 );
@@ -66,7 +66,7 @@ export class Hotkeys extends AbstractPureComponent<IHotkeysProps, {}> {
             }
             elems.push(<Hotkey key={elems.length} {...hotkey} />);
         }
-        const rootClasses = classNames("pt-hotkey-column", this.props.className);
+        const rootClasses = classNames(Classes.HOTKEY_COLUMN, this.props.className);
         return <div className={rootClasses}>{elems}</div>;
     }
 
diff --git a/packages/core/src/components/hotkeys/hotkeysDialog.tsx b/packages/core/src/components/hotkeys/hotkeysDialog.tsx
index 7b0fe43c88..b287dbf0ea 100644
--- a/packages/core/src/components/hotkeys/hotkeysDialog.tsx
+++ b/packages/core/src/components/hotkeys/hotkeysDialog.tsx
@@ -101,7 +101,7 @@ class HotkeysDialog {
         return (
             <Dialog
                 {...this.componentProps}
-                className={classNames(this.componentProps.className, "pt-hotkey-dialog")}
+                className={classNames(Classes.HOTKEY_DIALOG, this.componentProps.className)}
                 isOpen={this.isDialogShowing}
                 onClose={this.hide}
             >
diff --git a/packages/core/src/components/hotkeys/keyCombo.tsx b/packages/core/src/components/hotkeys/keyCombo.tsx
index 698987c957..67cf83eed5 100644
--- a/packages/core/src/components/hotkeys/keyCombo.tsx
+++ b/packages/core/src/components/hotkeys/keyCombo.tsx
@@ -6,7 +6,7 @@
 
 import classNames from "classnames";
 import * as React from "react";
-import { IProps } from "../../common";
+import { Classes, IProps } from "../../common";
 import { Icon, IconName } from "../icon/icon";
 import { normalizeKeyCombo } from "./hotkeyParser";
 
@@ -43,18 +43,18 @@ export class KeyCombo extends React.Component<IKeyComboProps, {}> {
         const keys = normalizeKeyCombo(combo)
             .map(key => (key.length === 1 ? key.toUpperCase() : key))
             .map(minimal ? this.renderMinimalKey : this.renderKey);
-        return <span className={classNames("pt-key-combo", className)}>{keys}</span>;
+        return <span className={classNames(Classes.KEY_COMBO, className)}>{keys}</span>;
     }
 
     private renderKey = (key: string, index: number) => {
         const icon = KeyIcons[key];
         const reactKey = `key-${index}`;
         return icon == null ? (
-            <kbd className="pt-key" key={reactKey}>
+            <kbd className={Classes.KEY} key={reactKey}>
                 {key}
             </kbd>
         ) : (
-            <kbd className="pt-key pt-modifier-key" key={reactKey}>
+            <kbd className={classNames(Classes.KEY, Classes.MODIFIER_KEY)} key={reactKey}>
                 <Icon icon={icon} /> {key}
             </kbd>
         );
diff --git a/packages/core/src/components/progress/progressBar.tsx b/packages/core/src/components/progress/progressBar.tsx
index 98bef4f61b..ea8cf52aa1 100644
--- a/packages/core/src/components/progress/progressBar.tsx
+++ b/packages/core/src/components/progress/progressBar.tsx
@@ -48,7 +48,7 @@ export class ProgressBar extends React.PureComponent<IProgressBarProps, {}> {
 
         return (
             <div className={classes}>
-                <div className="pt-progress-meter" style={{ width }} />
+                <div className={Classes.PROGRESS_METER} style={{ width }} />
             </div>
         );
     }
diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
index a6810e1cd5..d357c18fc7 100644
--- a/packages/core/src/components/spinner/spinner.tsx
+++ b/packages/core/src/components/spinner/spinner.tsx
@@ -45,7 +45,7 @@ export class Spinner extends React.PureComponent<ISpinnerProps, {}> {
             {
                 [Classes.LARGE]: large,
                 [Classes.SMALL]: small,
-                "pt-no-spin": value != null,
+                [Classes.SPINNER_NO_SPIN]: value != null,
             },
             className,
         );
@@ -59,7 +59,7 @@ export class Spinner extends React.PureComponent<ISpinnerProps, {}> {
 
         // HACKHACK to squash error regarding React.SVGProps missing prop pathLength
         const svgPathAttributes: React.DOMAttributes<SVGPathElement> = {
-            className: "pt-spinner-head",
+            className: Classes.SPINNER_HEAD,
             d: SPINNER_TRACK,
             pathLength: PATH_LENGTH,
             style,
@@ -68,7 +68,7 @@ export class Spinner extends React.PureComponent<ISpinnerProps, {}> {
         return this.renderContainer(
             classes,
             <svg viewBox={classes.indexOf(Classes.SMALL) >= 0 ? "-15 -15 130 130" : "0 0 100 100"}>
-                <path className="pt-spinner-track" d={SPINNER_TRACK} />
+                <path className={Classes.SPINNER_TRACK} d={SPINNER_TRACK} />
                 <path {...svgPathAttributes} />
             </svg>,
         );
@@ -78,7 +78,7 @@ export class Spinner extends React.PureComponent<ISpinnerProps, {}> {
     protected renderContainer(classes: string, content: JSX.Element) {
         return (
             <div className={classes}>
-                <div className="pt-spinner-svg-container">{content}</div>
+                <div className={Classes.SPINNER_SVG_CONTAINER}>{content}</div>
             </div>
         );
     }
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index db5110e981..c4cc3c4e2c 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -16,7 +16,7 @@ import * as Utils from "../../common/utils";
 import { ITabProps, Tab, TabId } from "./tab";
 import { generateTabPanelId, generateTabTitleId, TabTitle } from "./tabTitle";
 
-export const Expander: React.SFC<{}> = () => <div className="pt-flex-expander" />;
+export const Expander: React.SFC<{}> = () => <div className={Classes.FLEX_EXPANDER} />;
 
 type TabElement = React.ReactElement<ITabProps & { children: React.ReactNode }>;
 
@@ -122,8 +122,8 @@ export class Tabs extends AbstractPureComponent<ITabsProps, ITabsState> {
             .map(this.renderTabPanel);
 
         const tabIndicator = this.props.animate ? (
-            <div className="pt-tab-indicator-wrapper" style={indicatorWrapperStyle}>
-                <div className="pt-tab-indicator" />
+            <div className={Classes.TAB_INDICATOR_WRAPPER} style={indicatorWrapperStyle}>
+                <div className={Classes.TAB_INDICATOR} />
             </div>
         ) : (
             undefined
diff --git a/packages/core/src/components/tag/tag.tsx b/packages/core/src/components/tag/tag.tsx
index b16262af87..66c59b60bc 100644
--- a/packages/core/src/components/tag/tag.tsx
+++ b/packages/core/src/components/tag/tag.tsx
@@ -13,7 +13,7 @@ import { Icon } from "../icon/icon";
 export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes<HTMLSpanElement> {
     /**
      * If set to `true`, the tag 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/tree/treeNode.tsx b/packages/core/src/components/tree/treeNode.tsx
index a333a293d8..ff46a5015a 100644
--- a/packages/core/src/components/tree/treeNode.tsx
+++ b/packages/core/src/components/tree/treeNode.tsx
@@ -101,7 +101,10 @@ export class TreeNode<T = {}> extends React.Component<ITreeNodeProps<T>, {}> {
             className,
         );
 
-        const contentClasses = classNames(Classes.TREE_NODE_CONTENT, `pt-tree-node-content-${this.props.depth}`);
+        const contentClasses = classNames(
+            Classes.TREE_NODE_CONTENT,
+            `${Classes.TREE_NODE_CONTENT}-${this.props.depth}`,
+        );
 
         return (
             <li className={classes}>
diff --git a/packages/core/test/alert/alertTests.tsx b/packages/core/test/alert/alertTests.tsx
index 2b4c995610..5a3bc545bb 100644
--- a/packages/core/test/alert/alertTests.tsx
+++ b/packages/core/test/alert/alertTests.tsx
@@ -136,7 +136,7 @@ describe("<Alert>", () => {
                     <p>There is no going back.</p>
                 </Alert>,
             );
-            const overlay = alert.find(".pt-overlay").hostNodes();
+            const overlay = alert.find("." + Classes.OVERLAY).hostNodes();
 
             overlay.simulate("keydown", { which: Keys.ESCAPE });
             assert.isTrue(onCancel.notCalled);
@@ -155,7 +155,7 @@ describe("<Alert>", () => {
                     <p>There is no going back.</p>
                 </Alert>,
             );
-            const backdrop = alert.find(".pt-overlay-backdrop").hostNodes();
+            const backdrop = alert.find("." + Classes.OVERLAY_BACKDROP).hostNodes();
 
             backdrop.simulate("mousedown");
             assert.isTrue(onCancel.notCalled);
diff --git a/packages/core/test/controls/controlsTests.tsx b/packages/core/test/controls/controlsTests.tsx
index d01a03d49a..74bcf17991 100644
--- a/packages/core/test/controls/controlsTests.tsx
+++ b/packages/core/test/controls/controlsTests.tsx
@@ -8,13 +8,13 @@ import { assert } from "chai";
 import { mount } from "enzyme";
 import * as React from "react";
 
-import { Icon } from "../../src";
+import { Classes, Icon } from "../../src";
 import { Checkbox, IControlProps, Radio, Switch } from "../../src/components/forms/controls";
 
 type ControlType = typeof Checkbox | typeof Radio | typeof Switch;
 
 describe("Controls:", () => {
-    controlsTests(Checkbox, "checkbox", "pt-checkbox", () => {
+    controlsTests(Checkbox, "checkbox", Classes.CHECKBOX, () => {
         describe("indeterminate", () => {
             let input: HTMLInputElement;
             const handleInputRef = (ref: HTMLInputElement) => (input = ref);
@@ -53,15 +53,15 @@ describe("Controls:", () => {
         });
     });
 
-    controlsTests(Switch, "checkbox", "pt-switch");
+    controlsTests(Switch, "checkbox", Classes.SWITCH);
 
-    controlsTests(Radio, "radio", "pt-radio");
+    controlsTests(Radio, "radio", Classes.RADIO);
 
     function controlsTests(classType: ControlType, propType: string, className: string, moreTests?: () => void) {
         describe(`<${classType.displayName.split(".")[1]}>`, () => {
-            it(`renders .pt-control.${className}`, () => {
+            it(`renders .${Classes.CONTROL}.${className}`, () => {
                 const control = mountControl();
-                assert.isTrue(control.find(".pt-control").hasClass(className));
+                assert.isTrue(control.find(`.${Classes.CONTROL}`).hasClass(className));
             });
 
             it(`renders input[type=${propType}]`, () => {
diff --git a/packages/core/test/controls/inputGroupTests.tsx b/packages/core/test/controls/inputGroupTests.tsx
index fbad934c1c..b2eef39da7 100644
--- a/packages/core/test/controls/inputGroupTests.tsx
+++ b/packages/core/test/controls/inputGroupTests.tsx
@@ -9,13 +9,13 @@ import { mount } from "enzyme";
 import * as React from "react";
 import { spy } from "sinon";
 
-import { Icon, InputGroup } from "../../src/index";
+import { Classes, Icon, InputGroup } from "../../src/index";
 
 describe("<InputGroup>", () => {
     it("renders left icon before input", () => {
         const input = mount(<InputGroup leftIcon="star" />).children();
         assert.isTrue(input.childAt(0).is(Icon));
-        assert.isTrue(input.childAt(1).hasClass("pt-input"));
+        assert.isTrue(input.childAt(1).hasClass(Classes.INPUT));
     });
 
     it("supports custom style", () => {
@@ -27,11 +27,11 @@ describe("<InputGroup>", () => {
         assert.equal(inputElement.style.background, "yellow");
     });
 
-    it("renders right element inside .pt-input-action after input", () => {
+    it(`renders right element inside .${Classes.INPUT_ACTION} after input`, () => {
         const action = mount(<InputGroup rightElement={<address />} />)
             .children()
             .childAt(2);
-        assert.isTrue(action.hasClass("pt-input-action"));
+        assert.isTrue(action.hasClass(Classes.INPUT_ACTION));
         assert.lengthOf(action.find("address"), 1);
     });
 
diff --git a/packages/core/test/forms/labelTests.tsx b/packages/core/test/forms/labelTests.tsx
index 6880601505..c780893e91 100644
--- a/packages/core/test/forms/labelTests.tsx
+++ b/packages/core/test/forms/labelTests.tsx
@@ -7,13 +7,13 @@
 import { assert } from "chai";
 import { shallow } from "enzyme";
 import * as React from "react";
-import { Label } from "../../src/index";
+import { Classes, Label } from "../../src/index";
 
 describe("<Label>", () => {
     it("renders a space between text and helperText", () => {
         const wrapper = shallow(
             <Label text="Username" helperText="(blah blah)">
-                <input autoFocus={true} className="pt-input" type="text" />
+                <input autoFocus={true} className={Classes.INPUT} type="text" />
             </Label>,
         );
         assert.strictEqual(wrapper.text(), "Username (blah blah)");
@@ -22,7 +22,7 @@ describe("<Label>", () => {
     it("does not put an extra space after text when helperText is not defined", () => {
         const wrapper = shallow(
             <Label text="Username">
-                <input autoFocus={true} className="pt-input" type="text" />
+                <input autoFocus={true} className={Classes.INPUT} type="text" />
             </Label>,
         );
         assert.strictEqual(wrapper.text(), "Username");
diff --git a/packages/core/test/hotkeys/hotkeysTests.tsx b/packages/core/test/hotkeys/hotkeysTests.tsx
index aa49009e3f..1c3f615a84 100644
--- a/packages/core/test/hotkeys/hotkeysTests.tsx
+++ b/packages/core/test/hotkeys/hotkeysTests.tsx
@@ -17,6 +17,7 @@ import { dispatchTestKeyboardEvent, expectPropValidationError } from "@blueprint
 import { HOTKEYS_HOTKEY_CHILDREN } from "../../src/common/errors";
 import { normalizeKeyCombo } from "../../src/components/hotkeys/hotkeyParser";
 import {
+    Classes,
     comboMatches,
     getKeyCombo,
     getKeyComboString,
@@ -147,8 +148,9 @@ describe("Hotkeys", () => {
 
             // wait for the dialog to animate in
             setTimeout(() => {
-                expect(document.querySelector(".pt-hotkey-column")).to.exist;
-                expect(document.querySelector(".pt-overlay-open").classList.contains("pt-overlay-inline")).to.be.false;
+                expect(document.querySelector("." + Classes.HOTKEY_COLUMN)).to.exist;
+                expect(document.querySelector("." + Classes.OVERLAY_OPEN).classList.contains(Classes.OVERLAY_INLINE)).to
+                    .be.false;
                 hideHotkeysDialog();
                 comp.detach();
                 attachTo.remove();
diff --git a/packages/core/test/menu/menuItemTests.tsx b/packages/core/test/menu/menuItemTests.tsx
index ab56427e90..e96d1f3792 100644
--- a/packages/core/test/menu/menuItemTests.tsx
+++ b/packages/core/test/menu/menuItemTests.tsx
@@ -137,7 +137,7 @@ describe("MenuItem", () => {
         assertOverflow(false);
     });
 
-    it("label and labelElement are rendered in .pt-menu-item-label", () => {
+    it(`label and labelElement are rendered in .${Classes.MENU_ITEM_LABEL}`, () => {
         const wrapper = shallow(
             <MenuItem text="text" label="label text" labelElement={<article>label element</article>} />,
         );
diff --git a/packages/core/test/overlay/overlayTests.tsx b/packages/core/test/overlay/overlayTests.tsx
index 0a221c874d..1cadd5a8dc 100644
--- a/packages/core/test/overlay/overlayTests.tsx
+++ b/packages/core/test/overlay/overlayTests.tsx
@@ -235,7 +235,7 @@ describe("<Overlay>", () => {
                 </Overlay>,
             );
             assertFocus(() => {
-                const backdrops = Array.from(document.querySelectorAll(".pt-overlay-backdrop"));
+                const backdrops = Array.from(document.querySelectorAll("." + Classes.OVERLAY_BACKDROP));
                 assert.include(backdrops, document.activeElement);
             }, done);
         });
diff --git a/packages/core/test/popover/popoverTests.tsx b/packages/core/test/popover/popoverTests.tsx
index ed8f0aaad6..1a6a76c745 100644
--- a/packages/core/test/popover/popoverTests.tsx
+++ b/packages/core/test/popover/popoverTests.tsx
@@ -462,7 +462,10 @@ describe("<Popover>", () => {
             });
 
             it("is invoked with `false` when clicking .pt-popover-dismiss", () => {
-                renderPopover({ isOpen: true, onInteraction }, <button className="pt-popover-dismiss">Dismiss</button>)
+                renderPopover(
+                    { isOpen: true, onInteraction },
+                    <button className={Classes.POPOVER_DISMISS}>Dismiss</button>,
+                )
                     .findClass(Classes.POPOVER_DISMISS)
                     .simulate("click");
                 assert.isTrue(onInteraction.calledOnce);
@@ -538,7 +541,7 @@ describe("<Popover>", () => {
                     interactionKind: PopoverInteractionKind.CLICK_TARGET_ONLY,
                     usePortal: true,
                 },
-                <button className="pt-popover-dismiss">Dismiss</button>,
+                <button className={Classes.POPOVER_DISMISS}>Dismiss</button>,
             );
 
             wrapper.simulateTarget("click").assertIsOpen();
@@ -553,7 +556,7 @@ describe("<Popover>", () => {
                     interactionKind: PopoverInteractionKind.CLICK_TARGET_ONLY,
                     usePortal: false,
                 },
-                <button className="pt-popover-dismiss">Dismiss</button>,
+                <button className={Classes.POPOVER_DISMISS}>Dismiss</button>,
             );
 
             wrapper.simulateTarget("click").assertIsOpen();
diff --git a/packages/core/test/progress/progressBarTests.tsx b/packages/core/test/progress/progressBarTests.tsx
index 6429d43101..e317acb58d 100644
--- a/packages/core/test/progress/progressBarTests.tsx
+++ b/packages/core/test/progress/progressBarTests.tsx
@@ -8,20 +8,20 @@ import { assert } from "chai";
 import { mount } from "enzyme";
 import * as React from "react";
 
-import { ProgressBar } from "../../src/index";
+import { Classes, ProgressBar } from "../../src/index";
 
 describe("ProgressBar", () => {
     it("renders a .pt-progress-bar", () => {
-        assert.lengthOf(mount(<ProgressBar />).find(".pt-progress-bar"), 1);
+        assert.lengthOf(mount(<ProgressBar />).find("." + Classes.PROGRESS_BAR), 1);
     });
 
     it("does not set width by default", () => {
         const root = mount(<ProgressBar />);
-        assert.isNull(root.find(".pt-progress-meter").prop("style").width);
+        assert.isNull(root.find("." + Classes.PROGRESS_METER).prop("style").width);
     });
 
     it("value sets width percentage", () => {
         const root = mount(<ProgressBar value={0.35} />);
-        assert.strictEqual(root.find(".pt-progress-meter").prop("style").width, "35%");
+        assert.strictEqual(root.find("." + Classes.PROGRESS_METER).prop("style").width, "35%");
     });
 });
diff --git a/packages/core/test/slider/sliderTests.tsx b/packages/core/test/slider/sliderTests.tsx
index f362df24b3..8caaf67ad0 100644
--- a/packages/core/test/slider/sliderTests.tsx
+++ b/packages/core/test/slider/sliderTests.tsx
@@ -191,7 +191,7 @@ describe("<Slider>", () => {
 
     it("fill does not exceed bounds if initialValue outside bounds of min/max", () => {
         const style = renderSlider(<Slider initialValue={-10} min={0} value={5} />)
-            .find(".pt-slider-progress")
+            .find("." + Classes.SLIDER_PROGRESS)
             .prop("style") as React.CSSProperties;
         assert.strictEqual(style.left, 0);
     });
diff --git a/packages/core/test/spinner/spinnerTests.tsx b/packages/core/test/spinner/spinnerTests.tsx
index 01dbe6c3ed..4445ac1b8c 100644
--- a/packages/core/test/spinner/spinnerTests.tsx
+++ b/packages/core/test/spinner/spinnerTests.tsx
@@ -11,7 +11,7 @@ import * as React from "react";
 import { Classes, Spinner, SVGSpinner } from "../../src/index";
 
 describe("Spinner", () => {
-    it("renders a .pt-spinner and two paths", () => {
+    it("renders a spinner and two paths", () => {
         const root = mount(<Spinner />);
         assert.lengthOf(root.find(`.${Classes.SPINNER}`), 1);
         assert.lengthOf(root.find("path"), 2);
@@ -19,14 +19,14 @@ describe("Spinner", () => {
 
     it("defaults to spinning quarter circle", () => {
         const root = mount(<Spinner />);
-        assert.isFalse(root.find(`.${Classes.SPINNER}`).hasClass("pt-no-spin"));
+        assert.isFalse(root.find(`.${Classes.SPINNER}`).hasClass(Classes.SPINNER_NO_SPIN));
         assertStrokePercent(root, 0.25);
     });
 
     it("value sets stroke-dashoffset", () => {
         // dash offset = X * (1 - value)
         const root = mount(<Spinner value={0.35} />);
-        assert.isTrue(root.find(`.${Classes.SPINNER}`).hasClass("pt-no-spin"), "missing class pt-no-spin");
+        assert.isTrue(root.find(`.${Classes.SPINNER}`).hasClass(Classes.SPINNER_NO_SPIN), "missing class pt-no-spin");
         assertStrokePercent(root, 0.35);
     });
 
@@ -42,7 +42,7 @@ describe("Spinner", () => {
     });
 
     function assertStrokePercent(wrapper: ReactWrapper<any, {}>, percent: number) {
-        const style = wrapper.find(".pt-spinner-head").prop("style");
+        const style = wrapper.find(`.${Classes.SPINNER_HEAD}`).prop("style");
         const pathLength = parseInt(style.strokeDasharray.split(" ")[0], 10);
         assert.strictEqual(style.strokeDashoffset, pathLength * (1 - percent));
     }
diff --git a/packages/core/test/tabs/tabsTests.tsx b/packages/core/test/tabs/tabsTests.tsx
index 9447b5a209..32c76ac359 100644
--- a/packages/core/test/tabs/tabsTests.tsx
+++ b/packages/core/test/tabs/tabsTests.tsx
@@ -79,12 +79,12 @@ describe("<Tabs>", () => {
         }
     });
 
-    it("renders without `pt-large` when by default", () => {
+    it(`renders without ${Classes.LARGE} when by default`, () => {
         const wrapper = mount(<Tabs id={ID}>{getTabsContents()}</Tabs>);
         assert.lengthOf(wrapper.find(`.${Classes.TAB_LIST}.${Classes.LARGE}`), 0);
     });
 
-    it("renders using `pt-large` when large={true}", () => {
+    it(`renders using ${Classes.LARGE} when large={true}`, () => {
         const wrapper = mount(
             <Tabs id={ID} large={true}>
                 {getTabsContents()}
@@ -202,7 +202,7 @@ describe("<Tabs>", () => {
             </Tabs>,
         );
         assert.isUndefined(wrapper.state().indicatorWrapperStyle);
-        assert.equal(wrapper.find(".pt-tab-indicator").length, 0);
+        assert.equal(wrapper.find("." + Classes.TAB_INDICATOR).length, 0);
     });
 
     it("removes indicator element when selected tab is removed", () => {
diff --git a/packages/core/test/tag-input/tagInputTests.tsx b/packages/core/test/tag-input/tagInputTests.tsx
index d05890b762..0fd87abe9a 100644
--- a/packages/core/test/tag-input/tagInputTests.tsx
+++ b/packages/core/test/tag-input/tagInputTests.tsx
@@ -413,7 +413,7 @@ describe("<TagInput>", () => {
         assert.isTrue(
             // the wrapper is a React element; the first child is rendered <div>.
             wrapper.childAt(0).hasClass(Classes.DISABLED),
-            `.${Classes.DISABLED} should be applied to .pt-tag-input`,
+            `.${Classes.DISABLED} should be applied to tag-input`,
         );
         assert.isTrue(
             wrapper
@@ -423,7 +423,7 @@ describe("<TagInput>", () => {
             ".pt-input-ghost should have a 'disabled' attribute",
         );
         wrapper.find(Tag).forEach(tag => {
-            assert.isFalse(tag.hasClass("pt-tag-removeable"), ".pt-tag should not have .pt-tag-removable applied");
+            assert.isFalse(tag.hasClass(Classes.TAG_REMOVABLE), "tag should not have tag-removable applied");
         });
     });
 
diff --git a/packages/core/test/tag/tagTests.tsx b/packages/core/test/tag/tagTests.tsx
index 3edaa9a445..a450646951 100644
--- a/packages/core/test/tag/tagTests.tsx
+++ b/packages/core/test/tag/tagTests.tsx
@@ -29,8 +29,8 @@ describe("<Tag>", () => {
         assert.isTrue(handleRemove.calledOnce);
     });
 
-    it("passes other props onto .pt-tag element", () => {
-        const element = shallow(<Tag title="baz qux">Hello</Tag>).find(".pt-tag");
+    it(`passes other props onto .${Classes.TAG} element`, () => {
+        const element = shallow(<Tag title="baz qux">Hello</Tag>).find("." + Classes.TAG);
         assert.deepEqual(element.prop("title"), "baz qux");
     });
 
diff --git a/packages/datetime/src/common/classes.ts b/packages/datetime/src/common/classes.ts
index ab587b8614..10df286acf 100644
--- a/packages/datetime/src/common/classes.ts
+++ b/packages/datetime/src/common/classes.ts
@@ -4,9 +4,13 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+export const DATEINPUT = "pt-dateinput";
+export const DATEINPUT_POPOVER = "pt-dateinput-popover";
+
 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";
diff --git a/packages/datetime/src/dateInput.tsx b/packages/datetime/src/dateInput.tsx
index 5214e44012..d3dda783a1 100644
--- a/packages/datetime/src/dateInput.tsx
+++ b/packages/datetime/src/dateInput.tsx
@@ -21,6 +21,7 @@ import {
     Utils,
 } from "@blueprintjs/core";
 
+import * as Classes from "./common/classes";
 import { isDateValid, isDayInRange } from "./common/dateUtils";
 import { getFormattedDateString, IDateFormatProps } from "./dateFormat";
 import { DatePicker } from "./datePicker";
@@ -209,7 +210,7 @@ export class DateInput extends AbstractPureComponent<IDateInputProps, IDateInput
                 content={wrappedPopoverContent}
                 enforceFocus={false}
                 onClose={this.handleClosePopover}
-                popoverClassName={classNames("pt-dateinput-popover", popoverProps.popoverClassName)}
+                popoverClassName={classNames(Classes.DATEINPUT_POPOVER, popoverProps.popoverClassName)}
             >
                 <InputGroup
                     autoComplete="off"
diff --git a/packages/datetime/src/datePicker.tsx b/packages/datetime/src/datePicker.tsx
index 6a9338a623..36f720d6f8 100644
--- a/packages/datetime/src/datePicker.tsx
+++ b/packages/datetime/src/datePicker.tsx
@@ -4,7 +4,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { AbstractPureComponent, Button, IProps, Utils } from "@blueprintjs/core";
+import { AbstractPureComponent, Button, Classes as CoreClasses, IProps, Utils } from "@blueprintjs/core";
 import classNames from "classnames";
 import * as React from "react";
 import ReactDayPicker from "react-day-picker";
@@ -214,16 +214,8 @@ export class DatePicker extends AbstractPureComponent<IDatePickerProps, IDatePic
     private renderOptionsBar() {
         return (
             <div className={Classes.DATEPICKER_FOOTER}>
-                <Button
-                    className="pt-minimal pt-datepicker-footer-button"
-                    onClick={this.handleTodayClick}
-                    text="Today"
-                />
-                <Button
-                    className="pt-minimal pt-datepicker-footer-button"
-                    onClick={this.handleClearClick}
-                    text="Clear"
-                />
+                <Button className={CoreClasses.MINIMAL} onClick={this.handleTodayClick} text="Today" />
+                <Button className={CoreClasses.MINIMAL} onClick={this.handleClearClick} text="Clear" />
             </div>
         );
     }
diff --git a/packages/datetime/src/datePickerCaption.tsx b/packages/datetime/src/datePickerCaption.tsx
index e64945f7a6..5e9f19603b 100644
--- a/packages/datetime/src/datePickerCaption.tsx
+++ b/packages/datetime/src/datePickerCaption.tsx
@@ -126,10 +126,12 @@ export class DatePickerCaption extends React.PureComponent<IDatePickerCaptionPro
     private containerRefHandler = (r: HTMLElement) => (this.containerElement = r);
 
     private positionArrows() {
-        // pass our container element to the measureTextWidth utility to ensure
-        // that we're measuring the width of text as sized within this component.
-        const textClass = "pt-datepicker-caption-measure";
-        const monthWidth = Utils.measureTextWidth(this.displayedMonthText, textClass, this.containerElement);
+        // measure width of text as rendered inside our container element.
+        const monthWidth = Utils.measureTextWidth(
+            this.displayedMonthText,
+            Classes.DATEPICKER_CAPTION_MEASURE,
+            this.containerElement,
+        );
         this.setState({ monthWidth });
     }
 
diff --git a/packages/datetime/test/dateInputTests.tsx b/packages/datetime/test/dateInputTests.tsx
index 52ab3d97e8..17b6ff9800 100644
--- a/packages/datetime/test/dateInputTests.tsx
+++ b/packages/datetime/test/dateInputTests.tsx
@@ -117,7 +117,7 @@ describe("<DateInput>", () => {
             .find("input")
             .simulate("focus")
             .simulate("blur");
-        wrapper.find(".pt-datepicker-month-select").simulate("change", { value: Months.FEBRUARY.toString() });
+        wrapper.find(`.${Classes.DATEPICKER_MONTH_SELECT}`).simulate("change", { value: Months.FEBRUARY.toString() });
         assert.isTrue(wrapper.find(Popover).prop("isOpen"));
     });
 
@@ -129,7 +129,7 @@ describe("<DateInput>", () => {
             .find("input")
             .simulate("focus")
             .simulate("blur");
-        wrapper.find(".pt-datepicker-year-select").simulate("change", { value: "2016" });
+        wrapper.find(`.${Classes.DATEPICKER_YEAR_SELECT}`).simulate("change", { value: "2016" });
         assert.isTrue(wrapper.find(Popover).prop("isOpen"));
     });
 
@@ -318,7 +318,9 @@ describe("<DateInput>", () => {
             const defaultValue = new Date(2017, Months.JANUARY, 1);
             const wrapper = mount(<DateInput {...DATE_FORMAT} defaultValue={defaultValue} />);
             wrapper.setState({ isOpen: true });
-            wrapper.find(".pt-datepicker-month-select").simulate("change", { value: Months.FEBRUARY.toString() });
+            wrapper
+                .find(`.${Classes.DATEPICKER_MONTH_SELECT}`)
+                .simulate("change", { value: Months.FEBRUARY.toString() });
             assert.isTrue(wrapper.find(Popover).prop("isOpen"));
         });
 
diff --git a/packages/docs-app/src/components/blueprintDocs.tsx b/packages/docs-app/src/components/blueprintDocs.tsx
index b69188dc72..17eb118092 100644
--- a/packages/docs-app/src/components/blueprintDocs.tsx
+++ b/packages/docs-app/src/components/blueprintDocs.tsx
@@ -13,7 +13,7 @@ import * as React from "react";
 import { NavHeader } from "./navHeader";
 import { NavIcon } from "./navIcons";
 
-const DARK_THEME = "pt-dark";
+const DARK_THEME = Classes.DARK;
 const LIGHT_THEME = "";
 const THEME_LOCAL_STORAGE_KEY = "pt-blueprint-theme";
 
@@ -72,7 +72,7 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
             const pkg = this.props.releases.find(p => p.name === `@blueprintjs/${props.section.route}`);
             return (
                 <div className={classNames("docs-nav-package", props.className)} data-route={props.section.route}>
-                    <a className="pt-menu-item" href={props.href} onClick={props.onClick}>
+                    <a className={Classes.MENU_ITEM} href={props.href} onClick={props.onClick}>
                         <NavIcon route={props.section.route} />
                         <span>{props.section.title}</span>
                     </a>
@@ -99,9 +99,9 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
     // run non-React code on the newly rendered sections.
     private handleComponentUpdate = () => {
         // indeterminate checkbox styles must be applied via JavaScript.
-        Array.from(document.querySelectorAll(".pt-checkbox input[indeterminate]")).forEach((el: HTMLInputElement) => {
-            el.indeterminate = true;
-        });
+        Array.from(document.querySelectorAll(`.${Classes.CHECKBOX} input[indeterminate]`)).forEach(
+            (el: HTMLInputElement) => (el.indeterminate = true),
+        );
     };
 
     private handleToggleDark = (useDark: boolean) => {
diff --git a/packages/docs-app/src/components/colorPalettes.tsx b/packages/docs-app/src/components/colorPalettes.tsx
index 0c64f63dd0..dd39fa718b 100644
--- a/packages/docs-app/src/components/colorPalettes.tsx
+++ b/packages/docs-app/src/components/colorPalettes.tsx
@@ -7,7 +7,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Colors } from "@blueprintjs/core";
+import { Classes, Colors } from "@blueprintjs/core";
 
 import { ClickToCopy } from "./clickToCopy";
 
@@ -72,12 +72,14 @@ export const ColorBar: React.SFC<{ colors: string[] }> = ({ colors }) => {
         <div className="docs-color-swatch" key={i} style={{ backgroundColor: getHexCode(name) }} />
     ));
 
+    const preClasses = classNames("docs-color-bar-hexes", "docs-clipboard-message", Classes.TEXT_OVERFLOW_ELLIPSIS);
+
     return (
         <ClickToCopy value={jsonString}>
             <div className="docs-color-bar">
                 <div className="docs-color-bar-swatches">{swatches}</div>
                 <pre
-                    className="docs-color-bar-hexes docs-clipboard-message pt-text-overflow-ellipsis"
+                    className={preClasses}
                     data-hover-message="Click to copy JSON array of hex colors"
                     data-message={hexString}
                 />
diff --git a/packages/docs-app/src/components/docsIcon.tsx b/packages/docs-app/src/components/docsIcon.tsx
index 6a2227eec2..efcb3fa1bf 100644
--- a/packages/docs-app/src/components/docsIcon.tsx
+++ b/packages/docs-app/src/components/docsIcon.tsx
@@ -4,10 +4,9 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
+import { Classes, ContextMenuTarget, Icon, IconName, Menu, MenuItem } from "@blueprintjs/core";
+import classNames from "classnames";
 import * as React from "react";
-
-import { ContextMenuTarget, Icon, IconName, Menu, MenuItem } from "@blueprintjs/core";
-
 import { ClickToCopy } from "./clickToCopy";
 
 export interface IDocsIconProps {
@@ -32,8 +31,11 @@ export class DocsIcon extends React.PureComponent<IDocsIconProps, {}> {
                 <div className="docs-icon-name">{displayName}</div>
                 <div className="docs-icon-detail">
                     <p className="docs-code">{iconName}</p>
-                    <div className="pt-text-muted">Right-click to download</div>
-                    <div className="docs-clipboard-message pt-text-muted" data-hover-message="Click to copy name" />
+                    <div className={Classes.TEXT_MUTED}>Right-click to download</div>
+                    <div
+                        className={classNames("docs-clipboard-message", Classes.TEXT_MUTED)}
+                        data-hover-message="Click to copy name"
+                    />
                 </div>
             </ClickToCopy>
         );
diff --git a/packages/docs-app/src/components/icons.tsx b/packages/docs-app/src/components/icons.tsx
index 6ba9d435a9..a16ec58eeb 100644
--- a/packages/docs-app/src/components/icons.tsx
+++ b/packages/docs-app/src/components/icons.tsx
@@ -6,9 +6,10 @@
 
 import * as React from "react";
 
-import { NonIdealState } from "@blueprintjs/core";
+import { Classes, InputGroup, NonIdealState } from "@blueprintjs/core";
 import { smartSearch } from "@blueprintjs/docs-theme";
 
+import classNames from "classnames";
 import { DocsIcon, IDocsIconProps as IIcon } from "./docsIcon";
 
 const ICONS_PER_ROW = 5;
@@ -58,17 +59,14 @@ export class Icons extends React.PureComponent<IIconsProps, IIconsState> {
             .filter(group => group != null);
         return (
             <div className="docs-icons">
-                <div className="pt-input-group pt-large pt-fill">
-                    <span className="pt-icon pt-icon-search" />
-                    <input
-                        className="pt-input pt-fill"
-                        dir="auto"
-                        onChange={this.handleFilterChange}
-                        placeholder="Search for icons..."
-                        type="search"
-                        value={this.state.filter}
-                    />
-                </div>
+                <InputGroup
+                    className={classNames(Classes.LARGE, Classes.FILL)}
+                    leftIcon="search"
+                    placeholder="Search for icons..."
+                    onChange={this.handleFilterChange}
+                    type="search"
+                    value={this.state.filter}
+                />
                 {groupElements.length > 0 ? groupElements : this.renderZeroState()}
             </div>
         );
@@ -96,7 +94,7 @@ export class Icons extends React.PureComponent<IIconsProps, IIconsState> {
     }
 
     private renderZeroState() {
-        return <NonIdealState className="pt-text-muted" visual="zoom-out" description="No icons found" />;
+        return <NonIdealState className={Classes.TEXT_MUTED} visual="zoom-out" description="No icons found" />;
     }
 
     private handleFilterChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
diff --git a/packages/docs-app/src/components/navHeader.tsx b/packages/docs-app/src/components/navHeader.tsx
index 3b99d51730..aec990a204 100644
--- a/packages/docs-app/src/components/navHeader.tsx
+++ b/packages/docs-app/src/components/navHeader.tsx
@@ -76,7 +76,7 @@ export class NavHeader extends React.PureComponent<INavHeaderProps, {}> {
         const { versions } = this.props;
         if (versions.length === 1) {
             return (
-                <div className="pt-text-muted" key="_versions">
+                <div className={Classes.TEXT_MUTED} key="_versions">
                     v{versions[0].version}
                 </div>
             );
diff --git a/packages/docs-app/src/examples/core-examples/focusExample.tsx b/packages/docs-app/src/examples/core-examples/focusExample.tsx
index 05fcac7654..ec0138a5e2 100644
--- a/packages/docs-app/src/examples/core-examples/focusExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/focusExample.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 
-import { Button, FocusStyleManager, InputGroup, Switch } from "@blueprintjs/core";
+import { Button, Classes, FocusStyleManager, InputGroup, Switch } from "@blueprintjs/core";
 import { BaseExample, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 export interface IFocusExampleState {
@@ -32,7 +32,7 @@ export class FocusExample extends BaseExample<IFocusExampleState> {
             <div>
                 <InputGroup leftIcon="star" placeholder="Test me for focus" />
                 <br />
-                <Button className="pt-fill" text="Test me for focus" />
+                <Button className={Classes.FILL} text="Test me for focus" />
             </div>
         );
     }
diff --git a/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx b/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx
index cd38664123..8ba8e07636 100644
--- a/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx
+++ b/packages/docs-app/src/examples/core-examples/hotkeyPiano.tsx
@@ -9,7 +9,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Hotkey, Hotkeys, HotkeysTarget } from "@blueprintjs/core";
+import { Classes, Hotkey, Hotkeys, HotkeysTarget } from "@blueprintjs/core";
 import { BaseExample } from "@blueprintjs/docs-theme";
 
 class Oscillator {
@@ -126,7 +126,7 @@ class PianoKey extends React.Component<IPianoKeyProps, {}> {
             "piano-key-pressed": pressed,
             "piano-key-sharp": /\#/.test(note),
         });
-        const elevation = classNames(pressed ? "pt-elevation-0" : "pt-elevation-2");
+        const elevation = classNames(pressed ? Classes.ELEVATION_0 : Classes.ELEVATION_2);
         return (
             <div className={classes}>
                 <div className={elevation}>
diff --git a/packages/docs-app/src/examples/core-examples/navbarExample.tsx b/packages/docs-app/src/examples/core-examples/navbarExample.tsx
index bd890de0e7..8493c2ac19 100644
--- a/packages/docs-app/src/examples/core-examples/navbarExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/navbarExample.tsx
@@ -6,7 +6,16 @@
 
 import * as React from "react";
 
-import { Alignment, Button, Navbar, NavbarDivider, NavbarGroup, NavbarHeading, Switch } from "@blueprintjs/core";
+import {
+    Alignment,
+    Button,
+    Classes,
+    Navbar,
+    NavbarDivider,
+    NavbarGroup,
+    NavbarHeading,
+    Switch,
+} from "@blueprintjs/core";
 import { BaseExample, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 export interface INavbarExampleState {
@@ -26,8 +35,8 @@ export class NavbarExample extends BaseExample<INavbarExampleState> {
                 <NavbarGroup align={this.state.alignRight ? Alignment.RIGHT : Alignment.LEFT}>
                     <NavbarHeading>Blueprint</NavbarHeading>
                     <NavbarDivider />
-                    <Button className="pt-minimal" icon="home" text="Home" />
-                    <Button className="pt-minimal" icon="document" text="Files" />
+                    <Button className={Classes.MINIMAL} icon="home" text="Home" />
+                    <Button className={Classes.MINIMAL} icon="document" text="Files" />
                 </NavbarGroup>
             </Navbar>
         );
diff --git a/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx b/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
index ba399c08e5..cbc3b0f4d5 100644
--- a/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/nonIdealStateExample.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 
-import { InputGroup, NonIdealState } from "@blueprintjs/core";
+import { Classes, InputGroup, NonIdealState } from "@blueprintjs/core";
 import { BaseExample } from "@blueprintjs/docs-theme";
 
 export class NonIdealStateExample extends BaseExample<{}> {
@@ -21,7 +21,7 @@ export class NonIdealStateExample extends BaseExample<{}> {
                 visual="search"
                 title="No search results"
                 description={description}
-                action={<InputGroup className="pt-round" leftIcon="search" placeholder="Search..." />}
+                action={<InputGroup className={Classes.ROUND} leftIcon="search" placeholder="Search..." />}
             />
         );
     }
diff --git a/packages/docs-app/src/examples/core-examples/popoverExample.tsx b/packages/docs-app/src/examples/core-examples/popoverExample.tsx
index 2fd164ad52..d4343e9c3a 100644
--- a/packages/docs-app/src/examples/core-examples/popoverExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/popoverExample.tsx
@@ -120,7 +120,7 @@ export class PopoverExample extends BaseExample<IPopoverExampleState> {
     protected renderExample() {
         const { exampleIndex, sliderValue, ...popoverProps } = this.state;
         const popoverClassName = classNames(this.className, {
-            "pt-popover-content-sizing": exampleIndex <= 2,
+            [Classes.POPOVER_CONTENT_SIZING]: exampleIndex <= 2,
         });
         return (
             <div className="docs-popover-example-scroll" ref={this.centerScroll}>
diff --git a/packages/docs-app/src/examples/core-examples/tabsExample.tsx b/packages/docs-app/src/examples/core-examples/tabsExample.tsx
index bd654e0107..1a60ae10fa 100644
--- a/packages/docs-app/src/examples/core-examples/tabsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/tabsExample.tsx
@@ -67,7 +67,7 @@ export class TabsExample extends BaseExample<ITabsExampleState> {
                     <Tab id="mb" title="Ember" panel={<EmberPanel />} />
                     <Tab id="bb" disabled={true} title="Backbone" panel={<BackbonePanel />} />
                     <Tabs.Expander />
-                    <input className="pt-input" type="text" placeholder="Search..." />
+                    <input className={Classes.INPUT} type="text" placeholder="Search..." />
                 </Tabs>
             </div>
         );
@@ -105,7 +105,7 @@ export class TabsExample extends BaseExample<ITabsExampleState> {
 const ReactPanel: React.SFC<{}> = () => (
     <div>
         <h3>Example panel: React</h3>
-        <p className="pt-running-text">
+        <p className={Classes.RUNNING_TEXT}>
             Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology
             stack, it's easy to try it out on a small feature in an existing project.
         </p>
@@ -115,7 +115,7 @@ const ReactPanel: React.SFC<{}> = () => (
 const AngularPanel: React.SFC<{}> = () => (
     <div>
         <h3>Example panel: Angular</h3>
-        <p className="pt-running-text">
+        <p className={Classes.RUNNING_TEXT}>
             HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic
             views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting
             environment is extraordinarily expressive, readable, and quick to develop.
@@ -126,12 +126,12 @@ const AngularPanel: React.SFC<{}> = () => (
 const EmberPanel: React.SFC<{}> = () => (
     <div>
         <h3>Example panel: Ember</h3>
-        <p className="pt-running-text">
+        <p className={Classes.RUNNING_TEXT}>
             Ember.js is an open-source JavaScript application framework, based on the model-view-controller (MVC)
             pattern. It allows developers to create scalable single-page web applications by incorporating common idioms
             and best practices into the framework. What is your favorite JS framework?
         </p>
-        <input className="pt-input" type="text" />
+        <input className={Classes.INPUT} type="text" />
     </div>
 );
 
diff --git a/packages/docs-app/src/examples/core-examples/toastExample.tsx b/packages/docs-app/src/examples/core-examples/toastExample.tsx
index 7e1766c0b9..e8eb906b42 100644
--- a/packages/docs-app/src/examples/core-examples/toastExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/toastExample.tsx
@@ -146,7 +146,7 @@ export class ToastExample extends BaseExample<IToasterProps> {
             icon: "cloud-upload",
             message: (
                 <ProgressBar
-                    className={classNames("docs-toast-progress", { "pt-no-stripes": amount >= 100 })}
+                    className={classNames("docs-toast-progress", { [Classes.PROGRESS_NO_STRIPES]: amount >= 100 })}
                     intent={amount < 100 ? Intent.PRIMARY : Intent.SUCCESS}
                     value={amount / 100}
                 />
diff --git a/packages/docs-app/src/examples/core-examples/tooltipExample.tsx b/packages/docs-app/src/examples/core-examples/tooltipExample.tsx
index f7fb82eb10..5ea246ff09 100644
--- a/packages/docs-app/src/examples/core-examples/tooltipExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/tooltipExample.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 
-import { Button, Intent, Popover, Position, Switch, Tooltip } from "@blueprintjs/core";
+import { Button, Classes, Intent, Popover, Position, Switch, Tooltip } from "@blueprintjs/core";
 import { BaseExample } from "@blueprintjs/docs-theme";
 
 export class TooltipExample extends BaseExample<{ isOpen: boolean }> {
@@ -32,7 +32,7 @@ export class TooltipExample extends BaseExample<{ isOpen: boolean }> {
             <div className="docs-tooltip2-example">
                 <div>
                     Inline text can have{" "}
-                    <Tooltip className="pt-tooltip-indicator" content={jsxContent}>
+                    <Tooltip className={Classes.TOOLTIP_INDICATOR} content={jsxContent}>
                         a tooltip.
                     </Tooltip>
                 </div>
@@ -41,14 +41,14 @@ export class TooltipExample extends BaseExample<{ isOpen: boolean }> {
                 </div>
                 <div>
                     This line's tooltip{" "}
-                    <Tooltip className="pt-tooltip-indicator" content={<span>disabled</span>} disabled={true}>
+                    <Tooltip className={Classes.TOOLTIP_INDICATOR} content={<span>disabled</span>} disabled={true}>
                         is disabled.
                     </Tooltip>
                 </div>
                 <div>
                     This line's tooltip{" "}
                     <Tooltip
-                        className="pt-tooltip-indicator"
+                        className={Classes.TOOLTIP_INDICATOR}
                         content={<span>BRRAAAIINS</span>}
                         isOpen={this.state.isOpen}
                     >
@@ -63,7 +63,7 @@ export class TooltipExample extends BaseExample<{ isOpen: boolean }> {
                 </div>
                 <div>
                     <Tooltip
-                        className="pt-tooltip-indicator"
+                        className={Classes.TOOLTIP_INDICATOR}
                         content="Intent.PRIMARY"
                         intent={Intent.PRIMARY}
                         position={Position.LEFT}
@@ -72,7 +72,7 @@ export class TooltipExample extends BaseExample<{ isOpen: boolean }> {
                         Available
                     </Tooltip>{" "}
                     <Tooltip
-                        className="pt-tooltip-indicator"
+                        className={Classes.TOOLTIP_INDICATOR}
                         content="Intent.SUCCESS"
                         intent={Intent.SUCCESS}
                         position={Position.TOP}
@@ -81,7 +81,7 @@ export class TooltipExample extends BaseExample<{ isOpen: boolean }> {
                         in the full
                     </Tooltip>{" "}
                     <Tooltip
-                        className="pt-tooltip-indicator"
+                        className={Classes.TOOLTIP_INDICATOR}
                         content="Intent.WARNING"
                         intent={Intent.WARNING}
                         position={Position.BOTTOM}
@@ -90,7 +90,7 @@ export class TooltipExample extends BaseExample<{ isOpen: boolean }> {
                         range of
                     </Tooltip>{" "}
                     <Tooltip
-                        className="pt-tooltip-indicator"
+                        className={Classes.TOOLTIP_INDICATOR}
                         content="Intent.DANGER"
                         intent={Intent.DANGER}
                         position={Position.RIGHT}
@@ -103,7 +103,7 @@ export class TooltipExample extends BaseExample<{ isOpen: boolean }> {
                 <Popover
                     content={<h1>Popover!</h1>}
                     position={Position.RIGHT}
-                    popoverClassName="pt-popover-content-sizing"
+                    popoverClassName={Classes.POPOVER_CONTENT_SIZING}
                 >
                     <Tooltip
                         content={<span>This button also has a popover!</span>}
diff --git a/packages/docs-theme/src/components/documentation.tsx b/packages/docs-theme/src/components/documentation.tsx
index a0528c554b..a0986afcc2 100644
--- a/packages/docs-theme/src/components/documentation.tsx
+++ b/packages/docs-theme/src/components/documentation.tsx
@@ -167,7 +167,11 @@ export class Documentation extends React.PureComponent<IDocumentationProps, IDoc
                             {this.props.footer}
                         </div>
                     </div>
-                    <main className="docs-content-wrapper pt-fill" ref={this.refHandlers.content} role="main">
+                    <main
+                        className={classNames("docs-content-wrapper", Classes.FILL)}
+                        ref={this.refHandlers.content}
+                        role="main"
+                    >
                         <Page page={pages[activePageId]} tagRenderers={this.props.tagRenderers} />
                     </main>
                 </div>
diff --git a/packages/docs-theme/src/components/modifierTable.tsx b/packages/docs-theme/src/components/modifierTable.tsx
index 936293db69..4b242adbbc 100644
--- a/packages/docs-theme/src/components/modifierTable.tsx
+++ b/packages/docs-theme/src/components/modifierTable.tsx
@@ -17,7 +17,7 @@ export interface IModifierTableProps {
 
 export const ModifierTable: React.SFC<IModifierTableProps> = ({ children, emptyMessage, title }) => (
     <div className="docs-modifiers-table">
-        <table className="pt-html-table">
+        <table className={Classes.HTML_TABLE}>
             <thead>
                 <tr>
                     <th>{title}</th>
diff --git a/packages/docs-theme/src/components/navButton.tsx b/packages/docs-theme/src/components/navButton.tsx
index 781123db21..ed0754a6ef 100644
--- a/packages/docs-theme/src/components/navButton.tsx
+++ b/packages/docs-theme/src/components/navButton.tsx
@@ -5,6 +5,7 @@
 */
 
 import { Classes, Icon, IconName, KeyCombo } from "@blueprintjs/core";
+import classNames from "classnames";
 import * as React from "react";
 
 export interface INavButtonProps {
@@ -15,7 +16,7 @@ export interface INavButtonProps {
 }
 
 export const NavButton: React.SFC<INavButtonProps> = props => (
-    <div className="docs-nav-button pt-text-muted" onClick={props.onClick}>
+    <div className={classNames("docs-nav-button", Classes.TEXT_MUTED)} onClick={props.onClick}>
         <Icon icon={props.icon} />
         <span className={Classes.FILL}>{props.text}</span>
         <div style={{ opacity: 0.5 }}>
diff --git a/packages/docs-theme/src/components/navMenu.tsx b/packages/docs-theme/src/components/navMenu.tsx
index bf2b0a645b..ae9f4f452c 100644
--- a/packages/docs-theme/src/components/navMenu.tsx
+++ b/packages/docs-theme/src/components/navMenu.tsx
@@ -45,7 +45,7 @@ export const NavMenu: React.SFC<INavMenuProps> = props => {
             </li>
         );
     });
-    const classes = classNames("docs-nav-menu", "pt-list-unstyled", props.className);
+    const classes = classNames("docs-nav-menu", Classes.LIST_UNSTYLED, props.className);
     return <ul className={classes}>{menu}</ul>;
 };
 NavMenu.displayName = "Docs2.NavMenu";
diff --git a/packages/docs-theme/src/components/typescript/enumTable.tsx b/packages/docs-theme/src/components/typescript/enumTable.tsx
index 189fafde3b..141d91bc8e 100644
--- a/packages/docs-theme/src/components/typescript/enumTable.tsx
+++ b/packages/docs-theme/src/components/typescript/enumTable.tsx
@@ -4,7 +4,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { IProps } from "@blueprintjs/core";
+import { Classes, IProps } from "@blueprintjs/core";
 import classNames from "classnames";
 import { ITsEnum, ITsEnumMember } from "documentalist/dist/client";
 import * as React from "react";
@@ -57,7 +57,7 @@ export class EnumTable extends React.PureComponent<IEnumTableProps> {
                 <td className="docs-prop-details">
                     <code className="docs-prop-type">
                         <strong>{entry.name}</strong>
-                        <em className="docs-prop-default pt-text-muted">{entry.defaultValue}</em>
+                        <em className={classNames("docs-prop-default", Classes.TEXT_MUTED)}>{entry.defaultValue}</em>
                     </code>
                     <div className="docs-prop-description">{renderBlock(entry.documentation)}</div>
                     <p className="docs-prop-tags">{this.renderTags(entry)}</p>
diff --git a/packages/docs-theme/src/components/typescript/interfaceTable.tsx b/packages/docs-theme/src/components/typescript/interfaceTable.tsx
index 3bafc034fd..e7a7e8b3d2 100644
--- a/packages/docs-theme/src/components/typescript/interfaceTable.tsx
+++ b/packages/docs-theme/src/components/typescript/interfaceTable.tsx
@@ -58,7 +58,7 @@ export class InterfaceTable extends React.PureComponent<IInterfaceTableProps> {
         const typeInfo = isTsProperty(entry) ? (
             <>
                 <strong>{renderType(entry.type)}</strong>
-                <em className="docs-prop-default pt-text-muted">{entry.defaultValue}</em>
+                <em className={classNames("docs-prop-default", Classes.TEXT_MUTED)}>{entry.defaultValue}</em>
             </>
         ) : (
             <>
diff --git a/packages/table-dev-app/src/features.tsx b/packages/table-dev-app/src/features.tsx
index 01fe394402..95c8667ff9 100644
--- a/packages/table-dev-app/src/features.tsx
+++ b/packages/table-dev-app/src/features.tsx
@@ -9,7 +9,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import { Button, Intent, Menu, MenuDivider, MenuItem } from "@blueprintjs/core";
+import { Button, Classes, Intent, Menu, MenuDivider, MenuItem } from "@blueprintjs/core";
 
 import {
     Cell,
@@ -363,7 +363,7 @@ class RowSelectableTable extends React.Component<{}, {}> {
 
 ReactDOM.render(<RowSelectableTable />, document.getElementById("table-select-rows"));
 
-document.getElementById("table-ledger").classList.add("pt-table-striped");
+document.getElementById("table-ledger").classList.add(Classes.HTML_TABLE_STRIPED);
 
 ReactDOM.render(getTableComponent(3, 7, {}, { className: "" }), document.getElementById("table-ledger"));
 
diff --git a/packages/table-dev-app/src/nav.tsx b/packages/table-dev-app/src/nav.tsx
index 091f470339..56c198260c 100644
--- a/packages/table-dev-app/src/nav.tsx
+++ b/packages/table-dev-app/src/nav.tsx
@@ -6,6 +6,7 @@
 import * as React from "react";
 
 import { Alignment, AnchorButton, Classes, Navbar, Switch } from "@blueprintjs/core";
+import classNames from "classnames";
 
 export interface INavProps {
     selected?: string;
@@ -19,7 +20,7 @@ export class Nav extends React.Component<INavProps, {}> {
         };
 
         return (
-            <Navbar className="pt-dark pt-fixed-top">
+            <Navbar className={classNames(Classes.DARK, Classes.FIXED_TOP)}>
                 <Navbar.Group align={Alignment.LEFT}>
                     <Navbar.Heading>Blueprint Table</Navbar.Heading>
                 </Navbar.Group>
diff --git a/packages/table/test/menusTests.tsx b/packages/table/test/menusTests.tsx
index 3c3c19f129..0aa1c57782 100644
--- a/packages/table/test/menusTests.tsx
+++ b/packages/table/test/menusTests.tsx
@@ -4,7 +4,7 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import { Menu } from "@blueprintjs/core";
+import { Classes, Menu } from "@blueprintjs/core";
 import { expect } from "chai";
 import * as React from "react";
 import * as sinon from "sinon";
@@ -54,7 +54,7 @@ describe("Menus", () => {
                 </Menu>,
             );
 
-            menu.find("a.pt-menu-item").mouse("click");
+            menu.find(`.${Classes.MENU_ITEM}`).mouse("click");
             expect(clipboardSpy.called).to.be.true;
             expect(clipboardSpy.lastCall.args).to.deep.equal([[["X"], ["X"], ["X"]]]);
             expect(onCopySpy.called).to.be.true;