diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 25ee5f2590..279744ce92 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -15,6 +15,7 @@ import {
     SupportGoWhereTheme,
     SGWDigitalLobbyTheme,
     SMGSTheme,
+    CareerCompassTheme,
 } from "../src/theme";
 import { withThemeFromJSXProvider } from "./decorators/theme-decorator";
 
@@ -35,6 +36,7 @@ const preview: Preview = {
                 RBS: RBSTheme,
                 SPF: SPFTheme,
                 SMGS: SMGSTheme,
+                CareerCompass: CareerCompassTheme,
             },
             Provider: ThemeProvider,
         }),
diff --git a/src/theme/colour-primitive/specs/careercompass-colour-set.ts b/src/theme/colour-primitive/specs/careercompass-colour-set.ts
new file mode 100644
index 0000000000..fd7b47649b
--- /dev/null
+++ b/src/theme/colour-primitive/specs/careercompass-colour-set.ts
@@ -0,0 +1,105 @@
+import { PrimitiveColourSet } from "../../types";
+
+export const CareerCompassColourSet: PrimitiveColourSet = {
+    white: "#FFFFFF",
+    black: "#000000",
+    "brand-10": "#001731",
+    "brand-20": "#002752",
+    "brand-30": "#003874",
+    "brand-40": "#004D9F",
+    "brand-50": "#1768BE",
+    "brand-60": "#3C91EC",
+    "brand-70": "#6CB4FF",
+    "brand-80": "#A5CDFF",
+    "brand-90": "#CFE1FE",
+    "brand-95": "#E8F0FE",
+    "brand-100": "#F7F9FF",
+
+    "primary-10": "#001731",
+    "primary-20": "#002752",
+    "primary-30": "#003874",
+    "primary-40": "#004D9F",
+    "primary-50": "#1768BE",
+    "primary-60": "#3C91EC",
+    "primary-70": "#6CB4FF",
+    "primary-80": "#A5CDFF",
+    "primary-90": "#CFE1FE",
+    "primary-95": "#E8F0FE",
+    "primary-100": "#F7F9FF",
+
+    "secondary-10": "#001A19",
+    "secondary-20": "#002D2B",
+    "secondary-30": "#00413D",
+    "secondary-40": "#005954",
+    "secondary-50": "#00756F",
+    "secondary-60": "#03A098",
+    "secondary-70": "#55BFBA",
+    "secondary-80": "#92D6D2",
+    "secondary-90": "#BFE7E5",
+    "secondary-95": "#DDF2F1",
+    "secondary-100": "#F4FBFA",
+
+    "neutral-10": "#161616",
+    "neutral-20": "#282828",
+    "neutral-30": "#393939",
+    "neutral-40": "#4E4E4E",
+    "neutral-50": "#686868",
+    "neutral-60": "#8E8E8E",
+    "neutral-70": "#AFAFB0",
+    "neutral-80": "#C7CACA",
+    "neutral-90": "#DDE1E2",
+    "neutral-95": "#EDEFEF",
+    "neutral-100": "#F9F9F9",
+
+    "success-10": "#081A0F",
+    "success-20": "#0E2D1B",
+    "success-30": "#154126",
+    "success-40": "#1C5A34",
+    "success-50": "#257645",
+    "success-60": "#44A068",
+    "success-70": "#64C189",
+    "success-80": "#80DCA5",
+    "success-90": "#B4ECCB",
+    "success-95": "#D5F6E2",
+    "success-100": "#EFFCF4",
+
+    "warning-10": "#221302",
+    "warning-20": "#3B2204",
+    "warning-30": "#543106",
+    "warning-40": "#744408",
+    "warning-50": "#98590C",
+    "warning-60": "#D07A13",
+    "warning-70": "#E4A244",
+    "warning-80": "#F5C26C",
+    "warning-90": "#FADBA6",
+    "warning-95": "#FCECD4",
+    "warning-100": "#FDF7F0",
+
+    "error-10": "#330505",
+    "error-20": "#550808",
+    "error-30": "#750C0C",
+    "error-40": "#9E130F",
+    "error-50": "#CB2213",
+    "error-60": "#DE6C6C",
+    "error-70": "#E89B9B",
+    "error-80": "#EFBEBE",
+    "error-90": "#F5D9D9",
+    "error-95": "#F9ECEC",
+    "error-100": "#FCF7F7",
+
+    "info-10": "#021824",
+    "info-20": "#032B3F",
+    "info-30": "#053D59",
+    "info-40": "#06547B",
+    "info-50": "#176E9B",
+    "info-60": "#5296BE",
+    "info-70": "#82B5DA",
+    "info-80": "#ACCFE7",
+    "info-90": "#CCE3F1",
+    "info-95": "#E3F1F8",
+    "info-100": "#F4FAFD",
+
+    "primary-inverse": "#FEAB10",
+};
+
+export default CareerCompassColourSet;
diff --git a/src/theme/colour-primitive/theme-helper.ts b/src/theme/colour-primitive/theme-helper.ts
index 91f83122ff..d5292c4d34 100644
--- a/src/theme/colour-primitive/theme-helper.ts
+++ b/src/theme/colour-primitive/theme-helper.ts
@@ -13,6 +13,7 @@ import { SupportGoWhereColourSet } from "./specs/supportgowhere-colour-set";
 import { IMDAColourSet } from "./specs/imda-colour-set";
 import { SPFColourSet } from "./specs/spf-colour-set";
 import { SMGSColourSet } from "./specs/smgs-colour-set";
+import { CareerCompassColourSet } from "./specs/careercompass-colour-set";
 import { ColourCollectionsMap } from "./types";
 
 export const ColourSpec: ThemeCollectionSpec<
@@ -32,6 +33,7 @@ export const ColourSpec: ThemeCollectionSpec<
         sgwdigitallobby: SupportGoWhereColourSet,
         imda: IMDAColourSet,
         spf: SPFColourSet,
+        careercompass: CareerCompassColourSet,
         smgs: SMGSColourSet,
     },
     defaultValue: "lifesg",
@@ -58,6 +60,7 @@ export const DarkColourSpec: ThemeCollectionSpec<
         sgwdigitallobby: SupportGoWhereColourSet,
         imda: IMDAColourSet,
         spf: SPFColourSet,
+        careercompass: CareerCompassColourSet,
         smgs: SMGSColourSet,
     },
     defaultValue: "lifesg",
diff --git a/src/theme/colour-semantic/specs/a11yplayground-semantic-tokens.ts b/src/theme/colour-semantic/specs/a11yplayground-semantic-tokens.ts
index 0391dbed7d..bb3390c1fd 100644
--- a/src/theme/colour-semantic/specs/a11yplayground-semantic-tokens.ts
+++ b/src/theme/colour-semantic/specs/a11yplayground-semantic-tokens.ts
@@ -13,6 +13,8 @@ export const A11yPlaygroundColourSet: SemanticColourSet = {
     "text-subtlest": getPrimitiveColour("neutral-60"),
     "text-primary": getPrimitiveColour("primary-50"),
     "text-primary-strongest": getPrimitiveColour("primary-20"),
+    "text-secondary": getPrimitiveColour("secondary-50"),
+    "text-secondary-subtle": getPrimitiveColour("secondary-60"),
 
     "text-hover": getPrimitiveColour("primary-40"),
     "text-selected": getPrimitiveColour("primary-50"),
@@ -36,6 +38,8 @@ export const A11yPlaygroundColourSet: SemanticColourSet = {
     "icon-primary": getPrimitiveColour("primary-50"),
     "icon-primary-subtle": getPrimitiveColour("primary-60"),
     "icon-primary-subtlest": getPrimitiveColour("primary-70"),
+    "icon-secondary": getPrimitiveColour("secondary-50"),
+    "icon-secondary-subtle": getPrimitiveColour("secondary-60"),
 
     "icon-hover": getPrimitiveColour("primary-40"),
     "icon-selected": getPrimitiveColour("primary-50"),
@@ -134,6 +138,11 @@ export const A11yPlaygroundColourSet: SemanticColourSet = {
     "bg-primary-subtlest": getPrimitiveColour("primary-100"),
     "bg-available": "#6DD0A1",
 
+    "bg-secondary": getPrimitiveColour("secondary-50"),
+    "bg-secondary-subtle": getPrimitiveColour("secondary-60"),
+    "bg-secondary-subtler": getPrimitiveColour("secondary-95"),
+    "bg-secondary-subtlest": getPrimitiveColour("secondary-100"),
+
     "bg-primary-hover": getPrimitiveColour("primary-40"),
     "bg-primary-subtlest-hover": getPrimitiveColour("primary-90"),
     "bg-primary-subtlest-selected": getPrimitiveColour("primary-90"),
@@ -165,6 +174,8 @@ export const A11yPlaygroundDarkColourSet: SemanticColourSet = {
     "text-subtlest": getPrimitiveColour("neutral-50"),
     "text-primary": getPrimitiveColour("primary-60"),
     "text-primary-strongest": getPrimitiveColour("primary-90"),
+    "text-secondary": getPrimitiveColour("secondary-60"),
+    "text-secondary-subtle": getPrimitiveColour("secondary-50"),
 
     "text-hover": getPrimitiveColour("primary-70"),
     "text-selected": getPrimitiveColour("primary-60"),
@@ -188,6 +199,8 @@ export const A11yPlaygroundDarkColourSet: SemanticColourSet = {
     "icon-primary": getPrimitiveColour("primary-60"),
     "icon-primary-subtle": getPrimitiveColour("primary-50"),
     "icon-primary-subtlest": getPrimitiveColour("primary-40"),
+    "icon-secondary": getPrimitiveColour("secondary-60"),
+    "icon-secondary-subtle": getPrimitiveColour("secondary-50"),
 
     "icon-hover": getPrimitiveColour("primary-70"),
     "icon-selected": getPrimitiveColour("primary-60"),
@@ -286,6 +299,11 @@ export const A11yPlaygroundDarkColourSet: SemanticColourSet = {
     "bg-primary-subtlest": getPrimitiveColour("primary-10"),
     "bg-available": "#185339", // Darker green for dark mode
 
+    "bg-secondary": getPrimitiveColour("secondary-60"),
+    "bg-secondary-subtle": getPrimitiveColour("secondary-50"),
+    "bg-secondary-subtler": getPrimitiveColour("secondary-20"),
+    "bg-secondary-subtlest": getPrimitiveColour("secondary-10"),
+
     "bg-primary-hover": getPrimitiveColour("primary-70"),
     "bg-primary-subtlest-hover": getPrimitiveColour("primary-20"),
     "bg-primary-subtlest-selected": getPrimitiveColour("primary-20"),
diff --git a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts
index 91330d3cfb..e31ba7266a 100644
--- a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts
+++ b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts
@@ -13,6 +13,8 @@ export const LifeSGColourSet: SemanticColourSet = {
     "text-subtlest": getPrimitiveColour("neutral-60"),
     "text-primary": getPrimitiveColour("primary-50"),
     "text-primary-strongest": getPrimitiveColour("primary-20"),
+    "text-secondary": getPrimitiveColour("secondary-50"),
+    "text-secondary-subtle": getPrimitiveColour("secondary-60"),
 
     "text-hover": getPrimitiveColour("primary-40"),
     "text-selected": getPrimitiveColour("primary-50"),
@@ -36,6 +38,8 @@ export const LifeSGColourSet: SemanticColourSet = {
     "icon-primary": getPrimitiveColour("primary-50"),
     "icon-primary-subtle": getPrimitiveColour("primary-60"),
     "icon-primary-subtlest": getPrimitiveColour("primary-70"),
+    "icon-secondary": getPrimitiveColour("secondary-50"),
+    "icon-secondary-subtle": getPrimitiveColour("secondary-60"),
 
     "icon-hover": getPrimitiveColour("primary-40"),
     "icon-selected": getPrimitiveColour("primary-50"),
@@ -134,6 +138,11 @@ export const LifeSGColourSet: SemanticColourSet = {
     "bg-primary-subtlest": getPrimitiveColour("primary-100"),
     "bg-available": "#6DD0A1",
 
+    "bg-secondary": getPrimitiveColour("secondary-50"),
+    "bg-secondary-subtle": getPrimitiveColour("secondary-60"),
+    "bg-secondary-subtler": getPrimitiveColour("secondary-95"),
+    "bg-secondary-subtlest": getPrimitiveColour("secondary-100"),
+
     "bg-primary-hover": getPrimitiveColour("primary-40"),
     "bg-primary-subtlest-hover": getPrimitiveColour("primary-90"),
     "bg-primary-subtlest-selected": getPrimitiveColour("primary-90"),
@@ -166,6 +175,8 @@ export const LifeSGDarkColourSet: SemanticColourSet = {
     "text-subtlest": getPrimitiveColour("neutral-50"),
     "text-primary": getPrimitiveColour("primary-60"),
     "text-primary-strongest": getPrimitiveColour("primary-90"),
+    "text-secondary": getPrimitiveColour("secondary-60"),
+    "text-secondary-subtle": getPrimitiveColour("secondary-50"),
 
     "text-hover": getPrimitiveColour("primary-70"),
     "text-selected": getPrimitiveColour("primary-60"),
@@ -189,6 +200,8 @@ export const LifeSGDarkColourSet: SemanticColourSet = {
     "icon-primary": getPrimitiveColour("primary-60"),
     "icon-primary-subtle": getPrimitiveColour("primary-50"),
     "icon-primary-subtlest": getPrimitiveColour("primary-40"),
+    "icon-secondary": getPrimitiveColour("secondary-60"),
+    "icon-secondary-subtle": getPrimitiveColour("secondary-50"),
 
     "icon-hover": getPrimitiveColour("primary-70"),
     "icon-selected": getPrimitiveColour("primary-60"),
@@ -287,6 +300,11 @@ export const LifeSGDarkColourSet: SemanticColourSet = {
     "bg-primary-subtlest": getPrimitiveColour("primary-10"),
     "bg-available": "#185339", // Darker green for dark mode
 
+    "bg-secondary": getPrimitiveColour("secondary-60"),
+    "bg-secondary-subtle": getPrimitiveColour("secondary-50"),
+    "bg-secondary-subtler": getPrimitiveColour("secondary-20"),
+    "bg-secondary-subtlest": getPrimitiveColour("secondary-10"),
+
     "bg-primary-hover": getPrimitiveColour("primary-70"),
     "bg-primary-subtlest-hover": getPrimitiveColour("primary-20"),
     "bg-primary-subtlest-selected": getPrimitiveColour("primary-20"),
diff --git a/src/theme/colour-semantic/specs/pa-semantic-tokens.ts b/src/theme/colour-semantic/specs/pa-semantic-tokens.ts
index 21848bc701..a2d5a9f636 100644
--- a/src/theme/colour-semantic/specs/pa-semantic-tokens.ts
+++ b/src/theme/colour-semantic/specs/pa-semantic-tokens.ts
@@ -13,6 +13,8 @@ export const PAColourSet: SemanticColourSet = {
     "text-subtlest": getPrimitiveColour("neutral-70"),
     "text-primary": getPrimitiveColour("neutral-10"),
     "text-primary-strongest": getPrimitiveColour("neutral-10"),
+    "text-secondary": getPrimitiveColour("secondary-50"),
+    "text-secondary-subtle": getPrimitiveColour("secondary-60"),
 
     "text-hover": getPrimitiveColour("neutral-70"),
     "text-selected": getPrimitiveColour("neutral-20"),
@@ -36,6 +38,8 @@ export const PAColourSet: SemanticColourSet = {
     "icon-primary": getPrimitiveColour("neutral-10"),
     "icon-primary-subtle": getPrimitiveColour("neutral-30"),
     "icon-primary-subtlest": getPrimitiveColour("neutral-60"),
+    "icon-secondary": getPrimitiveColour("secondary-50"),
+    "icon-secondary-subtle": getPrimitiveColour("secondary-60"),
 
     "icon-hover": getPrimitiveColour("neutral-70"),
     "icon-selected": getPrimitiveColour("brand-20"),
@@ -134,6 +138,11 @@ export const PAColourSet: SemanticColourSet = {
     "bg-primary-subtlest": getPrimitiveColour("brand-100"),
     "bg-available": getPrimitiveColour("success-60"),
 
+    "bg-secondary": getPrimitiveColour("secondary-50"),
+    "bg-secondary-subtle": getPrimitiveColour("secondary-60"),
+    "bg-secondary-subtler": getPrimitiveColour("secondary-95"),
+    "bg-secondary-subtlest": getPrimitiveColour("secondary-100"),
+
     "bg-primary-hover": getPrimitiveColour("brand-10"),
     "bg-primary-subtlest-hover": getPrimitiveColour("brand-80"),
     "bg-primary-subtlest-selected": getPrimitiveColour("brand-40"),
diff --git a/src/theme/colour-semantic/specs/sgwdigitallobby-tokens.ts b/src/theme/colour-semantic/specs/sgwdigitallobby-tokens.ts
index 2658eb0ee7..e2726a0baa 100644
--- a/src/theme/colour-semantic/specs/sgwdigitallobby-tokens.ts
+++ b/src/theme/colour-semantic/specs/sgwdigitallobby-tokens.ts
@@ -13,6 +13,8 @@ export const SGWDigitalLobbyColourSet: SemanticColourSet = {
     "text-subtlest": getPrimitiveColour("neutral-60"),
     "text-primary": getPrimitiveColour("primary-50"),
     "text-primary-strongest": getPrimitiveColour("primary-20"),
+    "text-secondary": getPrimitiveColour("secondary-50"),
+    "text-secondary-subtle": getPrimitiveColour("secondary-60"),
 
     "text-hover": getPrimitiveColour("primary-40"),
     "text-selected": getPrimitiveColour("primary-50"),
@@ -36,6 +38,8 @@ export const SGWDigitalLobbyColourSet: SemanticColourSet = {
     "icon-primary": getPrimitiveColour("primary-50"),
     "icon-primary-subtle": getPrimitiveColour("primary-60"),
     "icon-primary-subtlest": getPrimitiveColour("primary-70"),
+    "icon-secondary": getPrimitiveColour("secondary-50"),
+    "icon-secondary-subtle": getPrimitiveColour("secondary-60"),
 
     "icon-hover": getPrimitiveColour("primary-40"),
     "icon-selected": getPrimitiveColour("primary-50"),
@@ -134,6 +138,11 @@ export const SGWDigitalLobbyColourSet: SemanticColourSet = {
     "bg-primary-subtlest": getPrimitiveColour("primary-100"),
     "bg-available": "#6DD0A1",
 
+    "bg-secondary": getPrimitiveColour("secondary-50"),
+    "bg-secondary-subtle": getPrimitiveColour("secondary-60"),
+    "bg-secondary-subtler": getPrimitiveColour("secondary-95"),
+    "bg-secondary-subtlest": getPrimitiveColour("secondary-100"),
+
     "bg-primary-hover": getPrimitiveColour("primary-40"),
     "bg-primary-subtlest-hover": getPrimitiveColour("primary-90"),
     "bg-primary-subtlest-selected": getPrimitiveColour("primary-90"),
@@ -166,6 +175,8 @@ export const SGWDigitalLobbyDarkColourSet: SemanticColourSet = {
     "text-subtlest": getPrimitiveColour("neutral-50"),
     "text-primary": getPrimitiveColour("primary-60"),
     "text-primary-strongest": getPrimitiveColour("primary-90"),
+    "text-secondary": getPrimitiveColour("secondary-60"),
+    "text-secondary-subtle": getPrimitiveColour("secondary-50"),
 
     "text-hover": getPrimitiveColour("primary-70"),
     "text-selected": getPrimitiveColour("primary-60"),
@@ -189,6 +200,8 @@ export const SGWDigitalLobbyDarkColourSet: SemanticColourSet = {
     "icon-primary": getPrimitiveColour("primary-60"),
     "icon-primary-subtle": getPrimitiveColour("primary-50"),
     "icon-primary-subtlest": getPrimitiveColour("primary-40"),
+    "icon-secondary": getPrimitiveColour("secondary-60"),
+    "icon-secondary-subtle": getPrimitiveColour("secondary-50"),
 
     "icon-hover": getPrimitiveColour("primary-70"),
     "icon-selected": getPrimitiveColour("primary-60"),
@@ -287,6 +300,11 @@ export const SGWDigitalLobbyDarkColourSet: SemanticColourSet = {
     "bg-primary-subtlest": getPrimitiveColour("primary-10"),
     "bg-available": "#185339", // Darker green for dark mode
 
+    "bg-secondary": getPrimitiveColour("secondary-60"),
+    "bg-secondary-subtle": getPrimitiveColour("secondary-50"),
+    "bg-secondary-subtler": getPrimitiveColour("secondary-20"),
+    "bg-secondary-subtlest": getPrimitiveColour("secondary-10"),
+
     "bg-primary-hover": getPrimitiveColour("primary-70"),
     "bg-primary-subtlest-hover": getPrimitiveColour("primary-20"),
     "bg-primary-subtlest-selected": getPrimitiveColour("primary-20"),
diff --git a/src/theme/colour-semantic/theme-helper.ts b/src/theme/colour-semantic/theme-helper.ts
index 24c3b1796a..a99fe06c9c 100644
--- a/src/theme/colour-semantic/theme-helper.ts
+++ b/src/theme/colour-semantic/theme-helper.ts
@@ -34,6 +34,7 @@ export const ColourSpec: ThemeCollectionSpec<
         imda: LifeSGColourSet,
         spf: LifeSGColourSet,
         smgs: LifeSGColourSet,
+        careercompass: LifeSGColourSet,
     },
     defaultValue: "lifesg",
 };
@@ -56,6 +57,7 @@ export const DarkColourSpec: ThemeCollectionSpec<
         imda: LifeSGDarkColourSet,
         spf: LifeSGDarkColourSet,
         smgs: LifeSGDarkColourSet,
+        careercompass: LifeSGDarkColourSet,
     },
     defaultValue: "lifesg",
 };
@@ -102,6 +104,8 @@ export const ColourSemantic: {
     "text-subtlest": getSemanticColour("text-subtlest"),
     "text-primary": getSemanticColour("text-primary"),
     "text-primary-strongest": getSemanticColour("text-primary-strongest"),
+    "text-secondary": getSemanticColour("text-secondary"),
+    "text-secondary-subtle": getSemanticColour("text-secondary-subtle"),
 
     "text-hover": getSemanticColour("text-hover"),
     "text-selected": getSemanticColour("text-selected"),
@@ -125,6 +129,8 @@ export const ColourSemantic: {
     "icon-primary": getSemanticColour("icon-primary"),
     "icon-primary-subtle": getSemanticColour("icon-primary-subtle"),
     "icon-primary-subtlest": getSemanticColour("icon-primary-subtlest"),
+    "icon-secondary": getSemanticColour("icon-secondary"),
+    "icon-secondary-subtle": getSemanticColour("icon-secondary-subtle"),
 
     "icon-hover": getSemanticColour("icon-hover"),
     "icon-selected": getSemanticColour("icon-selected"),
@@ -227,6 +233,11 @@ export const ColourSemantic: {
     "bg-primary-subtlest": getSemanticColour("bg-primary-subtlest"),
     "bg-available": getSemanticColour("bg-available"),
 
+    "bg-secondary": getSemanticColour("bg-secondary"),
+    "bg-secondary-subtle": getSemanticColour("bg-secondary-subtle"),
+    "bg-secondary-subtler": getSemanticColour("bg-secondary-subtler"),
+    "bg-secondary-subtlest": getSemanticColour("bg-secondary-subtlest"),
+
     "bg-primary-hover": getSemanticColour("bg-primary-hover"),
     "bg-primary-subtlest-hover": getSemanticColour("bg-primary-subtlest-hover"),
     "bg-primary-subtlest-selected": getSemanticColour(
diff --git a/src/theme/colour-semantic/types.ts b/src/theme/colour-semantic/types.ts
index 4f5148b60c..47da1dca69 100644
--- a/src/theme/colour-semantic/types.ts
+++ b/src/theme/colour-semantic/types.ts
@@ -16,6 +16,8 @@ export type SemanticColourSet = {
     "text-subtlest": SemanticColourValue;
     "text-primary": SemanticColourValue;
     "text-primary-strongest": SemanticColourValue;
+    "text-secondary": SemanticColourValue;
+    "text-secondary-subtle": SemanticColourValue;
 
     "text-hover": SemanticColourValue;
     "text-selected": SemanticColourValue;
@@ -39,6 +41,8 @@ export type SemanticColourSet = {
     "icon-primary": SemanticColourValue;
     "icon-primary-subtle": SemanticColourValue;
     "icon-primary-subtlest": SemanticColourValue;
+    "icon-secondary": SemanticColourValue;
+    "icon-secondary-subtle": SemanticColourValue;
 
     "icon-hover": SemanticColourValue;
     "icon-selected": SemanticColourValue;
@@ -137,6 +141,11 @@ export type SemanticColourSet = {
     "bg-primary-subtlest": SemanticColourValue;
     "bg-available": SemanticColourValue;
 
+    "bg-secondary": SemanticColourValue;
+    "bg-secondary-subtle": SemanticColourValue;
+    "bg-secondary-subtler": SemanticColourValue;
+    "bg-secondary-subtlest": SemanticColourValue;
+
     "bg-primary-hover": SemanticColourValue;
     "bg-primary-subtlest-hover": SemanticColourValue;
     "bg-primary-subtlest-selected": SemanticColourValue;
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 80a69877f8..c129e0362f 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -114,6 +114,19 @@ const CCubeThemeBase: ThemeSpec = {
     },
 };
 
+const CareerCompassThemeBase: ThemeSpec = {
+    colourScheme: "careercompass",
+    fontScheme: "bookingsg",
+    motionScheme: "default",
+    borderScheme: "default",
+    spacingScheme: "default",
+    radiusScheme: "default",
+    shadowScheme: "default",
+    breakpointScheme: "default",
+    resourceScheme: "careercompass",
+    componentScheme: "default",
+};
+
 const MyLegacyThemeBase: ThemeSpec = {
     colourScheme: "mylegacy",
     fontScheme: "mylegacy",
@@ -276,6 +289,12 @@ export const CCubeTheme = {
     dark: createThemeWithColourMode(CCubeThemeBase, "dark"),
 };
 
+export const CareerCompassTheme = {
+    ...CareerCompassThemeBase,
+    light: createThemeWithColourMode(CareerCompassThemeBase, "light"),
+    dark: createThemeWithColourMode(CareerCompassThemeBase, "dark"),
+};
+
 export const MyLegacyTheme = {
     ...MyLegacyThemeBase,
     light: createThemeWithColourMode(MyLegacyThemeBase, "light"),
diff --git a/src/theme/types.ts b/src/theme/types.ts
index 35e9b1f895..20ed2c16d1 100644
--- a/src/theme/types.ts
+++ b/src/theme/types.ts
@@ -50,7 +50,8 @@ export type ColourScheme =
     | "sgwdigitallobby"
     | "imda"
     | "spf"
-    | "smgs";
+    | "smgs"
+    | "careercompass";
 export type FontScheme =
     | "default"
     | "bookingsg"
@@ -87,7 +88,8 @@ export type ResourceScheme =
     | "supportgowhere"
     | "imda"
     | "spf"
-    | "smgs";
+    | "smgs"
+    | "careercompass";
 
 export type ColourMode = "light" | "dark";
 
diff --git a/stories/getting-started/installation.mdx b/stories/getting-started/installation.mdx
index 8c0a7fd6a3..31c695190f 100644
--- a/stories/getting-started/installation.mdx
+++ b/stories/getting-started/installation.mdx
@@ -283,6 +283,36 @@ Or if you are importing to an existing css file:
 
 </details>
 
+<br />
+
+<details name="css">
+
+<summary>Instructions for CareerCompass theme</summary>
+
+Add this into the `head` of your html file:
+
+```html
+<link
+    rel="stylesheet"
+    type="text/css"
+    href="https://assets.life.gov.sg/react-design-system/v3/css/main.css"
+/>
+<link
+    rel="stylesheet"
+    type="text/css"
+    href="https://assets.life.gov.sg/react-design-system/v3/css/plus-jakarta-sans.css"
+/>
+```
+
+Or if you are importing to an existing css file:
+
+```css
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/main.css");
+@import url("https://assets.life.gov.sg/react-design-system/v3/css/plus-jakarta-sans.css");
+```
+
+</details>
+
 ### 3. Set up the theme
 
 If you are intending to make use of the themes, you will need [**Styled
diff --git a/stories/theme/b-theme-introduction.mdx b/stories/theme/b-theme-introduction.mdx
index 5df1b732cb..cb69a53168 100644
--- a/stories/theme/b-theme-introduction.mdx
+++ b/stories/theme/b-theme-introduction.mdx
@@ -73,6 +73,9 @@ import { SPFTheme } from "@lifesg/react-design-system/theme";
 
 // The SMGS theme
 import { SMGSTheme } from "@lifesg/react-design-system/theme";
+
+// The CareerCompass theme
+import { CareerCompassTheme } from "@lifesg/react-design-system/theme";
 ```
 
 To configure the theme in your project,
diff --git a/stories/theme/colour/a-colour-introduction.mdx b/stories/theme/colour/a-colour-introduction.mdx
index cde7540cdc..15644a47d3 100644
--- a/stories/theme/colour/a-colour-introduction.mdx
+++ b/stories/theme/colour/a-colour-introduction.mdx
@@ -33,7 +33,8 @@ primitive tokens.
 [IMDA](/docs/foundations-colours-imda--docs) |
 [RBS](/docs/foundations-colours-rbs--docs) |
 [SPF](/docs/foundations-colours-spf--docs) |
-[SMGS](/docs/foundations-colours-smgs--docs)
+[SMGS](/docs/foundations-colours-smgs--docs) |
+[CareerCompass](/docs/foundations-colours-careercompass--docs)
 
 ## Usage
 
diff --git a/stories/theme/colour/n-colour-careercompass.mdx b/stories/theme/colour/n-colour-careercompass.mdx
new file mode 100644
index 0000000000..5af6acae30
--- /dev/null
+++ b/stories/theme/colour/n-colour-careercompass.mdx
@@ -0,0 +1,24 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import { CareerCompassTheme } from "src/theme";
+import { PrimitiveColourDisplay, SemanticColourDisplay } from "../doc-elements";
+
+<Meta title="Foundations/Colours/CareerCompass" />
+
+# CareerCompass colours
+
+These are the palettes used when the `colourScheme` is `"careercompass"`.
+
+```tsx
+const theme: ThemeSpec = {
+    colourScheme: "careercompass",
+    // ...other specifications
+};
+```
+
+## Semantic colours
+
+<SemanticColourDisplay theme={CareerCompassTheme} />
+
+## Primitive colours
+
+<PrimitiveColourDisplay theme={CareerCompassTheme} />
diff --git a/stories/theme/doc-elements/doc-semantic-colour-display.tsx b/stories/theme/doc-elements/doc-semantic-colour-display.tsx
index 186852d29e..cb855fe10f 100644
--- a/stories/theme/doc-elements/doc-semantic-colour-display.tsx
+++ b/stories/theme/doc-elements/doc-semantic-colour-display.tsx
@@ -56,8 +56,12 @@ export const SemanticColourDisplay = ({
                         "text-subtler",
                         "text-subtlest",
                         "text-primary",
+                        "text-primary-strongest",
                     ]}
                 />
+                <SemanticColourPalette
+                    tokens={["text-secondary", "text-secondary-subtle"]}
+                />
                 <SemanticColourPalette
                     tokens={[
                         "text-hover",
@@ -94,6 +98,8 @@ export const SemanticColourDisplay = ({
                         "icon-primary",
                         "icon-primary-subtle",
                         "icon-primary-subtlest",
+                        "icon-secondary",
+                        "icon-secondary-subtle",
                     ]}
                 />
                 <SemanticColourPalette
@@ -201,6 +207,14 @@ export const SemanticColourDisplay = ({
                         "bg-available",
                     ]}
                 />
+                <SemanticColourPalette
+                    tokens={[
+                        "bg-secondary",
+                        "bg-secondary-subtle",
+                        "bg-secondary-subtler",
+                        "bg-secondary-subtlest",
+                    ]}
+                />
                 <SemanticColourPalette
                     tokens={[
                         "bg-success",
@@ -244,6 +258,9 @@ export const SemanticColourDisplay = ({
                 <SemanticColourPalette
                     tokens={["hyperlink", "hyperlink-inverse"]}
                 />
+                <SemanticColourPalette
+                    tokens={["hyperlink-hover", "hyperlink-visited"]}
+                />
             </Display>
 
             <PaletteLabel>Focus ring</PaletteLabel>