diff --git a/.gitignore b/.gitignore
index 18299f1..35136c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@ dist-ssr
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
+!.vscode/*.code-snippets
 .idea
 .DS_Store
 *.suo
diff --git a/.vscode/scss.code-snippets b/.vscode/scss.code-snippets
new file mode 100644
index 0000000..699fa48
--- /dev/null
+++ b/.vscode/scss.code-snippets
@@ -0,0 +1,404 @@
+{
+  "Block class BEM": {
+    "scope": "scss",
+    "prefix": "block-class",
+    "body": [
+      "$$block-class: \"${TM_FILENAME_BASE}\";",
+      "",
+      ".#{$$block-class} {",
+      "  // styles for $$block-class",
+      "  $1",
+      "}",
+      ""
+    ]
+  },
+  "Sytlelint disable next line": {
+    "scope": "scss",
+    "prefix": "//",
+    "body": ["// stylelint-disable-next-line"]
+  },
+  "Sytlelint disable next line Carbon Layout": {
+    "scope": "scss",
+    "prefix": "//la",
+    "body": ["// stylelint-disable-next-line carbon/layout-token-use"]
+  },
+  "Sytlelint disable next line Carbon Motion Duration": {
+    "scope": "scss",
+    "prefix": "//mo",
+    "body": ["// stylelint-disable-next-line carbon/motion-duration-use"]
+  },
+  "Sytlelint disable next line Carbon Motion Duration": {
+    "scope": "scss",
+    "prefix": "//mod",
+    "body": ["// stylelint-disable-next-line carbon/motion-duration-use"]
+  },
+  "Sytlelint disable next line Carbon Motion Easing": {
+    "scope": "scss",
+    "prefix": "//moe",
+    "body": ["// stylelint-disable-next-line carbon/motion-easing-use"]
+  },
+  "Sytlelint disable next line Carbon Type": {
+    "scope": "scss",
+    "prefix": "//ty",
+    "body": ["// stylelint-disable-next-line carbon/type-token-use"]
+  },
+  "Sytlelint disable next line Carbon Theme": {
+    "scope": "scss",
+    "prefix": "//th",
+    "body": ["// stylelint-disable-next-line carbon/theme-token-use"]
+  },
+  "$spacing-01 (0.125rem 2px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-01",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-02 (0.25rem 4px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-02",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-03 (0.5rem 8px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-03",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-04 (0.75rem 12px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-04",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-05 (1rem 16px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-05",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-06 (1.5rem 24px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-06",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-07 (2rem 32px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-07",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-08 (2.5rem 40px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-08",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-09 (3rem 48px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-09",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-10 (4rem 64px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-10",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-11 (5rem 80px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-11",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-12 (6rem 96px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-12",
+    "description": "Carbon spacing token"
+  },
+  "$spacing-13 (10rem 160px)": {
+    "scope": "scss",
+    "prefix": ["sp", "$sp", "spacing", "$spacing"],
+    "body": "$$spacing-13",
+    "description": "Carbon spacing token"
+  },
+  "$duration-fast-01 (70ms)": {
+    "scope": "scss",
+    "prefix": ["du", "$du", "duration", "$duration"],
+    "body": "$$duration-fast-01",
+    "description": "Carbon duration token"
+  },
+  "$duration-fast-02 (110ms)": {
+    "scope": "scss",
+    "prefix": ["du", "$du", "duration", "$duration"],
+    "body": "$$duration-fast-02",
+    "description": "Carbon duration token"
+  },
+  "$duration-moderate-01 (150ms)": {
+    "scope": "scss",
+    "prefix": ["du", "$du", "duration", "$duration"],
+    "body": "$$duration-moderate-01",
+    "description": "Carbon duration token"
+  },
+  "$duration-moderate-02 (240ms)": {
+    "scope": "scss",
+    "prefix": ["du", "$du", "duration", "$duration"],
+    "body": "$$duration-moderate-02",
+    "description": "Carbon duration token"
+  },
+  "$duration-slow-01 (400ms)": {
+    "scope": "scss",
+    "prefix": ["du", "$du", "duration", "$duration"],
+    "body": "$$duration-slow-01",
+    "description": "Carbon duration token"
+  },
+  "$duration-slow-02 (700ms)": {
+    "scope": "scss",
+    "prefix": ["du", "$du", "duration", "$duration"],
+    "body": "$$duration-slow-02",
+    "description": "Carbon duration token"
+  },
+  "@include motion('standard', 'productive')": {
+    "scope": "scss",
+    "prefix": ["mo", "motion"],
+    "body": "@include motion('standard', 'productive')",
+    "description": "Carbon duration token"
+  },
+  "@include motion('standard', 'expressive')": {
+    "scope": "scss",
+    "prefix": ["mo", "motion"],
+    "body": "@include motion('standard', 'expressive')",
+    "description": "Carbon duration token"
+  },
+  "@include motion('entrance', 'productive')": {
+    "scope": "scss",
+    "prefix": ["mo", "motion"],
+    "body": "@include motion('entrance', 'productive')",
+    "description": "Carbon duration token"
+  },
+  "@include motion('entrance', 'expressive')": {
+    "scope": "scss",
+    "prefix": ["mo", "motion"],
+    "body": "@include motion(entrance, 'expressive')",
+    "description": "Carbon duration token"
+  },
+  "@include motion('exit', 'productive')": {
+    "scope": "scss",
+    "prefix": ["mo", "motion"],
+    "body": "@include motion('exit', 'productive')",
+    "description": "Carbon duration token"
+  },
+  "@include motion('exit', 'expressive')": {
+    "scope": "scss",
+    "prefix": ["mo", "motion"],
+    "body": "@include motion('exit', 'expressive')",
+    "description": "Carbon duration token"
+  },
+  "@include type-scale('caption-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('caption-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('caption-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('caption-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('label-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('label-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('label-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('label-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('helper-text-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('helper-text-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('helper-text-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('helper-text-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('body-short-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('body-short-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('body-long-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('body-long-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('body-short-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('body-short-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('body-long-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('body-long-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('code-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('code-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('code-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('code-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('heading-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('heading-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('productive-heading-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('productive-heading-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('heading-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('heading-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('productive-Heading-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('productive-Heading-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('productive-heading-03')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('productive-heading-03')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('productive-heading-04')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('productive-heading-04')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('productive-heading-05')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('productive-heading-05')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('productive-heading-06')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('productive-heading-06')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('productive-heading-07')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('productive-heading-07')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('expressive-heading-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('expressive-heading-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('expressive-heading-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('expressive-heading-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('expressive-heading-03')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('expressive-heading-03')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('expressive-heading-04')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('expressive-heading-04')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('expressive-heading-05')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('expressive-heading-05')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('expressive-heading-06')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('expressive-heading-06')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('expressive-paragraph-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('expressive-paragraph-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('quotation-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('quotation-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('quotation-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('quotation-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('display-01')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('display-01')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('display-02')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('display-02')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('display-03')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('display-03')",
+    "description": "Carbon typography token"
+  },
+  "@include type-scale('display-04')": {
+    "scope": "scss",
+    "prefix": ["ty", "type"],
+    "body": "@include type-scale('display-04')",
+    "description": "Carbon typography token"
+  }
+}