diff --git a/packages/vibrant-components/src/lib/Calendar/Calendar.tsx b/packages/vibrant-components/src/lib/Calendar/Calendar.tsx
index 9a4240582..4dcd84e4c 100644
--- a/packages/vibrant-components/src/lib/Calendar/Calendar.tsx
+++ b/packages/vibrant-components/src/lib/Calendar/Calendar.tsx
@@ -116,7 +116,7 @@ export const Calendar = withCalendarVariation(
         backgroundColor="surface2"
         width={320}
         elevationLevel={2}
-        borderRadiusLevel={1}
+        rounded="sm"
         testId={testId}
         {...restProps}
       >
diff --git a/packages/vibrant-components/src/lib/CalendarDateItem/CalenderDateItem.tsx b/packages/vibrant-components/src/lib/CalendarDateItem/CalenderDateItem.tsx
index d52ad2a1a..e2b2d5924 100644
--- a/packages/vibrant-components/src/lib/CalendarDateItem/CalenderDateItem.tsx
+++ b/packages/vibrant-components/src/lib/CalendarDateItem/CalenderDateItem.tsx
@@ -56,15 +56,7 @@ export const CalenderDateItem = withCalendarDateItemVariation(
             {date.getDate()}
           </Body>
           {today && (
-            <Box
-              position="absolute"
-              width={4}
-              height={4}
-              borderRadius={2}
-              bottom={8}
-              left={18}
-              backgroundColor="primary"
-            />
+            <Box position="absolute" width={4} height={4} rounded="sm" bottom={8} left={18} backgroundColor="primary" />
           )}
         </Box>
       </>
diff --git a/packages/vibrant-components/src/lib/Callout/Callout.tsx b/packages/vibrant-components/src/lib/Callout/Callout.tsx
index 2f32e35c4..dd91960e8 100644
--- a/packages/vibrant-components/src/lib/Callout/Callout.tsx
+++ b/packages/vibrant-components/src/lib/Callout/Callout.tsx
@@ -23,7 +23,7 @@ export const Callout = withCalloutVariation(
       backgroundColor={backgroundColor}
       borderWidth={1}
       borderColor="outline1"
-      borderRadius={2}
+      rounded="sm"
       p={15}
       data-testid={testId}
     >
diff --git a/packages/vibrant-components/src/lib/ContainedButton/ContainedButton.spec.tsx b/packages/vibrant-components/src/lib/ContainedButton/ContainedButton.spec.tsx
index d52f56711..9d683ea09 100644
--- a/packages/vibrant-components/src/lib/ContainedButton/ContainedButton.spec.tsx
+++ b/packages/vibrant-components/src/lib/ContainedButton/ContainedButton.spec.tsx
@@ -171,7 +171,7 @@ describe('<ContainedButton />', () => {
 
           expect(element).toHaveStyleRule('padding-right', paddingRight);
 
-          expect(element).toHaveStyleRule('border-radius', '2px');
+          expect(element).toHaveStyleRule('border-radius', '4px');
 
           expect(element.clientHeight).toBe(height);
 
diff --git a/packages/vibrant-components/src/lib/ContainedButton/ContainedButton.tsx b/packages/vibrant-components/src/lib/ContainedButton/ContainedButton.tsx
index 0139c8b99..1e4042c09 100644
--- a/packages/vibrant-components/src/lib/ContainedButton/ContainedButton.tsx
+++ b/packages/vibrant-components/src/lib/ContainedButton/ContainedButton.tsx
@@ -29,7 +29,7 @@ export const ContainedButton = withContainedButtonVariation(
       buttonType={type}
       interactions={['hover', 'focus', 'active']}
       overlayColor={onColor}
-      borderRadiusLevel={1}
+      rounded="sm"
       disabled={loading || disabled}
     >
       <Box
diff --git a/packages/vibrant-components/src/lib/DateInput/DateInput.tsx b/packages/vibrant-components/src/lib/DateInput/DateInput.tsx
index 1fe294068..8a52f70c4 100644
--- a/packages/vibrant-components/src/lib/DateInput/DateInput.tsx
+++ b/packages/vibrant-components/src/lib/DateInput/DateInput.tsx
@@ -62,15 +62,14 @@ export const DateInput = withDateInputVariation(
           borderStyle="solid"
           borderColor={(isFocused || calendarOpened) && state !== 'error' ? 'outlineNeutral' : borderColor}
           height={height}
-          borderRadius={2}
+          rounded="sm"
           flexShrink={0}
-          alignItems="center"
+          overflow="hidden"
           {...restProps}
         >
           <Pressable
             ref={composeRef}
             pl={px}
-            height="100%"
             justifyContent="center"
             flexGrow={1}
             disabled={disabled}
@@ -93,7 +92,7 @@ export const DateInput = withDateInputVariation(
               </Body>
             </>
           </Pressable>
-          <HStack spacing={iconSpacing} pl={iconSpacing} height="100%">
+          <HStack spacing={iconSpacing} pl={iconSpacing}>
             {!disabled && value ? (
               <PressableBox as="button" onClick={onClear} hitSlop={hitSlop} justifyContent="center">
                 <Icon.CloseCircle.Fill size={iconSize} fill="onView2" />
diff --git a/packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap b/packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap
index 41720b5aa..9a664189b 100644
--- a/packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/DatePickerField/__snapshots__/DatePickerField.spec.tsx.snap
@@ -41,11 +41,8 @@ exports[`<DatePickerField /> when size is lg match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 50px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -75,7 +72,6 @@ exports[`<DatePickerField /> when size is lg match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 15px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -119,7 +115,6 @@ exports[`<DatePickerField /> when size is lg match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 12px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -292,11 +287,8 @@ exports[`<DatePickerField /> when size is md match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 38px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -326,7 +318,6 @@ exports[`<DatePickerField /> when size is md match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 9px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -370,7 +361,6 @@ exports[`<DatePickerField /> when size is md match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 8px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -543,11 +533,8 @@ exports[`<DatePickerField /> when size is sm match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 30px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -577,7 +564,6 @@ exports[`<DatePickerField /> when size is sm match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 7px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -621,7 +607,6 @@ exports[`<DatePickerField /> when size is sm match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 6px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
diff --git a/packages/vibrant-components/src/lib/Drawer/DrawerHeader/__snapshots__/DrawerHeader.spec.tsx.snap b/packages/vibrant-components/src/lib/Drawer/DrawerHeader/__snapshots__/DrawerHeader.spec.tsx.snap
index 65757c1ee..90be0a450 100644
--- a/packages/vibrant-components/src/lib/Drawer/DrawerHeader/__snapshots__/DrawerHeader.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/Drawer/DrawerHeader/__snapshots__/DrawerHeader.spec.tsx.snap
@@ -130,7 +130,7 @@ exports[`<DrawerHeader /> when children is set match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-7 {
diff --git a/packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx b/packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx
index 8ae262d19..da261cc50 100644
--- a/packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx
+++ b/packages/vibrant-components/src/lib/Dropdown/Dropdown.tsx
@@ -249,7 +249,7 @@ export const Dropdown = withDropdownVariation(
                     backgroundColor="surface2"
                     py={CONTENT_PADDING}
                     elevationLevel={4}
-                    borderRadiusLevel={1}
+                    rounded="sm"
                     minWidth={[280, 280, 240]}
                   >
                     <Transition
@@ -290,8 +290,8 @@ export const Dropdown = withDropdownVariation(
                   width="100%"
                   maxHeight={viewportHeight - BOTTOM_SHEET_MIN_TOP_MARGIN}
                   backgroundColor="surface2"
-                  borderTopLeftRadiusLevel={4}
-                  borderTopRightRadiusLevel={4}
+                  roundedTopLeft="xxl"
+                  roundedTopRight="xxl"
                   onLayout={handleContainerResize}
                 >
                   <Transition
diff --git a/packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx b/packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx
index 10468730f..85036975c 100644
--- a/packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx
+++ b/packages/vibrant-components/src/lib/FieldLayout/FieldLayout.tsx
@@ -54,7 +54,7 @@ export const FieldLayout = withFieldLayoutVariation(
         borderStyle="solid"
         borderColor={borderColor}
         backgroundColor={backgroundColor}
-        borderRadiusLevel={1}
+        rounded="sm"
       >
         <VStack flexShrink={0}>{renderStart?.()}</VStack>
         <Box width="100%" height="100%" cursor={cursor}>
diff --git a/packages/vibrant-components/src/lib/FilterChip/FilterChip.tsx b/packages/vibrant-components/src/lib/FilterChip/FilterChip.tsx
index 5b5115b93..0e4f0f1fe 100644
--- a/packages/vibrant-components/src/lib/FilterChip/FilterChip.tsx
+++ b/packages/vibrant-components/src/lib/FilterChip/FilterChip.tsx
@@ -22,7 +22,7 @@ export const FilterChip = withFilterChipVariation(
       testId={testId}
       flexGrow={0}
       flexShrink={0}
-      borderRadiusLevel={5}
+      rounded="full"
       maxWidth={maxWidth}
       flexDirection="row"
       alignItems="center"
diff --git a/packages/vibrant-components/src/lib/GhostButton/GhostButton.tsx b/packages/vibrant-components/src/lib/GhostButton/GhostButton.tsx
index 45811da8d..ee3450e5f 100644
--- a/packages/vibrant-components/src/lib/GhostButton/GhostButton.tsx
+++ b/packages/vibrant-components/src/lib/GhostButton/GhostButton.tsx
@@ -26,7 +26,7 @@ export const GhostButton = withGhostButtonVariation(
       buttonType={type}
       interactions={['focus', 'active']}
       hitSlop={8}
-      borderRadiusLevel={1}
+      rounded="sm"
       disabled={disabled}
       data-testid={testId}
       flexDirection="row"
diff --git a/packages/vibrant-components/src/lib/IconButton/IconButton.tsx b/packages/vibrant-components/src/lib/IconButton/IconButton.tsx
index 9bd7f0c2b..e9363b28a 100644
--- a/packages/vibrant-components/src/lib/IconButton/IconButton.tsx
+++ b/packages/vibrant-components/src/lib/IconButton/IconButton.tsx
@@ -10,7 +10,7 @@ export const IconButton = withIconButtonVariation(
       as="button"
       buttonType={type}
       interactions={['focus', 'active']}
-      borderRadiusLevel={1}
+      rounded="sm"
     >
       <IconComponent size={iconSize} fill={color} />
     </Pressable>
diff --git a/packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnail.tsx b/packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnail.tsx
index 25557a011..3941e0315 100644
--- a/packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnail.tsx
+++ b/packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnail.tsx
@@ -3,23 +3,8 @@ import { Ratio } from '../Ratio';
 import { withImageThumbnailVariation } from './ImageThumbnailProps';
 
 export const ImageThumbnail = withImageThumbnailVariation(
-  ({
-    src,
-    alt = '',
-    borderRadiusLevel,
-    aspectRatio,
-    dim = true,
-    loading,
-    width = '100%',
-    testId = 'image-thumbnail',
-  }) => (
-    <Ratio
-      data-testid={testId}
-      ratio={aspectRatio}
-      width={width}
-      borderRadiusLevel={borderRadiusLevel}
-      overflow="hidden"
-    >
+  ({ src, alt = '', aspectRatio, dim = true, loading, width = '100%', testId = 'image-thumbnail', ...props }) => (
+    <Ratio data-testid={testId} ratio={aspectRatio} width={width} overflow="hidden" {...props}>
       {dim && (
         <Box
           data-testid={`${testId}-overlay`}
diff --git a/packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnailProps.ts b/packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnailProps.ts
index 161298d88..3ff824804 100644
--- a/packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnailProps.ts
+++ b/packages/vibrant-components/src/lib/ImageThumbnail/ImageThumbnailProps.ts
@@ -5,6 +5,6 @@ export type ImageThumbnailProps = {
   dim?: ResponsiveValue<boolean>;
   aspectRatio: number;
   testId?: string;
-} & Pick<ImageProps, 'alt' | 'borderRadiusLevel' | 'loading' | 'objectFit' | 'sizes' | 'src' | 'width'>;
+} & Pick<ImageProps, 'alt' | 'borderRadiusLevel' | 'loading' | 'objectFit' | 'rounded' | 'sizes' | 'src' | 'width'>;
 
 export const withImageThumbnailVariation = withVariation<ImageThumbnailProps>('ImageThumbnail')();
diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx
index 851d14565..3b1cf36c7 100644
--- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx
+++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx
@@ -147,10 +147,10 @@ export const ModalBottomSheet = withModalBottomSheetVariation(
                 maxWidth={[446, 480, desktopModalWidth]}
                 maxHeight={[viewportHeight - 120, 'unset']}
                 backgroundColor="surface2"
-                borderTopLeftRadiusLevel={4}
-                borderTopRightRadiusLevel={4}
-                borderBottomLeftRadiusLevel={[0, 4]}
-                borderBottomRightRadiusLevel={[0, 4]}
+                roundedTopLeft="xxl"
+                roundedTopRight="xxl"
+                roundedBottomLeft={['none', 'xxl']}
+                roundedBottomRight={['none', 'xxl']}
                 onLayout={handleContainerResize}
                 data-testid={testId}
               >
diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/__snapshots__/ModalBottomSheet.spec.tsx.snap b/packages/vibrant-components/src/lib/ModalBottomSheet/__snapshots__/ModalBottomSheet.spec.tsx.snap
index 39f15f022..13e2c10f2 100644
--- a/packages/vibrant-components/src/lib/ModalBottomSheet/__snapshots__/ModalBottomSheet.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/ModalBottomSheet/__snapshots__/ModalBottomSheet.spec.tsx.snap
@@ -257,7 +257,7 @@ exports[`<ModalBottomSheet /> given mobile viewport width match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-9 {
@@ -671,7 +671,7 @@ exports[`<ModalBottomSheet /> given viewport width larger than mobile match snap
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-9 {
diff --git a/packages/vibrant-components/src/lib/NumericField/NumericField.tsx b/packages/vibrant-components/src/lib/NumericField/NumericField.tsx
index 74509bb33..2953869d9 100644
--- a/packages/vibrant-components/src/lib/NumericField/NumericField.tsx
+++ b/packages/vibrant-components/src/lib/NumericField/NumericField.tsx
@@ -60,7 +60,7 @@ export const NumericField = withNumericFieldVariation(
           borderWidth={1}
           borderColor="outline1"
           borderStyle="solid"
-          borderRadius={2}
+          rounded="sm"
           placeholder={placeholder?.toString()}
           disabled={disabled}
           hideInputSpinButton={true}
diff --git a/packages/vibrant-components/src/lib/NumericField/__snapshots__/NumericField.spec.tsx.snap b/packages/vibrant-components/src/lib/NumericField/__snapshots__/NumericField.spec.tsx.snap
index 854e035e4..8e080dbc9 100644
--- a/packages/vibrant-components/src/lib/NumericField/__snapshots__/NumericField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/NumericField/__snapshots__/NumericField.spec.tsx.snap
@@ -47,7 +47,7 @@ exports[`<NumericField /> when NumericField rendered match snapshot 1`] = `
   text-align: center;
   border-color: #00000026;
   border-style: solid;
-  border-radius: 2px;
+  border-radius: 4px;
   -moz-appearance: textfield;
 }
 
@@ -132,7 +132,7 @@ exports[`<NumericField /> when NumericField rendered match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-4 {
diff --git a/packages/vibrant-components/src/lib/OperatorButton/OperatorButton.tsx b/packages/vibrant-components/src/lib/OperatorButton/OperatorButton.tsx
index 84d3d01e2..e9791f3a9 100644
--- a/packages/vibrant-components/src/lib/OperatorButton/OperatorButton.tsx
+++ b/packages/vibrant-components/src/lib/OperatorButton/OperatorButton.tsx
@@ -6,7 +6,7 @@ export const OperatorButton = withOperationButtonVariation(
     <Pressable
       p={7}
       borderWidth={0}
-      borderRadius={2}
+      rounded="sm"
       backgroundColor={backgroundColor}
       overlayColor="onView1"
       interactions={['hover', 'focus', 'active']}
diff --git a/packages/vibrant-components/src/lib/OperatorButton/__snapshots__/OperatorButton.spec.tsx.snap b/packages/vibrant-components/src/lib/OperatorButton/__snapshots__/OperatorButton.spec.tsx.snap
index 68b5f35bf..fbb002d53 100644
--- a/packages/vibrant-components/src/lib/OperatorButton/__snapshots__/OperatorButton.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/OperatorButton/__snapshots__/OperatorButton.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`<OperatorButton /> when OperatorButton rendered match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-1 {
diff --git a/packages/vibrant-components/src/lib/OutlinedButton/OutlinedButton.tsx b/packages/vibrant-components/src/lib/OutlinedButton/OutlinedButton.tsx
index 69419f76b..66d5c4ebd 100644
--- a/packages/vibrant-components/src/lib/OutlinedButton/OutlinedButton.tsx
+++ b/packages/vibrant-components/src/lib/OutlinedButton/OutlinedButton.tsx
@@ -34,7 +34,7 @@ export const OutlinedButton = withOutlinedButtonVariation(
       borderColor={borderColor}
       borderWidth={1}
       borderStyle="solid"
-      borderRadiusLevel={1}
+      rounded="sm"
       disabled={loading || disabled}
     >
       <Box
diff --git a/packages/vibrant-components/src/lib/Paper/Paper.stories.tsx b/packages/vibrant-components/src/lib/Paper/Paper.stories.tsx
index 8d545e04b..8525b79ac 100644
--- a/packages/vibrant-components/src/lib/Paper/Paper.stories.tsx
+++ b/packages/vibrant-components/src/lib/Paper/Paper.stories.tsx
@@ -15,7 +15,7 @@ export default {
 export const Basic: ComponentStory<typeof Paper> = props => <Paper {...props} m={20} width={200} height={200} />;
 
 export const BackgroundColor: ComponentStory<typeof Paper> = () => (
-  <Paper m={20} width={200} height={200} backgroundColor="primary" borderRadiusLevel={1} />
+  <Paper m={20} width={200} height={200} backgroundColor="primary" rounded="sm" />
 );
 
 export const BackgroundGradient: ComponentStory<typeof Paper> = () => (
diff --git a/packages/vibrant-components/src/lib/Paper/PaperProps.ts b/packages/vibrant-components/src/lib/Paper/PaperProps.ts
index 531a82135..9c04b0f2d 100644
--- a/packages/vibrant-components/src/lib/Paper/PaperProps.ts
+++ b/packages/vibrant-components/src/lib/Paper/PaperProps.ts
@@ -57,8 +57,12 @@ type PaperProps = Pick<BorderSystemProps, 'borderColor' | 'borderStyle' | 'borde
       | 'borderBottomRightRadiusLevel'
       | 'borderTopLeftRadiusLevel'
       | 'borderTopRightRadiusLevel'
+      | 'roundedBottomLeft'
+      | 'roundedBottomRight'
+      | 'roundedTopLeft'
+      | 'roundedTopRight'
     >,
-    Pick<BorderSystemProps, 'borderRadiusLevel'>
+    Pick<BorderSystemProps, 'borderRadiusLevel' | 'rounded'>
   >;
 
 export const withPaperVariation = withVariation<PaperProps>('Paper')();
diff --git a/packages/vibrant-components/src/lib/PasswordField/__snapshots__/PasswordField.spec.tsx.snap b/packages/vibrant-components/src/lib/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
index df713fd53..99d7f9e7d 100644
--- a/packages/vibrant-components/src/lib/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/PasswordField/__snapshots__/PasswordField.spec.tsx.snap
@@ -56,7 +56,7 @@ exports[`<PasswordField /> when size is lg match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   background-color: #ffffff;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-2 {
@@ -432,7 +432,7 @@ exports[`<PasswordField /> when size is md match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   background-color: #ffffff;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-2 {
@@ -808,7 +808,7 @@ exports[`<PasswordField /> when size is sm match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   background-color: #ffffff;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-2 {
diff --git a/packages/vibrant-components/src/lib/Popover/Popover.tsx b/packages/vibrant-components/src/lib/Popover/Popover.tsx
index c396d9275..f371cd11d 100644
--- a/packages/vibrant-components/src/lib/Popover/Popover.tsx
+++ b/packages/vibrant-components/src/lib/Popover/Popover.tsx
@@ -263,7 +263,7 @@ export const Popover = ({
       <VStack zIndex={isOpen ? zIndex ?? themeZIndex.popover : 0} position="absolute">
         <Transition animation={{ opacity: isOpen ? 1 : 0, ...popoverPosition }} duration={200} easing="easeOutQuad">
           <VStack maxWidth={maxWidth} position="relative" width="100%">
-            <Paper backgroundColor={backgroundColor} borderRadiusLevel={1}>
+            <Paper backgroundColor={backgroundColor} rounded="sm">
               <VStack px={12} py={8} ref={popoverRef} width="100%">
                 <HStack width="100%" alignHorizontal="space-between">
                   {isDefined(title) && (
diff --git a/packages/vibrant-components/src/lib/PopoverOpener/PopoverOpener.stories.tsx b/packages/vibrant-components/src/lib/PopoverOpener/PopoverOpener.stories.tsx
index 91471aaf0..3e6a11b18 100644
--- a/packages/vibrant-components/src/lib/PopoverOpener/PopoverOpener.stories.tsx
+++ b/packages/vibrant-components/src/lib/PopoverOpener/PopoverOpener.stories.tsx
@@ -32,7 +32,7 @@ export const NotWrappedWithPopover: ComponentStory<typeof PopoverOpener> = props
     <VStack width="100%" height="100vh" alignVertical="center" alignHorizontal="center" spacing={100}>
       <Popover popoverId={popoverId} position="top" title="Popover" backgroundColor="primary">
         <VStack>
-          <Paper backgroundColor="primary" p={10} borderRadiusLevel={2}>
+          <Paper backgroundColor="primary" p={10} rounded="lg">
             <Title level={4} color="onView1">
               Anchor
             </Title>
@@ -56,7 +56,7 @@ export const MultiplePopoverWithMulitpleOpener: ComponentStory<typeof PopoverOpe
       <HStack spacing={100}>
         <Popover popoverId={firstPopoverId} position="left" title="Popover" backgroundColor="primary">
           <VStack>
-            <Paper backgroundColor="primary" p={10} borderRadiusLevel={2}>
+            <Paper backgroundColor="primary" p={10} rounded="lg">
               <Title level={4} color="onView1">
                 Anchor
               </Title>
@@ -66,7 +66,7 @@ export const MultiplePopoverWithMulitpleOpener: ComponentStory<typeof PopoverOpe
 
         <Popover popoverId={secondPopoverId} position="right" title="Popover" backgroundColor="informative">
           <VStack>
-            <Paper backgroundColor="informative" p={10} borderRadiusLevel={2}>
+            <Paper backgroundColor="informative" p={10} rounded="lg">
               <Title level={4} color="onView1">
                 Anchor2
               </Title>
@@ -124,7 +124,7 @@ export const MultiplePopoverWithSingleOpener: ComponentStory<typeof PopoverOpene
       <VStack spacing={5}>
         <HStack spacing={5}>
           <Popover position="left" title="Popover" backgroundColor="error" open={firstIsOpen}>
-            <Paper backgroundColor="error" borderRadiusLevel={2} width={100} height={100}>
+            <Paper backgroundColor="error" rounded="lg" width={100} height={100}>
               <VStack alignHorizontal="center" alignVertical="center" width="100%" height="100%">
                 <Title level={4} color="onView1">
                   Anchor
@@ -133,7 +133,7 @@ export const MultiplePopoverWithSingleOpener: ComponentStory<typeof PopoverOpene
             </Paper>
           </Popover>
           <Popover position="top" title="Popover" backgroundColor="primary" open={secondIsOpen}>
-            <Paper backgroundColor="primary" borderRadiusLevel={2} width={100} height={100}>
+            <Paper backgroundColor="primary" rounded="lg" width={100} height={100}>
               <VStack alignHorizontal="center" alignVertical="center" width="100%" height="100%">
                 <Title level={4} color="onView1">
                   Anchor2
@@ -144,7 +144,7 @@ export const MultiplePopoverWithSingleOpener: ComponentStory<typeof PopoverOpene
         </HStack>
         <HStack spacing={5}>
           <Popover position="bottom" title="Popover" backgroundColor="success" open={thirdIsOpen}>
-            <Paper backgroundColor="success" p={10} borderRadiusLevel={2} width={100} height={100}>
+            <Paper backgroundColor="success" p={10} rounded="lg" width={100} height={100}>
               <VStack alignHorizontal="center" alignVertical="center" width="100%" height="100%">
                 <Title level={4} color="onView1">
                   Anchor3
@@ -153,7 +153,7 @@ export const MultiplePopoverWithSingleOpener: ComponentStory<typeof PopoverOpene
             </Paper>
           </Popover>
           <Popover position="right" title="Popover" backgroundColor="informative" open={thirdIsOpen}>
-            <Paper backgroundColor="informative" p={10} borderRadiusLevel={2} width={100} height={100}>
+            <Paper backgroundColor="informative" p={10} rounded="lg" width={100} height={100}>
               <VStack alignHorizontal="center" alignVertical="center" width="100%" height="100%">
                 <Title level={4} color="onView1">
                   Anchor4
diff --git a/packages/vibrant-components/src/lib/Radio/Radio.stories.tsx b/packages/vibrant-components/src/lib/Radio/Radio.stories.tsx
index 17475e660..e8014ef11 100644
--- a/packages/vibrant-components/src/lib/Radio/Radio.stories.tsx
+++ b/packages/vibrant-components/src/lib/Radio/Radio.stories.tsx
@@ -40,7 +40,7 @@ const RadioButton = ({ value, label }: { value: string; label: string }) => {
       disabled={isDisabled}
       backgroundColor={isChecked ? 'primary' : 'background'}
       p={10}
-      borderRadiusLevel={2}
+      rounded="lg"
     >
       <>
         <Box
diff --git a/packages/vibrant-components/src/lib/RangePickerField/__snapshots__/RangePickerField.spec.tsx.snap b/packages/vibrant-components/src/lib/RangePickerField/__snapshots__/RangePickerField.spec.tsx.snap
index 89f5d3ba2..f31dff8b6 100644
--- a/packages/vibrant-components/src/lib/RangePickerField/__snapshots__/RangePickerField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/RangePickerField/__snapshots__/RangePickerField.spec.tsx.snap
@@ -61,11 +61,8 @@ exports[`<RangePickerField /> when size is lg match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 50px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -95,7 +92,6 @@ exports[`<RangePickerField /> when size is lg match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 15px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -139,7 +135,6 @@ exports[`<RangePickerField /> when size is lg match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 12px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -332,11 +327,8 @@ exports[`<RangePickerField /> when size is md match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 38px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -366,7 +358,6 @@ exports[`<RangePickerField /> when size is md match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 9px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -410,7 +401,6 @@ exports[`<RangePickerField /> when size is md match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 8px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
@@ -603,11 +593,8 @@ exports[`<RangePickerField /> when size is sm match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   height: 30px;
-  border-radius: 2px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  border-radius: 4px;
+  overflow: hidden;
   background-color: #ffffff;
 }
 
@@ -637,7 +624,6 @@ exports[`<RangePickerField /> when size is sm match snapshot 1`] = `
   -ms-flex-align: stretch;
   align-items: stretch;
   z-index: 0;
-  height: 100%;
   padding-left: 7px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
@@ -681,7 +667,6 @@ exports[`<RangePickerField /> when size is sm match snapshot 1`] = `
   box-sizing: border-box;
   position: relative;
   padding-left: 6px;
-  height: 100%;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
diff --git a/packages/vibrant-components/src/lib/Ratio/RatioProps.ts b/packages/vibrant-components/src/lib/Ratio/RatioProps.ts
index e7b45311e..764284ef5 100644
--- a/packages/vibrant-components/src/lib/Ratio/RatioProps.ts
+++ b/packages/vibrant-components/src/lib/Ratio/RatioProps.ts
@@ -9,7 +9,7 @@ import type {
 import { propVariant, withVariation } from '@vibrant-ui/core';
 
 export type RatioProps = Pick<SizingSystemProps, 'maxWidth' | 'minWidth' | 'width'> &
-  Pick<BorderSystemProps, 'borderRadiusLevel'> &
+  Pick<BorderSystemProps, 'borderRadiusLevel' | 'rounded'> &
   OverflowSystemProps & {
     ratio: ResponsiveValue<number>;
     children: ReactElementChildren;
diff --git a/packages/vibrant-components/src/lib/SelectField/SelectField.tsx b/packages/vibrant-components/src/lib/SelectField/SelectField.tsx
index e06f565ca..b6ce6e4a0 100644
--- a/packages/vibrant-components/src/lib/SelectField/SelectField.tsx
+++ b/packages/vibrant-components/src/lib/SelectField/SelectField.tsx
@@ -205,7 +205,7 @@ export const SelectField = withSelectFieldVariation(
           borderWidth={1}
           borderStyle="solid"
           borderColor={borderColor}
-          borderRadius={2}
+          rounded="sm"
           cursor={disabled ? 'default' : 'pointer'}
           onPressIn={() => (isOpened ? close() : open(-1))}
           {...restProps}
diff --git a/packages/vibrant-components/src/lib/SelectField/__snapshots__/SelectField.spec.tsx.snap b/packages/vibrant-components/src/lib/SelectField/__snapshots__/SelectField.spec.tsx.snap
index 3516632e5..9b2b819df 100644
--- a/packages/vibrant-components/src/lib/SelectField/__snapshots__/SelectField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/SelectField/__snapshots__/SelectField.spec.tsx.snap
@@ -71,7 +71,7 @@ exports[`<SelectField /> when size is lg match snapshot 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #00000026;
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: #ffffff;
 }
 
@@ -280,7 +280,7 @@ exports[`<SelectField /> when size is md match snapshot 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #00000026;
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: #ffffff;
 }
 
@@ -489,7 +489,7 @@ exports[`<SelectField /> when size is sm match snapshot 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #00000026;
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: #ffffff;
 }
 
diff --git a/packages/vibrant-components/src/lib/SelectOptionGroup/SelectOptionGroup.tsx b/packages/vibrant-components/src/lib/SelectOptionGroup/SelectOptionGroup.tsx
index 656eaa972..8b27c53bb 100644
--- a/packages/vibrant-components/src/lib/SelectOptionGroup/SelectOptionGroup.tsx
+++ b/packages/vibrant-components/src/lib/SelectOptionGroup/SelectOptionGroup.tsx
@@ -53,7 +53,7 @@ export const SelectOptionGroup = withSelectOptionGroupVariation(
         backgroundColor="surface3"
         borderWidth={1}
         borderStyle="solid"
-        borderRadius={2}
+        rounded="sm"
         hideScroll={true}
         data-testid={testId}
         {...restProps}
diff --git a/packages/vibrant-components/src/lib/Skeleton/Skeleton.stories.tsx b/packages/vibrant-components/src/lib/Skeleton/Skeleton.stories.tsx
index 78876fba4..c02eb3dea 100644
--- a/packages/vibrant-components/src/lib/Skeleton/Skeleton.stories.tsx
+++ b/packages/vibrant-components/src/lib/Skeleton/Skeleton.stories.tsx
@@ -9,7 +9,7 @@ export default {
     width: '100%',
     maxWidth: 200,
     height: 200,
-    borderRadiusLevel: 2,
+    rounded: 'sm',
   },
 } as ComponentMeta<typeof Skeleton>;
 
diff --git a/packages/vibrant-components/src/lib/Skeleton/SkeletonAvatar/SkeletonAvatar.tsx b/packages/vibrant-components/src/lib/Skeleton/SkeletonAvatar/SkeletonAvatar.tsx
index fface12c3..532404d6d 100644
--- a/packages/vibrant-components/src/lib/Skeleton/SkeletonAvatar/SkeletonAvatar.tsx
+++ b/packages/vibrant-components/src/lib/Skeleton/SkeletonAvatar/SkeletonAvatar.tsx
@@ -2,5 +2,5 @@ import { Box } from '@vibrant-ui/core';
 import { withSkeletonAvatarVariation } from './SkeletonAvatarProps';
 
 export const SkeletonAvatar = withSkeletonAvatarVariation(({ size }) => (
-  <Box backgroundColor="disable" borderRadiusLevel={5} width={size} height={size} />
+  <Box backgroundColor="disable" rounded="full" width={size} height={size} />
 ));
diff --git a/packages/vibrant-components/src/lib/Skeleton/SkeletonButton/SkeletonButton.tsx b/packages/vibrant-components/src/lib/Skeleton/SkeletonButton/SkeletonButton.tsx
index 2f4d0c260..d500bbd27 100644
--- a/packages/vibrant-components/src/lib/Skeleton/SkeletonButton/SkeletonButton.tsx
+++ b/packages/vibrant-components/src/lib/Skeleton/SkeletonButton/SkeletonButton.tsx
@@ -7,7 +7,7 @@ export const SkeletonButton = withSkeletonButtonVariation(({ typography, py, wid
   } = useCurrentTheme();
 
   return (
-    <Box backgroundColor="disable" borderRadiusLevel={1} py={py} width={width}>
+    <Box backgroundColor="disable" rounded="sm" py={py} width={width}>
       <Box height={transformResponsiveValue(typography, value => themeTypography[value].lineHeight)} />
     </Box>
   );
diff --git a/packages/vibrant-components/src/lib/Skeleton/SkeletonChip/SkeletonChip.tsx b/packages/vibrant-components/src/lib/Skeleton/SkeletonChip/SkeletonChip.tsx
index 4b70fc777..a81064db9 100644
--- a/packages/vibrant-components/src/lib/Skeleton/SkeletonChip/SkeletonChip.tsx
+++ b/packages/vibrant-components/src/lib/Skeleton/SkeletonChip/SkeletonChip.tsx
@@ -2,5 +2,5 @@ import { Box } from '@vibrant-ui/core';
 import { withSkeletonChipVariation } from './SkeletonChipProps';
 
 export const SkeletonChip = withSkeletonChipVariation(({ width = '100%', height }) => (
-  <Box backgroundColor="disable" borderRadiusLevel={5} width={width} height={height} />
+  <Box backgroundColor="disable" rounded="full" width={width} height={height} />
 ));
diff --git a/packages/vibrant-components/src/lib/Skeleton/SkeletonField/SkeletonField.tsx b/packages/vibrant-components/src/lib/Skeleton/SkeletonField/SkeletonField.tsx
index 72aab35b9..904f5287f 100644
--- a/packages/vibrant-components/src/lib/Skeleton/SkeletonField/SkeletonField.tsx
+++ b/packages/vibrant-components/src/lib/Skeleton/SkeletonField/SkeletonField.tsx
@@ -2,5 +2,5 @@ import { Box } from '@vibrant-ui/core';
 import { withSkeletonFieldVariation } from './SkeletonFieldProps';
 
 export const SkeletonField = withSkeletonFieldVariation(({ width = '100%', height }) => (
-  <Box backgroundColor="disable" borderRadiusLevel={1} width={width} height={height} />
+  <Box backgroundColor="disable" rounded="sm" width={width} height={height} />
 ));
diff --git a/packages/vibrant-components/src/lib/Skeleton/SkeletonImage/SkeletonImage.tsx b/packages/vibrant-components/src/lib/Skeleton/SkeletonImage/SkeletonImage.tsx
index 7deb13d2e..4c4324074 100644
--- a/packages/vibrant-components/src/lib/Skeleton/SkeletonImage/SkeletonImage.tsx
+++ b/packages/vibrant-components/src/lib/Skeleton/SkeletonImage/SkeletonImage.tsx
@@ -4,6 +4,6 @@ import { withSkeletonImageVariation } from './SkeletonImageProps';
 
 export const SkeletonImage = withSkeletonImageVariation(({ width = '100%', ratio }) => (
   <Ratio width={width} ratio={ratio}>
-    <Box backgroundColor="disable" borderRadiusLevel={1} width="100%" height="100%" />
+    <Box backgroundColor="disable" rounded="sm" width="100%" height="100%" />
   </Ratio>
 ));
diff --git a/packages/vibrant-components/src/lib/Skeleton/SkeletonProps.ts b/packages/vibrant-components/src/lib/Skeleton/SkeletonProps.ts
index 235a24e54..f9da9103a 100644
--- a/packages/vibrant-components/src/lib/Skeleton/SkeletonProps.ts
+++ b/packages/vibrant-components/src/lib/Skeleton/SkeletonProps.ts
@@ -1,7 +1,7 @@
 import type { BorderSystemProps, ReactElementChild, ResponsiveValue } from '@vibrant-ui/core';
 import { withVariation } from '@vibrant-ui/core';
 
-export type SkeletonProps = Pick<BorderSystemProps, 'borderRadiusLevel'> & {
+export type SkeletonProps = Pick<BorderSystemProps, 'borderRadiusLevel' | 'rounded'> & {
   width: ResponsiveValue<number | 'auto' | `${number}%`>;
   height: ResponsiveValue<number | 'auto' | `${number}%`>;
   maxWidth?: ResponsiveValue<number | `${number}%`>;
diff --git a/packages/vibrant-components/src/lib/Skeleton/SkeletonText/SkeletonText.tsx b/packages/vibrant-components/src/lib/Skeleton/SkeletonText/SkeletonText.tsx
index 9ab1a59c3..da29a021b 100644
--- a/packages/vibrant-components/src/lib/Skeleton/SkeletonText/SkeletonText.tsx
+++ b/packages/vibrant-components/src/lib/Skeleton/SkeletonText/SkeletonText.tsx
@@ -22,7 +22,7 @@ export const SkeletonText = withSkeletonTextVariation(({ lines = 1, typography,
           height={lineHeight}
           alignVertical="center"
         >
-          <Box backgroundColor="disable" height={fontSize} borderRadiusLevel={1} />
+          <Box backgroundColor="disable" height={fontSize} rounded="sm" />
         </VStack>
       ))}
     </VStack>
diff --git a/packages/vibrant-components/src/lib/Table/Table.tsx b/packages/vibrant-components/src/lib/Table/Table.tsx
index 168c7b3c3..4cb573ce1 100644
--- a/packages/vibrant-components/src/lib/Table/Table.tsx
+++ b/packages/vibrant-components/src/lib/Table/Table.tsx
@@ -102,7 +102,7 @@ export const Table = <Data extends Record<string, any>, RowKey extends keyof Dat
       borderStyle="solid"
       width="100%"
       borderBottomWidth={0}
-      borderRadiusLevel={1}
+      rounded="sm"
       data-testid={testId}
     >
       <Box
diff --git a/packages/vibrant-components/src/lib/TableSearch/TableSearchField/__snapshots__/TableSearchField.spec.tsx.snap b/packages/vibrant-components/src/lib/TableSearch/TableSearchField/__snapshots__/TableSearchField.spec.tsx.snap
index b5bb5628b..0500cfff2 100644
--- a/packages/vibrant-components/src/lib/TableSearch/TableSearchField/__snapshots__/TableSearchField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/TableSearch/TableSearchField/__snapshots__/TableSearchField.spec.tsx.snap
@@ -75,7 +75,7 @@ exports[`<TableSearchField /> when maxWidth is default match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   background-color: #ffffff;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-3 {
diff --git a/packages/vibrant-components/src/lib/TableSearch/TableSearchOption/__snapshots__/TableSearchOption.spec.tsx.snap b/packages/vibrant-components/src/lib/TableSearch/TableSearchOption/__snapshots__/TableSearchOption.spec.tsx.snap
index b14d96f47..a4d39cb85 100644
--- a/packages/vibrant-components/src/lib/TableSearch/TableSearchOption/__snapshots__/TableSearchOption.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/TableSearch/TableSearchOption/__snapshots__/TableSearchOption.spec.tsx.snap
@@ -90,7 +90,7 @@ exports[`<TableSearchOption /> when width is 1200px match snapshot 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #00000026;
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: #ffffff;
 }
 
@@ -326,7 +326,7 @@ exports[`<TableSearchOption /> when width is default match snapshot 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #00000026;
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: #ffffff;
 }
 
diff --git a/packages/vibrant-components/src/lib/TableSearch/__snapshots__/TableSearch.spec.tsx.snap b/packages/vibrant-components/src/lib/TableSearch/__snapshots__/TableSearch.spec.tsx.snap
index f58904a72..1d544a116 100644
--- a/packages/vibrant-components/src/lib/TableSearch/__snapshots__/TableSearch.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/TableSearch/__snapshots__/TableSearch.spec.tsx.snap
@@ -102,7 +102,7 @@ exports[`<TableSearch /> when component is rendering match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   background-color: #ffffff;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-4 {
@@ -428,7 +428,7 @@ exports[`<TableSearch /> when component is rendering match snapshot 1`] = `
   border-width: 1px;
   border-style: solid;
   border-color: #00000026;
-  border-radius: 2px;
+  border-radius: 4px;
   background-color: #ffffff;
 }
 
diff --git a/packages/vibrant-components/src/lib/TextField/__snapshots__/TextField.spec.tsx.snap b/packages/vibrant-components/src/lib/TextField/__snapshots__/TextField.spec.tsx.snap
index 640257285..d02a3b5fa 100644
--- a/packages/vibrant-components/src/lib/TextField/__snapshots__/TextField.spec.tsx.snap
+++ b/packages/vibrant-components/src/lib/TextField/__snapshots__/TextField.spec.tsx.snap
@@ -56,7 +56,7 @@ exports[`<TextField /> when size is lg match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   background-color: #ffffff;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-2 {
@@ -359,7 +359,7 @@ exports[`<TextField /> when size is md match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   background-color: #ffffff;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-2 {
@@ -662,7 +662,7 @@ exports[`<TextField /> when size is sm match snapshot 1`] = `
   border-style: solid;
   border-color: #00000026;
   background-color: #ffffff;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .emotion-2 {
diff --git a/packages/vibrant-components/src/lib/Toast/Toast.tsx b/packages/vibrant-components/src/lib/Toast/Toast.tsx
index 299c293e4..e65bad309 100644
--- a/packages/vibrant-components/src/lib/Toast/Toast.tsx
+++ b/packages/vibrant-components/src/lib/Toast/Toast.tsx
@@ -11,7 +11,7 @@ export const Toast = withToastVariation(
     <HStack ref={innerRef} {...restProps} px={20} width="100%" alignHorizontal="center" data-testid={testId}>
       <Paper
         elevationLevel={1}
-        borderRadiusLevel={1}
+        rounded="sm"
         backgroundColor="inverseSurface"
         maxWidth={816}
         pointerEvents="auto"
diff --git a/packages/vibrant-components/src/lib/VerificationCodeItem/VerificationCodeItem.tsx b/packages/vibrant-components/src/lib/VerificationCodeItem/VerificationCodeItem.tsx
index b82f3dee4..1a745397c 100644
--- a/packages/vibrant-components/src/lib/VerificationCodeItem/VerificationCodeItem.tsx
+++ b/packages/vibrant-components/src/lib/VerificationCodeItem/VerificationCodeItem.tsx
@@ -13,7 +13,7 @@ export const VerificationCodeItem = withVerificationCodeItemVariation(
       height={60}
       borderWidth={1}
       borderStyle="solid"
-      borderRadius={2}
+      rounded="sm"
       cursor="text"
       backgroundColor="surface2"
       {...restProps}
diff --git a/packages/vibrant-core/src/lib/props/border/border.native.ts b/packages/vibrant-core/src/lib/props/border/border.native.ts
index 1a08c322c..043a7fd1e 100644
--- a/packages/vibrant-core/src/lib/props/border/border.native.ts
+++ b/packages/vibrant-core/src/lib/props/border/border.native.ts
@@ -115,6 +115,36 @@ const borderBottomRightRadiusLevelProp = createSystemProp({
   scale: 'borderRadius',
 });
 
+const roundedProp = createSystemProp({
+  property: 'rounded',
+  styleProperty: 'borderRadius',
+  scale: 'borderRadius',
+});
+
+const roundedTopLeftProp = createSystemProp({
+  property: 'roundedTopLeft',
+  styleProperty: 'borderTopLeftRadius',
+  scale: 'borderRadius',
+});
+
+const roundedTopRightProp = createSystemProp({
+  property: 'roundedTopRight',
+  styleProperty: 'borderTopRightRadius',
+  scale: 'borderRadius',
+});
+
+const roundedBottomLeftProp = createSystemProp({
+  property: 'roundedBottomLeft',
+  styleProperty: 'borderBottomLeftRadius',
+  scale: 'borderRadius',
+});
+
+const roundedBottomRightProp = createSystemProp({
+  property: 'roundedBottomRight',
+  styleProperty: 'borderBottomRightRadius',
+  scale: 'borderRadius',
+});
+
 const borderCollapseProp = createSystemProp({
   property: 'borderCollapse',
   disabled: true,
@@ -163,6 +193,11 @@ export const borderSystemProps = [
   borderTopRightRadiusLevelProp,
   borderBottomLeftRadiusLevelProp,
   borderBottomRightRadiusLevelProp,
+  roundedProp,
+  roundedTopLeftProp,
+  roundedTopRightProp,
+  roundedBottomLeftProp,
+  roundedBottomRightProp,
   borderCollapseProp,
   outlineWidthProp,
   outlineStyleProp,
diff --git a/packages/vibrant-core/src/lib/props/border/border.ts b/packages/vibrant-core/src/lib/props/border/border.ts
index c3afe8572..e892220cf 100644
--- a/packages/vibrant-core/src/lib/props/border/border.ts
+++ b/packages/vibrant-core/src/lib/props/border/border.ts
@@ -115,6 +115,36 @@ const borderBottomRightRadiusLevelProp = createSystemProp({
   scale: 'borderRadius',
 });
 
+const roundedProp = createSystemProp({
+  property: 'rounded',
+  styleProperty: 'borderRadius',
+  scale: 'borderRadius',
+});
+
+const roundedTopLeftProp = createSystemProp({
+  property: 'roundedTopLeft',
+  styleProperty: 'borderTopLeftRadius',
+  scale: 'borderRadius',
+});
+
+const roundedTopRightProp = createSystemProp({
+  property: 'roundedTopRight',
+  styleProperty: 'borderTopRightRadius',
+  scale: 'borderRadius',
+});
+
+const roundedBottomLeftProp = createSystemProp({
+  property: 'roundedBottomLeft',
+  styleProperty: 'borderBottomLeftRadius',
+  scale: 'borderRadius',
+});
+
+const roundedBottomRightProp = createSystemProp({
+  property: 'roundedBottomRight',
+  styleProperty: 'borderBottomRightRadius',
+  scale: 'borderRadius',
+});
+
 const borderCollapseProp = createSystemProp({
   property: 'borderCollapse',
 });
@@ -162,6 +192,11 @@ export const borderSystemProps = [
   borderTopRightRadiusLevelProp,
   borderBottomLeftRadiusLevelProp,
   borderBottomRightRadiusLevelProp,
+  roundedProp,
+  roundedTopLeftProp,
+  roundedTopRightProp,
+  roundedBottomLeftProp,
+  roundedBottomRightProp,
   borderCollapseProp,
   outlineWidthProp,
   outlineStyleProp,
diff --git a/packages/vibrant-core/src/lib/props/border/type.ts b/packages/vibrant-core/src/lib/props/border/type.ts
index 62a802457..93fa72deb 100644
--- a/packages/vibrant-core/src/lib/props/border/type.ts
+++ b/packages/vibrant-core/src/lib/props/border/type.ts
@@ -1,3 +1,4 @@
+import type { Rounded } from 'packages/vibrant-theme/src/types/BorderRadius';
 import type { BorderRadiusLevel } from '@vibrant-ui/theme';
 import type { ResponsiveValue } from '../../../types';
 
@@ -29,6 +30,11 @@ export type BorderSystemProps = {
   borderTopRightRadiusLevel?: ResponsiveValue<BorderRadiusLevel>;
   borderBottomLeftRadiusLevel?: ResponsiveValue<BorderRadiusLevel>;
   borderBottomRightRadiusLevel?: ResponsiveValue<BorderRadiusLevel>;
+  rounded?: ResponsiveValue<Rounded>;
+  roundedTopLeft?: ResponsiveValue<Rounded>;
+  roundedTopRight?: ResponsiveValue<Rounded>;
+  roundedBottomLeft?: ResponsiveValue<Rounded>;
+  roundedBottomRight?: ResponsiveValue<Rounded>;
   borderCollapse?: ResponsiveValue<'collapse' | 'separate'>;
   outlineWidth?: ResponsiveValue<number>;
   outlineStyle?: ResponsiveValue<'none' | 'solid'>;
diff --git a/packages/vibrant-theme/src/index.ts b/packages/vibrant-theme/src/index.ts
index 634067cac..dc8cca5c0 100644
--- a/packages/vibrant-theme/src/index.ts
+++ b/packages/vibrant-theme/src/index.ts
@@ -14,6 +14,7 @@ export type {
   GradientKind,
   ThemeColors,
   BorderRadiusLevel,
+  Rounded,
   TypographyKind,
   TypographyWeight,
   OpacityToken,
diff --git a/packages/vibrant-theme/src/lib/theme/baseTheme.ts b/packages/vibrant-theme/src/lib/theme/baseTheme.ts
index 794ee8e7c..2b193fde2 100644
--- a/packages/vibrant-theme/src/lib/theme/baseTheme.ts
+++ b/packages/vibrant-theme/src/lib/theme/baseTheme.ts
@@ -133,6 +133,13 @@ export const baseTheme: Theme = {
     3: 16,
     4: 20,
     5: 10000,
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    xxl: 20,
+    full: 10000,
   },
   zIndex: {
     bottomBar: 1,
diff --git a/packages/vibrant-theme/src/types/BorderRadius.ts b/packages/vibrant-theme/src/types/BorderRadius.ts
index f8f544831..e52c53909 100644
--- a/packages/vibrant-theme/src/types/BorderRadius.ts
+++ b/packages/vibrant-theme/src/types/BorderRadius.ts
@@ -1,5 +1,7 @@
 export type BorderRadiusLevel = 0 | 1 | 2 | 3 | 4 | 5;
 
+export type Rounded = 'full' | 'lg' | 'md' | 'none' | 'sm' | 'xl' | 'xxl';
+
 export type ThemeBorderRadius = {
-  [key in BorderRadiusLevel]: number;
+  [key in BorderRadiusLevel | Rounded]: number;
 };
diff --git a/packages/vibrant-theme/src/types/index.ts b/packages/vibrant-theme/src/types/index.ts
index ca9c7a7f3..a4d97b57c 100644
--- a/packages/vibrant-theme/src/types/index.ts
+++ b/packages/vibrant-theme/src/types/index.ts
@@ -4,6 +4,6 @@ export { colorTokens, onColorTokens, baseColorTokens, BaseColorOnColorMap } from
 export type { ThemeMode } from './Mode';
 export type { Opacity, OpacityToken } from './Opacity';
 export type { LinearGradient, AnyGradient, Gradient, GradientKind } from './Gradient';
-export type { BorderRadiusLevel } from './BorderRadius';
+export type { BorderRadiusLevel, Rounded } from './BorderRadius';
 export type { TypographyKind, TypographyWeight } from './Typography';
 export type { Shadow, ElevationLevel } from './Elevation';
diff --git a/packages/vibrant-website/docs/components/vibrant-component/dropdown.mdx b/packages/vibrant-website/docs/components/vibrant-component/dropdown.mdx
index f57dcc28a..b65648998 100644
--- a/packages/vibrant-website/docs/components/vibrant-component/dropdown.mdx
+++ b/packages/vibrant-website/docs/components/vibrant-component/dropdown.mdx
@@ -154,7 +154,7 @@ const Uncontrolled = () => (
 드랍다운의 위치는 `position` 속성을 통해 `bottom`, `left` ,`right`, `top`, `bottom-end`, `bottom-start`, `left-end`, `left-start`, `right-end`, `right-start`, `top-end`, `top-start`로 설정할 수 있습니다.
 
 <Paper
-  borderRadiusLevel={1}
+  rounded="sm"
   backgroundColor="surface1"
   p={20}
 >
diff --git a/packages/vibrant-website/docs/components/vibrant-component/image-thumbnail.mdx b/packages/vibrant-website/docs/components/vibrant-component/image-thumbnail.mdx
index 9cd5f5a84..eb4ed80ff 100644
--- a/packages/vibrant-website/docs/components/vibrant-component/image-thumbnail.mdx
+++ b/packages/vibrant-website/docs/components/vibrant-component/image-thumbnail.mdx
@@ -25,7 +25,8 @@ import { Ratio } from '@vibrant-ui/components';
 | Prop             | Type                                   | Default  | Description                                           |
 | ---------------- | -------------------------------------- | -------- | ----------------------------------------------------- |
 | width            | `number` \| `string`                   | `"100%"` | 너비를 지정합니다.                                    |
-| borderRadius     | `0` \| `1` \| `2` \| `3` \| `4` \| `5` | `0`      | 테두리 굴곡을 설정합니다.                             |
+| rounded          | `none` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | `full`      | 테두리 굴곡을 설정합니다.                             |
+| borderRadiusLevel(deprecated)  | `0` \| `1` \| `2` \| `3` \| `4` \| `5` | `0`      | 테두리 굴곡을 설정합니다.                             |
 | src(\*)          | `string` \| -                          | -        | 이미지의 소스를 지정합니다.                           |
 | loading          | `eager` \| `lazy`                      | `lazy`   | 이미지의 로딩 방식을 지정합니다.                      |
 | dim(#오버레이)   | `boolean`                              | `true`   | 이미지 위에 적용될 오버레이 색상의 유무를 지정합니다. |
diff --git a/packages/vibrant-website/docs/components/vibrant-component/paper.mdx b/packages/vibrant-website/docs/components/vibrant-component/paper.mdx
index bae896299..5384726ac 100644
--- a/packages/vibrant-website/docs/components/vibrant-component/paper.mdx
+++ b/packages/vibrant-website/docs/components/vibrant-component/paper.mdx
@@ -11,7 +11,7 @@ title: Paper
   width={200}
   height={200}
   backgroundColor="primary"
-  borderRadiusLevel={1}
+  rounded="sm"
 />
 ```
 
@@ -24,7 +24,8 @@ import { Paper } from '@vibrant-ui/components';
 ## Properties
 
 [DisplaySystemProps](/docs/system-props/display), [SpacingSystemProps](/docs/system-props/spacing), [InteractionSystemProps](/docs/system-props/interaction), [PositionSystemProps](/docs/system-props/position),
-Pick< [FlexboxSystemProps](/docs/system-props/flexbox), 'flexBasis' | 'flexGrow' | 'flexShrink'>, Pick< [ElevationSystemProps](/docs/system-props/elevation), 'elevationLevel'>, [OverflowSystemProps](/docs/system-props/overflow), [SizingSystemProps](/docs/system-props/overflow), Pick< [BorderSystemProps](/docs/system-props/border), 'borderBottomLeftRadiusLevel' | 'borderBottomRightRadiusLevel' | 'borderTopLeftRadiusLevel' | 'borderTopRightRadiusLevel' | 'borderRadiusLevel'>,
+Pick< [FlexboxSystemProps](/docs/system-props/flexbox), 'flexBasis' | 'flexGrow' | 'flexShrink'>, Pick< [ElevationSystemProps](/docs/system-props/elevation), 'elevationLevel'>, [OverflowSystemProps](/docs/system-props/overflow), [SizingSystemProps](/docs/system-props/overflow), 
+Pick< [BorderSystemProps](/docs/system-props/border), 'borderBottomLeftRadiusLevel' | 'borderBottomRightRadiusLevel' | 'borderTopLeftRadiusLevel' | 'borderTopRightRadiusLevel' | 'borderRadiusLevel' | 'roundedBottomLeftProp' | 'roundedBottomRightProp' | 'roundedTopLeftProp' | 'roundedTopRightProp'>,
 Pick< [BackgroundSystemProps](/docs/system-props/background), 'backgroundColor' | 'gradient' >
 
 | Prop     | Type                | Default | Description               |
@@ -52,14 +53,14 @@ Pick< [BackgroundSystemProps](/docs/system-props/background), 'backgroundColor'
 
 ### Border Radius
 
-`borderBottomLeftRadiusLevel`, `borderBottomRightRadiusLevel`, `borderTopLeftRadiusLevel` , `borderTopRightRadiusLevel` 또는 `borderRadiusLevel` 속성을 통해 theme에 정의된 테두리 경계의 꼭짓점을 둥글기를 설정합니다.
+`roundedBottomLeft`, `roundedBottomRight`, `roundedTopLeft` , `roundedTopRight` 또는 `rounded` 속성을 통해 theme에 정의된 테두리 경계의 꼭짓점을 둥글기를 설정합니다.
 
 ```jsx live
 <Paper
-  borderTopLeftRadiusLevel={0}
-  borderTopRightRadiusLevel={2}
-  borderBottomLeftRadiusLevel={3}
-  borderBottomRightRadiusLevel={4}
+  roundedTopLeft="sm"
+  roundedTopRight="md"
+  roundedBottomLeft="xl"
+  roundedBottomRight="xxl"
   width={200}
   height={200}
   backgroundColor="informative"
diff --git a/packages/vibrant-website/docs/components/vibrant-component/radio.mdx b/packages/vibrant-website/docs/components/vibrant-component/radio.mdx
index 0389a713b..31e5c6ada 100644
--- a/packages/vibrant-website/docs/components/vibrant-component/radio.mdx
+++ b/packages/vibrant-website/docs/components/vibrant-component/radio.mdx
@@ -142,7 +142,7 @@ const RadioButton = ({
       disabled={isDisabled}
       backgroundColor={isChecked ? 'primary' : 'background'}
       p={10}
-      borderRadiusLevel={2}
+      rounded='lg'
     >
       <>
         <Box
diff --git a/packages/vibrant-website/docs/components/vibrant-component/skeleton.mdx b/packages/vibrant-website/docs/components/vibrant-component/skeleton.mdx
index 08e29392d..74c4ff693 100644
--- a/packages/vibrant-website/docs/components/vibrant-component/skeleton.mdx
+++ b/packages/vibrant-website/docs/components/vibrant-component/skeleton.mdx
@@ -7,13 +7,13 @@ title: Skeleton
 ```jsx live
 <HStack spacing={10} alignVertical="start">
   <Skeleton
-    borderRadiusLevel={1}
+    rounded="sm"
     width={100}
     height={100}
   />
 
   <Skeleton.Image
-    borderRadiusLevel={1}
+    rounded="sm"
     width={100}
     ratio="1:1"
   />
diff --git a/packages/vibrant-website/docs/components/vibrant-component/spinner.mdx b/packages/vibrant-website/docs/components/vibrant-component/spinner.mdx
index 9c34f5dcb..d4bced749 100644
--- a/packages/vibrant-website/docs/components/vibrant-component/spinner.mdx
+++ b/packages/vibrant-website/docs/components/vibrant-component/spinner.mdx
@@ -15,7 +15,7 @@ title: Spinner
 <VStack spacing={10}>
   <HStack spacing={10}>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="primary"
       p={10}
     >
@@ -24,7 +24,7 @@ title: Spinner
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="informative"
       p={10}
     >
@@ -33,7 +33,7 @@ title: Spinner
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="error"
       p={10}
     >
@@ -42,7 +42,7 @@ title: Spinner
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="success"
       p={10}
     >
@@ -51,7 +51,7 @@ title: Spinner
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="warning"
       p={10}
     >
@@ -62,7 +62,7 @@ title: Spinner
   </HStack>
   <HStack spacing={10}>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="primaryContainer"
       p={10}
     >
@@ -71,7 +71,7 @@ title: Spinner
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="informativeContainer"
       p={10}
     >
@@ -80,7 +80,7 @@ title: Spinner
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="errorContainer"
       p={10}
     >
@@ -89,7 +89,7 @@ title: Spinner
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="successContainer"
       p={10}
     >
@@ -98,7 +98,7 @@ title: Spinner
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="warningContainer"
       p={10}
     >
diff --git a/packages/vibrant-website/docs/components/vibrant-component/tooltip.mdx b/packages/vibrant-website/docs/components/vibrant-component/tooltip.mdx
index 40a7257b3..d5d6d6117 100644
--- a/packages/vibrant-website/docs/components/vibrant-component/tooltip.mdx
+++ b/packages/vibrant-website/docs/components/vibrant-component/tooltip.mdx
@@ -60,7 +60,7 @@ Tooltip 이 감싸는 children 이 곧 Tooltip 의 기준 요소가 됩니다.
 Tooltip 의 위치는 `position` 속성을 통해 `bottom`, `left` ,`right`, `top`, `bottom-end`, `bottom-start`, `left-end`, `left-start`, `right-end`, `right-start`, `top-end`, `top-start`로 설정할 수 있습니다.
 
 <Paper
-  borderRadiusLevel={1}
+  rounded="sm"
   backgroundColor="surface1"
   p={20}
 >
diff --git a/packages/vibrant-website/docs/system-props/border.mdx b/packages/vibrant-website/docs/system-props/border.mdx
index e956ab331..c7974f0de 100644
--- a/packages/vibrant-website/docs/system-props/border.mdx
+++ b/packages/vibrant-website/docs/system-props/border.mdx
@@ -11,6 +11,7 @@
 | borderStyle       | [BorderStyle](#borderstyle)   | 테두리 스타일    | ✅                |
 | borderRadius      | number                        | 모서리 곡률      | ✅                |
 | borderRadiusLevel | `BorderRadiusLevel`           | 모서리 곡률 단계 | ✅                |
+| rounded           |  `none` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | `full` | 모서리 곡률 단계 | ✅                |
 | outlineWidth      | number                        | 외곽선 두께      | ✅                |
 | outlineColor      | `ColorToken`                  | 외곽선 색상      | ✅                |
 | outlineStyle      | [OutlineStyle](#outlinestyle) | 외곽선 스타일    | ✅                |
diff --git a/packages/vibrant-website/i18n/en/docusaurus-plugin-content-docs/current/components/vibrant-component/spinner.mdx b/packages/vibrant-website/i18n/en/docusaurus-plugin-content-docs/current/components/vibrant-component/spinner.mdx
index 17b7814fe..2a4f7012c 100644
--- a/packages/vibrant-website/i18n/en/docusaurus-plugin-content-docs/current/components/vibrant-component/spinner.mdx
+++ b/packages/vibrant-website/i18n/en/docusaurus-plugin-content-docs/current/components/vibrant-component/spinner.mdx
@@ -15,7 +15,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
 <VStack spacing={10}>
   <HStack spacing={10}>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="primary"
       p={10}
     >
@@ -24,7 +24,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="informative"
       p={10}
     >
@@ -33,7 +33,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="error"
       p={10}
     >
@@ -42,7 +42,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="success"
       p={10}
     >
@@ -51,7 +51,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="warning"
       p={10}
     >
@@ -62,7 +62,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
   </HStack>
   <HStack spacing={10}>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="primaryContainer"
       p={10}
     >
@@ -71,7 +71,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="informativeContainer"
       p={10}
     >
@@ -80,7 +80,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="errorContainer"
       p={10}
     >
@@ -89,7 +89,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="successContainer"
       p={10}
     >
@@ -98,7 +98,7 @@ Background color decides the color of `<Spinner />` considering `onColor`.
       </OnColorContainer>
     </Paper>
     <Paper
-      borderRadiusLevel={3}
+      rounded='xl'
       backgroundColor="warningContainer"
       p={10}
     >
diff --git a/packages/vibrant-website/src/components/ColorTokenItem.tsx b/packages/vibrant-website/src/components/ColorTokenItem.tsx
index 0ace1032c..5f799e0e6 100644
--- a/packages/vibrant-website/src/components/ColorTokenItem.tsx
+++ b/packages/vibrant-website/src/components/ColorTokenItem.tsx
@@ -26,7 +26,7 @@ export const ColorTokenItem: FC<ColorItemProps> = ({ backgroundColor, textColor,
       minHeight={90}
       backgroundColor={backgroundColor as any}
       borderWidth={1}
-      borderRadiusLevel={1}
+      rounded="sm"
       borderStyle="solid"
       borderColor={borderColor}
       p={12}
diff --git a/packages/vibrant-website/src/components/CoreValueCard.tsx b/packages/vibrant-website/src/components/CoreValueCard.tsx
index fd68de16e..a1bb0dafd 100644
--- a/packages/vibrant-website/src/components/CoreValueCard.tsx
+++ b/packages/vibrant-website/src/components/CoreValueCard.tsx
@@ -9,7 +9,7 @@ type CoreValueCardProps = {
 
 export const CoreValueCard = ({ content, coreValueEmoji, title }: CoreValueCardProps) => (
   <VStack spacing={32} alignHorizontal="center" p={24}>
-    <Paper width={150} height={150} borderRadiusLevel={4} backgroundColor="informativeContainer">
+    <Paper width={150} height={150} rounded="xxl" backgroundColor="informativeContainer">
       <HStack height="100%" alignHorizontal="center" alignVertical="center">
         <Display level={3}>{coreValueEmoji}</Display>
       </HStack>