diff --git a/apps/docs/src/app/_components/code/_index.scss b/apps/docs/src/app/_components/code/_index.scss
index ce1b2bda..21ffb6c9 100644
--- a/apps/docs/src/app/_components/code/_index.scss
+++ b/apps/docs/src/app/_components/code/_index.scss
@@ -51,6 +51,7 @@
   max-height: 80vh;
   max-width: 100%;
   margin: 0;
+  padding: 1rem 0;
 }
 
 .doc-code {
@@ -68,6 +69,10 @@
   color: hsl(0deg 0% 64%);
   font-size: 0.85rem;
   vertical-align: middle;
+  min-width: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .sh__line {
diff --git a/apps/docs/src/app/_components/playground/badge/badgeVariant.tsx b/apps/docs/src/app/_components/playground/badge/badgeVariant.tsx
index 7b9367ab..addc96ce 100644
--- a/apps/docs/src/app/_components/playground/badge/badgeVariant.tsx
+++ b/apps/docs/src/app/_components/playground/badge/badgeVariant.tsx
@@ -4,6 +4,11 @@ import { Check } from '@pillar-ui/icons'
 export const BadgeVariant = () => {
   return (
     <>
+      <Flex gap="3" items="center">
+        <Badge variant="shadow" type="dot" color="d" />
+        <Badge variant="shadow" type="numeric" number={15} max={15} color="d" />
+        <Badge variant="shadow" type="icon" icon={<Check />} color="d" />
+      </Flex>
       <Flex gap="3" items="center">
         <Badge type="dot" variant="solid" color="d" />
         <Badge type="numeric" variant="solid" number={15} max={15} color="d" />
@@ -16,9 +21,14 @@ export const BadgeVariant = () => {
         <Badge type="icon" variant="mixed" icon={<Check />} color="d" />
       </Flex>
       <Flex gap="3" items="center">
-        <Badge type="dot" color="d" />
-        <Badge type="numeric" number={15} max={15} color="d" />
-        <Badge type="icon" icon={<Check />} color="d" />
+        <Badge variant="soft" type="dot" color="d" />
+        <Badge variant="soft" type="numeric" number={15} max={15} color="d" />
+        <Badge variant="soft" type="icon" icon={<Check />} color="d" />
+      </Flex>
+      <Flex gap="3" items="center">
+        <Badge variant="outline" type="dot" color="d" />
+        <Badge variant="outline" type="numeric" number={15} max={15} color="d" />
+        <Badge variant="outline" type="icon" icon={<Check />} color="d" />
       </Flex>
     </>
   )
diff --git a/packages/pillar-core/src/core/badge/badge.type.ts b/packages/pillar-core/src/core/badge/badge.type.ts
index 4ae7aeb6..c16bb0b3 100644
--- a/packages/pillar-core/src/core/badge/badge.type.ts
+++ b/packages/pillar-core/src/core/badge/badge.type.ts
@@ -6,7 +6,7 @@ interface BadgeBaseProps {
   color?: Color
   corner?: Corner
   highContrast?: boolean
-  variant?: 'solid' | 'mixed'
+  variant?: 'solid' | 'mixed' | 'soft' | 'outline' | 'shadow'
 }
 
 interface BadgeNumericProps extends BadgeBaseProps {