@bcc-code/design-tokens 3.0.12 → 3.0.16

package/build/bcc/css/tailwind-light.css

@@ -4,7 +4,6 @@
 
 
 @theme {
-  --font-archivo: Archivo;
   --color-neutral-0: #ffffff;
   --color-neutral-100: #f7f8f9;
   --color-neutral-200: #f1f2f4;
@@ -36,7 +35,6 @@
   --color-dark-neutral-900: #b6c2cf;
   --color-dark-neutral-1000: #c7d1db;
   --color-dark-neutral-1100: #dee4ea;
-  --color-dark-neutral-negative-100: #101214;
   --color-dark-neutral-alpha-100-a: rgba(0, 0, 0, 0.24);
   --color-dark-neutral-alpha-200-a: rgba(188, 214, 240, 0.08);
   --color-dark-neutral-alpha-250-a: rgba(188, 214, 240, 0.1);
@@ -177,26 +175,24 @@
   --spacing-negative-300: -1.5rem; /** -24px */
   --spacing-negative-400: -2rem; /** -32px */
   --radius-none: 0; /** 0 */
-  --radius-xs: 0.125rem; /** 2px */
-  --radius-sm: 0.25rem; /** 4px */
+  --radius-2xs: 0.125rem; /** 2px */
+  --radius-xs: 0.25rem; /** 4px */
+  --radius-sm: 0.375rem; /** 6px */
   --radius-md: 0.5rem; /** 8px */
-  --radius-lg: 1rem; /** 16px */
-  --radius-xl: 1.5rem; /** 24px */
-  --radius-2xl: 2rem; /** 32px */
-  --radius-3xl: 3rem; /** 48px */
+  --radius-lg: 0.75rem; /** 12px */
+  --radius-xl: 1rem; /** 16px */
+  --radius-2xl: 1.5rem; /** 24px */
+  --radius-3xl: 2rem; /** 32 */
+  --radius-4xl: 3rem; /** 48px */
   --radius-full: 999px;
-  --icon-size-xs: 1rem; /** 16px */
-  --icon-size-sm: 1.25rem; /** 20px */
-  --icon-size-md: 1.5rem; /** 24px */
-  --icon-size-lg: 2rem; /** 32px */
-  --icon-size-xl: 3rem; /** 48px */
   --border-width-0: 0;
   --border-width-1: 1px;
   --border-width-2: 2px;
+  --font-archivo: Archivo;
   --font-weight-regular: 400;
   --font-weight-medium: 500;
   --font-weight-bold: 700;
-  --leading-1: 12px;
+  --leading-1: 14px;
   --leading-2: 16px;
   --leading-3: 20px;
   --leading-4: 24px;
@@ -204,9 +200,9 @@
   --leading-6: 32px;
   --leading-7: 36px;
   --leading-8: 40px;
-  --leading-9: 52px;
+  --leading-9: 56px;
   --leading-10: 64px;
-  --leading-none: 1;
+  --leading-none: normal;
   --text-xs: 0.75rem; /** 12px */
   --text-sm: 0.875rem; /** 14px */
   --text-md: 1rem; /** 16px */
@@ -215,6 +211,9 @@
   --text-2xl: 2em; /** 32px */
   --text-3xl: 2.25rem; /** 36px */
   --text-4xl: 3rem; /** 48px */
+  --shadow-overlow: 0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12);
+  --shadow-overlay: 0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31);
+  --shadow-raised: 0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31);
   --color-text-default: var(--color-neutral-1000);
   --color-text-subtle: var(--color-neutral-800);
   --color-text-subtlest: var(--color-neutral-700);
@@ -356,18 +355,18 @@
   --color-background-brand-boldest-default: var(--color-bcc-1000);
   --color-background-brand-boldest-hover: var(--color-bcc-900);
   --color-background-brand-boldest-pressed: var(--color-bcc-800);
-  --color-background-accent-neutral-default: var(--color-neutral-alpha-300-a);
-  --color-background-accent-neutral-hover: var(--color-neutral-alpha-400-a);
-  --color-background-accent-neutral-pressed: var(--color-neutral-alpha-500-a);
-  --color-background-accent-neutral-subtle-default: var(--color-neutral-alpha-200-a);
-  --color-background-accent-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
-  --color-background-accent-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
-  --color-background-accent-neutral-subtler-default: var(--color-neutral-alpha-100-a);
-  --color-background-accent-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
-  --color-background-accent-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
-  --color-background-accent-neutral-subtlest-default: var(--color-transparent);
-  --color-background-accent-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
-  --color-background-accent-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
+  --color-background-neutral-default: var(--color-neutral-alpha-300-a);
+  --color-background-neutral-hover: var(--color-neutral-alpha-400-a);
+  --color-background-neutral-pressed: var(--color-neutral-alpha-500-a);
+  --color-background-neutral-subtle-default: var(--color-neutral-alpha-200-a);
+  --color-background-neutral-subtle-hover: var(--color-neutral-alpha-300-a);
+  --color-background-neutral-subtle-pressed: var(--color-neutral-alpha-400-a);
+  --color-background-neutral-subtler-default: var(--color-neutral-alpha-100-a);
+  --color-background-neutral-subtler-hover: var(--color-neutral-alpha-200-a);
+  --color-background-neutral-subtler-pressed: var(--color-neutral-alpha-300-a);
+  --color-background-neutral-subtlest-default: var(--color-transparent);
+  --color-background-neutral-subtlest-hover: var(--color-neutral-alpha-100-a);
+  --color-background-neutral-subtlest-pressed: var(--color-neutral-alpha-200-a);
   --color-background-accent-blue-subtle-default: var(--color-blue-400);
   --color-background-accent-blue-subtle-hover: var(--color-blue-300);
   --color-background-accent-blue-subtle-pressed: var(--color-blue-200);
@@ -442,7 +441,10 @@
   --color-background-accent-orange-bolder-pressed: var(--color-orange-900);
   --color-background-accent-red-subtle-default: var(--color-red-400);
   --color-background-accent-red-subtle-hover: var(--color-red-300);
-  --color-background-accent-red-subtle-pressed: var(--color-red-400);
+  --color-background-accent-red-subtle-pressed: var(--color-red-200);
+  --color-background-accent-red-subtler-default: var(--color-red-200);
+  --color-background-accent-red-subtler-hover: var(--color-red-300);
+  --color-background-accent-red-subtler-pressed: var(--color-red-400);
   --color-background-accent-red-subtlest-default: var(--color-red-100);
   --color-background-accent-red-subtlest-hover: var(--color-red-200);
   --color-background-accent-red-subtlest-pressed: var(--color-red-300);
@@ -501,13 +503,20 @@
   --color-elevation-surface-raised-hovered: var(--color-neutral-200);
   --color-elevation-surface-raised-pressed: var(--color-neutral-300);
   --color-elevation-surface-sunken-default: var(--color-neutral-100);
-  --heading-xs: var(--font-weight-medium) var(--text-xs)/var(--leading-2) var(--font-archivo);
-  --heading-sm: var(--font-weight-medium) var(--text-md)/var(--leading-3) var(--font-archivo);
-  --heading-md: var(--font-weight-medium) var(--text-lg)/var(--leading-4) var(--font-archivo);
-  --heading-lg: var(--font-weight-medium) var(--text-xl)/var(--leading-5) var(--font-archivo);
-  --heading-xl: var(--font-weight-medium) var(--text-2xl)/var(--leading-6) var(--font-archivo);
-  --heading-2xl: var(--font-weight-medium) var(--text-3xl)/var(--leading-8) var(--font-archivo);
-  --heading-3xl: var(--font-weight-medium) var(--text-4xl)/var(--leading-9) var(--font-archivo);
+  --icon-size-xs: var(--spacing-200); /** 16px */
+  --icon-size-sm: var(--spacing-250); /** 20px */
+  --icon-size-md: var(--spacing-300); /** 24px */
+  --icon-size-lg: var(--spacing-400); /** 32px */
+  --icon-size-xl: var(--spacing-600); /** 48px */
+  --heading-xs: var(--font-weight-bold) var(--text-xs)/var(--leading-1) var(--font-archivo);
+  --heading-sm: var(--font-weight-bold) var(--text-sm)/var(--leading-2) var(--font-archivo);
+  --heading-md: var(--font-weight-bold) var(--text-md)/var(--leading-3) var(--font-archivo);
+  --heading-lg: var(--font-weight-bold) var(--text-lg)/var(--leading-4) var(--font-archivo);
+  --heading-xl: var(--font-weight-bold) var(--text-xl)/var(--leading-5) var(--font-archivo);
+  --heading-2xl: var(--font-weight-bold) var(--text-2xl)/var(--leading-6) var(--font-archivo);
+  --heading-3xl: var(--font-weight-bold) var(--text-3xl)/var(--leading-8) var(--font-archivo);
+  --heading-4xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-9) var(--font-archivo);
+  --heading-5xl: var(--font-weight-bold) var(--text-4xl)/var(--leading-10) var(--font-archivo);
   --body-sm: var(--font-weight-regular) var(--text-xs)/var(--leading-2) var(--font-archivo);
   --body-md: var(--font-weight-regular) var(--text-sm)/var(--leading-3) var(--font-archivo);
   --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-archivo);

package/build/bcc/js/dark.js

@@ -3,9 +3,6 @@
  */
 
 export default {
-  "font-family": {
-    archivo: "Archivo",
-  },
   color: {
     neutral: {
       0: "#ffffff",
@@ -43,7 +40,6 @@ export default {
       900: "#b6c2cf",
       1000: "#c7d1db",
       1100: "#dee4ea",
-      "negative-100": "#101214",
     },
     "dark-neutral-alpha": {
       "100A": "rgba(0, 0, 0, 0.24)",
@@ -174,7 +170,7 @@ export default {
       900: "#352465",
       1000: "#1d154d",
     },
-    Transparent: "rgba(0, 0, 0, 0)",
+    transparent: "rgba(0, 0, 0, 0)",
     text: {
       default: "#b6c2cf",
       subtle: "#9fadbc",
@@ -346,7 +342,6 @@ export default {
         },
       },
       inverse: {
-        default: "#ffffff",
         subtle: {
           default: "rgba(255, 255, 255, 0.16)",
           hovered: "rgba(255, 255, 255, 0.24)",
@@ -419,18 +414,180 @@ export default {
           hover: "#a0cec8",
           pressed: "#d2eeeb",
         },
+        boldest: {
+          default: "#f0fcfa",
+          hover: "#d2eeeb",
+          pressed: "#a0cec8",
+        },
+      },
+      neutral: {
+        default: "rgba(188, 214, 240, 0.16)",
+        hover: "rgba(188, 214, 240, 0.28)",
+        pressed: "rgba(188, 214, 240, 0.5)",
+        subtle: {
+          default: "rgba(188, 214, 240, 0.08)",
+          hover: "rgba(188, 214, 240, 0.16)",
+          pressed: "rgba(188, 214, 240, 0.28)",
+        },
+        subtler: {
+          default: "rgba(0, 0, 0, 0.24)",
+          hover: "rgba(188, 214, 240, 0.08)",
+          pressed: "rgba(188, 214, 240, 0.16)",
+        },
+        subtlest: {
+          default: "rgba(0, 0, 0, 0)",
+          hover: "rgba(188, 214, 240, 0.1)",
+          pressed: "rgba(188, 214, 240, 0.16)",
+        },
       },
       accent: {
-        neutral: {
+        blue: {
+          subtlest: {
+            default: "#091e47",
+            hover: "#212c64",
+            pressed: "#273c8f",
+          },
+          subtler: {
+            default: "#212c64",
+            hover: "#273c8f",
+            pressed: "#274eb5",
+          },
+          subtle: {
+            default: "#274eb5",
+            hover: "#446add",
+            pressed: "#608ef6",
+          },
+          bolder: {
+            default: "#7cabf9",
+            hover: "#a6cdfd",
+            pressed: "#d9ecff",
+          },
+        },
+        teal: {
+          subtlest: {
+            default: "#0c2132",
+            hover: "#0d324d",
+            pressed: "#09486b",
+          },
+          subtler: {
+            default: "#0d324d",
+            hover: "#09486b",
+            pressed: "#005b81",
+          },
+          subtle: {
+            default: "#005b81",
+            hover: "#0b7da1",
+            pressed: "#1a9eb7",
+          },
+          bolder: {
+            default: "#51b9cf",
+            hover: "#82d3e3",
+            pressed: "#c3f2f8",
+          },
+        },
+        green: {
+          subtlest: {
+            default: "#032429",
+            hover: "#073734",
+            pressed: "#094c3b",
+          },
+          subtler: {
+            default: "#073734",
+            hover: "#094c3b",
+            pressed: "#0c6241",
+          },
+          subtle: {
+            default: "#0c6241",
+            hover: "#09825d",
+            pressed: "#1ca673",
+          },
+          bolder: {
+            default: "#32c180",
+            hover: "#83d895",
+            pressed: "#cbf3c9",
+          },
+        },
+        brown: {
+          subtlest: {
+            default: "#2e1b0f",
+            hover: "#3f2c1e",
+            pressed: "#553d28",
+          },
+          subtler: {
+            default: "#3f2c1e",
+            hover: "#553d28",
+            pressed: "#6e5232",
+          },
+          subtle: {
+            default: "#6e5232",
+            hover: "#8b6d45",
+            pressed: "#a98c66",
+          },
+          bolder: {
+            default: "#bea889",
+            hover: "#d1c5b0",
+            pressed: "#ece8dc",
+          },
+        },
+        yellow: {
+          subtlest: {
+            default: "#2d1f00",
+            hover: "#4b2c04",
+            pressed: "#653805",
+          },
+          subtler: {
+            default: "#4b2c04",
+            hover: "#653805",
+            pressed: "#854901",
+          },
+          subtle: {
+            default: "#854901",
+            hover: "#a4670b",
+            pressed: "#bc870d",
+          },
+          bolder: {
+            default: "#d5a406",
+            hover: "#e9c348",
+            pressed: "#f8e6a0",
+          },
+        },
+        orange: {
+          subtlest: {
+            default: "#420e0d",
+            hover: "#5d1712",
+            pressed: "#782612",
+          },
+          subtler: {
+            default: "#5d1712",
+            hover: "#782612",
+            pressed: "#943a14",
+          },
+          subtle: {
+            default: "#943a14",
+            hover: "#b55919",
+            pressed: "#da772e",
+          },
+          bolder: {
+            default: "#f19457",
+            hover: "#f6b981",
+            pressed: "#fee3c1",
+          },
+        },
+        red: {
           subtlest: {
-            default: "rgba(188, 214, 240, 0.16)",
-            hover: "rgba(188, 214, 240, 0.28)",
-            pressed: "rgba(188, 214, 240, 0.08)",
+            default: "#440223",
+            hover: "#630d2e",
+            pressed: "#811436",
+          },
+          subtler: {
+            default: "#630d2e",
+            hover: "#811436",
+            pressed: "#a42237",
           },
           subtle: {
-            default: "rgba(0, 0, 0, 0)",
-            hover: "rgba(188, 214, 240, 0.08)",
-            pressed: "rgba(188, 214, 240, 0.16)",
+            default: "#a42237",
+            hover: "#ca414e",
+            pressed: "#ed6362",
           },
           bolder: {
             default: "#fa877e",
@@ -483,24 +640,27 @@ export default {
           },
         },
         gray: {
-          subtlest: {
+          default: "#2c333a",
+          hover: "#454f59",
+          pressed: "#596773",
+          subtle: {
             default: "#22272b",
             hover: "#2c333a",
             pressed: "#454f59",
           },
           subtler: {
-            default: "#454f59",
-            hover: "#596773",
-            pressed: "#738496",
-          },
-          subtle: {
-            default: "#596773",
-            hover: "#454f59",
+            default: "#101214",
+            hover: "#22272b",
             pressed: "#2c333a",
           },
+          subtlest: {
+            default: "#161a1d",
+            hover: "#101214",
+            pressed: "#22272b",
+          },
           bolder: {
             default: "#8c9bab",
-            hover: "#b6c2cf",
+            hover: "#9fadbc",
             pressed: "#b6c2cf",
           },
         },
@@ -569,13 +729,15 @@ export default {
   },
   "border-radius": {
     none: "0",
-    xs: "0.125rem",
-    sm: "0.25rem",
+    "2xs": "0.125rem",
+    xs: "0.25rem",
+    sm: "0.375rem",
     md: "0.5rem",
-    lg: "1rem",
-    xl: "1.5rem",
-    "2xl": "2rem",
-    "3xl": "3rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    "2xl": "1.5rem",
+    "3xl": "2rem",
+    "4xl": "3rem",
     full: "999px",
   },
   "icon-size": {
@@ -590,13 +752,16 @@ export default {
     1: "1px",
     2: "2px",
   },
+  "font-family": {
+    archivo: "Archivo",
+  },
   "font-weight": {
     regular: 400,
     medium: 500,
     bold: 700,
   },
   "line-height": {
-    1: "12px",
+    1: "14px",
     2: "16px",
     3: "20px",
     4: "24px",
@@ -604,9 +769,9 @@ export default {
     6: "32px",
     7: "36px",
     8: "40px",
-    9: "52px",
+    9: "56px",
     10: "64px",
-    none: 1,
+    none: "normal",
   },
   "font-size": {
     xs: "0.75rem",
@@ -618,31 +783,28 @@ export default {
     "3xl": "2.25rem",
     "4xl": "3rem",
   },
-  elevation: {
-    shadow: {
-      overflow: {
-        default: "0 0 12px 0 rgba(3, 4, 4, 0.56), 0 0 1px 0 rgba(3, 4, 4, 0.5)",
-        perimeter: "inset 0 0 0 0 #091e421f",
-        spread: "inset 0 0 0 0 #091e4229",
-      },
-      overlay:
-        "0 8px 12px 0 rgba(9, 30, 66, 0.15), 0 0 1px 0 1px rgba(9, 30, 66, 0.31)",
-      raised:
-        "0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31)",
-    },
-  },
   heading: {
-    xs: "500 0.75rem/16px Archivo",
-    sm: "500 1rem/20px Archivo",
-    md: "500 1.25rem/24px Archivo",
-    lg: "500 1.5rem/28px Archivo",
-    xl: "500 2em/32px Archivo",
-    "2xl": "500 2.25rem/40px Archivo",
-    "3xl": "500 3rem/52px Archivo",
+    xs: "700 0.75rem/14px Archivo",
+    sm: "700 0.875rem/16px Archivo",
+    md: "700 1rem/20px Archivo",
+    lg: "700 1.25rem/24px Archivo",
+    xl: "700 1.5rem/28px Archivo",
+    "2xl": "700 2em/32px Archivo",
+    "3xl": "700 2.25rem/40px Archivo",
+    "4xl": "700 3rem/56px Archivo",
+    "5xl": "700 3rem/64px Archivo",
   },
   body: {
     sm: "400 0.75rem/16px Archivo",
     md: "400 0.875rem/20px Archivo",
     lg: "400 1rem/24px Archivo",
   },
+  elevation: {
+    shadow: {
+      overlow: "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
+      overlay:
+        "0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31)",
+      raised: "0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31)",
+    },
+  },
 };

package/build/bcc/js/light.js

@@ -3,9 +3,6 @@
  */
 
 export default {
-  "font-family": {
-    archivo: "Archivo",
-  },
   color: {
     neutral: {
       0: "#ffffff",
@@ -43,7 +40,6 @@ export default {
       900: "#b6c2cf",
       1000: "#c7d1db",
       1100: "#dee4ea",
-      "negative-100": "#101214",
     },
     "dark-neutral-alpha": {
       "100A": "rgba(0, 0, 0, 0.24)",
@@ -174,7 +170,7 @@ export default {
       900: "#352465",
       1000: "#1d154d",
     },
-    Transparent: "rgba(0, 0, 0, 0)",
+    transparent: "rgba(0, 0, 0, 0)",
     text: {
       default: "#172b4d",
       subtle: "#44546f",
@@ -424,27 +420,27 @@ export default {
           pressed: "#014d49",
         },
       },
-      accent: {
-        neutral: {
-          default: "rgba(9, 30, 77, 0.14)",
-          hover: "rgba(9, 30, 77, 0.32)",
-          pressed: "rgba(9, 30, 77, 0.5)",
-          subtle: {
-            default: "rgba(9, 30, 77, 0.06)",
-            hover: "rgba(9, 30, 77, 0.14)",
-            pressed: "rgba(9, 30, 77, 0.32)",
-          },
-          subtler: {
-            default: "rgba(9, 30, 77, 0.03)",
-            hover: "rgba(9, 30, 77, 0.06)",
-            pressed: "rgba(9, 30, 77, 0.14)",
-          },
-          subtlest: {
-            default: "rgba(0, 0, 0, 0)",
-            hover: "rgba(9, 30, 77, 0.03)",
-            pressed: "rgba(9, 30, 77, 0.06)",
-          },
+      neutral: {
+        default: "rgba(9, 30, 77, 0.14)",
+        hover: "rgba(9, 30, 77, 0.32)",
+        pressed: "rgba(9, 30, 77, 0.5)",
+        subtle: {
+          default: "rgba(9, 30, 77, 0.06)",
+          hover: "rgba(9, 30, 77, 0.14)",
+          pressed: "rgba(9, 30, 77, 0.32)",
         },
+        subtler: {
+          default: "rgba(9, 30, 77, 0.03)",
+          hover: "rgba(9, 30, 77, 0.06)",
+          pressed: "rgba(9, 30, 77, 0.14)",
+        },
+        subtlest: {
+          default: "rgba(0, 0, 0, 0)",
+          hover: "rgba(9, 30, 77, 0.03)",
+          pressed: "rgba(9, 30, 77, 0.06)",
+        },
+      },
+      accent: {
         blue: {
           subtle: {
             default: "#7cabf9",
@@ -581,6 +577,11 @@ export default {
           subtle: {
             default: "#fa877e",
             hover: "#fab6ad",
+            pressed: "#fee2dd",
+          },
+          subtler: {
+            default: "#fee2dd",
+            hover: "#fab6ad",
             pressed: "#fa877e",
           },
           subtlest: {
@@ -728,13 +729,15 @@ export default {
   },
   "border-radius": {
     none: "0",
-    xs: "0.125rem",
-    sm: "0.25rem",
+    "2xs": "0.125rem",
+    xs: "0.25rem",
+    sm: "0.375rem",
     md: "0.5rem",
-    lg: "1rem",
-    xl: "1.5rem",
-    "2xl": "2rem",
-    "3xl": "3rem",
+    lg: "0.75rem",
+    xl: "1rem",
+    "2xl": "1.5rem",
+    "3xl": "2rem",
+    "4xl": "3rem",
     full: "999px",
   },
   "icon-size": {
@@ -749,13 +752,16 @@ export default {
     1: "1px",
     2: "2px",
   },
+  "font-family": {
+    archivo: "Archivo",
+  },
   "font-weight": {
     regular: 400,
     medium: 500,
     bold: 700,
   },
   "line-height": {
-    1: "12px",
+    1: "14px",
     2: "16px",
     3: "20px",
     4: "24px",
@@ -763,9 +769,9 @@ export default {
     6: "32px",
     7: "36px",
     8: "40px",
-    9: "52px",
+    9: "56px",
     10: "64px",
-    none: 1,
+    none: "normal",
   },
   "font-size": {
     xs: "0.75rem",
@@ -778,17 +784,27 @@ export default {
     "4xl": "3rem",
   },
   heading: {
-    xs: "500 0.75rem/16px Archivo",
-    sm: "500 1rem/20px Archivo",
-    md: "500 1.25rem/24px Archivo",
-    lg: "500 1.5rem/28px Archivo",
-    xl: "500 2em/32px Archivo",
-    "2xl": "500 2.25rem/40px Archivo",
-    "3xl": "500 3rem/52px Archivo",
+    xs: "700 0.75rem/14px Archivo",
+    sm: "700 0.875rem/16px Archivo",
+    md: "700 1rem/20px Archivo",
+    lg: "700 1.25rem/24px Archivo",
+    xl: "700 1.5rem/28px Archivo",
+    "2xl": "700 2em/32px Archivo",
+    "3xl": "700 2.25rem/40px Archivo",
+    "4xl": "700 3rem/56px Archivo",
+    "5xl": "700 3rem/64px Archivo",
   },
   body: {
     sm: "400 0.75rem/16px Archivo",
     md: "400 0.875rem/20px Archivo",
     lg: "400 1rem/24px Archivo",
   },
+  elevation: {
+    shadow: {
+      overlow: "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
+      overlay:
+        "0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31)",
+      raised: "0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31)",
+    },
+  },
 };