diff --git a/packages/react-components/react-button/library/src/components/Button/Button.types.ts b/packages/react-components/react-button/library/src/components/Button/Button.types.ts
index 201f264913be06..f28686ea5f6dc4 100644
--- a/packages/react-components/react-button/library/src/components/Button/Button.types.ts
+++ b/packages/react-components/react-button/library/src/components/Button/Button.types.ts
@@ -29,7 +29,7 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
    *
    * @default 'secondary'
    */
-  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
+  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent' | 'tint';
 
   /**
    * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it
diff --git a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts
index 186d0f7a86d58e..1221c9f082615b 100644
--- a/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts
+++ b/packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts
@@ -562,7 +562,8 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
   const rootIconOnlyStyles = useRootIconOnlyStyles();
   const iconStyles = useIconStyles();
 
-  const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+  const { disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;
+  const appearance = state.appearance === 'tint' ? 'secondary' : state.appearance;
 
   state.root.className = mergeClasses(
     buttonClassNames.root,
diff --git a/packages/react-components/react-button/stories/src/Button/ButtonAppearance.stories.tsx b/packages/react-components/react-button/stories/src/Button/ButtonAppearance.stories.tsx
index 2f37e55d501842..439821a3448da9 100644
--- a/packages/react-components/react-button/stories/src/Button/ButtonAppearance.stories.tsx
+++ b/packages/react-components/react-button/stories/src/Button/ButtonAppearance.stories.tsx
@@ -30,6 +30,9 @@ export const Appearance = (): JSXElement => {
       <Button appearance="transparent" icon={<CalendarMonth />}>
         Transparent
       </Button>
+      <Button appearance="tint" icon={<CalendarMonth />}>
+        Tint
+      </Button>
     </div>
   );
 };
diff --git a/packages/react-components/react-provider/library/src/components/CAPThemeProvider/CAPTheme.tsx b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/CAPTheme.tsx
new file mode 100644
index 00000000000000..cd8067dfea3899
--- /dev/null
+++ b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/CAPTheme.tsx
@@ -0,0 +1,126 @@
+import { tokens } from '@fluentui/react-components';
+
+const EXPECTED_SEMANTIC_TOKENS = [
+  // card
+  'stroke/card/onPrimary/default/rest',
+  'cornerRadius/ctrl/card',
+  'padding/card/header/body/default/inside',
+  'padding/card/header/body/default/outside',
+] as const;
+type ExpectedSemanticToken = (typeof EXPECTED_SEMANTIC_TOKENS)[number];
+
+const TOKEN_TYPES = ['color', 'dimension'] as const;
+
+type TokenType = (typeof TOKEN_TYPES)[number];
+
+export interface TokenSchema {
+  type: TokenType;
+  /**
+   * What's the name of the semantic token that we expect to exist? When semantic tokens v2
+   * is released, our token should be replaced by this one.
+   */
+  semanticToken: ExpectedSemanticToken | null;
+}
+
+const BadgeTokens = {
+  colorBrandForegroundCompound: { type: 'color', semanticToken: null },
+} as const satisfies Record<string, TokenSchema>;
+
+const ButtonTokens = {
+  buttonPrimaryBackgroundColor: { type: 'color', semanticToken: null },
+  buttonPrimaryBackgroundColorHover: { type: 'color', semanticToken: null },
+  buttonSecondaryBackgroundColor: { type: 'color', semanticToken: null },
+  buttonSecondaryBackgroundColorHover: { type: 'color', semanticToken: null },
+  buttonSubtleBackgroundColor: { type: 'color', semanticToken: null },
+  buttonSubtleBackgroundColorHover: { type: 'color', semanticToken: null },
+  buttonOutlineBackgroundColor: { type: 'color', semanticToken: null },
+  buttonOutlineBackgroundColorHover: { type: 'color', semanticToken: null },
+  buttonTintBackgroundColor: { type: 'color', semanticToken: null },
+  buttonTintBackgroundColorHover: { type: 'color', semanticToken: null },
+} as const satisfies Record<string, TokenSchema>;
+
+const CardTokens = {
+  cardBackgroundColor: { type: 'color', semanticToken: null },
+  cardForegroundColor: { type: 'color', semanticToken: null },
+  cardBackgroundColorHover: { type: 'color', semanticToken: null },
+  cardForegroundColorHover: { type: 'color', semanticToken: null },
+  cardBackgroundColorPressed: { type: 'color', semanticToken: null },
+  cardForegroundColorPressed: { type: 'color', semanticToken: null },
+  cardBackgroundColorDisabled: { type: 'color', semanticToken: null },
+  cardForegroundColorDisabled: { type: 'color', semanticToken: null },
+  cardCornerRadius: { type: 'dimension', semanticToken: 'cornerRadius/ctrl/card' },
+  cardHeaderPaddingOutside: { type: 'dimension', semanticToken: 'padding/card/header/body/default/outside' },
+  cardHeaderPaddingInside: { type: 'dimension', semanticToken: 'padding/card/header/body/default/inside' },
+  cardFooterHorizontalGap: { type: 'dimension', semanticToken: null },
+} as const satisfies Record<string, TokenSchema>;
+
+const DialogTokens = {} as const satisfies Record<string, TokenSchema>;
+
+const InputTokens = {} as const satisfies Record<string, TokenSchema>;
+
+const MenuTokens = {} as const satisfies Record<string, TokenSchema>;
+
+const TooltipTokens = {} as const satisfies Record<string, TokenSchema>;
+
+export const CAPTokensSchema = {
+  ...BadgeTokens,
+  ...ButtonTokens,
+  ...CardTokens,
+  ...DialogTokens,
+  ...InputTokens,
+  ...MenuTokens,
+  ...TooltipTokens,
+} as const satisfies { [key: string]: TokenSchema };
+
+export const CAPTokens = {
+  ...(Object.keys(CAPTokensSchema).reduce((acc: any, key) => {
+    return { ...acc, [key]: `var(--${key})` };
+  }) as any),
+} as Record<keyof typeof CAPTokensSchema, string>;
+
+export type CAPTheme = {
+  [k in keyof typeof CAPTokens]: string | null;
+};
+
+export const CAP_THEME = {
+  // button
+  buttonPrimaryBackgroundColor: tokens.colorBrandBackground,
+  buttonPrimaryBackgroundColorHover: tokens.colorBrandBackgroundHover,
+  buttonSecondaryBackgroundColor: null,
+  buttonSecondaryBackgroundColorHover: null,
+  buttonSubtleBackgroundColor: tokens.colorBrandBackground,
+  buttonSubtleBackgroundColorHover: tokens.colorBrandBackground,
+  buttonOutlineBackgroundColor: tokens.colorTransparentBackground,
+  buttonOutlineBackgroundColorHover: tokens.colorTransparentBackground,
+  buttonTintBackgroundColor: 'red',
+  buttonTintBackgroundColorHover: null,
+
+  // card
+  cardCornerRadius: tokens.borderRadiusXLarge, // 8px
+  cardBackgroundColor: tokens.colorNeutralBackground1,
+  cardForegroundColor: tokens.colorNeutralBackground1,
+  cardBackgroundColorHover: '',
+  cardForegroundColorHover: '',
+  cardBackgroundColorPressed: '',
+  cardForegroundColorPressed: '',
+  cardBackgroundColorDisabled: '',
+  cardForegroundColorDisabled: '',
+  cardHeaderPaddingOutside: tokens.spacingVerticalM,
+  cardHeaderPaddingInside: tokens.spacingVerticalS,
+  cardFooterHorizontalGap: tokens.spacingHorizontalS,
+
+  // TODO: switch to BrandForegroundCompound when available
+  colorBrandForegroundCompound: tokens.colorBrandForeground1,
+} as const satisfies CAPTheme;
+
+export const CAP_THEME_TEAMS = {
+  ...CAP_THEME,
+} as const satisfies CAPTheme;
+
+export const CAP_THEME_ONE_DRIVE = {
+  ...CAP_THEME,
+} as const satisfies CAPTheme;
+
+export const CAP_THEME_SHAREPOINT = {
+  ...CAP_THEME,
+} as const satisfies CAPTheme;
diff --git a/packages/react-components/react-provider/library/src/components/CAPThemeProvider/CAPThemeProvider.tsx b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/CAPThemeProvider.tsx
new file mode 100644
index 00000000000000..4da13f4eba7855
--- /dev/null
+++ b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/CAPThemeProvider.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {
+  BadgeState,
+  ButtonState,
+  CardFooterState,
+  CardHeaderState,
+  CardState,
+  FluentProvider,
+  InputState,
+  Theme,
+} from '@fluentui/react-components';
+import { useCAPButtonStylesHook } from './components/CAPButton';
+import { CustomStyleHooksContext_unstable } from '@fluentui/react-shared-contexts';
+import { CAPTheme } from './CAPTheme';
+import { useCAPBadgeStylesHook } from './components/CAPBadge';
+import { useCAPInputStylesHook } from './components/CAPInput';
+import { useCAPCardFooterStylesHook, useCAPCardHeaderStylesHook, useCAPCardStylesHook } from './components/CAPCard';
+
+export const CAPThemeProvider = ({
+  children,
+  theme,
+}: {
+  children: React.ReactElement;
+  theme: Partial<Theme> & Partial<CAPTheme>;
+}) => {
+  const customStyleHooks = React.useMemo((): React.ContextType<typeof CustomStyleHooksContext_unstable> => {
+    return {
+      useBadgeStyles_unstable: state => useCAPBadgeStylesHook(state as BadgeState),
+      useButtonStyles_unstable: state => useCAPButtonStylesHook(state as ButtonState),
+      useCardStyles_unstable: state => useCAPCardStylesHook(state as CardState),
+      useCardHeaderStyles_unstable: state => useCAPCardHeaderStylesHook(state as CardHeaderState),
+      useCardFooterStyles_unstable: state => useCAPCardFooterStylesHook(state as CardFooterState),
+      useInputStyles_unstable: state => useCAPInputStylesHook(state as InputState),
+    };
+  }, []);
+  return (
+    <FluentProvider theme={theme} customStyleHooks_unstable={customStyleHooks}>
+      {children}
+    </FluentProvider>
+  );
+};
diff --git a/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPBadge.tsx b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPBadge.tsx
new file mode 100644
index 00000000000000..8c89c7184390ab
--- /dev/null
+++ b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPBadge.tsx
@@ -0,0 +1,139 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { BadgeState, useBadgeStyles_unstable } from '@fluentui/react-components';
+import { tokens } from '@fluentui/react-theme';
+import { CAP_THEME } from '../CAPTheme';
+
+const textPadding = tokens.spacingHorizontalXXS;
+
+const useCAPBadgeStyles = makeStyles({
+  root: {
+    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,
+  },
+
+  tiny: {
+    padding: 'unset',
+  },
+
+  'extra-small': {
+    padding: 'unset',
+  },
+
+  small: {
+    padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,
+  },
+
+  medium: {
+    // Set by root
+  },
+
+  large: {
+    padding: `0 calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`,
+  },
+
+  'extra-large': {
+    padding: `0 calc(${tokens.spacingHorizontalS} + ${textPadding})`,
+  },
+
+  // shape
+  'rounded-extra-large': { borderRadius: tokens.borderRadiusXLarge },
+  'rounded-large': { borderRadius: tokens.borderRadiusLarge },
+  'rounded-medium': { borderRadius: tokens.borderRadiusMedium },
+  'rounded-small': { borderRadius: tokens.borderRadiusMedium },
+  'rounded-extra-small': { borderRadius: tokens.borderRadiusSmall },
+  'rounded-tiny': { borderRadius: tokens.borderRadiusSmall },
+
+  'outline-brand': {
+    ...shorthands.borderColor(tokens.colorBrandStroke2),
+  },
+  'outline-warning': {
+    ...shorthands.borderColor(tokens.colorStatusWarningBorder1),
+  },
+  'outline-important': {
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+  'outline-danger': {
+    ...shorthands.borderColor(tokens.colorStatusDangerBorder1),
+  },
+  'outline-success': {
+    ...shorthands.borderColor(tokens.colorStatusSuccessBorder1),
+  },
+  'outline-informative': {
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+  'outline-subtle': {
+    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
+  },
+
+  'tint-brand': {
+    color: CAP_THEME.colorBrandForegroundCompound,
+  },
+
+  'ghost-brand': {
+    color: CAP_THEME.colorBrandForegroundCompound,
+  },
+
+  'filled-warning': {
+    color: tokens.colorNeutralForegroundOnBrand,
+    backgroundColor: tokens.colorStatusWarningBackground3,
+  },
+
+  'tint-informative': {
+    backgroundColor: tokens.colorNeutralBackground5,
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+
+  'filled-important': {
+    backgroundColor: tokens.colorNeutralBackgroundInverted,
+    color: tokens.colorNeutralForegroundOnBrand,
+  },
+
+  'tint-important': {
+    backgroundColor: tokens.colorNeutralBackground5,
+    color: tokens.colorNeutralForeground3,
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+
+  'filled-subtle': {
+    color: tokens.colorNeutralForeground3,
+    backgroundColor: tokens.colorNeutralBackground5,
+  },
+
+  'tint-subtle': {
+    ...shorthands.borderColor(tokens.colorNeutralStroke1),
+  },
+});
+
+const useCAPBadgeIconStyles = makeStyles({
+  beforeTextSmall: {
+    marginRight: textPadding,
+  },
+  afterTextSmall: {
+    marginLeft: textPadding,
+  },
+});
+
+export function useCAPBadgeStylesHook(state: BadgeState) {
+  // Apply base Badge styles first
+  useBadgeStyles_unstable(state);
+
+  // Then override with CAP styles
+  const styles = useCAPBadgeStyles();
+  const iconStyles = useCAPBadgeIconStyles();
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    styles.root,
+    styles[state.size],
+    state.shape === 'rounded' && styles[`rounded-${state.size}`],
+    `${state.appearance}-${state.color}` in styles &&
+      styles[`${state.appearance}-${state.color}` as keyof typeof styles],
+  );
+
+  // Override icon spacing for small size
+  if (state.icon && state.size === 'small') {
+    const iconPositionClass = state.iconPosition === 'after' ? iconStyles.afterTextSmall : iconStyles.beforeTextSmall;
+    state.icon.className = mergeClasses(state.icon.className, iconPositionClass);
+  }
+
+  return state;
+}
diff --git a/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPButton.tsx b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPButton.tsx
new file mode 100644
index 00000000000000..2a77354de98c53
--- /dev/null
+++ b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPButton.tsx
@@ -0,0 +1,45 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { ButtonState } from '@fluentui/react-components';
+import { CAPTokens } from '../CAPTheme';
+
+const useCAPButtonStyles = makeStyles({
+  root: {
+    borderRadius: '12px',
+  },
+  primary: {
+    backgroundColor: CAPTokens.buttonPrimaryBackgroundColor,
+
+    ':hover': {
+      backgroundColor: CAPTokens.buttonPrimaryBackgroundColorHover,
+    },
+  },
+  secondary: {
+    backgroundColor: CAPTokens.buttonSecondaryBackgroundColor,
+
+    ':hover': {
+      backgroundColor: CAPTokens.buttonSecondaryBackgroundColorHover,
+    },
+  },
+  outline: {
+    backgroundColor: CAPTokens.buttonOutlineBackgroundColor,
+
+    ':hover': {
+      backgroundColor: CAPTokens.buttonOutlineBackgroundColorHover,
+    },
+  },
+  subtle: {},
+  tint: {
+    backgroundColor: CAPTokens.buttonTintBackgroundColor,
+
+    ':hover': {
+      backgroundColor: CAPTokens.buttonTintBackgroundColorHover,
+    },
+  },
+  transparent: {},
+});
+
+export function useCAPButtonStylesHook(state: ButtonState) {
+  const styles = useCAPButtonStyles();
+  state.root.className = mergeClasses(state.root.className, styles.root, state.appearance && styles[state.appearance]);
+  return state;
+}
diff --git a/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPCard.tsx b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPCard.tsx
new file mode 100644
index 00000000000000..4814683b4bc7de
--- /dev/null
+++ b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPCard.tsx
@@ -0,0 +1,35 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { CardFooterState, CardHeaderState, CardState } from '@fluentui/react-components';
+import { CAPTokens } from '../CAPTheme';
+
+const useCAPCardStyles = makeStyles({
+  root: {
+    borderRadius: CAPTokens.cardCornerRadius,
+  },
+});
+
+export function useCAPCardStylesHook(state: CardState) {
+  const styles = useCAPCardStyles();
+  state.root.className = mergeClasses(state.root.className, styles.root);
+  return state;
+}
+
+const useCAPCardHeaderStyles = makeStyles({
+  root: {},
+});
+
+export function useCAPCardHeaderStylesHook(state: CardHeaderState) {
+  const styles = useCAPCardHeaderStyles();
+  state.root.className = mergeClasses(state.root.className, styles.root);
+  return state;
+}
+
+const useCAPCardFooterStyles = makeStyles({
+  root: {},
+});
+
+export function useCAPCardFooterStylesHook(state: CardFooterState) {
+  const styles = useCAPCardFooterStyles();
+  state.root.className = mergeClasses(state.root.className, styles.root);
+  return state;
+}
diff --git a/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPInput.tsx b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPInput.tsx
new file mode 100644
index 00000000000000..ee50d5f766e763
--- /dev/null
+++ b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPInput.tsx
@@ -0,0 +1,12 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { InputState } from '@fluentui/react-components';
+
+const useCAPInputStyles = makeStyles({
+  root: {},
+});
+
+export function useCAPInputStylesHook(state: InputState) {
+  const styles = useCAPInputStyles();
+  state.root.className = mergeClasses(state.root.className, styles.root);
+  return state;
+}
diff --git a/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPMenu.tsx b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPMenu.tsx
new file mode 100644
index 00000000000000..0c8bbedf8cb039
--- /dev/null
+++ b/packages/react-components/react-provider/library/src/components/CAPThemeProvider/components/CAPMenu.tsx
@@ -0,0 +1,5 @@
+import { MenuState } from '@fluentui/react-components';
+
+export function useCAPMenuStylesHook(state: MenuState) {
+  return state;
+}
diff --git a/packages/react-components/react-provider/library/src/index.ts b/packages/react-components/react-provider/library/src/index.ts
index 5062bf63333163..070338fc47802c 100644
--- a/packages/react-components/react-provider/library/src/index.ts
+++ b/packages/react-components/react-provider/library/src/index.ts
@@ -15,3 +15,5 @@ export type {
   FluentProviderState,
   FluentProviderSlots,
 } from './FluentProvider';
+export { CAPThemeProvider } from './components/CAPThemeProvider/CAPThemeProvider';
+export { CAP_THEME_ONE_DRIVE, CAP_THEME_SHAREPOINT, CAP_THEME_TEAMS } from './components/CAPThemeProvider/CAPTheme';
diff --git a/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPBadge.stories.tsx b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPBadge.stories.tsx
new file mode 100644
index 00000000000000..e2f786d5bd313b
--- /dev/null
+++ b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPBadge.stories.tsx
@@ -0,0 +1,345 @@
+import * as React from 'react';
+import { Badge } from '@fluentui/react-components';
+import { CAPThemeExamples } from './CAPStorybookUtil';
+import { CircleRegular } from '@fluentui/react-icons';
+
+export const CAPBadgeStory = () => {
+  return (
+    <CAPThemeExamples
+      examples={[
+        {
+          title: 'Tiny',
+          render() {
+            return <Badge size="tiny" icon={<CircleRegular />} />;
+          },
+        },
+        {
+          title: 'Extra Small',
+          render() {
+            return <Badge size="extra-small" icon={<CircleRegular />} />;
+          },
+        },
+        {
+          title: 'Small',
+          render() {
+            return (
+              <Badge size="small" icon={<CircleRegular />}>
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Default/Medium',
+          render() {
+            return <Badge icon={<CircleRegular />}> Badge</Badge>;
+          },
+        },
+        {
+          title: 'Medium No Icon',
+          render() {
+            return <Badge> Badge</Badge>;
+          },
+        },
+        {
+          title: 'Large',
+          render() {
+            return (
+              <Badge size="large" icon={<CircleRegular />}>
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Extra Large',
+          render() {
+            return (
+              <Badge size="extra-large" icon={<CircleRegular />}>
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Tiny Square',
+          render() {
+            return <Badge size="tiny" icon={<CircleRegular />} shape="square" />;
+          },
+        },
+        {
+          title: 'Extra Small Square',
+          render() {
+            return <Badge size="extra-small" icon={<CircleRegular />} shape="square" />;
+          },
+        },
+        {
+          title: 'Small Square',
+          render() {
+            return (
+              <Badge size="small" icon={<CircleRegular />} shape="square">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Default/Medium Square',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} shape="square">
+                {' '}
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Medium No Icon Square',
+          render() {
+            return <Badge shape="square"> Badge</Badge>;
+          },
+        },
+        {
+          title: 'Large Square',
+          render() {
+            return (
+              <Badge size="large" icon={<CircleRegular />} shape="square">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Extra Large Square',
+          render() {
+            return (
+              <Badge size="extra-large" icon={<CircleRegular />} shape="square">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Tiny Rounded',
+          render() {
+            return <Badge size="tiny" icon={<CircleRegular />} shape="rounded" />;
+          },
+        },
+        {
+          title: 'Extra Small Rounded ',
+          render() {
+            return <Badge size="extra-small" icon={<CircleRegular />} shape="rounded" />;
+          },
+        },
+        {
+          title: 'Small Rounded',
+          render() {
+            return (
+              <Badge size="small" icon={<CircleRegular />} shape="rounded">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Default/Medium Rounded',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} shape="rounded">
+                {' '}
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Medium No Icon Rounded',
+          render() {
+            return <Badge shape="rounded"> Badge</Badge>;
+          },
+        },
+        {
+          title: 'Large Rounded',
+          render() {
+            return (
+              <Badge size="large" icon={<CircleRegular />} shape="rounded">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Extra Large Rounded',
+          render() {
+            return (
+              <Badge size="extra-large" icon={<CircleRegular />} shape="rounded">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Outline / Important',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="important" appearance="outline">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Outline / Brand',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="brand" appearance="outline">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Outline / Danger',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="danger" appearance="outline">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Outline / Warning',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="warning" appearance="outline">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Outline / Success',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="success" appearance="outline">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Outline / Informative',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="informative" appearance="outline">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Outline / Subtle',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="subtle" appearance="outline">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Outline / Severe',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="severe" appearance="outline">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Brand / Tint',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="brand" appearance="tint">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Brand / Ghost',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="brand" appearance="ghost">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Warning / Filled',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="warning" appearance="filled">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Informative / Tint',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="informative" appearance="tint">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Important / Filled',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="important" appearance="filled">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Important / Tint',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="important" appearance="tint">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Subtle / Filled',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="subtle" appearance="filled">
+                Badge
+              </Badge>
+            );
+          },
+        },
+        {
+          title: 'Subtle / Tint',
+          render() {
+            return (
+              <Badge icon={<CircleRegular />} color="subtle" appearance="tint">
+                Badge
+              </Badge>
+            );
+          },
+        },
+      ]}
+    />
+  );
+};
diff --git a/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPButton.stories.tsx b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPButton.stories.tsx
new file mode 100644
index 00000000000000..bf5234f15dc1e4
--- /dev/null
+++ b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPButton.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Button } from '@fluentui/react-components';
+import { CAPThemeExamples } from './CAPStorybookUtil';
+import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+
+export const CAPButtonStory = () => {
+  return (
+    <CAPThemeExamples
+      examples={[
+        {
+          title: 'Default',
+          render() {
+            return <Button icon={<CalendarMonthRegular />}>Default</Button>;
+          },
+        },
+        {
+          title: 'Primary',
+          render() {
+            return (
+              <Button appearance="primary" icon={<CalendarMonthRegular />}>
+                Primary
+              </Button>
+            );
+          },
+        },
+        {
+          title: 'Outline',
+          render() {
+            return (
+              <Button appearance="outline" icon={<CalendarMonth />}>
+                Outline
+              </Button>
+            );
+          },
+        },
+        {
+          title: 'Subtle',
+          render() {
+            return (
+              <Button appearance="subtle" icon={<CalendarMonth />}>
+                Subtle
+              </Button>
+            );
+          },
+        },
+        {
+          title: 'Transparent',
+          render() {
+            return (
+              <Button appearance="transparent" icon={<CalendarMonth />}>
+                Transparent
+              </Button>
+            );
+          },
+        },
+        {
+          title: 'Tint',
+          render(variant) {
+            if (variant === 'v9') {
+              return 'NOT_IMPLEMENTED';
+            }
+            return (
+              <Button appearance="tint" icon={<CalendarMonth />}>
+                Tint
+              </Button>
+            );
+          },
+        },
+      ]}
+    />
+  );
+};
diff --git a/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPCard.stories.tsx b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPCard.stories.tsx
new file mode 100644
index 00000000000000..c5f2d73f635b75
--- /dev/null
+++ b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPCard.stories.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Button, Caption1, Card, CardHeader, Text } from '@fluentui/react-components';
+import { CAPThemeExamples } from './CAPStorybookUtil';
+import { MoreHorizontal20Regular } from '@fluentui/react-icons';
+
+export const CAPCardStory = () => {
+  return (
+    <CAPThemeExamples
+      examples={[
+        {
+          title: 'Default',
+          render() {
+            return (
+              <Card>
+                <CardHeader
+                  header={
+                    <Text as="h5" weight="semibold" style={{ margin: 0 }}>
+                      App Name
+                    </Text>
+                  }
+                  description={<Caption1>Developer</Caption1>}
+                  action={
+                    <Button appearance="transparent" icon={<MoreHorizontal20Regular />} aria-label="More options" />
+                  }
+                />
+                <p>
+                  Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee
+                  sugar plum.
+                </p>
+              </Card>
+            );
+          },
+        },
+      ]}
+    />
+  );
+};
diff --git a/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPInput.stories.tsx b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPInput.stories.tsx
new file mode 100644
index 00000000000000..57267a166ed79d
--- /dev/null
+++ b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPInput.stories.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Input } from '@fluentui/react-components';
+import { CAPThemeExamples } from './CAPStorybookUtil';
+
+export const CAPInputStory = () => {
+  return (
+    <CAPThemeExamples
+      examples={[
+        {
+          title: 'Default',
+          render() {
+            return <Input placeholder="Placeholder text" />;
+          },
+        },
+      ]}
+    />
+  );
+};
diff --git a/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPMenu.stories.tsx b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPMenu.stories.tsx
new file mode 100644
index 00000000000000..cd79193896a9e1
--- /dev/null
+++ b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPMenu.stories.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { CAPThemeExamples } from './CAPStorybookUtil';
+
+export const CAPMenuStory = () => {
+  return <CAPThemeExamples examples={[]} />;
+};
diff --git a/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPStorybookUtil.tsx b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPStorybookUtil.tsx
new file mode 100644
index 00000000000000..4e62aaea20423c
--- /dev/null
+++ b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPStorybookUtil.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { FluentProvider, makeStyles, teamsLightV21Theme } from '@fluentui/react-components';
+import { CAPThemeProvider, CAP_THEME_ONE_DRIVE, CAP_THEME_SHAREPOINT, CAP_THEME_TEAMS } from '@fluentui/react-provider';
+
+export interface CAPThemeExample {
+  title: string;
+  render(variant: 'v9' | 'cap'): React.ReactElement | 'NOT_IMPLEMENTED';
+}
+
+export const CAPThemeExamples = ({ examples }: { examples: CAPThemeExample[] }) => {
+  const styles = useCAPThemeExamplesStyles();
+  return (
+    <FluentProvider>
+      <div className={styles.table}>
+        <div className={styles.row}>
+          <div style={{ fontWeight: 800 }}>Example</div>
+          <div style={{ fontWeight: 800 }}>Current</div>
+          <div style={{ fontWeight: 800 }}>Visual Refresh (Teams)</div>
+          <div style={{ fontWeight: 800 }}>Visual Refresh (OneDrive)</div>
+          <div style={{ fontWeight: 800 }}>Visual Refresh (SharePoint)</div>
+        </div>
+        {examples.map(example => {
+          return (
+            <div className={styles.row}>
+              <div>{example.title}</div>
+              <div>{renderExample(example, 'v9')}</div>
+              <div>
+                <CAPThemeProvider theme={{ ...teamsLightV21Theme, ...CAP_THEME_TEAMS }}>
+                  {renderExample(example, 'cap')}
+                </CAPThemeProvider>
+              </div>
+              <div>
+                <CAPThemeProvider theme={{ ...CAP_THEME_ONE_DRIVE }}>{renderExample(example, 'cap')}</CAPThemeProvider>
+              </div>
+              <div>
+                <CAPThemeProvider theme={{ ...CAP_THEME_SHAREPOINT }}>{renderExample(example, 'cap')}</CAPThemeProvider>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </FluentProvider>
+  );
+};
+
+function renderExample(example: CAPThemeExample, variant: 'v9' | 'cap') {
+  const result = example.render(variant);
+  if (result === 'NOT_IMPLEMENTED') {
+    return <span style={{ color: 'red' }}>NOT IMPLEMENTED</span>;
+  }
+  return result;
+}
+
+const useCAPThemeExamplesStyles = makeStyles({
+  table: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  row: {
+    display: 'flex',
+    '& > div': {
+      flex: 1,
+      padding: '16px',
+      border: '1px solid #ddd',
+    },
+  },
+});
diff --git a/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPTooltip.stories.tsx b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPTooltip.stories.tsx
new file mode 100644
index 00000000000000..ebcdeb4e92b4ae
--- /dev/null
+++ b/packages/react-components/react-provider/stories/src/CAPThemeProvider/CAPTooltip.stories.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { CAPThemeExamples } from './CAPStorybookUtil';
+
+export const CAPTooltipStory = () => {
+  return <CAPThemeExamples examples={[]} />;
+};
diff --git a/packages/react-components/react-provider/stories/src/CAPThemeProvider/index.stories.tsx b/packages/react-components/react-provider/stories/src/CAPThemeProvider/index.stories.tsx
new file mode 100644
index 00000000000000..50ec2d3b608990
--- /dev/null
+++ b/packages/react-components/react-provider/stories/src/CAPThemeProvider/index.stories.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Meta } from '@storybook/react';
+
+export { CAPBadgeStory as Badge } from './CAPBadge.stories';
+export { CAPButtonStory as Button } from './CAPButton.stories';
+export { CAPCardStory as Card } from './CAPCard.stories';
+export { CAPInputStory as Input } from './CAPInput.stories';
+export { CAPMenuStory as Menu } from './CAPMenu.stories';
+export { CAPTooltipStory as Tooltip } from './CAPTooltip.stories';
+
+const VisualRefreshStory = () => <div />;
+
+export default {
+  title: 'Components/Visual Refresh',
+  component: VisualRefreshStory,
+  parameters: {},
+} as Meta;
diff --git a/packages/react-components/react-storybook-addon/src/components/VisualUpdateToggle.tsx b/packages/react-components/react-storybook-addon/src/components/VisualUpdateToggle.tsx
new file mode 100644
index 00000000000000..99b77ccaaf41b5
--- /dev/null
+++ b/packages/react-components/react-storybook-addon/src/components/VisualUpdateToggle.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { IconButton } from '@storybook/components';
+import { EyeIcon } from '@storybook/icons';
+
+import type { JSXElement } from '@fluentui/react-utilities';
+import { VISUAL_UPDATE_ID } from '../constants';
+import { useGlobals } from '../hooks';
+
+export const VisualUpdateToggle = (): JSXElement => {
+  const [globals, updateGlobals] = useGlobals();
+
+  const isActive = globals[VISUAL_UPDATE_ID] ?? false;
+
+  const toggleVisualUpdate = React.useCallback(
+    () =>
+      updateGlobals({
+        [VISUAL_UPDATE_ID]: !isActive,
+      }),
+    [isActive, updateGlobals],
+  );
+
+  return (
+    <IconButton key={VISUAL_UPDATE_ID} active={isActive} title="Toggle Visual Update" onClick={toggleVisualUpdate}>
+      <EyeIcon />
+      <span style={{ marginLeft: 5 }}>Visual update</span>
+    </IconButton>
+  );
+};
\ No newline at end of file
diff --git a/packages/react-components/react-storybook-addon/src/constants.ts b/packages/react-components/react-storybook-addon/src/constants.ts
index 277499ae0c1693..51e0a29fa38add 100644
--- a/packages/react-components/react-storybook-addon/src/constants.ts
+++ b/packages/react-components/react-storybook-addon/src/constants.ts
@@ -3,3 +3,4 @@ export const ADDON_ID = 'storybook_fluentui-react-addon';
 export const DIR_ID = `${ADDON_ID}_dir` as const;
 export const STRICT_MODE_ID = `${ADDON_ID}_strict-mode` as const;
 export const THEME_ID = `${ADDON_ID}_theme` as const;
+export const VISUAL_UPDATE_ID = `${ADDON_ID}_visual-update` as const;
diff --git a/packages/react-components/react-storybook-addon/src/decorators/withVisualUpdate.tsx b/packages/react-components/react-storybook-addon/src/decorators/withVisualUpdate.tsx
new file mode 100644
index 00000000000000..a2007f42a1faf4
--- /dev/null
+++ b/packages/react-components/react-storybook-addon/src/decorators/withVisualUpdate.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import type { JSXElement } from '@fluentui/react-utilities';
+import { CAPThemeProvider, CAP_THEME_TEAMS } from '@fluentui/react-provider';
+import { VISUAL_UPDATE_ID } from '../constants';
+import { FluentStoryContext } from '../hooks';
+import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
+
+export const withVisualUpdate = (StoryFn: () => JSXElement, context: FluentStoryContext): JSXElement => {
+  const { globals } = context;
+
+  if (isDecoratorDisabled(context, 'VisualUpdate')) {
+    return StoryFn();
+  }
+
+  const isVisualUpdateEnabled = globals[VISUAL_UPDATE_ID] ?? false;
+
+  if (isVisualUpdateEnabled) {
+    return <CAPThemeProvider theme={{ ...CAP_THEME_TEAMS }}>{StoryFn()}</CAPThemeProvider>;
+  }
+
+  return StoryFn();
+};
diff --git a/packages/react-components/react-storybook-addon/src/hooks.ts b/packages/react-components/react-storybook-addon/src/hooks.ts
index 6634e91f6779c2..29ed7280259a41 100644
--- a/packages/react-components/react-storybook-addon/src/hooks.ts
+++ b/packages/react-components/react-storybook-addon/src/hooks.ts
@@ -1,7 +1,7 @@
 import { useGlobals as useStorybookGlobals } from '@storybook/manager-api';
 import { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react';
 
-import { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';
+import { DIR_ID, STRICT_MODE_ID, THEME_ID, VISUAL_UPDATE_ID } from './constants';
 import type { ThemeIds } from './theme';
 
 export interface FluentStoryContext extends StorybookContext {
@@ -16,6 +16,7 @@ export interface FluentGlobals extends StorybookArgs {
   [DIR_ID]?: 'ltr' | 'rtl';
   [THEME_ID]?: ThemeIds;
   [STRICT_MODE_ID]?: boolean;
+  [VISUAL_UPDATE_ID]?: boolean;
 }
 
 /**
@@ -26,7 +27,7 @@ export interface FluentParameters extends Parameters {
   fluentTheme?: ThemeIds;
   mode?: 'default' | 'vr-test';
   reactStorybookAddon?: {
-    disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];
+    disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode' | 'VisualUpdate'];
     docs?: FluentDocsConfig;
   };
 }
diff --git a/packages/react-components/react-storybook-addon/src/index.ts b/packages/react-components/react-storybook-addon/src/index.ts
index b1c71cf2823b0c..dc13225e481c50 100644
--- a/packages/react-components/react-storybook-addon/src/index.ts
+++ b/packages/react-components/react-storybook-addon/src/index.ts
@@ -1,6 +1,6 @@
 export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks';
 export type { ThemeIds } from './theme';
 export { themes } from './theme';
-export { DIR_ID, THEME_ID } from './constants';
+export { DIR_ID, THEME_ID, VISUAL_UPDATE_ID } from './constants';
 export { parameters } from './hooks';
 export { FluentCanvas, FluentStory } from './docs';
diff --git a/packages/react-components/react-storybook-addon/src/preset/manager.ts b/packages/react-components/react-storybook-addon/src/preset/manager.ts
index 2f65b398ce7c2c..c6fcf3496e14d5 100644
--- a/packages/react-components/react-storybook-addon/src/preset/manager.ts
+++ b/packages/react-components/react-storybook-addon/src/preset/manager.ts
@@ -1,9 +1,10 @@
 import { addons, types } from '@storybook/manager-api';
 
-import { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
+import { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID, VISUAL_UPDATE_ID } from '../constants';
 import { ThemePicker } from '../components/ThemePicker';
 import { ReactStrictMode } from '../components/ReactStrictMode';
 import { DirectionSwitch } from '../components/DirectionSwitch';
+import { VisualUpdateToggle } from '../components/VisualUpdateToggle';
 
 addons.register(ADDON_ID, () => {
   addons.add(THEME_ID, {
@@ -13,6 +14,13 @@ addons.register(ADDON_ID, () => {
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: ThemePicker,
   });
+  addons.add(VISUAL_UPDATE_ID, {
+    title: 'Visual Update Toggle',
+
+    type: types.TOOL,
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: VisualUpdateToggle,
+  });
   addons.add(DIR_ID, {
     title: 'Direction Switch',
 
diff --git a/packages/react-components/react-storybook-addon/src/preset/preview.ts b/packages/react-components/react-storybook-addon/src/preset/preview.ts
index cfac98475f71b4..bcb5ed3c5db090 100644
--- a/packages/react-components/react-storybook-addon/src/preset/preview.ts
+++ b/packages/react-components/react-storybook-addon/src/preset/preview.ts
@@ -3,13 +3,24 @@ import type { Preview } from '@storybook/react';
 import { withFluentProvider } from '../decorators/withFluentProvider';
 import { withReactStrictMode } from '../decorators/withReactStrictMode';
 import { withAriaLive } from '../decorators/withAriaLive';
+import { withVisualUpdate } from '../decorators/withVisualUpdate';
 import { FluentDocsContainer, FluentDocsPage } from '../docs';
 
-import { DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
+import { DIR_ID, STRICT_MODE_ID, THEME_ID, VISUAL_UPDATE_ID } from '../constants';
 
-export const decorators = [withFluentProvider, withAriaLive, withReactStrictMode] as Preview['decorators'];
+export const decorators = [
+  withFluentProvider,
+  withAriaLive,
+  withReactStrictMode,
+  withVisualUpdate,
+] as Preview['decorators'];
 
-export const initialGlobals = { [THEME_ID]: undefined, [DIR_ID]: undefined, [STRICT_MODE_ID]: undefined }; // allow theme to be set by URL query param
+export const initialGlobals = {
+  [THEME_ID]: undefined,
+  [DIR_ID]: undefined,
+  [STRICT_MODE_ID]: undefined,
+  [VISUAL_UPDATE_ID]: undefined,
+}; // allow theme to be set by URL query param
 
 const preview: Preview = {
   decorators,