diff --git a/packages/chrome/src/views/header/HeaderItem.spec.js b/packages/chrome/src/views/header/HeaderItem.spec.js
index d8fbde01355..5f97efc6c56 100644
--- a/packages/chrome/src/views/header/HeaderItem.spec.js
+++ b/packages/chrome/src/views/header/HeaderItem.spec.js
@@ -42,8 +42,8 @@ describe('HeaderItem', () => {
   });
 
   describe('States', () => {
-    it('renders current styling if provided', () => {
-      const wrapper = mount(<HeaderItem current />);
+    it('renders active styling if provided', () => {
+      const wrapper = mount(<HeaderItem active />);
 
       expect(wrapper).toMatchSnapshot();
     });
diff --git a/packages/chrome/src/views/header/HeaderItemText.spec.js b/packages/chrome/src/views/header/HeaderItemText.spec.js
index 189ec4ec583..25f8654ed34 100644
--- a/packages/chrome/src/views/header/HeaderItemText.spec.js
+++ b/packages/chrome/src/views/header/HeaderItemText.spec.js
@@ -16,4 +16,10 @@ describe('HeaderItemText', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders clipped styling if provided', () => {
+    const wrapper = shallow(<HeaderItemText clipped />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/packages/chrome/src/views/header/HeaderItemWrapper.spec.js b/packages/chrome/src/views/header/HeaderItemWrapper.spec.js
index 094f1df08f1..429c0c8e951 100644
--- a/packages/chrome/src/views/header/HeaderItemWrapper.spec.js
+++ b/packages/chrome/src/views/header/HeaderItemWrapper.spec.js
@@ -16,4 +16,52 @@ describe('HeaderItemWrapper', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders maxX styling if provided', () => {
+    const wrapper = shallow(<HeaderItemWrapper maxX />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders maxY styling if provided', () => {
+    const wrapper = shallow(<HeaderItemWrapper maxY />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders round styling if provided', () => {
+    const wrapper = shallow(<HeaderItemWrapper round />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  describe('States', () => {
+    it('renders active styling if provided', () => {
+      const wrapper = shallow(<HeaderItemWrapper active />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders focused styling if provided', () => {
+      const wrapper = shallow(<HeaderItemWrapper focused />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    it('renders hovered styling if provided', () => {
+      const wrapper = shallow(<HeaderItemWrapper hovered />);
+
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('Products', () => {
+    ['chat', 'connect', 'explore', 'guide', 'message', 'support', 'talk'].forEach(product => {
+      it(`renders ${product} styling if provided`, () => {
+        const wrapper = shallow(<HeaderItemWrapper product={product} />);
+
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/packages/chrome/src/views/header/__snapshots__/HeaderItem.spec.js.snap b/packages/chrome/src/views/header/__snapshots__/HeaderItem.spec.js.snap
index 7deca272b4a..303302e8335 100644
--- a/packages/chrome/src/views/header/__snapshots__/HeaderItem.spec.js.snap
+++ b/packages/chrome/src/views/header/__snapshots__/HeaderItem.spec.js.snap
@@ -189,13 +189,13 @@ exports[`HeaderItem Products renders talk styling if provided 1`] = `
 </HeaderItem>
 `;
 
-exports[`HeaderItem States renders current styling if provided 1`] = `
+exports[`HeaderItem States renders active styling if provided 1`] = `
 <HeaderItem
-  current={true}
+  active={true}
 >
   <KeyboardFocusContainer>
     <HeaderItem__StyledHeaderItem
-      current={true}
+      active={true}
       focused={false}
       onBlur={[Function]}
       onFocus={[Function]}
@@ -203,7 +203,7 @@ exports[`HeaderItem States renders current styling if provided 1`] = `
       tabIndex={0}
     >
       <button
-        className="c-chrome__body__header__item "
+        className="c-chrome__body__header__item is-active "
         data-garden-id="chrome.header_item"
         data-garden-version="version"
         onBlur={[Function]}
diff --git a/packages/chrome/src/views/header/__snapshots__/HeaderItemText.spec.js.snap b/packages/chrome/src/views/header/__snapshots__/HeaderItemText.spec.js.snap
index e937ce81bfb..fd2ebfc5b3b 100644
--- a/packages/chrome/src/views/header/__snapshots__/HeaderItemText.spec.js.snap
+++ b/packages/chrome/src/views/header/__snapshots__/HeaderItemText.spec.js.snap
@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`HeaderItemText renders clipped styling if provided 1`] = `
+<span
+  className="c-chrome__body__header__item__text is-clipped "
+  data-garden-id="chrome.header_item_text"
+  data-garden-version="version"
+/>
+`;
+
 exports[`HeaderItemText renders default styling 1`] = `
 <span
   className="c-chrome__body__header__item__text "
diff --git a/packages/chrome/src/views/header/__snapshots__/HeaderItemWrapper.spec.js.snap b/packages/chrome/src/views/header/__snapshots__/HeaderItemWrapper.spec.js.snap
index dba0a0b60a0..88a66af1792 100644
--- a/packages/chrome/src/views/header/__snapshots__/HeaderItemWrapper.spec.js.snap
+++ b/packages/chrome/src/views/header/__snapshots__/HeaderItemWrapper.spec.js.snap
@@ -1,5 +1,85 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`HeaderItemWrapper Products renders chat styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--chat "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders connect styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--connect "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders explore styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--explore "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders guide styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--guide "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders message styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--message "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders support styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--support "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper Products renders talk styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--logo--talk "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper States renders active styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item is-active "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper States renders focused styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item is-focused "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper States renders hovered styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item is-hovered "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
 exports[`HeaderItemWrapper renders default styling 1`] = `
 <div
   className="c-chrome__body__header__item "
@@ -7,3 +87,27 @@ exports[`HeaderItemWrapper renders default styling 1`] = `
   data-garden-version="version"
 />
 `;
+
+exports[`HeaderItemWrapper renders maxX styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--max-x "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper renders maxY styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--max-y "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
+
+exports[`HeaderItemWrapper renders round styling if provided 1`] = `
+<div
+  className="c-chrome__body__header__item c-chrome__body__header__item--round "
+  data-garden-id="chrome.header_item_wrapper"
+  data-garden-version="version"
+/>
+`;
diff --git a/packages/chrome/src/views/nav/Nav.spec.js b/packages/chrome/src/views/nav/Nav.spec.js
index 2bfdf2aeb2b..efe9ae12607 100644
--- a/packages/chrome/src/views/nav/Nav.spec.js
+++ b/packages/chrome/src/views/nav/Nav.spec.js
@@ -15,4 +15,22 @@ describe('Nav', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders expanded styling if provided', () => {
+    const wrapper = shallow(<Nav expanded />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders dark styling if provided', () => {
+    const wrapper = shallow(<Nav dark />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders light styling if provided', () => {
+    const wrapper = shallow(<Nav light />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/packages/chrome/src/views/nav/NavItem.spec.js b/packages/chrome/src/views/nav/NavItem.spec.js
index a281cb9d937..b2590f7daef 100644
--- a/packages/chrome/src/views/nav/NavItem.spec.js
+++ b/packages/chrome/src/views/nav/NavItem.spec.js
@@ -9,7 +9,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import NavItem from './NavItem';
 
-describe('SubNavItem', () => {
+describe('NavItem', () => {
   it('renders default styling', () => {
     const wrapper = mount(<NavItem />);
 
@@ -22,6 +22,12 @@ describe('SubNavItem', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('renders brandmark styling if provided', () => {
+    const wrapper = mount(<NavItem brandmark />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
   describe('States', () => {
     it('renders current styling if provided', () => {
       const wrapper = mount(<NavItem current />);
diff --git a/packages/chrome/src/views/nav/NavItemText.spec.js b/packages/chrome/src/views/nav/NavItemText.spec.js
index 9f5581678c2..bb552b78471 100644
--- a/packages/chrome/src/views/nav/NavItemText.spec.js
+++ b/packages/chrome/src/views/nav/NavItemText.spec.js
@@ -16,4 +16,10 @@ describe('NavItemText', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders wrap styling if provided', () => {
+    const wrapper = shallow(<NavItemText wrap />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/packages/chrome/src/views/nav/__snapshots__/Nav.spec.js.snap b/packages/chrome/src/views/nav/__snapshots__/Nav.spec.js.snap
index c5db456413b..b0667d26a62 100644
--- a/packages/chrome/src/views/nav/__snapshots__/Nav.spec.js.snap
+++ b/packages/chrome/src/views/nav/__snapshots__/Nav.spec.js.snap
@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Nav renders dark styling if provided 1`] = `
+<nav
+  className="c-chrome__nav c-chrome__nav--dark "
+  data-garden-id="chrome.nav"
+  data-garden-version="version"
+/>
+`;
+
 exports[`Nav renders default styling 1`] = `
 <nav
   className="c-chrome__nav "
@@ -7,3 +15,19 @@ exports[`Nav renders default styling 1`] = `
   data-garden-version="version"
 />
 `;
+
+exports[`Nav renders expanded styling if provided 1`] = `
+<nav
+  className="c-chrome__nav c-chrome__nav--expanded "
+  data-garden-id="chrome.nav"
+  data-garden-version="version"
+/>
+`;
+
+exports[`Nav renders light styling if provided 1`] = `
+<nav
+  className="c-chrome__nav c-chrome__nav--light "
+  data-garden-id="chrome.nav"
+  data-garden-version="version"
+/>
+`;
diff --git a/packages/chrome/src/views/nav/__snapshots__/NavItem.spec.js.snap b/packages/chrome/src/views/nav/__snapshots__/NavItem.spec.js.snap
index c7323b64850..6573bf8f805 100644
--- a/packages/chrome/src/views/nav/__snapshots__/NavItem.spec.js.snap
+++ b/packages/chrome/src/views/nav/__snapshots__/NavItem.spec.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SubNavItem Products renders chat styling if provided 1`] = `
+exports[`NavItem Products renders chat styling if provided 1`] = `
 <NavItem
   product="chat"
 >
@@ -27,7 +27,7 @@ exports[`SubNavItem Products renders chat styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem Products renders connect styling if provided 1`] = `
+exports[`NavItem Products renders connect styling if provided 1`] = `
 <NavItem
   product="connect"
 >
@@ -54,7 +54,7 @@ exports[`SubNavItem Products renders connect styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem Products renders explore styling if provided 1`] = `
+exports[`NavItem Products renders explore styling if provided 1`] = `
 <NavItem
   product="explore"
 >
@@ -81,7 +81,7 @@ exports[`SubNavItem Products renders explore styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem Products renders guide styling if provided 1`] = `
+exports[`NavItem Products renders guide styling if provided 1`] = `
 <NavItem
   product="guide"
 >
@@ -108,7 +108,7 @@ exports[`SubNavItem Products renders guide styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem Products renders message styling if provided 1`] = `
+exports[`NavItem Products renders message styling if provided 1`] = `
 <NavItem
   product="message"
 >
@@ -135,7 +135,7 @@ exports[`SubNavItem Products renders message styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem Products renders support styling if provided 1`] = `
+exports[`NavItem Products renders support styling if provided 1`] = `
 <NavItem
   product="support"
 >
@@ -162,7 +162,7 @@ exports[`SubNavItem Products renders support styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem Products renders talk styling if provided 1`] = `
+exports[`NavItem Products renders talk styling if provided 1`] = `
 <NavItem
   product="talk"
 >
@@ -189,7 +189,7 @@ exports[`SubNavItem Products renders talk styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem States renders current styling if provided 1`] = `
+exports[`NavItem States renders current styling if provided 1`] = `
 <NavItem
   current={true}
 >
@@ -216,7 +216,7 @@ exports[`SubNavItem States renders current styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem States renders focused styling if provided 1`] = `
+exports[`NavItem States renders focused styling if provided 1`] = `
 <NavItem
   focused={true}
 >
@@ -242,7 +242,7 @@ exports[`SubNavItem States renders focused styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem States renders hovered styling if provided 1`] = `
+exports[`NavItem States renders hovered styling if provided 1`] = `
 <NavItem
   hovered={true}
 >
@@ -269,7 +269,35 @@ exports[`SubNavItem States renders hovered styling if provided 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem renders default styling 1`] = `
+exports[`NavItem renders brandmark styling if provided 1`] = `
+<NavItem
+  brandmark={true}
+>
+  <KeyboardFocusContainer>
+    <NavItem__StyledNavItem
+      brandmark={true}
+      focused={false}
+      logo={true}
+      onBlur={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      tabIndex={-1}
+    >
+      <button
+        className="c-chrome__nav__item c-chrome__nav__item--logo c-chrome__nav__item--brandmark "
+        data-garden-id="chrome.nav_item"
+        data-garden-version="version"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        tabIndex={-1}
+      />
+    </NavItem__StyledNavItem>
+  </KeyboardFocusContainer>
+</NavItem>
+`;
+
+exports[`NavItem renders default styling 1`] = `
 <NavItem>
   <KeyboardFocusContainer>
     <NavItem__StyledNavItem
@@ -293,7 +321,7 @@ exports[`SubNavItem renders default styling 1`] = `
 </NavItem>
 `;
 
-exports[`SubNavItem renders logo styling if provided 1`] = `
+exports[`NavItem renders logo styling if provided 1`] = `
 <NavItem
   logo={true}
 >
diff --git a/packages/chrome/src/views/nav/__snapshots__/NavItemText.spec.js.snap b/packages/chrome/src/views/nav/__snapshots__/NavItemText.spec.js.snap
index ab5e3508d59..623b52d029c 100644
--- a/packages/chrome/src/views/nav/__snapshots__/NavItemText.spec.js.snap
+++ b/packages/chrome/src/views/nav/__snapshots__/NavItemText.spec.js.snap
@@ -7,3 +7,12 @@ exports[`NavItemText renders default styling 1`] = `
   data-garden-version="version"
 />
 `;
+
+exports[`NavItemText renders wrap styling if provided 1`] = `
+<span
+  className="c-chrome__nav__item__text c-chrome__nav__item__text--wrap "
+  data-garden-id="chrome.nav_item_text"
+  data-garden-version="version"
+  wrap={true}
+/>
+`;
diff --git a/packages/chrome/src/views/subnav/SubNavItemText.spec.js b/packages/chrome/src/views/subnav/SubNavItemText.spec.js
index 95d11e5374c..5a8545b6b64 100644
--- a/packages/chrome/src/views/subnav/SubNavItemText.spec.js
+++ b/packages/chrome/src/views/subnav/SubNavItemText.spec.js
@@ -16,4 +16,10 @@ describe('SubNavItemText', () => {
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('renders wrap styling if provided', () => {
+    const wrapper = shallow(<SubNavItemText wrap />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/packages/chrome/src/views/subnav/__snapshots__/SubNavItemText.spec.js.snap b/packages/chrome/src/views/subnav/__snapshots__/SubNavItemText.spec.js.snap
index 2280ce27ddb..ac768bba751 100644
--- a/packages/chrome/src/views/subnav/__snapshots__/SubNavItemText.spec.js.snap
+++ b/packages/chrome/src/views/subnav/__snapshots__/SubNavItemText.spec.js.snap
@@ -7,3 +7,12 @@ exports[`SubNavItemText renders default styling 1`] = `
   data-garden-version="version"
 />
 `;
+
+exports[`SubNavItemText renders wrap styling if provided 1`] = `
+<span
+  className="c-chrome__subnav__item__text c-chrome__subnav__item__text--wrap "
+  data-garden-id="chrome.subnav_item_text"
+  data-garden-version="version"
+  wrap={true}
+/>
+`;