diff --git a/src/pages/components/tabs/images/tab-style-1.png b/src/pages/components/tabs/images/tab-style-1.png
index 7bfff6e232c..75e13d19e93 100644
Binary files a/src/pages/components/tabs/images/tab-style-1.png and b/src/pages/components/tabs/images/tab-style-1.png differ
diff --git a/src/pages/components/tabs/images/tab-style-2.png b/src/pages/components/tabs/images/tab-style-2.png
new file mode 100644
index 00000000000..02209afee9b
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-2.png differ
diff --git a/src/pages/components/tabs/images/tab-style-3.png b/src/pages/components/tabs/images/tab-style-3.png
new file mode 100644
index 00000000000..94617a8bedb
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-3.png differ
diff --git a/src/pages/components/tabs/images/tab-style-4.png b/src/pages/components/tabs/images/tab-style-4.png
new file mode 100644
index 00000000000..c654f29586e
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-4.png differ
diff --git a/src/pages/components/tabs/images/tab-style-5.png b/src/pages/components/tabs/images/tab-style-5.png
new file mode 100644
index 00000000000..61d9df2dac2
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-5.png differ
diff --git a/src/pages/components/tabs/images/tab-style-6.png b/src/pages/components/tabs/images/tab-style-6.png
new file mode 100644
index 00000000000..6144986cc69
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-6.png differ
diff --git a/src/pages/components/tabs/images/tab-style-7.png b/src/pages/components/tabs/images/tab-style-7.png
new file mode 100644
index 00000000000..7ab20139838
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-7.png differ
diff --git a/src/pages/components/tabs/images/tab-style-7b.png b/src/pages/components/tabs/images/tab-style-7b.png
new file mode 100644
index 00000000000..e599c7d77dc
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-7b.png differ
diff --git a/src/pages/components/tabs/images/tab-style-8.png b/src/pages/components/tabs/images/tab-style-8.png
new file mode 100644
index 00000000000..c8431f038b4
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-8.png differ
diff --git a/src/pages/components/tabs/images/tab-style-8b.png b/src/pages/components/tabs/images/tab-style-8b.png
new file mode 100644
index 00000000000..8fd3ffd80f1
Binary files /dev/null and b/src/pages/components/tabs/images/tab-style-8b.png differ
diff --git a/src/pages/components/tabs/style.mdx b/src/pages/components/tabs/style.mdx
index 6802a74257d..065ecaca505 100755
--- a/src/pages/components/tabs/style.mdx
+++ b/src/pages/components/tabs/style.mdx
@@ -5,22 +5,153 @@ description:
tabs: ['Usage', 'Style', 'Code', 'Accessibility']
---
+
+
+Color
+Typography
+Structure
+
+
+
## Color
-| Class | Property | Color token |
-| ------------------------------- | ------------- | ----------------- |
-| `.bx--tabs__nav-link` | text color | `$text-02` |
-| `.bx--tabs__nav-item` | border-bottom | `$ui-03` |
-| `.bx--tabs__nav-link:selected` | text color | `$text-01` |
-| `.bx--tabs__nav-item--selected` | border-bottom | `$interactive-04` |
+### Line tabs
+
+| State | Element | Property | Color token |
+| -------- | --------------------- | ---------------- | ---------------------------------------------- |
+| Enabled | Background | background-color | transparent |
+| | Label | text-color | `$text-secondary` |
+| | Icon | svg | `$icon-secondary` |
+| | Background | border-bottom | `$border-subtle` |
+| | Scrollable icon | svg | `$icon-primary` |
+| | Scrollable fade | background-color | 8px, linear-gradient white to 100% transparent |
+| | Scrollable background | background-color | `$background` |
+| Selected | Label | text-color | `$text-primary` |
+| | Icon | svg | `$icon-primary` |
+| | Background | border-bottom | `$interactive` |
+
+
+
+![Example of selected and enabled line tabs](images/tab-style-1.png)
+
+
+
+Example of selected and enabled line tabs.
+
+
+
+#### Interactive states
+
+
+
+| State | Element | Property | Color token |
+| -------------- | --------------------- | ---------------- | ------------------- |
+| Hover | Background | border-bottom | `$interactive` |
+| | Label | text-color | `$text-primary` |
+| | Icon | svg | `$icon-primary` |
+| | Scrollable background | background-color | `$background-hover` |
+| Active | Scrollable background | background-color | `$layer-accent` |
+| Focus | Scrollable background | border | `$focus` |
+| Focus-enabled | Label | text-color | `$text-secondary` |
+| | Background | border | `$interactive` |
+| | Icon | svg | `$icon-secondary` |
+| Focus-selected | Label | text-color | `$text-primary` |
+| | Background | border | `$interactive` |
+| | Icon | svg | `$icon-primary` |
+| Disabled | Label | text-color | `$text-disabled` |
+| | Icon | svg | `$icon-disabled` |
+| | Background | background-color | `$icon-disabled` |
+
+
+
+![Examples of hover, focus-enabled, focus-selected, and disabled states](images/tab-style-3.png)
+
+
+
+
+ Examples of hover, focus-enabled, focus-selected, and disabled states for line
+ tabs.
+
-### Interactive states
+
+
+![Examples of enabled, hover, active, and disabled states for scrollable line tabs](images/tab-style-4.png)
+
+
+
+
+ Examples of enabled, hover, active, and disabled states for scrollable line
+ tabs.
+
+
+### Contained tabs
+
+| State | Element | Property | Color token |
+| -------- | --------------- | ---------------- | --------------------- |
+| Enabled | Background | background-color | `$layer-accent` |
+| | Label | text-color | `$text-secondary` |
+| | Icon | svg | `$icon-secondary` |
+| | Background | border-right | `$border-strong` |
+| | Scrollable icon | svg | `$icon-secondary` |
+| | Label | text-color | `$text-primary` |
+| Selected | Background | background-color | `$layer` |
+| | Icon | svg | `$icon-primary` |
+| | Background | border-top | `$border-interactive` |
+
+
+
+![Examples of selected and enabled contained tabs](images/tab-style-2.png)
+
+
+
+Examples of selected and enabled contained tabs.
+
+
+
+#### Interactive states
+
+
+
+| State | Element | Property | Color token |
+| -------------- | --------------------- | ---------------- | ---------------------- |
+| Hover | Background | background-color | `$layer-accent-hover` |
+| | Label | text-color | `$text-primary` |
+| | Icon | svg | `$icon-primary` |
+| | Scrollable background | background-color | `$layer-accent-hover` |
+| Active | Scrollable background | background-color | `$layer-accent-active` |
+| Focus | Scrollable background | border | `$focus` |
+| Focus-enabled | Label | text-color | `$text-secondary` |
+| | Background | background-color | `$layer-accent` |
+| | Icon | svg | `$icon-secondary` |
+| Focus-selected | Label | text-color | `$text-primary` |
+| | Background | background-color | `$layer` |
+| | Icon | svg | `$icon-primary` |
+| Disabled | Label | text-color | `$text-disabled` |
+| | Icon | svg | `$icon-disabled` |
+| | Background | background-color | `$icon-disabled` |
+| | Border | border-right | `$border-disabled` |
+
+
-| Class | Property | Color token |
-| --------------------------- | ------------- | ----------- |
-| `.bx--tabs__nav-link:hover` | text color | `$text-01` |
-| `.bx--tabs__nav-item:hover` | border-bottom | `$ui-04` |
-| `.bx--tabs__nav-item:focus` | border | `$focus` |
+![Hover, focus-enabled, focus-selected, and disabled states for contained
+tabs.](images/tab-style-5.png)
+
+
+
+
+ Hover, focus-enabled, focus-selected, and disabled states for contained tabs.
+
+
+
+
+![Enabled, hover, active, and focus states for contained scrollable tabs.](images/tab-style-6.png)
+
+
+
+
+ Examples of enabled, hover, active, and focus states for contained scrollable
+ tabs.
+
## Typography
@@ -33,17 +164,95 @@ Tab label should be set in sentence case, and should not exceed three words.
## Structure
-| Class | Property | px / rem | Spacing token |
-| --------------------- | --------------------------- | -------- | ------------- |
-| `.bx--tabs__nav-item` | border-bottom | 2px | – |
-| `.bx--tabs__nav-link` | padding-left, padding-right | 16 / 1 | `$spacing-05` |
-| `.bx--tabs__nav-link` | padding-top, padding-bottom | 8 / 0.5 | `$spacing-03` |
-| `bx--tabs__nav-item` | margin-left | 1px | - |
+### Line tabs
+
+| Element | Property | px / rem | Spacing token |
+| --------------- | --------------------------- | ---------- | ------------- |
+| Tab | height | 40 / 2.5 | – |
+| | border-bottom | 2px | – |
+| | width | auto-width | – |
+| | margin-left | 1px | – |
+| Label | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| | padding-top, padding-bottom | 8 / 0.5 | `$spacing-03` |
+| Icon | padding-right | 16 / 1 | `$spacing-05` |
+| | padding-left | 8 / 0.5 | `$spacing-03` |
+| | svg | 16 x 16 | – |
+| Scrollable icon | svg | 16 x 16 | – |
+
+
+
+![Structure and spacing measurements for line tabs.](images/tab-style-7.png)
+
+
+
+Structure and spacing measurements for line tabs | px / rem
+
+
+
+#### Icon-only modifier
+
+
+
+| Element | Property | px / rem | Spacing token |
+| -------- | ------------- | -------- | ------------- |
+| Tab (md) | height, width | 40 / 2.5 | – |
+| | svg | 16 x 16 | – |
+| Tab (lg) | height, width | 48 / 3 | – |
+| | svg | 20 x 20 | – |
+
+
+
+![Structure and spacing measurements for line tabs in px and rem](images/tab-style-7b.png)
+
+
+
+
+ Structure and spacing measurements for icon-only line tabs | px / rem
+
+
+### Contained tabs
+
+| Element | Property | px / rem | Spacing token |
+| --------------------- | --------------------------- | ---------------- | ------------- |
+| Tab | height | 40 / 2.5 | – |
+| | border-top | 2px | – |
+| | width | auto-width, grid | – |
+| Label | padding-left, padding-right | 16 / 1 | `$spacing-05` |
+| Icon | padding-right | 16 / 1 | `$spacing-05` |
+| | padding-left | 16 / 1 | `$spacing-05` |
+| | svg | 16 x 16 | – |
+| Tab | border-right | 1px | – |
+| Scrollable icon | svg | 16 x 16 | – |
+| Scrollable background | border-right, border-left | 1px | – |
+
+
+
+![Structure and spacing measurements for contained tabs in px and rem](images/tab-style-8.png)
+
+
+
+
+ Structure and spacing measurements for contained tabs | px / rem
+
+
+
+
+#### Icon-only modifier
+
+
+
+| Element | Property | px / rem | Spacing token |
+| -------- | ------------- | -------- | ------------- |
+| Tab (lg) | height, width | 48 / 3 | – |
+| | svg | 20 x 20 | – |
-![Structure and spacing measurements for tabs](images/tab-style-1.png)
+![Structure and spacing measurements for icon-only contained tabs in px and
+ rem](images/tab-style-8b.png)
-Structure and spacing measurements for tile | px / rem
+
+ Structure and spacing measurements for icon-only contained tabs | px / rem
+