diff --git a/tailwind.css b/tailwind.css
new file mode 100644
index 0000000..92948d7
--- /dev/null
+++ b/tailwind.css
@@ -0,0 +1,609 @@
+/**
+ * This file was generated by Supernova.io and should not be changed manually.
+ * To modify the format or content of this file, please contact your design system team. 
+ */
+
+@import "tailwindcss";
+
+@theme inline {
+
+  /* Reset default Tailwind configuration */
+  --color-*: initial;
+
+  /* BorderRadius */
+  /* No radius */
+  --radius-border-radius-none: 0px;
+  --radius-border-radius-small: 3px;
+  --radius-border-radius-default: 5px;
+  --radius-border-radius-medium: 7px;
+  --radius-border-radius-large: 12px;
+  /* Essentially a circle */
+  --radius-border-radius-full: 999px;
+
+  /* Space */
+  --spacing-0: 0px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-8: 8px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-20: 20px;
+  --spacing-24: 24px;
+  --spacing-28: 28px;
+  --spacing-32: 32px;
+  --spacing-36: 36px;
+  --spacing-40: 40px;
+
+  /* Dimension */
+  --spacing-semantic-stack-gap: 1px;
+  --spacing-shadow-focus-ring-width: 3px;
+  --spacing-palette-magenta-number: 0px;
+  --spacing-number: 0px;
+  --spacing-number-2: 0px;
+
+  /* Opacity */
+  --opacity-disabled: 0.5;
+
+  /* ZIndex */
+  --z-index-base: 100;
+
+  /* FontSize */
+  --text-example: 100px;
+
+  /* FontWeight */
+  --font-weight-naming-is-hard: 400;
+
+  /* FontFamily */
+  --font-palette-green-string: "String value";
+
+  /* Size */
+  --size-dimensions-default: 36px;
+  --size-dimensions-small: 28px;
+  --size-dimensions-large: 44px;
+
+  /* Color */
+  --text-color-neutral: rgb(0, 0, 1);
+  --text-color-neutral-faded: rgb(102, 114, 138);
+  --text-color-primary: rgb(26, 88, 208);
+  --text-color-critical: rgb(190, 0, 33);
+  --text-color-warning: rgb(172, 53, 0);
+  --text-color-positive: rgb(0, 121, 45);
+  --text-color-upgrade: rgb(116, 0, 239);
+  --text-color-disabled: rgb(162, 174, 200);
+  --text-color-neutral-placeholder: rgb(131, 144, 169);
+  --bg-color-elevation-base: rgb(255, 255, 255);
+  --bg-color-elevation-raised: rgb(254, 255, 255);
+  --bg-color-elevation-overlay: rgb(254, 255, 255);
+  --bg-color-neutral: rgb(96, 97, 98);
+  --bg-color-neutral-faded: rgb(96, 97, 98);
+  --bg-color-neutral-highlighted: rgb(96, 97, 98);
+  --bg-color-page: rgb(255, 255, 255);
+  --bg-color-page-faded: rgb(248, 249, 251);
+  --bg-color-primary: rgb(16, 79, 198);
+  --bg-color-primary-highlighted: rgb(0, 56, 174);
+  --bg-color-primary-faded: rgb(69, 173, 255);
+  --bg-color-critical: rgb(197, 0, 39);
+  --bg-color-critical-highlighted: rgb(172, 0, 15);
+  --bg-color-critical-faded: rgb(255, 43, 83);
+  --bg-color-warning: rgb(208, 87, 30);
+  --bg-color-warning-highlighted: rgb(184, 65, 0);
+  --bg-color-warning-faded: rgb(255, 106, 0);
+  --bg-color-positive: rgb(0, 130, 54);
+  --bg-color-positive-highlighted: rgb(0, 109, 33);
+  --bg-color-positive-faded: rgb(0, 230, 87);
+  --bg-color-upgrade: rgb(127, 34, 254);
+  --bg-color-upgrade-highlighted: rgb(109, 0, 229);
+  --bg-color-upgrade-faded: rgb(212, 93, 255);
+  --bg-color-blur: rgb(255, 255, 255);
+  --bg-color-blur-neutral: rgb(244, 245, 247);
+  --bg-color-blur-neutral-highlighted: rgb(241, 242, 244);
+  --bg-color-disabled: rgb(96, 97, 98);
+  --bg-color-disabled-faded: rgb(20, 26, 43);
+  --bg-color-focus-highlight: rgb(208, 226, 255);
+  --border-color-neutral: rgb(0, 0, 0);
+  --border-color-neutral-faded: rgb(0, 0, 0);
+  --border-color-primary: rgb(26, 88, 208);
+  --border-color-primary-faded: rgb(86, 153, 255);
+  --border-color-critical: rgb(190, 0, 33);
+  --border-color-critical-faded: rgb(255, 89, 93);
+  --border-color-warning: rgb(172, 53, 0);
+  --border-color-warning-faded: rgb(241, 117, 65);
+  --border-color-positive: rgb(0, 121, 45);
+  --border-color-positive-faded: rgb(80, 183, 105);
+  --border-color-upgrade: rgb(116, 0, 239);
+  --border-color-upgrade-faded: rgb(172, 103, 255);
+  --border-color-disabled: rgb(223, 226, 234);
+  --border-color-focus: rgb(26, 88, 208);
+  --border-color-focus-faded: rgb(86, 153, 255);
+  --bg-color-neutral: rgb(0, 0, 0);
+  --color-persistent-black: rgb(0, 0, 0);
+  --text-color-decorative-blue: rgb(0, 89, 214);
+  --bg-color-decorative-blue-faded: rgb(21, 175, 255);
+  --border-color-decorative-blue-faded: rgb(70, 153, 255);
+  --text-color-decorative-cyan: rgb(0, 117, 146);
+  --bg-color-decorative-cyan-faded: rgb(0, 223, 255);
+  --border-color-decorative-cyan-faded: rgb(0, 180, 210);
+  --text-color-decorative-fuchsia: rgb(168, 0, 194);
+  --bg-color-decorative-fuchsia-faded: rgb(255, 0, 255);
+  --border-color-decorative-fuchsia-faded: rgb(237, 59, 255);
+  --text-color-decorative-green: rgb(0, 128, 0);
+  --bg-color-decorative-green-faded: rgb(0, 238, 32);
+  --border-color-decorative-green-faded: rgb(0, 192, 76);
+  --text-color-decorative-grey: rgb(83, 100, 126);
+  --bg-color-decorative-grey-faded: rgb(128, 191, 255);
+  --border-color-decorative-grey-faded: rgb(141, 160, 187);
+  --text-color-decorative-light-grey: rgb(99, 99, 99);
+  --bg-color-primary: rgb(255, 255, 255);
+  --bg-color-decorative-light-grey-faded: rgb(190, 190, 190);
+  --bg-color-critical: rgb(255, 255, 255);
+  --bg-color-warning: rgb(255, 255, 255);
+  --bg-color-positive: rgb(255, 255, 255);
+  --bg-color-upgrade: rgb(255, 255, 255);
+  --color-persistent-white: rgb(255, 255, 255);
+  --border-color-decorative-light-grey: rgb(237, 239, 243);
+  --text-color-decorative-orange: rgb(170, 58, 0);
+  --bg-color-decorative-orange-faded: rgb(255, 120, 0);
+  --border-color-decorative-orange-faded: rgb(239, 122, 0);
+  --text-color-decorative-pink: rgb(189, 0, 108);
+  --bg-color-decorative-pink-faded: rgb(255, 0, 203);
+  --text-color-decorative-purple: rgb(114, 42, 220);
+  --bg-color-decorative-purple-faded: rgb(211, 113, 255);
+  --border-color-decorative-purple-faded: rgb(171, 115, 255);
+  --border-color-decorative-pink-faded: rgb(255, 70, 168);
+  --text-color-decorative-red: rgb(200, 0, 0);
+  --bg-color-decorative-red-faded: rgb(255, 0, 0);
+  --border-color-decorative-red-faded: rgb(255, 74, 61);
+  --text-color-decorative-teal: rgb(0, 123, 104);
+  --bg-color-decorative-teal-faded: rgb(0, 235, 200);
+  --border-color-decorative-teal-faded: rgb(0, 186, 164);
+  --text-color-decorative-yellow: rgb(138, 89, 0);
+  --bg-color-decorative-yellow-faded: rgb(255, 240, 0);
+  --border-color-decorative-yellow-faded: rgb(201, 150, 0);
+  --color-primary-200: rgb(237, 245, 255);
+  --color-primary-400: rgb(208, 226, 255);
+  --color-primary-500: rgb(140, 180, 255);
+  --color-primary-600: rgb(15, 98, 254);
+  --color-primary-700: rgb(0, 78, 225);
+  --color-primary-800: rgb(16, 79, 198);
+  --color-red-100: rgb(254, 241, 242);
+  --color-red-600: rgb(203, 16, 29);
+  --color-white: rgb(255, 255, 255);
+  --color-neutral-100-opaque: rgb(20, 26, 43);
+  --color-neutral-200-opaque: rgb(24, 45, 102);
+  --color-neutral-400: rgb(96, 105, 129);
+  --color-neutral-500: rgb(199, 205, 219);
+  --color-neutral-900: rgb(20, 23, 31);
+  --color-green-100: rgb(235, 254, 246);
+  --color-green-600: rgb(5, 117, 31);
+  --color-purple-100: rgb(245, 242, 253);
+  --color-purple-600: rgb(135, 76, 230);
+  --color-purple-700: rgb(106, 43, 191);
+  --color-orange-100: rgb(254, 248, 235);
+  --color-orange-200: rgb(251, 229, 197);
+  --color-orange-500: rgb(204, 77, 0);
+  --color-orange-600: rgb(181, 60, 10);
+  /* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim id erat vestibulum luctus. */
+  --color-00-01: rgb(255, 255, 255);
+  /* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim id erat vestibulum luctus. */
+  --color-00-02: rgb(149, 51, 51);
+  /* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel enim id erat vestibulum luctus. */
+  --color-00-03: rgb(162, 167, 49);
+  --color-palette-green-1100: rgb(14, 42, 33);
+  --color-palette-green-1000: rgb(28, 65, 48);
+  --color-palette-green-900: rgb(45, 105, 68);
+  --color-palette-green-800: rgb(60, 136, 77);
+  --color-palette-green-700: rgb(76, 164, 90);
+  --color-palette-green-600: rgb(90, 178, 97);
+  --color-palette-green-500: rgb(120, 199, 103);
+  --color-palette-green-400: rgb(143, 218, 117);
+  --color-palette-green-300: rgb(169, 226, 151);
+  --color-palette-green-200: rgb(204, 240, 194);
+  --color-palette-green-100: rgb(221, 243, 217);
+  --color-palette-green-0: rgb(238, 249, 236);
+  --color-palette-blue-1100: rgb(8, 32, 54);
+  --color-palette-blue-1000: rgb(24, 57, 93);
+  --color-palette-blue-900: rgb(36, 86, 133);
+  /* This is our new main color :) */
+  --color-palette-blue-800: rgb(48, 108, 165);
+  --color-palette-blue-700: rgb(58, 121, 189);
+  --color-palette-blue-600: rgb(69, 135, 205);
+  --color-palette-blue-500: rgb(81, 150, 221);
+  --color-palette-blue-400: rgb(106, 172, 239);
+  --color-palette-blue-300: rgb(170, 210, 244);
+  --color-palette-blue-200: rgb(205, 227, 247);
+  --color-palette-blue-100: rgb(224, 241, 254);
+  --color-palette-blue-0: rgb(236, 248, 254);
+  /* Darkest aqua there is */
+  --color-palette-aqua-1100: rgb(11, 39, 55);
+  /* Slightly less aquatic, still deep as an ocean */
+  --color-palette-aqua-1000: rgb(25, 60, 77);
+  --color-palette-aqua-900: rgb(38, 93, 113);
+  --color-palette-aqua-800: rgb(49, 108, 130);
+  --color-palette-aqua-700: rgb(58, 131, 150);
+  --color-palette-aqua-600: rgb(66, 149, 171);
+  --color-palette-aqua-500: rgb(84, 181, 203);
+  --color-palette-aqua-400: rgb(106, 211, 223);
+  --color-palette-aqua-300: rgb(145, 226, 225);
+  --color-palette-aqua-200: rgb(181, 240, 241);
+  --color-palette-aqua-100: rgb(208, 247, 248);
+  --color-palette-aqua-0: rgb(224, 251, 251);
+  --color-palette-purple-1100: rgb(29, 30, 54);
+  --color-palette-purple-1000: rgb(43, 38, 103);
+  --color-palette-purple-900: rgb(69, 62, 150);
+  --color-palette-purple-800: rgb(90, 82, 180);
+  --color-palette-purple-700: rgb(107, 98, 204);
+  --color-palette-purple-600: rgb(125, 115, 226);
+  --color-palette-purple-500: rgb(141, 132, 237);
+  --color-palette-purple-400: rgb(158, 149, 236);
+  --color-palette-purple-300: rgb(192, 194, 243);
+  --color-palette-purple-200: rgb(216, 216, 246);
+  --color-palette-purple-100: rgb(234, 234, 248);
+  --color-palette-purple-0: rgb(242, 242, 248);
+  --color-palette-neutral-1100: rgb(4, 4, 4);
+  --color-palette-neutral-1000: rgb(24, 32, 32);
+  --color-palette-neutral-900: rgb(41, 51, 51);
+  --color-palette-neutral-800: rgb(56, 65, 65);
+  --color-palette-neutral-700: rgb(84, 94, 95);
+  --color-palette-neutral-600: rgb(112, 121, 122);
+  --color-palette-neutral-500: rgb(147, 154, 155);
+  --color-palette-neutral-400: rgb(177, 182, 183);
+  --color-palette-neutral-300: rgb(201, 204, 204);
+  --color-palette-neutral-200: rgb(223, 225, 225);
+  --color-palette-neutral-100: rgb(243, 244, 244);
+  --color-palette-neutral-0: rgb(255, 255, 255);
+  --color-palette-teal-1100: rgb(11, 36, 39);
+  --color-palette-teal-1000: rgb(27, 62, 62);
+  --color-palette-teal-900: rgb(42, 100, 97);
+  --color-palette-teal-800: rgb(53, 122, 123);
+  --color-palette-teal-700: rgb(66, 148, 142);
+  --color-palette-teal-600: rgb(74, 166, 156);
+  --color-palette-teal-500: rgb(88, 193, 178);
+  --color-palette-teal-400: rgb(106, 221, 198);
+  --color-palette-teal-300: rgb(151, 231, 213);
+  --color-palette-teal-200: rgb(192, 240, 230);
+  --color-palette-teal-100: rgb(213, 246, 239);
+  --color-palette-teal-0: rgb(233, 248, 245);
+  --color-palette-pink-1100: rgb(40, 24, 33);
+  --color-palette-pink-1000: rgb(79, 25, 48);
+  --color-palette-pink-900: rgb(135, 38, 71);
+  --color-palette-pink-800: rgb(164, 59, 91);
+  --color-palette-pink-700: rgb(190, 68, 102);
+  --color-palette-pink-600: rgb(207, 81, 124);
+  --color-palette-pink-500: rgb(222, 99, 139);
+  --color-palette-pink-400: rgb(238, 127, 173);
+  --color-palette-pink-300: rgb(241, 155, 192);
+  --color-palette-pink-200: rgb(244, 184, 212);
+  --color-palette-pink-100: rgb(247, 220, 234);
+  --color-palette-pink-0: rgb(251, 234, 242);
+  --color-palette-red-1100: rgb(40, 18, 18);
+  --color-palette-red-1000: rgb(100, 28, 24);
+  --color-palette-red-900: rgb(141, 45, 40);
+  --color-palette-red-800: rgb(182, 64, 59);
+  --color-palette-red-700: rgb(202, 75, 69);
+  --color-palette-red-600: rgb(220, 88, 74);
+  --color-palette-red-500: rgb(229, 106, 91);
+  --color-palette-red-400: rgb(239, 134, 116);
+  --color-palette-red-300: rgb(241, 161, 147);
+  --color-palette-red-200: rgb(244, 187, 179);
+  --color-palette-red-100: rgb(248, 215, 211);
+  --color-palette-red-0: rgb(251, 235, 233);
+  --color-palette-orange-1100: rgb(42, 20, 15);
+  --color-palette-orange-1000: rgb(88, 29, 9);
+  --color-palette-orange-900: rgb(138, 52, 26);
+  --color-palette-orange-800: rgb(191, 92, 41);
+  --color-palette-orange-700: rgb(222, 118, 58);
+  --color-palette-orange-600: rgb(230, 130, 70);
+  --color-palette-orange-500: rgb(238, 142, 83);
+  --color-palette-orange-400: rgb(242, 160, 105);
+  /* This is our main color. And this description will show inside the documentation */
+  --color-palette-orange-300: rgb(244, 179, 136);
+  --color-palette-orange-200: rgb(246, 199, 169);
+  --color-palette-orange-100: rgb(247, 221, 206);
+  --color-palette-orange-0: rgb(252, 238, 228);
+  --color-palette-yellow-1100: rgb(42, 27, 8);
+  --color-palette-yellow-1000: rgb(78, 44, 11);
+  --color-palette-yellow-900: rgb(139, 79, 31);
+  --color-palette-yellow-800: rgb(176, 119, 42);
+  --color-palette-yellow-700: rgb(212, 155, 53);
+  --color-palette-yellow-600: rgb(246, 190, 65);
+  --color-palette-yellow-500: rgb(248, 206, 76);
+  --color-palette-yellow-400: rgb(250, 217, 97);
+  --color-palette-yellow-300: rgb(251, 225, 127);
+  --color-palette-yellow-200: rgb(251, 233, 164);
+  --color-palette-yellow-100: rgb(251, 238, 209);
+  --color-palette-yellow-0: rgb(254, 248, 228);
+  --color-palette-magenta-1100: rgb(39, 26, 44);
+  --color-palette-magenta-1000: rgb(63, 26, 78);
+  --color-palette-magenta-900: rgb(100, 42, 115);
+  --color-palette-magenta-800: rgb(133, 64, 145);
+  --color-palette-magenta-700: rgb(160, 77, 163);
+  --color-palette-magenta-600: rgb(182, 89, 180);
+  --color-palette-magenta-500: rgb(204, 107, 213);
+  --color-palette-magenta-400: rgb(227, 138, 239);
+  --color-palette-magenta-300: rgb(227, 177, 238);
+  --color-palette-magenta-200: rgb(236, 199, 244);
+  --color-palette-magenta-100: rgb(245, 228, 250);
+  --color-palette-magenta-0: rgb(252, 240, 254);
+  --bg-color-semantic-warning-background: var(--color-palette-orange-700);
+  --text-color-primary-faded: rgb(64, 110, 197);
+  --text-color-critical-faded: rgb(189, 65, 67);
+  --text-color-warning-faded: rgb(169, 88, 54);
+  --text-color-positive-faded: rgb(68, 130, 81);
+  --text-color-upgrade-faded: rgb(125, 68, 233);
+  --bg-color-blur-neutral-faded: rgb(248, 249, 251);
+  --bg-color-decorative-blue: rgb(43, 127, 255);
+  --bg-color-decorative-cyan: rgb(0, 211, 242);
+  --bg-color-decorative-teal: rgb(0, 213, 190);
+  --bg-color-decorative-green: rgb(49, 222, 105);
+  --bg-color-decorative-yellow: rgb(252, 200, 1);
+  --bg-color-decorative-orange: rgb(255, 137, 4);
+  --bg-color-decorative-red: rgb(251, 46, 39);
+  --bg-color-decorative-pink: rgb(246, 51, 154);
+  --bg-color-decorative-fuchsia: rgb(225, 42, 251);
+  --bg-color-decorative-purple: rgb(142, 81, 255);
+  --bg-color-decorative-grey: rgb(98, 116, 142);
+  --bg-color-decorative-light-grey: rgb(212, 212, 212);
+  --bg-color-decorative-blue: rgb(255, 255, 255);
+  --bg-color-decorative-cyan: rgb(0, 30, 58);
+  --bg-color-decorative-teal: rgb(0, 33, 22);
+  --bg-color-decorative-green: rgb(0, 37, 0);
+  --bg-color-decorative-yellow: rgb(66, 17, 0);
+  --bg-color-decorative-orange: rgb(53, 0, 0);
+  --bg-color-decorative-red: rgb(255, 255, 255);
+  --bg-color-decorative-pink: rgb(255, 255, 255);
+  --bg-color-decorative-fuchsia: rgb(255, 255, 255);
+  --bg-color-decorative-purple: rgb(255, 255, 255);
+  --bg-color-decorative-grey: rgb(255, 255, 255);
+  --bg-color-decorative-light-grey: rgb(38, 38, 38);
+  --border-color-decorative-blue: rgb(0, 89, 214);
+  --border-color-decorative-cyan: rgb(0, 117, 146);
+  --border-color-decorative-teal: rgb(0, 123, 104);
+  --border-color-decorative-green: rgb(0, 128, 0);
+  --border-color-decorative-yellow: rgb(138, 89, 0);
+  --border-color-decorative-orange: rgb(170, 58, 0);
+  --border-color-decorative-red: rgb(200, 0, 0);
+  --border-color-decorative-pink: rgb(189, 0, 108);
+  --border-color-decorative-fuchsia: rgb(168, 0, 194);
+  --border-color-decorative-purple: rgb(114, 42, 220);
+  --border-color-decorative-grey: rgb(83, 100, 126);
+  --border-color-decorative-light-grey: rgb(99, 99, 99);
+  --border-color-decorative-light-grey-faded: rgb(158, 158, 158);
+  --color-orange-400: rgb(255, 146, 80);
+  /* Used for error backgrunds */
+  --bg-color-semantic-error-background: var(--color-palette-red-100);
+  --border-color-semantic-error: var(--color-palette-red-600);
+  --color-semantic-error-color: var(--color-palette-red-800);
+  --color-semantic-error-icon: var(--color-palette-red-800);
+  --bg-color-semantic-info-background: var(--color-palette-blue-100);
+  --border-color-semantic-info: var(--color-palette-blue-500);
+  --color-semantic-info-color: var(--color-palette-blue-700);
+  --color-semantic-info-icon: var(--color-palette-blue-800);
+  --bg-color-semantic-opportunity-background: var(--color-palette-teal-100);
+  --border-color-semantic-opportunity: var(--color-palette-aqua-300);
+  --color-semantic-opportunity-color: var(--color-palette-aqua-800);
+  --color-semantic-opportunity-icon: var(--color-palette-aqua-700);
+  --bg-color-semantic-primary-hoverinnactivebackground: var(--color-palette-magenta-400);
+  --bg-color-semantic-primary-activebackground: var(--color-palette-magenta-600);
+  --bg-color-semantic-primary-background: var(--color-palette-magenta-500);
+  --border-color-semantic-primary: var(--color-palette-magenta-600);
+  --color-semantic-primary-color: var(--color-palette-magenta-1100);
+  --bg-color-semantic-primary-hoverbackground: var(--color-palette-magenta-600);
+  --color-semantic-primary-hover-color: var(--color-palette-magenta-1000);
+  --bg-color-semantic-primary-innactivebackground: var(--color-palette-magenta-200);
+  /* Some test description */
+  --bg-color-semantic-sale-sale30-background: var(--color-palette-teal-500);
+  --bg-color-semantic-sale-sale50-background: var(--color-palette-pink-600);
+  --bg-color-semantic-sale-sale70-background: var(--color-palette-yellow-600);
+  --color-semantic-sale-color: var(--color-palette-neutral-0);
+  --bg-color-semantic-success-background: var(--color-palette-aqua-100);
+  --border-color-semantic-success: var(--color-palette-blue-1000);
+  --color-semantic-success-color: var(--color-palette-blue-900);
+  --color-semantic-success-icon: var(--color-palette-blue-800);
+  --text-color-body: var(--color-palette-magenta-1000);
+  --text-color-headline: var(--color-palette-orange-1100);
+  --text-color-inverse: var(--color-palette-neutral-0);
+  --text-color-subtext: var(--color-palette-neutral-700);
+  --border-color-semantic-warning: var(--color-palette-orange-600);
+  --color-semantic-warning-color: var(--color-palette-orange-900);
+  --color-semantic-warning-icon: var(--color-palette-orange-800);
+
+  /* Typography */
+  --text-h1: 57px;
+  --text-h1--line-height: 64px;
+  --text-h1--letter-spacing: 0px;
+  --text-h1--font-weight: 700;
+
+  --text-h2: 43px;
+  --text-h2--line-height: 50px;
+  --text-h2--letter-spacing: 0px;
+  --text-h2--font-weight: 700;
+
+  --text-h3: 32px;
+  --text-h3--line-height: 40px;
+  --text-h3--letter-spacing: 0px;
+  --text-h3--font-weight: 700;
+
+  --text-h4: 24px;
+  --text-h4--line-height: 32px;
+  --text-h4--letter-spacing: 0px;
+  --text-h4--font-weight: 700;
+
+  --text-h5: 21px;
+  --text-h5--line-height: 29px;
+  --text-h5--letter-spacing: 0px;
+  --text-h5--font-weight: 700;
+
+  --text-large-lead: 24px;
+  --text-large-lead--line-height: 32px;
+  --text-large-lead--letter-spacing: 0px;
+  --text-large-lead--font-weight: 400;
+
+  --text-medium-lead: 21px;
+  --text-medium-lead--line-height: 29px;
+  --text-medium-lead--letter-spacing: 0px;
+  --text-medium-lead--font-weight: 400;
+
+  --text-button-label: 21px;
+  --text-button-label--line-height: 29px;
+  --text-button-label--letter-spacing: 0px;
+  --text-button-label--font-weight: 400;
+
+  --text-paragraph: 18px;
+  --text-paragraph--line-height: 26px;
+  --text-paragraph--letter-spacing: 0px;
+  --text-paragraph--font-weight: 400;
+
+  --text-small-paragraph: 16px;
+  --text-small-paragraph--line-height: 24px;
+  --text-small-paragraph--letter-spacing: 0px;
+  --text-small-paragraph--font-weight: 400;
+
+  --text-tiny-paragraph: 12px;
+  --text-tiny-paragraph--line-height: 24px;
+  --text-tiny-paragraph--letter-spacing: 0px;
+  --text-tiny-paragraph--font-weight: 400;
+
+  --text-sale: 24px;
+  --text-sale--line-height: 34px;
+  --text-sale--letter-spacing: 0px;
+  --text-sale--font-weight: 700;
+
+
+  /* Shadow */
+  --shadow-blue: 0px 4px 4px 0px var(--text-color-primary);
+}
+
+@layer components {
+  .typography-h1 {
+    font-family: "Roboto";
+    font-size: var(--text-h1);
+    font-weight: var(--text-h1--font-weight);
+    line-height: var(--text-h1--line-height);
+    letter-spacing: var(--text-h1--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-h2 {
+    font-family: "Roboto";
+    font-size: var(--text-h2);
+    font-weight: var(--text-h2--font-weight);
+    line-height: var(--text-h2--line-height);
+    letter-spacing: var(--text-h2--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-h3 {
+    font-family: "Roboto";
+    font-size: var(--text-h3);
+    font-weight: var(--text-h3--font-weight);
+    line-height: var(--text-h3--line-height);
+    letter-spacing: var(--text-h3--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-h4 {
+    font-family: "Roboto";
+    font-size: var(--text-h4);
+    font-weight: var(--text-h4--font-weight);
+    line-height: var(--text-h4--line-height);
+    letter-spacing: var(--text-h4--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-h5 {
+    font-family: "Roboto";
+    font-size: var(--text-h5);
+    font-weight: var(--text-h5--font-weight);
+    line-height: var(--text-h5--line-height);
+    letter-spacing: var(--text-h5--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-large-lead {
+    font-family: "Roboto";
+    font-size: var(--text-large-lead);
+    font-weight: var(--text-large-lead--font-weight);
+    line-height: var(--text-large-lead--line-height);
+    letter-spacing: var(--text-large-lead--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-medium-lead {
+    font-family: "Roboto";
+    font-size: var(--text-medium-lead);
+    font-weight: var(--text-medium-lead--font-weight);
+    line-height: var(--text-medium-lead--line-height);
+    letter-spacing: var(--text-medium-lead--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-button-label {
+    font-family: "Roboto";
+    font-size: var(--text-button-label);
+    font-weight: var(--text-button-label--font-weight);
+    line-height: var(--text-button-label--line-height);
+    letter-spacing: var(--text-button-label--letter-spacing);
+    text-decoration: none;
+    text-transform: uppercase;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-paragraph {
+    font-family: "Roboto";
+    font-size: var(--text-paragraph);
+    font-weight: var(--text-paragraph--font-weight);
+    line-height: var(--text-paragraph--line-height);
+    letter-spacing: var(--text-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-small-paragraph {
+    font-family: "Roboto";
+    font-size: var(--text-small-paragraph);
+    font-weight: var(--text-small-paragraph--font-weight);
+    line-height: var(--text-small-paragraph--line-height);
+    letter-spacing: var(--text-small-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-tiny-paragraph {
+    font-family: "Roboto";
+    font-size: var(--text-tiny-paragraph);
+    font-weight: var(--text-tiny-paragraph--font-weight);
+    line-height: var(--text-tiny-paragraph--line-height);
+    letter-spacing: var(--text-tiny-paragraph--letter-spacing);
+    text-decoration: none;
+    text-transform: none;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+  .typography-sale {
+    font-family: "Roboto";
+    font-size: var(--text-sale);
+    font-weight: var(--text-sale--font-weight);
+    line-height: var(--text-sale--line-height);
+    letter-spacing: var(--text-sale--letter-spacing);
+    text-decoration: none;
+    text-transform: uppercase;
+    text-indent: 0px;
+    margin-bottom: 0px;
+  }
+}