diff --git a/.pnp.cjs b/.pnp.cjs
index 615c819aa..689977530 100755
--- a/.pnp.cjs
+++ b/.pnp.cjs
@@ -1340,7 +1340,6 @@ const RAW_RUNTIME_STATE =
           ["@types/vanilla-extract__dynamic", null],\
           ["@vanilla-extract/css", "npm:1.17.1"],\
           ["@vanilla-extract/dynamic", "npm:2.1.2"],\
-          ["@vanilla-extract/recipes", "virtual:3d06fbb19d1fe3e56495101348ea0a04ee3f83383f44c49513a90168d8afa4fd0bb1beb21869c24e100c6d64fc80ac2453d3b6cf930e63e6f7b9fbd0b88593f2#npm:0.5.5"],\
           ["clsx", "npm:2.1.1"],\
           ["rainbow-sprinkles", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:1.0.0"],\
           ["react", "npm:19.1.0"],\
@@ -1372,7 +1371,6 @@ const RAW_RUNTIME_STATE =
           ["@types/react", "npm:19.1.2"],\
           ["@vanilla-extract/css", "npm:1.17.1"],\
           ["@vanilla-extract/dynamic", "npm:2.1.2"],\
-          ["@vanilla-extract/recipes", "virtual:3d06fbb19d1fe3e56495101348ea0a04ee3f83383f44c49513a90168d8afa4fd0bb1beb21869c24e100c6d64fc80ac2453d3b6cf930e63e6f7b9fbd0b88593f2#npm:0.5.5"],\
           ["clsx", "npm:2.1.1"],\
           ["rainbow-sprinkles", "virtual:90c3fa37a29dbddd012ae896ef9d136c46ca1d320faf1baf430439ab5aac7e1e7c8ef5281a72424df8d016a8c33c9d5ffe66ee23d2face19f27de3042508900f#npm:1.0.0"],\
           ["react", "npm:19.1.0"],\
diff --git a/ui-parts/checkbox/package.json b/ui-parts/checkbox/package.json
index 5d9a449cb..5aad609c7 100644
--- a/ui-parts/checkbox/package.json
+++ b/ui-parts/checkbox/package.json
@@ -13,11 +13,11 @@
     "postpack": "rm -rf dist"
   },
   "dependencies": {
+    "@atls-ui-parts/theme": "workspace:*",
     "clsx": "2.1.1"
   },
   "devDependencies": {
     "@atls-ui-parts/layout": "workspace:*",
-    "@atls-ui-parts/theme": "workspace:*",
     "@storybook/react": "8.6.12",
     "@types/react": "19.1.2",
     "@vanilla-extract/css": "1.17.1",
@@ -28,7 +28,6 @@
   },
   "peerDependencies": {
     "@vanilla-extract/css": "*",
-    "@vanilla-extract/dynamic": "*",
     "react": "*",
     "react-dom": "*"
   },
diff --git a/ui-parts/checkbox/src/box/styles/appearance.css.ts b/ui-parts/checkbox/src/box/styles/appearance.css.ts
index bb06d8478..b24315ad4 100644
--- a/ui-parts/checkbox/src/box/styles/appearance.css.ts
+++ b/ui-parts/checkbox/src/box/styles/appearance.css.ts
@@ -1,7 +1,21 @@
-import { styleVariants } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css'
 
-export const boxColorStyles = styleVariants({
-  blue: { border: '1px solid blue' },
-  green: { border: '1px solid green' },
-  red: { border: '1px solid red' },
+import { vars }  from '@atls-ui-parts/theme'
+
+const boxBlueAppearanceStyles = style({
+  border: vars.borders.normalBlue,
+})
+
+const boxGreenAppearanceStyles = style({
+  border: vars.borders.normalGreen,
 })
+
+const boxRedAppearanceStyles = style({
+  border: vars.borders.normalRed,
+})
+
+export const boxAppearanceStyles = {
+  blue: boxBlueAppearanceStyles,
+  green: boxGreenAppearanceStyles,
+  red: boxRedAppearanceStyles,
+}
diff --git a/ui-parts/checkbox/src/box/styles/shape.css.ts b/ui-parts/checkbox/src/box/styles/shape.css.ts
index a99d79eb2..ba116cfda 100644
--- a/ui-parts/checkbox/src/box/styles/shape.css.ts
+++ b/ui-parts/checkbox/src/box/styles/shape.css.ts
@@ -1,7 +1,27 @@
-import { styleVariants } from '@vanilla-extract/css'
+import { style } from '@vanilla-extract/css'
 
-export const boxShapeStyles = styleVariants({
-  small: { width: 16, height: 16, borderRadius: 4 },
-  medium: { width: 24, height: 24, borderRadius: 4 },
-  large: { width: 32, height: 32, borderRadius: 4 },
+import { vars }  from '@atls-ui-parts/theme'
+
+const boxSmallShapeStyles = style({
+  width: vars.space.g16,
+  height: vars.space.g16,
+  borderRadius: vars.radii.f4,
+})
+
+const boxMediumShapeStyles = style({
+  width: vars.space.g24,
+  height: vars.space.g24,
+  borderRadius: vars.radii.f4,
 })
+
+const boxLargeShapeStyles = style({
+  width: vars.space.g32,
+  height: vars.space.g32,
+  borderRadius: vars.radii.f4,
+})
+
+export const boxShapeStyles = {
+  small: boxSmallShapeStyles,
+  medium: boxMediumShapeStyles,
+  large: boxLargeShapeStyles,
+}
diff --git a/ui-parts/checkbox/src/check/check.css.ts b/ui-parts/checkbox/src/check/check.css.ts
index b59d016f5..9a125b31f 100644
--- a/ui-parts/checkbox/src/check/check.css.ts
+++ b/ui-parts/checkbox/src/check/check.css.ts
@@ -1,15 +1,37 @@
 import { style } from '@vanilla-extract/css'
 
+import { vars }  from '@atls-ui-parts/theme'
+
 export const checkBaseStyles = style({
-  width: 'calc(100% - 3px)',
-  height: 'calc(100% - 3px)',
   display: 'none',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: 'blue',
-  borderRadius: 4,
 })
 
 export const checkCheckedStyles = style({
   display: 'flex',
 })
+
+const checkBlueAppearanceStyles = style({
+  backgroundColor: vars.colors.blue,
+})
+
+const checkGreenAppearanceStyles = style({
+  backgroundColor: vars.colors.green,
+})
+
+const checkRedAppearanceStyles = style({
+  backgroundColor: vars.colors.red,
+})
+
+export const checkAppearanceStyles = {
+  blue: checkBlueAppearanceStyles,
+  green: checkGreenAppearanceStyles,
+  red: checkRedAppearanceStyles,
+}
+
+export const checkShapeStyles = style({
+  width: `calc(100% - ${vars.radii.f3})`,
+  height: `calc(100% - ${vars.radii.f3})`,
+  borderRadius: vars.radii.f4,
+})
diff --git a/ui-parts/checkbox/src/checkbox.component.tsx b/ui-parts/checkbox/src/checkbox.component.tsx
index 518e6819a..39d712998 100644
--- a/ui-parts/checkbox/src/checkbox.component.tsx
+++ b/ui-parts/checkbox/src/checkbox.component.tsx
@@ -9,16 +9,14 @@ import { useEffect }               from 'react'
 import { useState }                from 'react'
 
 import { boxBaseStyles }           from './box/index.js'
-import { boxShapeStyles }          from './box/index.js'
-import { boxColorStyles }          from './box/index.js'
 import { checkBaseStyles }         from './check/index.js'
 import { checkCheckedStyles }      from './check/index.js'
 import { containerBaseStyles }     from './container/index.js'
 import { containerPositionStyles } from './container/index.js'
 import { hiddenInputStyles }       from './hidden-input/index.js'
-import { labelAppearanceStyles }   from './label/index.js'
 import { labelPositionStyles }     from './label/index.js'
-import { labelShapeStyles }        from './label/index.js'
+import { checkboxAppearances }     from './styles/index.js'
+import { checkboxShapes }          from './styles/index.js'
 
 export const Checkbox = ({
   onCheck,
@@ -26,8 +24,8 @@ export const Checkbox = ({
   active,
   defaultActive = false,
   labelPosition = 'end',
-  size = 'medium',
-  color = 'blue',
+  appearance = checkboxAppearances.blue,
+  shape = checkboxShapes.medium,
   icon,
   checkedIcon = icon,
   className,
@@ -101,19 +99,27 @@ export const Checkbox = ({
       <div
         className={clsx(
           boxBaseStyles,
-          boxShapeStyles[size],
-          boxColorStyles[color],
+          shape.box,
+          appearance.box,
           classNames?.box
         )}
       >
-        <div className={clsx(checkBaseStyles, checked && checkCheckedStyles, classNames?.check)}>
+        <div
+          className={clsx(
+            checkBaseStyles,
+            shape.check,
+            appearance.check,
+            checked && checkCheckedStyles,
+            classNames?.check
+          )}
+        >
           {checkedIcon}
         </div>
       </div>
       <div
         className={clsx(
-          labelShapeStyles,
-          labelAppearanceStyles,
+          shape.label,
+          appearance.label,
           labelPositionStyles[labelPosition],
           classNames?.label
         )}
diff --git a/ui-parts/checkbox/src/checkbox.interfaces.ts b/ui-parts/checkbox/src/checkbox.interfaces.ts
index 81abff93a..b63eaeaad 100644
--- a/ui-parts/checkbox/src/checkbox.interfaces.ts
+++ b/ui-parts/checkbox/src/checkbox.interfaces.ts
@@ -10,15 +10,31 @@ export interface CheckboxClassNames {
   label?: string
 }
 
+export type CheckboxAppearanceName = 'blue' | 'green' | 'red'
+
+export interface CheckboxAppearance {
+  box: string
+  check: string
+  label: string
+}
+
+export type CheckboxShapeName = 'large' | 'medium' | 'small'
+
+export interface CheckboxShape {
+  box: string
+  check: string
+  label: string
+}
+
 export interface CheckboxProps extends HTMLAttributes<HTMLDivElement> {
   active?: boolean
+  appearance?: CheckboxAppearance
   checkedIcon?: ReactNode
   classNames?: CheckboxClassNames
   defaultActive?: boolean
   onCheck?: (checked: boolean) => void
   labelPosition?: 'bottom' | 'end' | 'start' | 'top'
-  size?: 'large' | 'medium' | 'small'
-  color?: 'blue' | 'green' | 'red'
+  shape?: CheckboxShape
   icon?: ReactNode
   ref?: Ref<HTMLDivElement>
 }
diff --git a/ui-parts/checkbox/src/index.ts b/ui-parts/checkbox/src/index.ts
index 7f33c4ab8..31d421219 100644
--- a/ui-parts/checkbox/src/index.ts
+++ b/ui-parts/checkbox/src/index.ts
@@ -5,3 +5,5 @@ export type * from './checkbox.interfaces.js'
 export * from './container/index.js'
 export * from './hidden-input/index.js'
 export * from './label/index.js'
+export { checkboxAppearances } from './styles/index.js'
+export { checkboxShapes } from './styles/index.js'
diff --git a/ui-parts/checkbox/src/styles/appearance.css.ts b/ui-parts/checkbox/src/styles/appearance.css.ts
new file mode 100644
index 000000000..5f48ebd83
--- /dev/null
+++ b/ui-parts/checkbox/src/styles/appearance.css.ts
@@ -0,0 +1,24 @@
+import type { CheckboxAppearance }     from '../checkbox.interfaces.js'
+import type { CheckboxAppearanceName } from '../checkbox.interfaces.js'
+
+import { boxAppearanceStyles }         from '../box/index.js'
+import { checkAppearanceStyles }       from '../check/index.js'
+import { labelAppearanceStyles }       from '../label/index.js'
+
+export const checkboxAppearances: Record<CheckboxAppearanceName, CheckboxAppearance> = {
+  blue: {
+    box: boxAppearanceStyles.blue,
+    check: checkAppearanceStyles.blue,
+    label: labelAppearanceStyles,
+  },
+  green: {
+    box: boxAppearanceStyles.green,
+    check: checkAppearanceStyles.green,
+    label: labelAppearanceStyles,
+  },
+  red: {
+    box: boxAppearanceStyles.red,
+    check: checkAppearanceStyles.red,
+    label: labelAppearanceStyles,
+  },
+}
diff --git a/ui-parts/checkbox/src/styles/index.ts b/ui-parts/checkbox/src/styles/index.ts
new file mode 100644
index 000000000..93e0eec5d
--- /dev/null
+++ b/ui-parts/checkbox/src/styles/index.ts
@@ -0,0 +1,2 @@
+export * from './appearance.css.js'
+export * from './shape.css.js'
diff --git a/ui-parts/checkbox/src/styles/shape.css.ts b/ui-parts/checkbox/src/styles/shape.css.ts
new file mode 100644
index 000000000..e687f06f9
--- /dev/null
+++ b/ui-parts/checkbox/src/styles/shape.css.ts
@@ -0,0 +1,24 @@
+import type { CheckboxShape }     from '../checkbox.interfaces.js'
+import type { CheckboxShapeName } from '../checkbox.interfaces.js'
+
+import { boxShapeStyles }         from '../box/index.js'
+import { checkShapeStyles }       from '../check/index.js'
+import { labelShapeStyles }       from '../label/index.js'
+
+export const checkboxShapes: Record<CheckboxShapeName, CheckboxShape> = {
+  large: {
+    box: boxShapeStyles.large,
+    check: checkShapeStyles,
+    label: labelShapeStyles,
+  },
+  medium: {
+    box: boxShapeStyles.medium,
+    check: checkShapeStyles,
+    label: labelShapeStyles,
+  },
+  small: {
+    box: boxShapeStyles.small,
+    check: checkShapeStyles,
+    label: labelShapeStyles,
+  },
+}
diff --git a/ui-parts/checkbox/stories/checkbox.stories.tsx b/ui-parts/checkbox/stories/checkbox.stories.tsx
index 87f3db3dd..01eba54e9 100644
--- a/ui-parts/checkbox/stories/checkbox.stories.tsx
+++ b/ui-parts/checkbox/stories/checkbox.stories.tsx
@@ -7,6 +7,8 @@ import { Column }             from '@atls-ui-parts/layout'
 import { Layout }             from '@atls-ui-parts/layout'
 
 import { Checkbox }           from '../src/checkbox.component.js'
+import { checkboxAppearances } from '../src/index.js'
+import { checkboxShapes }      from '../src/index.js'
 
 import { customBoxStyles }       from './styles.css.js'
 import { customCheckStyles }     from './styles.css.js'
@@ -29,17 +31,19 @@ const meta: Meta<CheckboxProps> = {
       description: 'Is the checkbox checked',
       control: { type: 'boolean' },
     },
-    color: {
-      name: 'Color',
+    appearance: {
+      name: 'Appearance',
       description: 'Color of the divider',
       control: { type: 'select' },
-      options: ['red', 'blue', 'green'],
+      options: Object.keys(checkboxAppearances),
+      mapping: checkboxAppearances,
     },
-    size: {
-      name: 'Size',
+    shape: {
+      name: 'Shape',
       description: 'Size of the divider',
       control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
+      options: Object.keys(checkboxShapes),
+      mapping: checkboxShapes,
     },
     labelPosition: {
       name: 'Label position',
@@ -60,8 +64,8 @@ export const Base: Story = {
     onCheck: () => undefined,
     active: false,
     labelPosition: 'start',
-    size: 'medium',
-    color: 'blue',
+    appearance: checkboxAppearances.blue,
+    shape: checkboxShapes.medium,
     children: 'Checkbox Label',
   },
 }
@@ -71,8 +75,8 @@ export const Custom: Story = {
   args: {
     defaultActive: true,
     labelPosition: 'end',
-    size: 'medium',
-    color: 'blue',
+    appearance: checkboxAppearances.blue,
+    shape: checkboxShapes.medium,
     checkedIcon: '✓',
     classNames: {
       box: customBoxStyles,
diff --git a/ui-parts/theme/src/theme/borders.ts b/ui-parts/theme/src/theme/borders.ts
index 4546e5fd0..b75f97a04 100644
--- a/ui-parts/theme/src/theme/borders.ts
+++ b/ui-parts/theme/src/theme/borders.ts
@@ -8,6 +8,8 @@ export const borders = {
   normalSilver: '1px solid rgba(224, 224, 224, 1)',
   normalCloudyWhite: '1px solid rgba(228, 228, 228, 1)',
   normalBlue: '1px solid rgba(65, 109, 223, 1)',
+  normalGreen: '1px solid rgba(52, 197, 29, 1)',
+  normalRed: '1px solid rgba(255, 47, 47, 1)',
   normalLightGray: '1px solid rgba(184, 184, 184, 1)',
   normalLightBlue: '1px solid rgba(232, 237, 251, 1)',
   normalSoftBlue: '1px solid rgba(18, 112, 252, 1)',
diff --git a/ui-parts/theme/src/theme/space.ts b/ui-parts/theme/src/theme/space.ts
index 3ce1eefda..1534ecdb4 100644
--- a/ui-parts/theme/src/theme/space.ts
+++ b/ui-parts/theme/src/theme/space.ts
@@ -7,7 +7,9 @@ export const space = {
   g10: '10px',
   g12: '12px',
   g14: '14px',
+  g16: '16px',
   g17: '17px',
   g22: '22px',
   g24: '24px',
+  g32: '32px',
 }
diff --git a/yarn.lock b/yarn.lock
index 28f232145..dd631d22c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -497,7 +497,6 @@ __metadata:
     storybook: "npm:8.6.12"
   peerDependencies:
     "@vanilla-extract/css": "*"
-    "@vanilla-extract/dynamic": "*"
     react: "*"
     react-dom: "*"
   languageName: unknown