diff --git a/packages/design-tokens/build/css/components/dark/badge.css b/packages/design-tokens/build/css/components/dark/badge.css
new file mode 100644
index 000000000..86924e21b
--- /dev/null
+++ b/packages/design-tokens/build/css/components/dark/badge.css
@@ -0,0 +1,55 @@
+:root {
+  --badge-outline-grey-border-color: #707070;
+  --badge-outline-grey-foreground-color: #f0f0f0;
+  --badge-outline-grey-inverted-foreground-color: #f0f0f0;
+  --badge-outline-grey-inverted-border-color: #b8b8b8;
+  --badge-outline-green-inverted-border-color: #76d5a1;
+  --badge-outline-green-inverted-foreground-color: #e3faeb;
+  --badge-outline-green-border-color: #76d5a1;
+  --badge-outline-green-foreground-color: #e3faeb;
+  --badge-outline-gold-foreground-color: #fff6e0;
+  --badge-outline-gold-inverted-border-color: #fbc64b;
+  --badge-outline-gold-inverted-foreground-color: #fff6e0;
+  --badge-outline-gold-border-color: #f7b51d;
+  --badge-outline-border-width: 2;
+  --badge-outline-cyan-foreground-color: #dbeaff;
+  --badge-outline-cyan-inverted-foreground-color: #dbeaff;
+  --badge-outline-cyan-inverted-border-color: #5692fb;
+  --badge-outline-cyan-border-color: #5692fb;
+  --badge-outline-red-inverted-border-color: #f2636a;
+  --badge-outline-red-inverted-foreground-color: #ffebeb;
+  --badge-outline-red-border-color: #f24550;
+  --badge-outline-red-foreground-color: #ffebeb;
+  --badge-outline-background-color: #aaaaaa00;
+  --badge-strong-green-foreground-color: #133922;
+  --badge-strong-green-background-color: #90dab2;
+  --badge-strong-cyan-background-color: #75a7fd;
+  --badge-strong-cyan-foreground-color: #010a19;
+  --badge-strong-grey-background-color: #585858;
+  --badge-strong-grey-foreground-color: #0b0b0b;
+  --badge-strong-gold-foreground-color: #2e1103;
+  --badge-strong-gold-background-color: #ffd76f;
+  --badge-strong-red-background-color: #f58e92;
+  --badge-strong-red-foreground-color: #3b1216;
+  --badge-gap: 4;
+  --badge-soft-green-foreground-color: #133922;
+  --badge-soft-green-background-color: #90dab2;
+  --badge-soft-grey-background-color: #c1c1c1;
+  --badge-soft-grey-foreground-color: #0b0b0b;
+  --badge-soft-red-background-color: #f58e92;
+  --badge-soft-red-foreground-color: #3b1216;
+  --badge-soft-cyan-background-color: #75a7fd;
+  --badge-soft-cyan-foreground-color: #010a19;
+  --badge-soft-gold-foreground-color: #2e1103;
+  --badge-soft-gold-background-color: #ffd76f;
+  --badge-web-medium-padding-inline: 16;
+  --badge-font-family: Work Sans;
+  --badge-padding-inline: 8;
+  --badge-app-small-padding-block: 2;
+  --badge-font-size: 14;
+  --badge-border-radius-bottom: 0;
+  --badge-padding-block: 4;
+  --badge-line-height: 16;
+  --badge-border-radius: 4;
+  --badge-font-weight: 400;
+}
\ No newline at end of file
diff --git a/packages/design-tokens/build/css/components/light/badge.css b/packages/design-tokens/build/css/components/light/badge.css
new file mode 100644
index 000000000..f55e13115
--- /dev/null
+++ b/packages/design-tokens/build/css/components/light/badge.css
@@ -0,0 +1,55 @@
+:root {
+  --badge-outline-grey-border-color: #888888;
+  --badge-outline-grey-foreground-color: #242424;
+  --badge-outline-grey-inverted-foreground-color: #f5f5f5;
+  --badge-outline-grey-inverted-border-color: #b8b8b8;
+  --badge-outline-green-inverted-border-color: #2fb66d;
+  --badge-outline-green-inverted-foreground-color: #eefcf3;
+  --badge-outline-green-border-color: #297f50;
+  --badge-outline-green-foreground-color: #003d1e;
+  --badge-outline-gold-foreground-color: #52210c;
+  --badge-outline-gold-inverted-border-color: #f7b51d;
+  --badge-outline-gold-inverted-foreground-color: #fef9e6;
+  --badge-outline-gold-border-color: #c77800;
+  --badge-outline-border-width: 2;
+  --badge-outline-cyan-foreground-color: #001e52;
+  --badge-outline-cyan-inverted-foreground-color: #ecf4fe;
+  --badge-outline-cyan-inverted-border-color: #4789fa;
+  --badge-outline-cyan-border-color: #0550d1;
+  --badge-outline-red-inverted-border-color: #df2a38;
+  --badge-outline-red-inverted-foreground-color: #ffebeb;
+  --badge-outline-red-border-color: #c31d2a;
+  --badge-outline-red-foreground-color: #3b1216;
+  --badge-outline-background-color: #aaaaaa00;
+  --badge-strong-green-foreground-color: #eefcf3;
+  --badge-strong-green-background-color: #297f50;
+  --badge-strong-cyan-background-color: #0550d1;
+  --badge-strong-cyan-foreground-color: #ecf4fe;
+  --badge-strong-grey-background-color: #c1c1c1;
+  --badge-strong-grey-foreground-color: #242424;
+  --badge-strong-gold-foreground-color: #52210c;
+  --badge-strong-gold-background-color: #ffd76f;
+  --badge-strong-red-background-color: #c31d2a;
+  --badge-strong-red-foreground-color: #ffebeb;
+  --badge-gap: 4;
+  --badge-soft-green-foreground-color: #003d1e;
+  --badge-soft-green-background-color: #bdead0;
+  --badge-soft-grey-background-color: #e3e3e3;
+  --badge-soft-grey-foreground-color: #242424;
+  --badge-soft-red-background-color: #ffb3b4;
+  --badge-soft-red-foreground-color: #3b1216;
+  --badge-soft-cyan-background-color: #a6c8fc;
+  --badge-soft-cyan-foreground-color: #001e52;
+  --badge-soft-gold-foreground-color: #52210c;
+  --badge-soft-gold-background-color: #ffe6a8;
+  --badge-web-medium-padding-inline: 16;
+  --badge-font-family: Work Sans;
+  --badge-padding-inline: 8;
+  --badge-app-small-padding-block: 2;
+  --badge-font-size: 14;
+  --badge-border-radius-bottom: 0;
+  --badge-padding-block: 4;
+  --badge-line-height: 16;
+  --badge-border-radius: 4;
+  --badge-font-weight: 400;
+}
\ No newline at end of file
diff --git a/packages/design-tokens/build/js/components/dark/index.d.ts b/packages/design-tokens/build/js/components/dark/index.d.ts
index 764304ebb..8b54754b7 100644
--- a/packages/design-tokens/build/js/components/dark/index.d.ts
+++ b/packages/design-tokens/build/js/components/dark/index.d.ts
@@ -239,6 +239,115 @@ declare const _default: {
         backgroundColor: string;
         padding: number;
     };
+    badge: {
+        outline: {
+            grey: {
+                borderColor: string;
+                foregroundColor: string;
+                inverted: {
+                    foregroundColor: string;
+                    borderColor: string;
+                };
+            };
+            green: {
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+            };
+            borderWidth: number;
+            cyan: {
+                foregroundColor: string;
+                inverted: {
+                    foregroundColor: string;
+                    borderColor: string;
+                };
+                borderColor: string;
+            };
+            red: {
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+                foregroundColor: string;
+            };
+            backgroundColor: string;
+        };
+        strong: {
+            green: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            cyan: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            grey: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            red: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+        };
+        gap: number;
+        soft: {
+            green: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            grey: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            red: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            cyan: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+        };
+        web: {
+            medium: {
+                paddingInline: number;
+            };
+        };
+        fontFamily: string;
+        paddingInline: number;
+        app: {
+            small: {
+                paddingBlock: number;
+            };
+        };
+        fontSize: number;
+        borderRadiusBottom: number;
+        paddingBlock: number;
+        lineHeight: number;
+        borderRadius: number;
+        fontWeight: number;
+    };
     card: {
         surface: {
             purple: {
diff --git a/packages/design-tokens/build/js/components/dark/index.js b/packages/design-tokens/build/js/components/dark/index.js
index 09af58152..aeda380d4 100644
--- a/packages/design-tokens/build/js/components/dark/index.js
+++ b/packages/design-tokens/build/js/components/dark/index.js
@@ -239,6 +239,115 @@ export default {
         "backgroundColor": "#1d1d1d",
         "padding": 4
     },
+    "badge": {
+        "outline": {
+            "grey": {
+                "borderColor": "#707070",
+                "foregroundColor": "#f0f0f0",
+                "inverted": {
+                    "foregroundColor": "#f0f0f0",
+                    "borderColor": "#b8b8b8"
+                }
+            },
+            "green": {
+                "inverted": {
+                    "borderColor": "#76d5a1",
+                    "foregroundColor": "#e3faeb"
+                },
+                "borderColor": "#76d5a1",
+                "foregroundColor": "#e3faeb"
+            },
+            "gold": {
+                "foregroundColor": "#fff6e0",
+                "inverted": {
+                    "borderColor": "#fbc64b",
+                    "foregroundColor": "#fff6e0"
+                },
+                "borderColor": "#f7b51d"
+            },
+            "borderWidth": 2,
+            "cyan": {
+                "foregroundColor": "#dbeaff",
+                "inverted": {
+                    "foregroundColor": "#dbeaff",
+                    "borderColor": "#5692fb"
+                },
+                "borderColor": "#5692fb"
+            },
+            "red": {
+                "inverted": {
+                    "borderColor": "#f2636a",
+                    "foregroundColor": "#ffebeb"
+                },
+                "borderColor": "#f24550",
+                "foregroundColor": "#ffebeb"
+            },
+            "backgroundColor": "#aaaaaa00"
+        },
+        "strong": {
+            "green": {
+                "foregroundColor": "#133922",
+                "backgroundColor": "#90dab2"
+            },
+            "cyan": {
+                "backgroundColor": "#75a7fd",
+                "foregroundColor": "#010a19"
+            },
+            "grey": {
+                "backgroundColor": "#585858",
+                "foregroundColor": "#0b0b0b"
+            },
+            "gold": {
+                "foregroundColor": "#2e1103",
+                "backgroundColor": "#ffd76f"
+            },
+            "red": {
+                "backgroundColor": "#f58e92",
+                "foregroundColor": "#3b1216"
+            }
+        },
+        "gap": 4,
+        "soft": {
+            "green": {
+                "foregroundColor": "#133922",
+                "backgroundColor": "#90dab2"
+            },
+            "grey": {
+                "backgroundColor": "#c1c1c1",
+                "foregroundColor": "#0b0b0b"
+            },
+            "red": {
+                "backgroundColor": "#f58e92",
+                "foregroundColor": "#3b1216"
+            },
+            "cyan": {
+                "backgroundColor": "#75a7fd",
+                "foregroundColor": "#010a19"
+            },
+            "gold": {
+                "foregroundColor": "#2e1103",
+                "backgroundColor": "#ffd76f"
+            }
+        },
+        "web": {
+            "medium": {
+                "paddingInline": 16
+            }
+        },
+        "fontFamily": "Work Sans",
+        "paddingInline": 8,
+        "app": {
+            "small": {
+                "paddingBlock": 2
+            }
+        },
+        "fontSize": 14,
+        "borderRadiusBottom": 0,
+        "paddingBlock": 4,
+        "lineHeight": 16,
+        "borderRadius": 4,
+        "fontWeight": 400
+    },
     "card": {
         "surface": {
             "purple": {
diff --git a/packages/design-tokens/build/js/components/dark/index.ts b/packages/design-tokens/build/js/components/dark/index.ts
index c94fa607a..3d94fe6e6 100644
--- a/packages/design-tokens/build/js/components/dark/index.ts
+++ b/packages/design-tokens/build/js/components/dark/index.ts
@@ -239,6 +239,115 @@ export default {
     "backgroundColor": "#1d1d1d",
     "padding": 4
   },
+  "badge": {
+    "outline": {
+      "grey": {
+        "borderColor": "#707070",
+        "foregroundColor": "#f0f0f0",
+        "inverted": {
+          "foregroundColor": "#f0f0f0",
+          "borderColor": "#b8b8b8"
+        }
+      },
+      "green": {
+        "inverted": {
+          "borderColor": "#76d5a1",
+          "foregroundColor": "#e3faeb"
+        },
+        "borderColor": "#76d5a1",
+        "foregroundColor": "#e3faeb"
+      },
+      "gold": {
+        "foregroundColor": "#fff6e0",
+        "inverted": {
+          "borderColor": "#fbc64b",
+          "foregroundColor": "#fff6e0"
+        },
+        "borderColor": "#f7b51d"
+      },
+      "borderWidth": 2,
+      "cyan": {
+        "foregroundColor": "#dbeaff",
+        "inverted": {
+          "foregroundColor": "#dbeaff",
+          "borderColor": "#5692fb"
+        },
+        "borderColor": "#5692fb"
+      },
+      "red": {
+        "inverted": {
+          "borderColor": "#f2636a",
+          "foregroundColor": "#ffebeb"
+        },
+        "borderColor": "#f24550",
+        "foregroundColor": "#ffebeb"
+      },
+      "backgroundColor": "#aaaaaa00"
+    },
+    "strong": {
+      "green": {
+        "foregroundColor": "#133922",
+        "backgroundColor": "#90dab2"
+      },
+      "cyan": {
+        "backgroundColor": "#75a7fd",
+        "foregroundColor": "#010a19"
+      },
+      "grey": {
+        "backgroundColor": "#585858",
+        "foregroundColor": "#0b0b0b"
+      },
+      "gold": {
+        "foregroundColor": "#2e1103",
+        "backgroundColor": "#ffd76f"
+      },
+      "red": {
+        "backgroundColor": "#f58e92",
+        "foregroundColor": "#3b1216"
+      }
+    },
+    "gap": 4,
+    "soft": {
+      "green": {
+        "foregroundColor": "#133922",
+        "backgroundColor": "#90dab2"
+      },
+      "grey": {
+        "backgroundColor": "#c1c1c1",
+        "foregroundColor": "#0b0b0b"
+      },
+      "red": {
+        "backgroundColor": "#f58e92",
+        "foregroundColor": "#3b1216"
+      },
+      "cyan": {
+        "backgroundColor": "#75a7fd",
+        "foregroundColor": "#010a19"
+      },
+      "gold": {
+        "foregroundColor": "#2e1103",
+        "backgroundColor": "#ffd76f"
+      }
+    },
+    "web": {
+      "medium": {
+        "paddingInline": 16
+      }
+    },
+    "fontFamily": "Work Sans",
+    "paddingInline": 8,
+    "app": {
+      "small": {
+        "paddingBlock": 2
+      }
+    },
+    "fontSize": 14,
+    "borderRadiusBottom": 0,
+    "paddingBlock": 4,
+    "lineHeight": 16,
+    "borderRadius": 4,
+    "fontWeight": 400
+  },
   "card": {
     "surface": {
       "purple": {
diff --git a/packages/design-tokens/build/js/components/light/index.d.ts b/packages/design-tokens/build/js/components/light/index.d.ts
index 764304ebb..8b54754b7 100644
--- a/packages/design-tokens/build/js/components/light/index.d.ts
+++ b/packages/design-tokens/build/js/components/light/index.d.ts
@@ -239,6 +239,115 @@ declare const _default: {
         backgroundColor: string;
         padding: number;
     };
+    badge: {
+        outline: {
+            grey: {
+                borderColor: string;
+                foregroundColor: string;
+                inverted: {
+                    foregroundColor: string;
+                    borderColor: string;
+                };
+            };
+            green: {
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+            };
+            borderWidth: number;
+            cyan: {
+                foregroundColor: string;
+                inverted: {
+                    foregroundColor: string;
+                    borderColor: string;
+                };
+                borderColor: string;
+            };
+            red: {
+                inverted: {
+                    borderColor: string;
+                    foregroundColor: string;
+                };
+                borderColor: string;
+                foregroundColor: string;
+            };
+            backgroundColor: string;
+        };
+        strong: {
+            green: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            cyan: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            grey: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            red: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+        };
+        gap: number;
+        soft: {
+            green: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+            grey: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            red: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            cyan: {
+                backgroundColor: string;
+                foregroundColor: string;
+            };
+            gold: {
+                foregroundColor: string;
+                backgroundColor: string;
+            };
+        };
+        web: {
+            medium: {
+                paddingInline: number;
+            };
+        };
+        fontFamily: string;
+        paddingInline: number;
+        app: {
+            small: {
+                paddingBlock: number;
+            };
+        };
+        fontSize: number;
+        borderRadiusBottom: number;
+        paddingBlock: number;
+        lineHeight: number;
+        borderRadius: number;
+        fontWeight: number;
+    };
     card: {
         surface: {
             purple: {
diff --git a/packages/design-tokens/build/js/components/light/index.js b/packages/design-tokens/build/js/components/light/index.js
index f422f37aa..9f7ad93ee 100644
--- a/packages/design-tokens/build/js/components/light/index.js
+++ b/packages/design-tokens/build/js/components/light/index.js
@@ -239,6 +239,115 @@ export default {
         "backgroundColor": "#ffffff",
         "padding": 4
     },
+    "badge": {
+        "outline": {
+            "grey": {
+                "borderColor": "#888888",
+                "foregroundColor": "#242424",
+                "inverted": {
+                    "foregroundColor": "#f5f5f5",
+                    "borderColor": "#b8b8b8"
+                }
+            },
+            "green": {
+                "inverted": {
+                    "borderColor": "#2fb66d",
+                    "foregroundColor": "#eefcf3"
+                },
+                "borderColor": "#297f50",
+                "foregroundColor": "#003d1e"
+            },
+            "gold": {
+                "foregroundColor": "#52210c",
+                "inverted": {
+                    "borderColor": "#f7b51d",
+                    "foregroundColor": "#fef9e6"
+                },
+                "borderColor": "#c77800"
+            },
+            "borderWidth": 2,
+            "cyan": {
+                "foregroundColor": "#001e52",
+                "inverted": {
+                    "foregroundColor": "#ecf4fe",
+                    "borderColor": "#4789fa"
+                },
+                "borderColor": "#0550d1"
+            },
+            "red": {
+                "inverted": {
+                    "borderColor": "#df2a38",
+                    "foregroundColor": "#ffebeb"
+                },
+                "borderColor": "#c31d2a",
+                "foregroundColor": "#3b1216"
+            },
+            "backgroundColor": "#aaaaaa00"
+        },
+        "strong": {
+            "green": {
+                "foregroundColor": "#eefcf3",
+                "backgroundColor": "#297f50"
+            },
+            "cyan": {
+                "backgroundColor": "#0550d1",
+                "foregroundColor": "#ecf4fe"
+            },
+            "grey": {
+                "backgroundColor": "#c1c1c1",
+                "foregroundColor": "#242424"
+            },
+            "gold": {
+                "foregroundColor": "#52210c",
+                "backgroundColor": "#ffd76f"
+            },
+            "red": {
+                "backgroundColor": "#c31d2a",
+                "foregroundColor": "#ffebeb"
+            }
+        },
+        "gap": 4,
+        "soft": {
+            "green": {
+                "foregroundColor": "#003d1e",
+                "backgroundColor": "#bdead0"
+            },
+            "grey": {
+                "backgroundColor": "#e3e3e3",
+                "foregroundColor": "#242424"
+            },
+            "red": {
+                "backgroundColor": "#ffb3b4",
+                "foregroundColor": "#3b1216"
+            },
+            "cyan": {
+                "backgroundColor": "#a6c8fc",
+                "foregroundColor": "#001e52"
+            },
+            "gold": {
+                "foregroundColor": "#52210c",
+                "backgroundColor": "#ffe6a8"
+            }
+        },
+        "web": {
+            "medium": {
+                "paddingInline": 16
+            }
+        },
+        "fontFamily": "Work Sans",
+        "paddingInline": 8,
+        "app": {
+            "small": {
+                "paddingBlock": 2
+            }
+        },
+        "fontSize": 14,
+        "borderRadiusBottom": 0,
+        "paddingBlock": 4,
+        "lineHeight": 16,
+        "borderRadius": 4,
+        "fontWeight": 400
+    },
     "card": {
         "surface": {
             "purple": {
diff --git a/packages/design-tokens/build/js/components/light/index.ts b/packages/design-tokens/build/js/components/light/index.ts
index 2557220bb..d8e93425d 100644
--- a/packages/design-tokens/build/js/components/light/index.ts
+++ b/packages/design-tokens/build/js/components/light/index.ts
@@ -239,6 +239,115 @@ export default {
     "backgroundColor": "#ffffff",
     "padding": 4
   },
+  "badge": {
+    "outline": {
+      "grey": {
+        "borderColor": "#888888",
+        "foregroundColor": "#242424",
+        "inverted": {
+          "foregroundColor": "#f5f5f5",
+          "borderColor": "#b8b8b8"
+        }
+      },
+      "green": {
+        "inverted": {
+          "borderColor": "#2fb66d",
+          "foregroundColor": "#eefcf3"
+        },
+        "borderColor": "#297f50",
+        "foregroundColor": "#003d1e"
+      },
+      "gold": {
+        "foregroundColor": "#52210c",
+        "inverted": {
+          "borderColor": "#f7b51d",
+          "foregroundColor": "#fef9e6"
+        },
+        "borderColor": "#c77800"
+      },
+      "borderWidth": 2,
+      "cyan": {
+        "foregroundColor": "#001e52",
+        "inverted": {
+          "foregroundColor": "#ecf4fe",
+          "borderColor": "#4789fa"
+        },
+        "borderColor": "#0550d1"
+      },
+      "red": {
+        "inverted": {
+          "borderColor": "#df2a38",
+          "foregroundColor": "#ffebeb"
+        },
+        "borderColor": "#c31d2a",
+        "foregroundColor": "#3b1216"
+      },
+      "backgroundColor": "#aaaaaa00"
+    },
+    "strong": {
+      "green": {
+        "foregroundColor": "#eefcf3",
+        "backgroundColor": "#297f50"
+      },
+      "cyan": {
+        "backgroundColor": "#0550d1",
+        "foregroundColor": "#ecf4fe"
+      },
+      "grey": {
+        "backgroundColor": "#c1c1c1",
+        "foregroundColor": "#242424"
+      },
+      "gold": {
+        "foregroundColor": "#52210c",
+        "backgroundColor": "#ffd76f"
+      },
+      "red": {
+        "backgroundColor": "#c31d2a",
+        "foregroundColor": "#ffebeb"
+      }
+    },
+    "gap": 4,
+    "soft": {
+      "green": {
+        "foregroundColor": "#003d1e",
+        "backgroundColor": "#bdead0"
+      },
+      "grey": {
+        "backgroundColor": "#e3e3e3",
+        "foregroundColor": "#242424"
+      },
+      "red": {
+        "backgroundColor": "#ffb3b4",
+        "foregroundColor": "#3b1216"
+      },
+      "cyan": {
+        "backgroundColor": "#a6c8fc",
+        "foregroundColor": "#001e52"
+      },
+      "gold": {
+        "foregroundColor": "#52210c",
+        "backgroundColor": "#ffe6a8"
+      }
+    },
+    "web": {
+      "medium": {
+        "paddingInline": 16
+      }
+    },
+    "fontFamily": "Work Sans",
+    "paddingInline": 8,
+    "app": {
+      "small": {
+        "paddingBlock": 2
+      }
+    },
+    "fontSize": 14,
+    "borderRadiusBottom": 0,
+    "paddingBlock": 4,
+    "lineHeight": 16,
+    "borderRadius": 4,
+    "fontWeight": 400
+  },
   "card": {
     "surface": {
       "purple": {