diff --git a/packages/demo/src/components/demo/dialog.tsx b/packages/demo/src/components/demo/dialog.tsx
index 3c2260d1..56ef6dca 100644
--- a/packages/demo/src/components/demo/dialog.tsx
+++ b/packages/demo/src/components/demo/dialog.tsx
@@ -6,6 +6,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
+  Card,
+  CardContent,
+  ELEVATION,
 } from "@eqtylab/equality";
 import { useState } from "react";
 
@@ -113,3 +116,42 @@ export const DialogDemo = ({
     </div>
   );
 };
+
+export const DialogWithTableDemo = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <div>
+      <Button size="sm" onClick={() => setIsModalOpen(true)}>
+        Open Dialog
+      </Button>
+      <Dialog open={isModalOpen} onOpenChange={() => setIsModalOpen(false)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>Dialog Description</DialogDescription>
+          <Card elevation={ELEVATION.FLOATING}>
+            <CardContent>
+              <div className="space-y-2">
+                <h4 className="font-medium">Card</h4>
+                <p className="text-text-secondary text-sm">
+                  This card has an elevation of Floating.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+          <DialogFooter>
+            <Button
+              size="sm"
+              variant="tertiary"
+              onClick={() => setIsModalOpen(false)}
+            >
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
diff --git a/packages/demo/src/components/demo/display-field.tsx b/packages/demo/src/components/demo/display-field.tsx
index cb3c72a7..7bb97f8c 100644
--- a/packages/demo/src/components/demo/display-field.tsx
+++ b/packages/demo/src/components/demo/display-field.tsx
@@ -1,15 +1,24 @@
-import { DisplayField, IconButton } from "@eqtylab/equality";
+import {
+  Card,
+  CardContent,
+  DisplayField,
+  Heading,
+  IconButton,
+} from "@eqtylab/equality";
+import type { Elevation } from "@eqtylab/equality";
 
 export const DisplayFieldDemo = ({
   truncate = false,
   copy = true,
   prefix = "",
   variant = "neutral",
+  elevation,
 }: {
   truncate?: true | false | "middle";
   copy?: boolean;
   prefix?: string;
   variant?: "neutral" | "success" | "neutralCheck" | "failure";
+  elevation?: Elevation;
 }) => {
   return (
     <DisplayField
@@ -17,6 +26,7 @@ export const DisplayFieldDemo = ({
       copy={copy}
       prefix={prefix}
       variant={variant}
+      elevation={elevation}
     >
       zQ3shrGxRrYyWixJGrr45jJ1MEY76YQZ4KVbt9CYRsTWZ5MWV
     </DisplayField>
@@ -53,16 +63,18 @@ export function DisplayFieldWithActionsDemo({
   );
 }
 
-export const DisplayFieldWithSlotDemo = ({
+const DisplayFieldWithSlotExample = ({
   truncate = false,
   copy = true,
   prefix = "",
   variant = "neutral",
+  elevation,
 }: {
   truncate?: true | false | "middle";
   copy?: boolean;
   prefix?: string;
   variant?: "neutral" | "success" | "neutralCheck" | "failure";
+  elevation?: Elevation;
 }) => {
   return (
     <DisplayField
@@ -70,6 +82,7 @@ export const DisplayFieldWithSlotDemo = ({
       copy={copy}
       prefix={prefix}
       variant={variant}
+      elevation={elevation}
       slot={
         <div className="flex flex-col gap-2">
           <div>No additional data available</div>
@@ -81,3 +94,52 @@ export const DisplayFieldWithSlotDemo = ({
     </DisplayField>
   );
 };
+
+export const DisplayFieldWithSlotDemo = ({
+  truncate = false,
+  copy = true,
+  prefix = "",
+  variant = "neutral",
+  elevation,
+  withinCard = false,
+}: {
+  truncate?: true | false | "middle";
+  copy?: boolean;
+  prefix?: string;
+  variant?: "neutral" | "success" | "neutralCheck" | "failure";
+  elevation?: Elevation;
+  withinCard?: boolean;
+}) => {
+  if (withinCard) {
+    return (
+      <div className="space-y-6">
+        <Card elevation={elevation}>
+          <CardContent className="border-border border-b">
+            <Heading as="h5">
+              Wrapped in Card Component with {elevation} elevation
+            </Heading>
+          </CardContent>
+          <CardContent>
+            <DisplayFieldWithSlotExample
+              truncate={truncate}
+              copy={copy}
+              prefix={prefix}
+              variant={variant}
+              elevation={elevation}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <DisplayFieldWithSlotExample
+      truncate={truncate}
+      copy={copy}
+      prefix={prefix}
+      variant={variant}
+      elevation={elevation}
+    />
+  );
+};
diff --git a/packages/demo/src/components/demo/dropdown-menu.tsx b/packages/demo/src/components/demo/dropdown-menu.tsx
index 8cc5e5dc..959dc66c 100644
--- a/packages/demo/src/components/demo/dropdown-menu.tsx
+++ b/packages/demo/src/components/demo/dropdown-menu.tsx
@@ -17,9 +17,11 @@ import {
   DropdownMenuSubTrigger,
 } from "@eqtylab/equality";
 import { Settings, User, LogOut } from "lucide-react";
+import type { Elevation } from "@eqtylab/equality";
 
 export const DropdownMenuDemo = ({
   variant = "default",
+  elevation,
 }: {
   variant?:
     | "default"
@@ -29,6 +31,7 @@ export const DropdownMenuDemo = ({
     | "with-shortcuts"
     | "with-submenu"
     | "with-groups";
+  elevation?: Elevation;
 }) => {
   const [showStatusBar, setShowStatusBar] = useState(true);
   const [showActivityBar, setShowActivityBar] = useState(false);
@@ -43,7 +46,7 @@ export const DropdownMenuDemo = ({
             Open Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" elevation={elevation}>
           <DropdownMenuItem>Profile</DropdownMenuItem>
           <DropdownMenuItem>Settings</DropdownMenuItem>
           <DropdownMenuItem>Logout</DropdownMenuItem>
@@ -60,7 +63,7 @@ export const DropdownMenuDemo = ({
             Account Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" elevation={elevation}>
           <DropdownMenuLabel>My Account</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem>
@@ -175,7 +178,7 @@ export const DropdownMenuDemo = ({
             More Options
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" elevation={elevation}>
           <DropdownMenuItem>Back</DropdownMenuItem>
           <DropdownMenuItem>Forward</DropdownMenuItem>
           <DropdownMenuItem>Reload</DropdownMenuItem>
@@ -207,7 +210,7 @@ export const DropdownMenuDemo = ({
             File Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="start">
+        <DropdownMenuContent align="start" elevation={elevation}>
           <DropdownMenuGroup>
             <DropdownMenuLabel>File</DropdownMenuLabel>
             <DropdownMenuItem>
diff --git a/packages/demo/src/components/demo/select.tsx b/packages/demo/src/components/demo/select.tsx
index a363237a..d1af1244 100644
--- a/packages/demo/src/components/demo/select.tsx
+++ b/packages/demo/src/components/demo/select.tsx
@@ -6,11 +6,14 @@ import {
   SelectTrigger,
   SelectItem,
 } from "@eqtylab/equality";
+import type { Elevation } from "@eqtylab/equality";
 
 export function SelectDemo({
   variant = "default",
+  elevation,
 }: {
   variant?: "default" | "disabled" | "pre-selected";
+  elevation?: Elevation;
 }) {
   const [selectValue, setSelectValue] = useState<string>("");
 
@@ -20,7 +23,7 @@ export function SelectDemo({
         <SelectTrigger id="select-default">
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent elevation={elevation}>
           <SelectItem value="option1">Option 1</SelectItem>
           <SelectItem value="option2">Option 2</SelectItem>
           <SelectItem value="option3">Option 3</SelectItem>
@@ -35,7 +38,7 @@ export function SelectDemo({
         <SelectTrigger id="select-disabled">
           <SelectValue placeholder="Disabled select" />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent elevation={elevation}>
           <SelectItem value="option1">Option 1</SelectItem>
           <SelectItem value="option2">Option 2</SelectItem>
         </SelectContent>
@@ -49,7 +52,7 @@ export function SelectDemo({
         <SelectTrigger id="select-preselected">
           <SelectValue placeholder="Select an option" />
         </SelectTrigger>
-        <SelectContent>
+        <SelectContent elevation={elevation}>
           <SelectItem value="option1">Option 1</SelectItem>
           <SelectItem value="option2">Option 2</SelectItem>
           <SelectItem value="option3">Option 3</SelectItem>
diff --git a/packages/demo/src/components/demo/table.tsx b/packages/demo/src/components/demo/table.tsx
index ec70b64a..d942ac72 100644
--- a/packages/demo/src/components/demo/table.tsx
+++ b/packages/demo/src/components/demo/table.tsx
@@ -1,4 +1,5 @@
 import { Button, SortButton, Table, Badge } from "@eqtylab/equality";
+import type { Elevation } from "@eqtylab/equality";
 
 interface TableDemoProps {
   variant?:
@@ -6,11 +7,14 @@ interface TableDemoProps {
     | "clickable"
     | "with-actions"
     | "with-border"
-    | "with-sorter"
-    | "with-background";
+    | "with-sorter";
+  elevation: Elevation;
 }
 
-export const TableDemo = ({ variant = "unclickable" }: TableDemoProps) => {
+export const TableDemo = ({
+  variant = "unclickable",
+  elevation,
+}: TableDemoProps) => {
   const columns = [
     { key: "name", content: "Name" },
     { key: "email", content: "Email" },
@@ -82,11 +86,23 @@ export const TableDemo = ({ variant = "unclickable" }: TableDemoProps) => {
   ];
 
   if (variant === "unclickable") {
-    return <Table columns={columns} rows={demo_rows_unclickable} />;
+    return (
+      <Table
+        columns={columns}
+        rows={demo_rows_unclickable}
+        elevation={elevation}
+      />
+    );
   }
 
   if (variant === "clickable") {
-    return <Table columns={columns} rows={demo_rows_clickable} />;
+    return (
+      <Table
+        columns={columns}
+        rows={demo_rows_clickable}
+        elevation={elevation}
+      />
+    );
   }
 
   if (variant === "with-actions") {
@@ -152,12 +168,23 @@ export const TableDemo = ({ variant = "unclickable" }: TableDemoProps) => {
       },
     ];
     return (
-      <Table columns={columns_with_actions} rows={demo_rows_with_actions} />
+      <Table
+        columns={columns_with_actions}
+        rows={demo_rows_with_actions}
+        elevation={elevation}
+      />
     );
   }
 
   if (variant === "with-border") {
-    return <Table columns={columns} rows={demo_rows_unclickable} border />;
+    return (
+      <Table
+        columns={columns}
+        rows={demo_rows_unclickable}
+        border
+        elevation={elevation}
+      />
+    );
   }
 
   if (variant === "with-sorter") {
@@ -216,16 +243,12 @@ export const TableDemo = ({ variant = "unclickable" }: TableDemoProps) => {
       },
     ];
 
-    return <Table columns={columns_with_sorter} rows={demo_rows_unclickable} />;
-  }
-
-  if (variant === "with-background") {
-    return <Table columns={columns} rows={demo_rows_unclickable} background />;
-  }
-
-  if (variant === "with-border-and-background") {
     return (
-      <Table columns={columns} rows={demo_rows_unclickable} border background />
+      <Table
+        columns={columns_with_sorter}
+        rows={demo_rows_unclickable}
+        elevation={elevation}
+      />
     );
   }
 
diff --git a/packages/demo/src/components/header.astro b/packages/demo/src/components/header.astro
index 7d3f4fa3..09b76b10 100644
--- a/packages/demo/src/components/header.astro
+++ b/packages/demo/src/components/header.astro
@@ -5,7 +5,7 @@ import { ThemeToggle } from "@demo/components/ui/theme-toggle";
 ---
 
 <header
-  class="border-text-primary/10 bg-background fixed top-0 left-0 z-50 flex w-full items-center justify-between border-b px-4 py-3.5"
+  class="border-text-primary/10 bg-background-floating fixed top-0 left-0 z-50 flex w-full items-center justify-between border-b px-4 py-3.5"
 >
   <div class="flex items-center gap-3">
     <div class="lg:hidden">
@@ -30,7 +30,7 @@ import { ThemeToggle } from "@demo/components/ui/theme-toggle";
       </svg>
     </a>
     <div class="bg-text-primary/20 h-6 w-px"></div>
-    <span class="text-lilac-400 text-lg">Equality</span>
+    <span class="text-text-link text-lg">Equality</span>
   </div>
   <div class="flex items-center gap-3">
     <ThemeToggle client:load />
diff --git a/packages/demo/src/components/sidebar.astro b/packages/demo/src/components/sidebar.astro
index 4632df79..83145aae 100644
--- a/packages/demo/src/components/sidebar.astro
+++ b/packages/demo/src/components/sidebar.astro
@@ -20,6 +20,10 @@ const gettingStartedLinks = [
     text: "Color Tokens",
     href: "/getting-started/color-tokens",
   },
+  {
+    text: "Elevation",
+    href: "/getting-started/elevation",
+  },
 ];
 
 const componentsLinks = components.map((component: any) => ({
@@ -29,7 +33,7 @@ const componentsLinks = components.map((component: any) => ({
 ---
 
 <aside
-  class="bg-background lg:sticky lg:top-0 lg:z-40 lg:h-screen lg:w-xs lg:overflow-y-auto lg:border-r lg:pt-14"
+  class="bg-background-raised lg:sticky lg:top-0 lg:z-40 lg:h-screen lg:w-xs lg:overflow-y-auto lg:border-r lg:pt-14"
 >
   <nav class="space-y-10 px-4 py-10">
     <NavList label="Getting Started" list={gettingStartedLinks} />
diff --git a/packages/demo/src/content/components/card.mdx b/packages/demo/src/content/components/card.mdx
index de5acd9a..58550898 100644
--- a/packages/demo/src/content/components/card.mdx
+++ b/packages/demo/src/content/components/card.mdx
@@ -12,6 +12,7 @@ import {
   CardDescription,
   CardFooter,
   Button,
+  ELEVATION,
 } from "@eqtylab/equality";
 
 ## Content only (most used)
@@ -112,3 +113,85 @@ import {
   </CardContent>
 </Card>
 }
+
+## Elevations
+
+### Sunken
+
+{
+
+<Card elevation={ELEVATION.SUNKEN}>
+  <CardContent>
+    <div className="space-y-2">
+      <h4 className="font-medium">Card</h4>
+      <p className="text-text-secondary text-sm">
+        This card has an elevation of Sunken.
+      </p>
+    </div>
+  </CardContent>
+</Card>
+}
+
+### Base
+
+{
+
+<Card elevation={ELEVATION.BASE}>
+  <CardContent>
+    <div className="space-y-2">
+      <h4 className="font-medium">Card</h4>
+      <p className="text-text-secondary text-sm">
+        This card has an elevation of Base.
+      </p>
+    </div>
+  </CardContent>
+</Card>
+}
+
+### Raised (default)
+
+{
+
+<Card elevation={ELEVATION.RAISED}>
+  <CardContent>
+    <div className="space-y-2">
+      <h4 className="font-medium">Card</h4>
+      <p className="text-text-secondary text-sm">
+        This card has an elevation of Raised.
+      </p>
+    </div>
+  </CardContent>
+</Card>
+}
+
+### Overlay
+
+{
+
+<Card elevation={ELEVATION.OVERLAY}>
+  <CardContent>
+    <div className="space-y-2">
+      <h4 className="font-medium">Card</h4>
+      <p className="text-text-secondary text-sm">
+        This card has an elevation of Overlay.
+      </p>
+    </div>
+  </CardContent>
+</Card>
+}
+
+### Floating
+
+{
+
+<Card elevation={ELEVATION.FLOATING}>
+  <CardContent>
+    <div className="space-y-2">
+      <h4 className="font-medium">Card</h4>
+      <p className="text-text-secondary text-sm">
+        This card has an elevation of Floating.
+      </p>
+    </div>
+  </CardContent>
+</Card>
+}
diff --git a/packages/demo/src/content/components/display-field.mdx b/packages/demo/src/content/components/display-field.mdx
index d595811b..c200ba73 100644
--- a/packages/demo/src/content/components/display-field.mdx
+++ b/packages/demo/src/content/components/display-field.mdx
@@ -9,6 +9,7 @@ import {
   DisplayFieldWithActionsDemo,
   DisplayFieldWithSlotDemo,
 } from "@demo/components/demo/display-field";
+import { ELEVATION } from "@eqtylab/equality";
 
 ## Neutral
 
@@ -49,3 +50,50 @@ import {
 ## With Slot Content
 
 <DisplayFieldWithSlotDemo prefix="Key" client:only="react" />
+
+## Elevations
+
+### Sunken
+
+<DisplayFieldWithSlotDemo
+  prefix="Key"
+  client:only="react"
+  elevation={ELEVATION.SUNKEN}
+  withinCard
+/>
+
+### Base (default)
+
+<DisplayFieldWithSlotDemo
+  prefix="Key"
+  client:only="react"
+  elevation={ELEVATION.BASE}
+  withinCard
+/>
+
+### Raised
+
+<DisplayFieldWithSlotDemo
+  prefix="Key"
+  client:only="react"
+  elevation={ELEVATION.RAISED}
+  withinCard
+/>
+
+### Overlay
+
+<DisplayFieldWithSlotDemo
+  prefix="Key"
+  client:only="react"
+  elevation={ELEVATION.OVERLAY}
+  withinCard
+/>
+
+### Floating
+
+<DisplayFieldWithSlotDemo
+  prefix="Key"
+  client:only="react"
+  elevation={ELEVATION.FLOATING}
+  withinCard
+/>
diff --git a/packages/demo/src/content/components/dropdown-menu.mdx b/packages/demo/src/content/components/dropdown-menu.mdx
index d59eefdd..638dce9d 100644
--- a/packages/demo/src/content/components/dropdown-menu.mdx
+++ b/packages/demo/src/content/components/dropdown-menu.mdx
@@ -5,6 +5,7 @@ description: "Dropdown Menu with sizes and variants"
 ---
 
 import { DropdownMenuDemo } from "@demo/components/demo/dropdown-menu";
+import { ELEVATION } from "@eqtylab/equality";
 
 ## Variants
 
@@ -35,3 +36,45 @@ import { DropdownMenuDemo } from "@demo/components/demo/dropdown-menu";
 ### With Groups
 
 <DropdownMenuDemo client:only="react" variant="with-groups" />
+
+## Elevations
+
+### Sunken
+
+<DropdownMenuDemo
+  client:only="react"
+  variant="with-submenu"
+  elevation={ELEVATION.SUNKEN}
+/>
+
+### Base (default)
+
+<DropdownMenuDemo
+  client:only="react"
+  variant="with-submenu"
+  elevation={ELEVATION.BASE}
+/>
+
+### Raised
+
+<DropdownMenuDemo
+  client:only="react"
+  variant="with-submenu"
+  elevation={ELEVATION.RAISED}
+/>
+
+### Overlay
+
+<DropdownMenuDemo
+  client:only="react"
+  variant="with-submenu"
+  elevation={ELEVATION.OVERLAY}
+/>
+
+### Floating
+
+<DropdownMenuDemo
+  client:only="react"
+  variant="with-submenu"
+  elevation={ELEVATION.FLOATING}
+/>
diff --git a/packages/demo/src/content/components/icon.mdx b/packages/demo/src/content/components/icon.mdx
index e51eec27..ac2567d9 100644
--- a/packages/demo/src/content/components/icon.mdx
+++ b/packages/demo/src/content/components/icon.mdx
@@ -7,6 +7,7 @@ description: "Icon with sizes and variants"
 import React from "react";
 import { Icon } from "@eqtylab/equality";
 import { IconDemo } from "@demo/components/demo/icon";
+import { ELEVATION } from "@eqtylab/equality";
 
 ## Sizes
 
@@ -55,3 +56,50 @@ import { IconDemo } from "@demo/components/demo/icon";
 ### Custom Icons
 
 <IconDemo client:only="react" />
+
+## Elevations
+
+### Sunken
+
+<Icon
+  icon="Shield"
+  client:only="react"
+  background="square"
+  elevation={ELEVATION.SUNKEN}
+/>
+
+### Base
+
+<Icon
+  icon="Shield"
+  client:only="react"
+  background="square"
+  elevation={ELEVATION.BASE}
+/>
+
+### Raised (default)
+
+<Icon
+  icon="Shield"
+  client:only="react"
+  background="square"
+  elevation={ELEVATION.RAISED}
+/>
+
+### Overlay
+
+<Icon
+  icon="Shield"
+  client:only="react"
+  background="square"
+  elevation={ELEVATION.OVERLAY}
+/>
+
+### Floating
+
+<Icon
+  icon="Shield"
+  client:only="react"
+  background="square"
+  elevation={ELEVATION.FLOATING}
+/>
diff --git a/packages/demo/src/content/components/info-card.mdx b/packages/demo/src/content/components/info-card.mdx
index bb6f8a97..fb4f87c8 100644
--- a/packages/demo/src/content/components/info-card.mdx
+++ b/packages/demo/src/content/components/info-card.mdx
@@ -5,7 +5,55 @@ description: "InfoCard with sizes and variants"
 ---
 
 import { InfoCard } from "@eqtylab/equality";
+import { ELEVATION } from "@eqtylab/equality";
 
 ## Default
 
 <InfoCard label="Policy Type" description="Custom" icon="Shield" />
+
+## Elevations
+
+### Sunken
+
+<InfoCard
+  label="Policy Type"
+  description="Custom"
+  icon="Shield"
+  elevation={ELEVATION.SUNKEN}
+/>
+
+### Base
+
+<InfoCard
+  label="Policy Type"
+  description="Custom"
+  icon="Shield"
+  elevation={ELEVATION.BASE}
+/>
+
+### Raised (default)
+
+<InfoCard
+  label="Policy Type"
+  description="Custom"
+  icon="Shield"
+  elevation={ELEVATION.RAISED}
+/>
+
+### Overlay
+
+<InfoCard
+  label="Policy Type"
+  description="Custom"
+  icon="Shield"
+  elevation={ELEVATION.OVERLAY}
+/>
+
+### Floating
+
+<InfoCard
+  label="Policy Type"
+  description="Custom"
+  icon="Shield"
+  elevation={ELEVATION.FLOATING}
+/>
diff --git a/packages/demo/src/content/components/select.mdx b/packages/demo/src/content/components/select.mdx
index 5de1fb78..e6cb4c06 100644
--- a/packages/demo/src/content/components/select.mdx
+++ b/packages/demo/src/content/components/select.mdx
@@ -5,6 +5,7 @@ description: "Select with sizes and variants"
 ---
 
 import { SelectDemo } from "@demo/components/demo/select";
+import { ELEVATION } from "@eqtylab/equality";
 
 ## Variants
 
@@ -19,3 +20,25 @@ import { SelectDemo } from "@demo/components/demo/select";
 ### Pre-selected Select
 
 <SelectDemo client:only="react" variant="pre-selected" />
+
+## Elevations
+
+### Sunken
+
+<SelectDemo client:only="react" elevation={ELEVATION.SUNKEN} />
+
+### Base (default)
+
+<SelectDemo client:only="react" elevation={ELEVATION.BASE} />
+
+### Raised
+
+<SelectDemo client:only="react" elevation={ELEVATION.RAISED} />
+
+### Overlay
+
+<SelectDemo client:only="react" elevation={ELEVATION.OVERLAY} />
+
+### Floating
+
+<SelectDemo client:only="react" elevation={ELEVATION.FLOATING} />
diff --git a/packages/demo/src/content/components/table.mdx b/packages/demo/src/content/components/table.mdx
index 626a9d09..e6a7d035 100644
--- a/packages/demo/src/content/components/table.mdx
+++ b/packages/demo/src/content/components/table.mdx
@@ -4,18 +4,8 @@ heading: "Table"
 description: "Table with sizes and variants"
 ---
 
-import {
-  TableContainer,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Card,
-  CardContent,
-  Button,
-} from "@eqtylab/equality";
 import { TableDemo } from "@demo/components/demo/table";
+import { ELEVATION } from "@eqtylab/equality";
 
 ## Content Options
 
@@ -41,10 +31,66 @@ import { TableDemo } from "@demo/components/demo/table";
 
 <TableDemo client:only="react" variant="with-border" />
 
-### With Background
+## Elevations
 
-<TableDemo client:only="react" variant="with-background" />
+### Sunken
 
-### With Background and Border
+<TableDemo client:only="react" elevation={ELEVATION.SUNKEN} />
 
-<TableDemo client:only="react" variant="with-border-and-background" />
+### Base (default)
+
+<TableDemo client:only="react" elevation={ELEVATION.BASE} />
+
+### Raised
+
+<TableDemo client:only="react" elevation={ELEVATION.RAISED} />
+
+### Overlay
+
+<TableDemo client:only="react" elevation={ELEVATION.OVERLAY} />
+
+### Floating
+
+<TableDemo client:only="react" elevation={ELEVATION.FLOATING} />
+
+## Elevations With Border
+
+### Sunken
+
+<TableDemo
+  client:only="react"
+  variant="with-border"
+  elevation={ELEVATION.SUNKEN}
+/>
+
+### Base (default)
+
+<TableDemo
+  client:only="react"
+  variant="with-border"
+  elevation={ELEVATION.BASE}
+/>
+
+### Raised
+
+<TableDemo
+  client:only="react"
+  variant="with-border"
+  elevation={ELEVATION.RAISED}
+/>
+
+### Overlay
+
+<TableDemo
+  client:only="react"
+  variant="with-border"
+  elevation={ELEVATION.OVERLAY}
+/>
+
+### Floating
+
+<TableDemo
+  client:only="react"
+  variant="with-border"
+  elevation={ELEVATION.FLOATING}
+/>
diff --git a/packages/demo/src/pages/getting-started/elevation.mdx b/packages/demo/src/pages/getting-started/elevation.mdx
new file mode 100644
index 00000000..f207558d
--- /dev/null
+++ b/packages/demo/src/pages/getting-started/elevation.mdx
@@ -0,0 +1,114 @@
+---
+layout: "@demo/layouts/mdx-layout.astro"
+heading: "Elevation"
+---
+
+import { Icon, Card, CardContent, DisplayField } from "@eqtylab/equality";
+import { TooltipDemo } from "@demo/components/demo/tooltip";
+import { DialogWithTableDemo } from "@demo/components/demo/dialog";
+import { ELEVATION } from "@eqtylab/equality";
+
+## Overview
+
+Elevation properties and tokens define how components are layered ensuring that contrast remains consistent regardless of background color. Elevation is used both to differentiate backgrounds, and to differentiate components from the background they are currently on.
+
+Generally, when applying elevation tokens or properties, values should only ever be one level away from the background a component is placed onto.
+
+## Elevation Values
+
+### Sunken
+
+Use when a section should recede into the background, inset from the surface it is on. Good for highlighting areas that should provide additional contrast to content in a `base` or `raised` container.
+
+<Card elevation={ELEVATION.SUNKEN}>
+  <CardContent>
+    <div className="space-y-2">
+      <h4 className="font-medium">Sunken Background</h4>
+      <p className="text-text-secondary text-sm">
+        This card has an elevation of Sunken.
+      </p>
+    </div>
+  </CardContent>
+</Card>
+
+### Base
+
+A neutral elevation that forms the baseline of the interface. Most components will use this level in standard layouts.
+
+<Card elevation={ELEVATION.BASE}>
+  <CardContent>
+    <div className="space-y-2">
+      <h4 className="font-medium">Base Background</h4>
+      <p className="text-text-secondary text-sm">
+        This card has an elevation of Base. In this case, it is equal with the
+        background colour, but generally cards should be set to raised.
+      </p>
+    </div>
+  </CardContent>
+</Card>
+
+### Raised
+
+Used to lift content or sections out of the background.
+
+<Card elevation={ELEVATION.RAISED}>
+  <CardContent>
+    <div className="space-y-2">
+      <h4 className="font-medium">Raised Background</h4>
+      <p className="text-text-secondary text-sm">
+        This card has an elevation of Raised.
+      </p>
+    </div>
+  </CardContent>
+</Card>
+
+### Overlay
+
+Use for UI that overlays the page and requires clear separation from the underlying content.
+
+<TooltipDemo client:only="react" />
+
+### Floating
+
+An elevated surface reserved for UI that must remain visually dominant, even over modals or dropdowns.
+
+<DialogWithTableDemo client:only="react" />
+
+## Elevation component prop
+
+Some components have an `elevation` prop that can be used to set the elevation of the component. By default, they will be set to the one that makes most sense in a standard page flow.
+
+To set a new elevation, use the `ELEVATION` constant:
+
+```tsx
+import { ELEVATION } from "@eqtylab/equality";
+
+<Component elevation={ELEVATION.BASE} />;
+```
+
+The following components have an `elevation` prop:
+
+| Component       | Default Elevation | Notes                                      |
+| --------------- | ----------------- | ------------------------------------------ |
+| Card            | Raised            |                                            |
+| DisplayField    | Base              |                                            |
+| Dropdown Menu   | Overlay           | in `DropdownContent` component             |
+| Filter Dropdown | Overlay           | for dropdown with `dropdownElevation` prop |
+| Icon            | Sunken            |                                            |
+| Info Card       | Raised            |                                            |
+| Pagination      | Overlay           | for dropdown with `dropdownElevation` prop |
+| Radio Dropdown  | Overlay           | for dropdown with `dropdownElevation` prop |
+| Select          | Overlay           | in `SelectContent` component               |
+| Sort Selector   | Overlay           | for dropdown with `dropdownElevation` prop |
+| Table           | Base              |                                            |
+
+### Components with a set fixed elevation
+
+| Component    | Elevation |
+| ------------ | --------- |
+| Alert Dialog | Overlay   |
+| Dialog       | Overlay   |
+| Drawer       | Overlay   |
+| Popover      | Overlay   |
+| Sheet        | Overlay   |
+| Tooltip      | Overlay   |
diff --git a/packages/tokens/equality-tokens.json b/packages/tokens/equality-tokens.json
index 08c80616..ec1ff532 100644
--- a/packages/tokens/equality-tokens.json
+++ b/packages/tokens/equality-tokens.json
@@ -2,6 +2,54 @@
   "Dark": {
     "color": {
       "background": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.06018, 0.06019, 0.06787],
+          "hex": "#0F0F11"
+        }
+      },
+      "background-base": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.06018, 0.06019, 0.06787],
+          "hex": "#0F0F11"
+        }
+      },
+      "background-bottom": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [1.094e-5, 5.131e-6, 6.469e-5],
+          "hex": "#000000"
+        }
+      },
+      "background-floating": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.1399, 0.14, 0.1485],
+          "hex": "#242426"
+        }
+      },
+      "background-overlay": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.1121, 0.1122, 0.1204],
+          "hex": "#1D1D1F"
+        }
+      },
+      "background-raised": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.08523, 0.08526, 0.09324],
+          "hex": "#161618"
+        }
+      },
+      "background-sunken": {
         "$type": "color",
         "$value": {
           "colorSpace": "display-p3",
@@ -9,6 +57,14 @@
           "hex": "#09090B"
         }
       },
+      "background-top": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.1399, 0.14, 0.1485],
+          "hex": "#242426"
+        }
+      },
       "badge": {
         "background": {
           "accepted": {
@@ -263,6 +319,62 @@
           "hex": "#2E2E2E"
         }
       },
+      "border-base": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.1792, 0.1792, 0.1792],
+          "hex": "#2E2E2E"
+        }
+      },
+      "border-bottom": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.1589, 0.159, 0.1677],
+          "hex": "#29292B"
+        }
+      },
+      "border-floating": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.3328, 0.3328, 0.3426],
+          "hex": "#555557"
+        }
+      },
+      "border-overlay": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.2796, 0.2796, 0.2891],
+          "hex": "#47474A"
+        }
+      },
+      "border-raised": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.228, 0.2281, 0.2372],
+          "hex": "#3A3A3C"
+        }
+      },
+      "border-sunken": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.1792, 0.1792, 0.1792],
+          "hex": "#2E2E2E"
+        }
+      },
+      "border-top": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.3328, 0.3328, 0.3426],
+          "hex": "#555557"
+        }
+      },
       "button": {
         "danger": {
           "border": {
@@ -815,8 +927,64 @@
         "$type": "color",
         "$value": {
           "colorSpace": "display-p3",
-          "components": [0.9738, 0.9799, 0.9872],
-          "hex": "#F8FAFC"
+          "components": [0.8264, 0.8324, 0.8394],
+          "hex": "#D3D4D6"
+        }
+      },
+      "background-base": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.8264, 0.8324, 0.8394],
+          "hex": "#D3D4D6"
+        }
+      },
+      "background-bottom": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.6765, 0.6823, 0.689],
+          "hex": "#ADAEB0"
+        }
+      },
+      "background-floating": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.9424, 0.9485, 0.9557],
+          "hex": "#F0F2F4"
+        }
+      },
+      "background-overlay": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.9034, 0.9095, 0.9166],
+          "hex": "#E6E8EA"
+        }
+      },
+      "background-raised": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.8648, 0.8708, 0.8779],
+          "hex": "#DDDEE0"
+        }
+      },
+      "background-sunken": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.7758, 0.7817, 0.7887],
+          "hex": "#C6C7C9"
+        }
+      },
+      "background-top": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.9817, 0.9878, 0.9951],
+          "hex": "#FAFCFE"
         }
       },
       "badge": {
@@ -1151,8 +1319,64 @@
         "$type": "color",
         "$value": {
           "colorSpace": "display-p3",
-          "components": [0.8698, 0.8698, 0.8698],
-          "hex": "#DEDEDE"
+          "components": [0.7432, 0.7432, 0.7432],
+          "hex": "#BEBEBE"
+        }
+      },
+      "border-base": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.7432, 0.7432, 0.7432],
+          "hex": "#BEBEBE"
+        }
+      },
+      "border-bottom": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.6158, 0.6214, 0.6281],
+          "hex": "#9D9EA0"
+        }
+      },
+      "border-floating": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.8011, 0.807, 0.814],
+          "hex": "#CCCED0"
+        }
+      },
+      "border-overlay": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.8011, 0.807, 0.814],
+          "hex": "#CCCED0"
+        }
+      },
+      "border-raised": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.7383, 0.7441, 0.751],
+          "hex": "#BCBEC0"
+        }
+      },
+      "border-sunken": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.7432, 0.7432, 0.7432],
+          "hex": "#BEBEBE"
+        }
+      },
+      "border-top": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.8011, 0.807, 0.814],
+          "hex": "#CCCED0"
         }
       },
       "brand": {
diff --git a/packages/tokens/equality-tokens.pinwheel b/packages/tokens/equality-tokens.pinwheel
index 744d83e8..72f580d6 100644
--- a/packages/tokens/equality-tokens.pinwheel
+++ b/packages/tokens/equality-tokens.pinwheel
@@ -1198,10 +1198,10 @@
           <color>
             <variants>
               <variant>
-                <rgba>0.97377 0.97993 0.98718 1</rgba>
+                <rgba>0.82643 0.8324 0.83943 1</rgba>
               </variant>
               <variant type="dark">
-                <rgba>0.035468 0.03547 0.042676 1</rgba>
+                <rgba>0.060177 0.060194 0.067867 1</rgba>
               </variant>
             </variants>
           </color>
@@ -1224,20 +1224,247 @@
           <typeDark>3</typeDark>
           <appearance>lightanddark</appearance>
           <referencedItemId>24FB2A07-ED91-45F9-B8E8-356DACAC4731</referencedItemId>
-          <subIndex>1</subIndex>
+          <subIndex>2</subIndex>
           <referencedItemIdDark>24FB2A07-ED91-45F9-B8E8-356DACAC4731</referencedItemIdDark>
           <subIndexDark>7</subIndexDark>
           <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
         </alias>
+        <colorItem>
+          <id>C02F313B-235E-4484-AE31-E375D3A96229</id>
+          <name>Background Bottom</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.67651 0.68226 0.68903 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>1.094e-05 5.131e-06 6.4691e-05 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <colorItem>
+          <id>E81B8262-88C5-4E78-88D4-5AAA2C106947</id>
+          <name>Background Sunken</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.77584 0.78174 0.78869 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.035468 0.03547 0.042676 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <alias>
+          <name>Background Base</name>
+          <type>1</type>
+          <typeDark>1</typeDark>
+          <appearance>lightanddark</appearance>
+          <referencedItemId>8DD0C915-EC77-43DD-A7AC-CFE330D2284D</referencedItemId>
+          <referencedItemIdDark>8DD0C915-EC77-43DD-A7AC-CFE330D2284D</referencedItemIdDark>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </alias>
+        <colorItem>
+          <id>4CCB3E1D-AEA4-44AA-B82B-5C5A4BEF7D27</id>
+          <name>Background Raised</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.86476 0.87078 0.87787 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.085234 0.085263 0.093244 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <colorItem>
+          <id>11E9B8A6-2EE8-4732-A9B8-7FE42D1F0346</id>
+          <name>Background Overlay</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.90341 0.90948 0.91663 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.11214 0.11218 0.12044 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <colorItem>
+          <id>4E15FED3-BFA6-47D4-910B-D285FCDB57F1</id>
+          <name>Background Floating</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.94238 0.9485 0.9557 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.13994 0.13998 0.14851 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <colorItem>
+          <id>D2D914F9-2851-4DF5-B8E3-71FF9CF3EDA9</id>
+          <name>Background Top</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.98165 0.98782 0.99508 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.13994 0.13998 0.14851 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <colorItem>
+          <id>FCCC8194-9D90-40C3-9527-29073187A68D</id>
+          <name>Border Bottom</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.61575 0.6214 0.62806 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.15893 0.15898 0.16767 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <alias>
+          <name>Border Sunken</name>
+          <type>3</type>
+          <typeDark>3</typeDark>
+          <appearance>lightanddark</appearance>
+          <referencedItemId>24FB2A07-ED91-45F9-B8E8-356DACAC4731</referencedItemId>
+          <subIndex>2</subIndex>
+          <referencedItemIdDark>24FB2A07-ED91-45F9-B8E8-356DACAC4731</referencedItemIdDark>
+          <subIndexDark>7</subIndexDark>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </alias>
+        <alias>
+          <name>Border Base</name>
+          <type>3</type>
+          <typeDark>3</typeDark>
+          <appearance>lightanddark</appearance>
+          <referencedItemId>24FB2A07-ED91-45F9-B8E8-356DACAC4731</referencedItemId>
+          <subIndex>2</subIndex>
+          <referencedItemIdDark>24FB2A07-ED91-45F9-B8E8-356DACAC4731</referencedItemIdDark>
+          <subIndexDark>7</subIndexDark>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </alias>
+        <colorItem>
+          <id>AFE8A16E-7D82-46B7-994D-86E56F786FAA</id>
+          <name>Border Raised</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.73829 0.74414 0.75102 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.228 0.22807 0.23725 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <colorItem>
+          <id>8013131C-EDCE-4EEB-B9CE-089BDB54D58A</id>
+          <name>Border Overlay</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.80106 0.80699 0.81398 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.27956 0.27963 0.28913 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <colorItem>
+          <id>55AD9E0C-C95D-4474-BF8F-8A5007570498</id>
+          <name>Border Floating</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.80106 0.80699 0.81398 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.33276 0.33284 0.34262 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
+        <colorItem>
+          <id>C1513DB9-AC65-4188-A286-3678335AC5E6</id>
+          <name>Border Top</name>
+          <profile>DisplayP3</profile>
+          <format>7</format>
+          <appearance>lightanddark</appearance>
+          <color>
+            <variants>
+              <variant>
+                <rgba>0.80106 0.80699 0.81398 1</rgba>
+              </variant>
+              <variant type="dark">
+                <rgba>0.33276 0.33284 0.34262 1</rgba>
+              </variant>
+            </variants>
+          </color>
+          <buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
+        </colorItem>
         <group>
           <id>3AF4332D-089A-4B0F-B382-199809A5D0F8</id>
           <name>Badge</name>
-          <expanded>1</expanded>
           <namespace>1</namespace>
           <group>
             <id>1B345E6F-7BFA-4A29-A8DE-903B2EB193A0</id>
             <name>Text</name>
-            <expanded>1</expanded>
             <namespace>1</namespace>
             <alias>
               <name>Primary</name>
@@ -1408,7 +1635,6 @@
           <group>
             <id>DA9E770F-29ED-4A78-9EDB-DD9F456BB566</id>
             <name>Background</name>
-            <expanded>1</expanded>
             <namespace>1</namespace>
             <alias>
               <name>Primary</name>
@@ -1580,7 +1806,6 @@
         <group>
           <id>F4FC786D-8F79-4199-A3D3-35667F6E2DCD</id>
           <name>Resource</name>
-          <expanded>1</expanded>
           <namespace>1</namespace>
           <alias>
             <name>Agent</name>
@@ -1718,7 +1943,6 @@
           <group>
             <id>3BA71E8E-780C-4B90-B070-E7FEA53C6E96</id>
             <name>Text</name>
-            <expanded>1</expanded>
             <namespace>1</namespace>
             <alias>
               <name>Agent</name>
@@ -1934,7 +2158,6 @@
           <group>
             <id>344BE5CA-4060-466E-87F6-D74416DFA36E</id>
             <name>Background</name>
-            <expanded>1</expanded>
             <namespace>1</namespace>
             <alias>
               <name>Agent</name>
@@ -2151,12 +2374,10 @@
         <group>
           <id>792303FE-20DD-4519-88B7-A3D74D43A65A</id>
           <name>Button</name>
-          <expanded>1</expanded>
           <namespace>1</namespace>
           <group>
             <id>AB837834-B6A2-4B55-BB11-D3A5D13EEE41</id>
             <name>Primary</name>
-            <expanded>1</expanded>
             <namespace>1</namespace>
             <alias>
               <name>Fill</name>
@@ -2190,7 +2411,6 @@
           <group>
             <id>7D962A51-9EE2-4090-ADEA-8E72BEBE425D</id>
             <name>Secondary</name>
-            <expanded>1</expanded>
             <namespace>1</namespace>
             <alias>
               <name>Fill</name>
@@ -2225,7 +2445,6 @@
           <group>
             <id>11BA8D55-244C-41EC-85CE-1EFB5EFCB380</id>
             <name>Tertiary</name>
-            <expanded>1</expanded>
             <namespace>1</namespace>
             <alias>
               <name>Fill</name>
@@ -2261,7 +2480,6 @@
           <group>
             <id>65EF707B-201E-41DA-9727-B23B74706082</id>
             <name>Danger</name>
-            <expanded>1</expanded>
             <namespace>1</namespace>
             <alias>
               <name>Fill</name>
@@ -2296,7 +2514,6 @@
         <group>
           <id>4EC67953-4547-4883-B947-D73CF2D3DF18</id>
           <name>Text</name>
-          <expanded>1</expanded>
           <namespace>1</namespace>
           <alias>
             <name>Primary</name>
@@ -2371,7 +2588,6 @@
         <group>
           <id>C2525A18-4A97-4EEC-BE78-A03DF3113E10</id>
           <name>Brand</name>
-          <expanded>1</expanded>
           <namespace>1</namespace>
           <alias>
             <name>Primary</name>
@@ -2412,7 +2628,6 @@
         <group>
           <id>D7B954B6-4112-44FA-A9F9-570423BEA0FB</id>
           <name>Popover</name>
-          <expanded>1</expanded>
           <namespace>1</namespace>
           <colorItem>
             <id>8C25CAE6-05ED-4461-9C22-1CE03087F1F1</id>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 989c4788..2896aa65 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eqtylab/equality",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",
diff --git a/packages/ui/src/components/alert-dialog/alert-dialog.module.css b/packages/ui/src/components/alert-dialog/alert-dialog.module.css
index 3fc330a4..586292a6 100644
--- a/packages/ui/src/components/alert-dialog/alert-dialog.module.css
+++ b/packages/ui/src/components/alert-dialog/alert-dialog.module.css
@@ -10,8 +10,8 @@
   @apply z-modal fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%];
   @apply w-full max-w-lg;
   @apply grid gap-4 p-6;
-  @apply bg-popover-background shadow-lg duration-200 sm:rounded-lg;
-  @apply border-border border;
+  @apply bg-background-overlay shadow-shadow-overlay shadow-lg duration-200 sm:rounded-lg;
+  @apply border-border-overlay border;
   @apply animate-popup-content;
 }
 
diff --git a/packages/ui/src/components/card/card.module.css b/packages/ui/src/components/card/card.module.css
index 9192cb90..953bf591 100644
--- a/packages/ui/src/components/card/card.module.css
+++ b/packages/ui/src/components/card/card.module.css
@@ -3,8 +3,9 @@
 .card {
   @apply @container/card relative;
   @apply text-text-primary;
-  @apply border-card-border border;
-  @apply bg-card-background overflow-hidden rounded-lg shadow-sm;
+  @apply border;
+  @apply overflow-hidden rounded-lg;
+  @apply shadow-sm;
 }
 
 .card--hover {
@@ -42,3 +43,25 @@
 .card-footer {
   @apply flex items-center p-3 pt-0;
 }
+
+/* ELEVATION */
+
+.card--sunken {
+  @apply bg-background-sunken shadow-shadow-sunken border-border-sunken;
+}
+
+.card--base {
+  @apply bg-background-base shadow-shadow-base border-border-base;
+}
+
+.card--raised {
+  @apply bg-background-raised shadow-shadow-raised border-border-raised;
+}
+
+.card--overlay {
+  @apply bg-background-overlay shadow-shadow-overlay border-border-overlay;
+}
+
+.card--floating {
+  @apply bg-background-floating shadow-shadow-floating border-border-floating;
+}
diff --git a/packages/ui/src/components/card/card.tsx b/packages/ui/src/components/card/card.tsx
index b3cf82ca..ca96aa6f 100644
--- a/packages/ui/src/components/card/card.tsx
+++ b/packages/ui/src/components/card/card.tsx
@@ -1,18 +1,29 @@
 import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
 
 import styles from '@/components/card/card.module.css';
+import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
+const cardElevationVariants = generateElevationVariants(styles, 'card', ELEVATION.RAISED);
+
 const Card = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { hoverGradientClassName?: string }
->(({ className, hoverGradientClassName, ...props }, ref) => {
+  React.HTMLAttributes<HTMLDivElement> & { hoverGradientClassName?: string } & VariantProps<
+      typeof cardElevationVariants
+    >
+>(({ className, hoverGradientClassName, elevation = ELEVATION.RAISED, ...props }, ref) => {
   // If the card should have a hover style
   const shouldHaveHoverStyle = props.onClick !== undefined;
   return (
     <div
       ref={ref}
-      className={cn(styles.card, shouldHaveHoverStyle && styles['card--hover'], className)}
+      className={cn(
+        styles.card,
+        shouldHaveHoverStyle && styles['card--hover'],
+        cardElevationVariants({ elevation }),
+        className
+      )}
       {...props}
     >
       {shouldHaveHoverStyle && (
diff --git a/packages/ui/src/components/display-field/display-field.module.css b/packages/ui/src/components/display-field/display-field.module.css
index 2a7fadab..96806530 100644
--- a/packages/ui/src/components/display-field/display-field.module.css
+++ b/packages/ui/src/components/display-field/display-field.module.css
@@ -5,7 +5,7 @@
 }
 
 .display-field-inner {
-  @apply border-border bg-popover-background rounded-md border;
+  @apply border-border bg-popover-background rounded-lg border;
   @apply h-9.5 flex w-full overflow-clip;
   @apply focus-ring;
   @apply z-above relative;
@@ -40,7 +40,7 @@
 }
 
 .actions {
-  @apply flex items-center;
+  @apply mr-0.5 flex items-center;
 }
 
 .icon-width {
@@ -61,9 +61,62 @@
 
 .slot {
   @apply -mt-(--radius-md) pt-(--radius-md) relative;
-  @apply bg-card-background rounded-b-md;
+  @apply rounded-b-md;
+  @apply inset-shadow-sm;
 }
 
 .slot-inner {
   @apply p-2;
 }
+
+/* ELEVATION */
+
+.display-field--sunken {
+  @apply shadow-shadow-sunken;
+}
+.display-field--sunken .display-field-inner {
+  @apply bg-background-sunken border-border-bottom;
+}
+.display-field--sunken .slot {
+  @apply bg-background-bottom border-border-bottom border;
+}
+
+.display-field--base {
+  @apply shadow-shadow-base;
+}
+.display-field--base .display-field-inner {
+  @apply bg-background-base border-border-base;
+}
+.display-field--base .slot {
+  @apply bg-background-sunken border-border-base;
+}
+
+.display-field--raised {
+  @apply shadow-shadow-raised;
+}
+.display-field--raised .display-field-inner {
+  @apply bg-background-raised border-border-raised;
+}
+.display-field--raised .slot {
+  @apply bg-background-base border-border-base;
+}
+
+.display-field--overlay {
+  @apply shadow-shadow-overlay;
+}
+.display-field--overlay .display-field-inner {
+  @apply bg-background-overlay border-border-overlay;
+}
+.display-field--overlay .slot {
+  @apply bg-background-raised border-border-raised;
+}
+
+.display-field--floating {
+  @apply shadow-shadow-floating border-border-floating;
+}
+.display-field--floating .display-field-inner {
+  @apply bg-background-floating border-border-floating;
+}
+.display-field--floating .slot {
+  @apply bg-background-overlay border-border-overlay;
+}
diff --git a/packages/ui/src/components/display-field/display-field.tsx b/packages/ui/src/components/display-field/display-field.tsx
index 7179ef76..64b0b146 100644
--- a/packages/ui/src/components/display-field/display-field.tsx
+++ b/packages/ui/src/components/display-field/display-field.tsx
@@ -5,6 +5,7 @@ import { Check, TriangleAlert } from 'lucide-react';
 
 import { CopyButton } from '@/components/copy-button/copy-button';
 import styles from '@/components/display-field/display-field.module.css';
+import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
 const displayFieldVariants = cva('', {
@@ -21,6 +22,12 @@ const displayFieldVariants = cva('', {
   },
 });
 
+const displayFieldElevationVariants = generateElevationVariants(
+  styles,
+  'display-field',
+  ELEVATION.BASE
+);
+
 export interface DisplayFieldProps
   extends
     Omit<React.HTMLAttributes<HTMLDivElement>, 'slot'>,
@@ -31,11 +38,13 @@ export interface DisplayFieldProps
   copy?: boolean;
   actions?: React.ReactNode;
   slot?: React.ReactNode;
+  elevation?: string;
 }
 
 function DisplayField({
   className,
   variant,
+  elevation = ELEVATION.BASE,
   children,
   prefix,
   truncate = false,
@@ -105,7 +114,14 @@ function DisplayField({
   }, []);
 
   return (
-    <div className={cn(styles['display-field'], className)} {...props}>
+    <div
+      className={cn(
+        styles['display-field'],
+        displayFieldElevationVariants({ elevation }),
+        className
+      )}
+      {...props}
+    >
       <div className={styles['display-field-inner']}>
         {prefix && (
           <div className={cn(styles['prefix'], displayFieldVariants({ variant: variant }))}>
diff --git a/packages/ui/src/components/drawer/drawer.module.css b/packages/ui/src/components/drawer/drawer.module.css
index e88e84ae..dad03f6c 100644
--- a/packages/ui/src/components/drawer/drawer.module.css
+++ b/packages/ui/src/components/drawer/drawer.module.css
@@ -6,7 +6,7 @@
 }
 
 .drawer-content {
-  @apply bg-popover-background border;
+  @apply bg-background-overlay border-border-overlay shadow-shadow-overlay border shadow-lg;
   @apply mt-24 rounded-t-[10px];
   @apply z-modal fixed inset-x-0 bottom-0 h-auto;
   @appy flex flex-col;
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css b/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
index abb17a50..4cfa987c 100644
--- a/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
+++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
@@ -67,3 +67,60 @@
   @apply text-text-secondary text-xs;
   @apply ml-auto;
 }
+
+/* ELEVATIONS */
+
+.dropdown-menu-content--sunken,
+.dropdown-menu-content--sunken .dropdown-menu-sub-content {
+  @apply bg-background-sunken shadow-shadow-sunken border-border-sunken;
+}
+.dropdown-menu-content--sunken .dropdown-menu-trigger,
+.dropdown-menu-content--sunken .dropdown-menu-item,
+.dropdown-menu-content--sunken .dropdown-menu-checkbox-item,
+.dropdown-menu-content--sunken .dropdown-menu-radio-item {
+  --mix-color: var(--color-background-sunken);
+}
+
+.dropdown-menu-content--base,
+.dropdown-menu-content--base .dropdown-menu-sub-content {
+  @apply bg-background shadow-shadow-base border-border-base;
+}
+.dropdown-menu-content--base .dropdown-menu-trigger,
+.dropdown-menu-content--base .dropdown-menu-item,
+.dropdown-menu-content--base .dropdown-menu-checkbox-item,
+.dropdown-menu-content--base .dropdown-menu-radio-item {
+  --mix-color: var(--color-background);
+}
+
+.dropdown-menu-content--raised,
+.dropdown-menu-content--raised .dropdown-menu-sub-content {
+  @apply bg-background-raised shadow-shadow-raised border-border-raised;
+}
+.dropdown-menu-content--raised .dropdown-menu-trigger,
+.dropdown-menu-content--raised .dropdown-menu-item,
+.dropdown-menu-content--raised .dropdown-menu-checkbox-item,
+.dropdown-menu-content--raised .dropdown-menu-radio-item {
+  --mix-color: var(--color-background-raised);
+}
+
+.dropdown-menu-content--overlay,
+.dropdown-menu-content--overlay .dropdown-menu-sub-content {
+  @apply bg-background-overlay shadow-shadow-overlay border-border-overlay;
+}
+.dropdown-menu-content--overlay .dropdown-menu-trigger,
+.dropdown-menu-content--overlay .dropdown-menu-item,
+.dropdown-menu-content--overlay .dropdown-menu-checkbox-item,
+.dropdown-menu-content--overlay .dropdown-menu-radio-item {
+  --mix-color: var(--color-background-overlay);
+}
+
+.dropdown-menu-content--floating,
+.dropdown-menu-content--floating .dropdown-menu-sub-content {
+  @apply bg-background-floating shadow-shadow-floating border-border-floating;
+}
+.dropdown-menu-content--floating .dropdown-menu-trigger,
+.dropdown-menu-content--floating .dropdown-menu-item,
+.dropdown-menu-content--floating .dropdown-menu-checkbox-item,
+.dropdown-menu-content--floating .dropdown-menu-radio-item {
+  --mix-color: var(--color-background-floating);
+}
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
index 7dc187f9..61be1efb 100644
--- a/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { VariantProps } from 'class-variance-authority';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 
 import styles from '@/components/dropdown-menu/dropdown-menu.module.css';
+import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
 import { cn, getThemeProviderRoot } from '@/lib/utils';
 
 const CheckIcon = Check as React.ComponentType<{ className?: string }>;
@@ -58,15 +60,26 @@ const DropdownMenuSubContent = React.forwardRef<
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
+const dropdownMenuContentElevationVariants = generateElevationVariants(
+  styles,
+  'dropdown-menu-content',
+  ELEVATION.OVERLAY
+);
+
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
+    VariantProps<typeof dropdownMenuContentElevationVariants>
+>(({ className, sideOffset = 4, elevation = ELEVATION.OVERLAY, ...props }, ref) => (
   <DropdownMenuPortal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(styles['dropdown-menu-content'], className)}
+      className={cn(
+        styles['dropdown-menu-content'],
+        dropdownMenuContentElevationVariants({ elevation }),
+        className
+      )}
       {...props}
     />
   </DropdownMenuPortal>
diff --git a/packages/ui/src/components/filter-dropdown/filter-dropdown.tsx b/packages/ui/src/components/filter-dropdown/filter-dropdown.tsx
index e8403350..924598d6 100644
--- a/packages/ui/src/components/filter-dropdown/filter-dropdown.tsx
+++ b/packages/ui/src/components/filter-dropdown/filter-dropdown.tsx
@@ -11,6 +11,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/dropdown-menu/dropdown-menu';
 import styles from '@/components/filter-dropdown/filter-dropdown.module.css';
+import { ELEVATION, Elevation } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
 const ChevronDownIcon = ChevronDown as React.ComponentType<{ className?: string }>;
@@ -24,6 +25,7 @@ interface FilterDropdownProps {
   label: string;
   options: FilterOption[];
   selectedFilters: string[];
+  dropdownElevation?: Elevation;
   onToggleFilter: (value: string) => void;
   onClearAll: () => void;
   buttonClassName?: string;
@@ -34,6 +36,7 @@ const FilterDropdown = ({
   label,
   options,
   selectedFilters,
+  dropdownElevation = ELEVATION.OVERLAY,
   onToggleFilter,
   onClearAll,
   buttonClassName,
@@ -63,6 +66,7 @@ const FilterDropdown = ({
       <DropdownMenuContent
         align="end"
         className={cn(styles['dropdown-menu-content'], contentClassName)}
+        elevation={dropdownElevation}
       >
         <DropdownMenuLabel>
           Filters
diff --git a/packages/ui/src/components/icon/icon.module.css b/packages/ui/src/components/icon/icon.module.css
index 5e50db8f..ac9ba871 100644
--- a/packages/ui/src/components/icon/icon.module.css
+++ b/packages/ui/src/components/icon/icon.module.css
@@ -6,8 +6,8 @@
   @apply flex items-center justify-center;
 }
 
-.icon-container:not(.background--transparent) {
-  @apply bg-greyscale-800;
+.icon-container:not(.background--transparent):not(.icon-container--sunken) {
+  @apply shadow-sm;
 }
 
 .icon-container:not(.background--transparent):not(.size--xs) {
@@ -54,3 +54,25 @@
 .background--circle {
   @apply rounded-full;
 }
+
+/* ELEVATION */
+
+.icon-container--sunken:not(.background--transparent) {
+  @apply bg-background-sunken shadow-shadow-sunken border-border-sunken inset-shadow-xs;
+}
+
+.icon-container--base:not(.background--transparent) {
+  @apply bg-background-base shadow-shadow-base border-border-base;
+}
+
+.icon-container--raised:not(.background--transparent) {
+  @apply bg-background-raised shadow-shadow-raised border-border-raised;
+}
+
+.icon-container--overlay:not(.background--transparent) {
+  @apply bg-background-overlay shadow-shadow-overlay border-border-overlay;
+}
+
+.icon-container--floating:not(.background--transparent) {
+  @apply bg-background-floating shadow-shadow-floating border-border-floating;
+}
diff --git a/packages/ui/src/components/icon/icon.tsx b/packages/ui/src/components/icon/icon.tsx
index a177758d..a91503ba 100644
--- a/packages/ui/src/components/icon/icon.tsx
+++ b/packages/ui/src/components/icon/icon.tsx
@@ -4,6 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import * as LucideIcons from 'lucide-react';
 
 import styles from '@/components/icon/icon.module.css';
+import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
 const iconVariants = cva(styles['icon-container'], {
@@ -26,15 +27,20 @@ const iconVariants = cva(styles['icon-container'], {
   },
 });
 
+const iconElevationVariants = generateElevationVariants(styles, 'icon-container', ELEVATION.RAISED);
+
 export interface IconProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof iconVariants> {
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof iconVariants>,
+    VariantProps<typeof iconElevationVariants> {
   icon: React.ReactElement | string;
   size?: 'xs' | 'sm' | 'md' | 'lg';
   background?: 'square' | 'circle' | 'transparent';
 }
 
 const Icon = forwardRef<HTMLDivElement, IconProps>(
-  ({ className, size, background, icon, ...props }, ref) => {
+  ({ className, size, background, icon, elevation = ELEVATION.RAISED, ...props }, ref) => {
     let renderedIcon;
 
     if (typeof icon === 'string') {
@@ -63,7 +69,15 @@ const Icon = forwardRef<HTMLDivElement, IconProps>(
     }
 
     return (
-      <div ref={ref} className={cn(iconVariants({ size, background }), className)} {...props}>
+      <div
+        ref={ref}
+        className={cn(
+          iconVariants({ size, background }),
+          iconElevationVariants({ elevation }),
+          className
+        )}
+        {...props}
+      >
         {renderedIcon}
       </div>
     );
diff --git a/packages/ui/src/components/info-card/info-card.tsx b/packages/ui/src/components/info-card/info-card.tsx
index 45905e9a..19718f14 100644
--- a/packages/ui/src/components/info-card/info-card.tsx
+++ b/packages/ui/src/components/info-card/info-card.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Card, CardContent } from '@/components/card/card';
 import { Icon } from '@/components/icon/icon';
 import styles from '@/components/info-card/info-card.module.css';
+import { Elevation, ELEVATION, getRelativeElevation } from '@/lib/elevations';
 
 interface InfoCardProps {
   label: string;
@@ -10,14 +11,30 @@ interface InfoCardProps {
   icon: React.ReactElement | string;
   className?: string;
   onClick?: () => void;
+  elevation?: Elevation;
 }
 
-const InfoCard = ({ label, description, icon, className, onClick, ...props }: InfoCardProps) => {
+const InfoCard = ({
+  label,
+  description,
+  icon,
+  elevation = ELEVATION.RAISED,
+  className,
+  onClick,
+  ...props
+}: InfoCardProps) => {
   return (
-    <Card className={className} onClick={onClick} {...props}>
+    <Card className={className} onClick={onClick} elevation={elevation} {...props}>
       <CardContent>
         <div className={styles['info-card-content']}>
-          <Icon icon={icon} size="sm" background="square" />
+          <Icon
+            icon={icon}
+            size="sm"
+            background="square"
+            elevation={
+              elevation === ELEVATION.SUNKEN ? ELEVATION.BASE : getRelativeElevation(elevation, -1)
+            }
+          />
           <div className={styles['copy-container']}>
             <p className={styles['label']}>{label}</p>
             <div className={styles['description']}>{description}</div>
diff --git a/packages/ui/src/components/input/input.module.css b/packages/ui/src/components/input/input.module.css
index f30b65b9..2c2a831c 100644
--- a/packages/ui/src/components/input/input.module.css
+++ b/packages/ui/src/components/input/input.module.css
@@ -3,8 +3,8 @@
 .input {
   @apply outline-hidden;
   @apply border-border bg-popover-background border;
-  @apply px-3 py-2;
-  @apply flex h-10 w-full rounded-md;
+  @apply p-2;
+  @apply flex h-10 w-full rounded-lg;
   @apply text-text-primary placeholder:text-text-secondary;
   @apply text-sm;
   @apply file:text-text-primary file:font-medium;
@@ -15,8 +15,8 @@
 
 .input-wrapper {
   @apply border-border bg-popover-background border;
-  @apply flex h-10 w-full items-center gap-2 rounded-md;
-  @apply px-3 py-2;
+  @apply flex h-10 w-full items-center gap-2 rounded-lg;
+  @apply p-2;
   @apply has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50;
   @apply has-[:focus]:focus-ring;
   @apply [&_svg]:text-text-secondary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
diff --git a/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css b/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css
index a1d3be56..b413ddf2 100644
--- a/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css
+++ b/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css
@@ -1,7 +1,7 @@
 @reference '../../theme/theme.module.css';
 
 .list-or-grid-view-toggle {
-  @apply border-border border;
+  @apply border-button-tertiary-border border;
   @apply flex rounded-md;
   @apply w-max overflow-hidden;
   @apply bg-button-tertiary-fill;
@@ -11,6 +11,8 @@
 .icon-button {
   @apply rounded-none! border-0;
   @apply z-above relative;
+  @apply flex-center size-8;
+  @apply cursor-pointer bg-transparent;
 }
 
 .icon-button--active {
diff --git a/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.tsx b/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.tsx
index 6f6e18be..fd159b59 100644
--- a/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.tsx
+++ b/packages/ui/src/components/list-or-grid-view-toggle/list-or-grid-view-toggle.tsx
@@ -1,4 +1,5 @@
-import { IconButton } from '@/components/icon-button/icon-button';
+import { Grid3X3, List } from 'lucide-react';
+
 import styles from '@/components/list-or-grid-view-toggle/list-or-grid-view-toggle.module.css';
 import { cn } from '@/lib/utils';
 
@@ -32,17 +33,20 @@ const ListOrGridViewToggle = ({
     <div className={cn(styles['list-or-grid-view-toggle'], className)}>
       {order.map((mode) => {
         const currentlyActive = mode === viewMode;
+        const Icon = mode === 'grid' ? Grid3X3 : List;
         return (
-          <IconButton
+          <button
             key={mode}
-            size="sm"
-            name={mode === 'grid' ? 'Grid3X3' : 'List'}
+            type="button"
+            aria-label={mode === 'grid' ? 'Grid view' : 'List view'}
             className={cn(
               styles['icon-button'],
               currentlyActive ? styles['icon-button--active'] : styles['icon-button--inactive']
             )}
             onClick={mode === 'grid' ? handleGridClick : handleListClick}
-          />
+          >
+            <Icon size={16} />
+          </button>
         );
       })}
       <div
diff --git a/packages/ui/src/components/pagination/pagination.tsx b/packages/ui/src/components/pagination/pagination.tsx
index 13badabf..2d6eb44f 100644
--- a/packages/ui/src/components/pagination/pagination.tsx
+++ b/packages/ui/src/components/pagination/pagination.tsx
@@ -10,6 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/select/select';
+import { ELEVATION, Elevation } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
 const ChevronLeftIcon = ChevronLeft as React.ComponentType<{ className?: string }>;
@@ -25,6 +26,7 @@ interface PaginationProps {
   itemsPerPageOptions?: number[];
   showInfo?: boolean;
   maxVisiblePages?: number;
+  dropdownElevation?: Elevation;
   className?: string;
   type?: string;
   scrollTargetRef?: React.RefObject<HTMLElement | null> | string;
@@ -40,6 +42,7 @@ const Pagination = ({
   itemsPerPageOptions = [10, 25, 50, 100],
   showInfo = true,
   maxVisiblePages = 5,
+  dropdownElevation = ELEVATION.OVERLAY,
   className = '',
   type = '',
   scrollTargetRef,
@@ -146,7 +149,7 @@ const Pagination = ({
                 <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>
-                <SelectContent>
+                <SelectContent elevation={dropdownElevation}>
                   {itemsPerPageOptions.map((option) => (
                     <SelectItem key={option} value={option.toString()}>
                       {option}
diff --git a/packages/ui/src/components/popover/popover.module.css b/packages/ui/src/components/popover/popover.module.css
index 9d72b7cb..608fc2e4 100644
--- a/packages/ui/src/components/popover/popover.module.css
+++ b/packages/ui/src/components/popover/popover.module.css
@@ -1,8 +1,9 @@
 @reference '../../theme/theme.module.css';
 
 .popover-content {
-  @apply bg-popover-background text-text-primary outline-hidden;
-  @apply border-border border;
+  @apply bg-background-overlay text-text-primary outline-hidden;
+  @apply border-border-overlay border;
+  @apply shadow-shadow-overlay shadow-sm;
   @apply z-modal w-72 rounded-md p-4;
   @apply origin-(--radix-popover-content-transform-origin);
   @apply animate-popup-content;
diff --git a/packages/ui/src/components/radio-dropdown/radio-dropdown.tsx b/packages/ui/src/components/radio-dropdown/radio-dropdown.tsx
index e5128959..25cd3ea3 100644
--- a/packages/ui/src/components/radio-dropdown/radio-dropdown.tsx
+++ b/packages/ui/src/components/radio-dropdown/radio-dropdown.tsx
@@ -12,6 +12,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/dropdown-menu/dropdown-menu';
 import styles from '@/components/radio-dropdown/radio-dropdown.module.css';
+import { ELEVATION, Elevation } from '@/lib/elevations';
 
 const ChevronDownIcon = ChevronDown as React.ComponentType<{ className?: string }>;
 
@@ -25,6 +26,7 @@ interface RadioDropdownProps {
   label: string;
   options: FilterOption[];
   selectedValue: string;
+  dropdownElevation?: Elevation;
   onSelect: (value: string) => void;
   className?: string;
 }
@@ -33,6 +35,7 @@ const RadioDropdown = ({
   label,
   options,
   selectedValue,
+  dropdownElevation = ELEVATION.OVERLAY,
   onSelect,
   className,
 }: RadioDropdownProps) => {
@@ -57,7 +60,11 @@ const RadioDropdown = ({
           <ChevronDownIcon className={styles['chevron-icon']} />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className={styles['dropdown-menu-content']}>
+      <DropdownMenuContent
+        align="end"
+        className={styles['dropdown-menu-content']}
+        elevation={dropdownElevation}
+      >
         <DropdownMenuLabel>{label}</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuRadioGroup value={selectedValue} onValueChange={onSelect}>
diff --git a/packages/ui/src/components/search-bar/search-bar.module.css b/packages/ui/src/components/search-bar/search-bar.module.css
index 63b6654c..39299417 100644
--- a/packages/ui/src/components/search-bar/search-bar.module.css
+++ b/packages/ui/src/components/search-bar/search-bar.module.css
@@ -5,16 +5,6 @@
 }
 
 .search-icon {
-  @apply absolute left-3 top-1/2 -translate-y-1/2;
   @apply text-text-secondary;
   @apply size-4;
 }
-
-.input {
-  @apply px-10;
-}
-
-.clear-button {
-  @apply absolute right-2 top-1/2 -translate-y-1/2;
-  @apply size-6;
-}
diff --git a/packages/ui/src/components/search-bar/search-bar.tsx b/packages/ui/src/components/search-bar/search-bar.tsx
index 37601a3e..92727dfe 100644
--- a/packages/ui/src/components/search-bar/search-bar.tsx
+++ b/packages/ui/src/components/search-bar/search-bar.tsx
@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { Search, X } from 'lucide-react';
+import { Search } from 'lucide-react';
 
-import { Button } from '@/components/button/button';
+import { IconButton } from '@/components/icon-button/icon-button';
 import { Input } from '@/components/input/input';
 import styles from '@/components/search-bar/search-bar.module.css';
 import { cn } from '@/lib/utils';
 
 const SearchIcon = Search as React.ComponentType<{ className?: string }>;
-const XIcon = X as React.ComponentType<{ className?: string }>;
 
 interface SearchBarProps {
   className?: string;
@@ -32,24 +31,23 @@ const SearchBar = ({
 
   return (
     <div className={cn(styles['search-bar'], className)}>
-      <SearchIcon className={styles['search-icon']} />
       <Input
         placeholder={placeholder}
         value={searchQuery}
         onChange={handleChange}
         className={styles['input']}
+        prefix={<SearchIcon className={styles['search-icon']} />}
+        suffix={
+          searchQuery && (
+            <IconButton
+              name="XIcon"
+              onClick={handleClear}
+              className={styles['clear-button']}
+              label="Clear search"
+            ></IconButton>
+          )
+        }
       />
-      {searchQuery && (
-        <Button
-          variant="tertiary"
-          size="sm"
-          onClick={handleClear}
-          className={styles['clear-button']}
-          aria-label="Clear search"
-        >
-          <XIcon />
-        </Button>
-      )}
     </div>
   );
 };
diff --git a/packages/ui/src/components/select/select.module.css b/packages/ui/src/components/select/select.module.css
index 6b51e1d9..dada7d7b 100644
--- a/packages/ui/src/components/select/select.module.css
+++ b/packages/ui/src/components/select/select.module.css
@@ -60,3 +60,40 @@
   @apply bg-border;
   @apply -mx-1 my-1 h-px;
 }
+
+/* ELEVATIONS */
+
+.select-content--sunken {
+  @apply bg-background-sunken shadow-shadow-sunken border-border-sunken;
+}
+.select-content--sunken .select-item {
+  --mix-color: var(--color-background-sunken);
+}
+
+.select-content--base {
+  @apply bg-background shadow-shadow-base border-border-base;
+}
+.select-content--base .select-item {
+  --mix-color: var(--color-background);
+}
+
+.select-content--raised {
+  @apply bg-background-raised shadow-shadow-raised border-border-raised;
+}
+.select-content--raised .select-item {
+  --mix-color: var(--color-background-raised);
+}
+
+.select-content--overlay {
+  @apply bg-background-overlay shadow-shadow-overlay border-border-overlay;
+}
+.select-content--overlay .select-item {
+  --mix-color: var(--color-background-overlay);
+}
+
+.select-content--floating {
+  @apply bg-background-floating shadow-shadow-floating border-border-floating;
+}
+.select-content--floating .select-item {
+  --mix-color: var(--color-background-floating);
+}
diff --git a/packages/ui/src/components/select/select.tsx b/packages/ui/src/components/select/select.tsx
index 4d0c7eaa..e8413d51 100644
--- a/packages/ui/src/components/select/select.tsx
+++ b/packages/ui/src/components/select/select.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { VariantProps } from 'class-variance-authority';
 import { Check, ChevronDown, ChevronUp } from 'lucide-react';
 
 import styles from '@/components/select/select.module.css';
+import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
 import { cn, getThemeProviderRoot } from '@/lib/utils';
 
 const CheckIcon = Check as React.ComponentType<{ className?: string }>;
@@ -60,16 +62,24 @@ const SelectPortal = ({ children }: { children: React.ReactNode }) => (
   <SelectPrimitive.Portal container={getThemeProviderRoot()}>{children}</SelectPrimitive.Portal>
 );
 
+const selectContentElevationVariants = generateElevationVariants(
+  styles,
+  'select-content',
+  ELEVATION.OVERLAY
+);
+
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
+    VariantProps<typeof selectContentElevationVariants>
+>(({ className, children, position = 'popper', elevation = ELEVATION.OVERLAY, ...props }, ref) => (
   <SelectPortal>
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
         styles['select-content'],
         position === 'popper' && styles['select-content--popper'],
+        selectContentElevationVariants({ elevation }),
         className
       )}
       position={position}
diff --git a/packages/ui/src/components/sheet/sheet.module.css b/packages/ui/src/components/sheet/sheet.module.css
index 0ac8487d..9d71d0ab 100644
--- a/packages/ui/src/components/sheet/sheet.module.css
+++ b/packages/ui/src/components/sheet/sheet.module.css
@@ -8,7 +8,9 @@
 }
 
 .sheet-content {
-  @apply bg-popover-background;
+  @apply bg-background-overlay;
+  @apply shadow-shadow-overlay shadow-lg;
+  @apply border-border-overlay;
   @apply z-modal fixed gap-4 p-6;
   @apply transition ease-in-out;
   @apply data-[state=open]:animate-in data-[state=open]:duration-500;
diff --git a/packages/ui/src/components/sort-selector/sort-selector.tsx b/packages/ui/src/components/sort-selector/sort-selector.tsx
index 2ec917ce..a4c768a6 100644
--- a/packages/ui/src/components/sort-selector/sort-selector.tsx
+++ b/packages/ui/src/components/sort-selector/sort-selector.tsx
@@ -11,6 +11,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/dropdown-menu/dropdown-menu';
 import styles from '@/components/sort-selector/sort-selector.module.css';
+import { Elevation, ELEVATION } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
 const ChevronDownIcon = ChevronDown as React.ComponentType<{ className?: string }>;
@@ -23,6 +24,7 @@ interface SortSelectorProps {
   sortField: SortField;
   defaultSortField?: SortField;
   sortOrder: SortOrder;
+  dropdownElevation?: Elevation;
   defaultSortOrder?: SortOrder;
   sortMode?: SortMode;
   setSortField: (field: SortField) => void;
@@ -36,6 +38,7 @@ function SortSelector({
   sortField,
   defaultSortField = 'name',
   sortOrder,
+  dropdownElevation = ELEVATION.OVERLAY,
   defaultSortOrder = 'asc',
   sortMode = 'created',
   setSortField,
@@ -90,7 +93,11 @@ function SortSelector({
           <ChevronDownIcon className={styles['chevron-down-icon']} />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className={styles['dropdown-menu-content']}>
+      <DropdownMenuContent
+        align="end"
+        elevation={dropdownElevation}
+        className={styles['dropdown-menu-content']}
+      >
         <DropdownMenuLabel>
           Sort
           {!isDefaultSort && (
diff --git a/packages/ui/src/components/table/table-components.module.css b/packages/ui/src/components/table/table-components.module.css
index 880ee5d3..9085a37c 100644
--- a/packages/ui/src/components/table/table-components.module.css
+++ b/packages/ui/src/components/table/table-components.module.css
@@ -11,7 +11,6 @@
 }
 
 .table-header {
-  @apply bg-greyscale-800;
   @apply [&_tr]:border-b;
 }
 
@@ -20,7 +19,7 @@
 }
 
 .table-footer {
-  @apply bg-greyscale-400 border-t last:[&>tr]:border-b-0;
+  @apply border-t last:[&>tr]:border-b-0;
   @apply font-medium;
 }
 
@@ -44,3 +43,45 @@
 .table-caption {
   @apply text-text-secondary mt-4 text-sm;
 }
+
+/* ELEVATION */
+
+.table--sunken .table-header,
+.table--sunken .table-footer {
+  @apply bg-background-base;
+}
+.table--sunken .table-body {
+  @apply bg-background-sunken;
+}
+
+.table--base .table-header,
+.table--base .table-footer {
+  @apply bg-background-raised;
+}
+.table--base .table-body {
+  @apply bg-background-base;
+}
+
+.table--raised .table-header,
+.table--raised .table-footer {
+  @apply bg-background-overlay;
+}
+.table--raised .table-body {
+  @apply bg-background-raised;
+}
+
+.table--overlay .table-header,
+.table--overlay .table-footer {
+  @apply bg-background-floating;
+}
+.table--overlay .table-body {
+  @apply bg-background-overlay;
+}
+
+.table--floating .table-header,
+.table--floating .table-footer {
+  @apply bg-background-top;
+}
+.table--floating .table-body {
+  @apply bg-background-floating;
+}
diff --git a/packages/ui/src/components/table/table-components.tsx b/packages/ui/src/components/table/table-components.tsx
index 1d8992d7..93b483ff 100644
--- a/packages/ui/src/components/table/table-components.tsx
+++ b/packages/ui/src/components/table/table-components.tsx
@@ -1,15 +1,20 @@
 import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
 
 import styles from '@/components/table/table-components.module.css';
+import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
-const TableContainer = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className={styles['table']}>
-      <table ref={ref} className={styles['table-inner']} {...props} />
-    </div>
-  )
-);
+const tableElevationVariants = generateElevationVariants(styles, 'table', ELEVATION.RAISED);
+
+const TableContainer = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement> & VariantProps<typeof tableElevationVariants>
+>(({ className, elevation = ELEVATION.RAISED, ...props }, ref) => (
+  <div className={(styles['table'], tableElevationVariants({ elevation }))}>
+    <table ref={ref} className={styles['table-inner']} {...props} />
+  </div>
+));
 TableContainer.displayName = 'Table';
 
 const TableHeader = React.forwardRef<
diff --git a/packages/ui/src/components/table/table.module.css b/packages/ui/src/components/table/table.module.css
index 35b1a82a..b58d1b96 100644
--- a/packages/ui/src/components/table/table.module.css
+++ b/packages/ui/src/components/table/table.module.css
@@ -1,5 +1,9 @@
 @reference '../../theme/theme.module.css';
 
+.table {
+  @apply shadow-sm;
+}
+
 .table-row-clickable {
   --mix-color: var(--color-brand-primary);
   --hover-darken: 50%;
@@ -9,10 +13,43 @@
 }
 
 .table-border {
-  @apply border-border border;
+  @apply border;
   @apply overflow-hidden rounded-md;
 }
 
-.table-background {
-  @apply bg-card-background;
+/* ELEVATION */
+
+.table--sunken {
+  @apply shadow-shadow-sunken;
+}
+.table--sunken.table-border {
+  @apply border-border-sunken;
+}
+
+.table--base {
+  @apply shadow-shadow-base;
+}
+.table--base.table-border {
+  @apply border-border-base;
+}
+
+.table--raised {
+  @apply shadow-shadow-raised;
+}
+.table--raised.table-border {
+  @apply border-border-raised;
+}
+
+.table--overlay {
+  @apply shadow-shadow-overlay;
+}
+.table--overlay.table-border {
+  @apply border-border-overlay;
+}
+
+.table--floating {
+  @apply shadow-shadow-floating;
+}
+.table--floating.table-border {
+  @apply border-border-floating;
 }
diff --git a/packages/ui/src/components/table/table.tsx b/packages/ui/src/components/table/table.tsx
index cccbff9a..668676af 100644
--- a/packages/ui/src/components/table/table.tsx
+++ b/packages/ui/src/components/table/table.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
 
 import {
   TableBody,
@@ -8,6 +9,7 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/table/table-components';
+import { ELEVATION, generateElevationVariants } from '@/lib/elevations';
 import { cn } from '@/lib/utils';
 
 import styles from './table.module.css';
@@ -31,25 +33,32 @@ type TableCellData = {
   className?: string;
 };
 
-interface TableProps {
+interface TableProps extends VariantProps<typeof tableElevationVariants> {
   columns: TableColumn[];
   rows: TableRowData[];
   className?: string;
   border?: boolean;
-  background?: boolean;
 }
 
-const Table = ({ columns, rows, className, border = false, background = false }: TableProps) => {
+const tableElevationVariants = generateElevationVariants(styles, 'table', ELEVATION.BASE);
+
+const Table = ({
+  columns,
+  rows,
+  className,
+  border = false,
+  elevation = ELEVATION.BASE,
+}: TableProps) => {
   return (
     <div
       className={cn(
         styles['table'],
         border && styles['table-border'],
-        background && styles['table-background'],
+        tableElevationVariants({ elevation }),
         className
       )}
     >
-      <TableContainer>
+      <TableContainer elevation={elevation}>
         <TableHeader>
           <TableRow>
             {columns.map((column) => (
diff --git a/packages/ui/src/components/tooltip/tooltip.module.css b/packages/ui/src/components/tooltip/tooltip.module.css
index ac2373e3..53d3aeb6 100644
--- a/packages/ui/src/components/tooltip/tooltip.module.css
+++ b/packages/ui/src/components/tooltip/tooltip.module.css
@@ -3,7 +3,8 @@
 .tooltip-content {
   @apply z-highest;
   @apply overflow-hidden rounded-md;
-  @apply border-border bg-popover-background border;
+  @apply border-border-overlay bg-background-overlay border;
+  @apply shadow-shadow-overlay shadow-sm;
   @apply text-text-primary text-sm;
   @apply px-3 py-1.5;
   @apply origin-(--radix-tooltip-content-transform-origin);
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 82564049..943eed24 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -7,3 +7,7 @@ export * from './theme/hooks/use-theme';
 
 /* HOOKS */
 export * from './hooks';
+
+/* LIB */
+export { ELEVATION } from './lib/elevations';
+export type { Elevation } from './lib/elevations';
diff --git a/packages/ui/src/lib/elevations.ts b/packages/ui/src/lib/elevations.ts
new file mode 100644
index 00000000..e81e1a3f
--- /dev/null
+++ b/packages/ui/src/lib/elevations.ts
@@ -0,0 +1,43 @@
+import { cva } from 'class-variance-authority';
+
+export const ELEVATION = {
+  SUNKEN: 'sunken',
+  BASE: 'base',
+  RAISED: 'raised',
+  OVERLAY: 'overlay',
+  FLOATING: 'floating',
+};
+
+export type Elevation = (typeof ELEVATION)[keyof typeof ELEVATION];
+
+export const generateElevationVariants = (
+  styles: { [key: string]: string },
+  baseClassName: string,
+  defaultElevation: Elevation
+) => {
+  const classNames: { [key: string]: string } = {};
+  Object.values(ELEVATION).forEach((elevation) => {
+    classNames[elevation] = styles[`${baseClassName}--${elevation}`];
+  });
+
+  const variants = cva(styles[baseClassName], {
+    variants: {
+      elevation: classNames,
+    },
+    defaultVariants: {
+      elevation: defaultElevation,
+    },
+  });
+
+  return variants;
+};
+
+export const getRelativeElevation = (elevation: Elevation, offset: number) => {
+  const elevationIndex = Object.values(ELEVATION).indexOf(elevation);
+  const newElevationIndex = elevationIndex + offset;
+  const relativeElevation = Object.values(ELEVATION)[newElevationIndex];
+  if (!relativeElevation) {
+    console.warn(`Invalid elevation offset: from ${elevation} with offset ${offset}`);
+  }
+  return relativeElevation || elevation;
+};
diff --git a/packages/ui/src/theme/generated/color-vars.css b/packages/ui/src/theme/generated/color-vars.css
index 15580b26..d0acf655 100644
--- a/packages/ui/src/theme/generated/color-vars.css
+++ b/packages/ui/src/theme/generated/color-vars.css
@@ -9,7 +9,14 @@
   --color-amber-700: color(display-p3 0.4327 0.2812 0.1347);
   --color-amber-800: color(display-p3 0.2643 0.1753 0.09139);
   --color-amber-900: color(display-p3 0.1121 0.07777 0.04646);
-  --color-background: color(display-p3 0.9738 0.9799 0.9872);
+  --color-background-base: color(display-p3 0.8264 0.8324 0.8394);
+  --color-background-bottom: color(display-p3 0.6765 0.6823 0.689);
+  --color-background-floating: color(display-p3 0.9424 0.9485 0.9557);
+  --color-background-overlay: color(display-p3 0.9034 0.9095 0.9166);
+  --color-background-raised: color(display-p3 0.8648 0.8708 0.8779);
+  --color-background-sunken: color(display-p3 0.7758 0.7817 0.7887);
+  --color-background-top: color(display-p3 0.9817 0.9878 0.9951);
+  --color-background: color(display-p3 0.8264 0.8324 0.8394);
   --color-badge-background-accepted: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-comment: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-compliant: color(display-p3 0.7403 0.8486 0.7417);
@@ -50,7 +57,14 @@
   --color-blue-700: color(display-p3 0.1442 0.2013 0.4303);
   --color-blue-800: color(display-p3 0.1017 0.1411 0.2832);
   --color-blue-900: color(display-p3 0.06177 0.08243 0.1475);
-  --color-border: color(display-p3 0.8698 0.8698 0.8698);
+  --color-border-base: color(display-p3 0.7432 0.7432 0.7432);
+  --color-border-bottom: color(display-p3 0.6158 0.6214 0.6281);
+  --color-border-floating: color(display-p3 0.8011 0.807 0.814);
+  --color-border-overlay: color(display-p3 0.8011 0.807 0.814);
+  --color-border-raised: color(display-p3 0.7383 0.7441 0.751);
+  --color-border-sunken: color(display-p3 0.7432 0.7432 0.7432);
+  --color-border-top: color(display-p3 0.8011 0.807 0.814);
+  --color-border: color(display-p3 0.7432 0.7432 0.7432);
   --color-brand-green: color(display-p3 0.4374 0.6383 0.4134);
   --color-brand-primary: color(display-p3 0.7319 0.6108 0.8873);
   --color-brand-red: color(display-p3 0.8114 0.4167 0.3761);
@@ -235,7 +249,14 @@
   --color-yellow-900: color(display-p3 0.1107 0.07879 0.04484);
 
   /* Dark theme */
-  --dark-color-background: color(display-p3 0.03547 0.03547 0.04268);
+  --dark-color-background-base: color(display-p3 0.06018 0.06019 0.06787);
+  --dark-color-background-bottom: color(display-p3 0.00001094 0.000005131 0.00006469);
+  --dark-color-background-floating: color(display-p3 0.1399 0.14 0.1485);
+  --dark-color-background-overlay: color(display-p3 0.1121 0.1122 0.1204);
+  --dark-color-background-raised: color(display-p3 0.08523 0.08526 0.09324);
+  --dark-color-background-sunken: color(display-p3 0.03547 0.03547 0.04268);
+  --dark-color-background-top: color(display-p3 0.1399 0.14 0.1485);
+  --dark-color-background: color(display-p3 0.06018 0.06019 0.06787);
   --dark-color-badge-background-accepted: color(display-p3 0.2473 0.1645 0.5241);
   --dark-color-badge-background-comment: color(display-p3 0.2473 0.1645 0.5241);
   --dark-color-badge-background-compliant: color(display-p3 0.1689 0.3045 0.136);
@@ -266,6 +287,13 @@
   --dark-color-badge-text-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
   --dark-color-badge-text-success: color(display-p3 0.8698 0.8698 0.8698);
   --dark-color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204);
+  --dark-color-border-base: color(display-p3 0.1792 0.1792 0.1792);
+  --dark-color-border-bottom: color(display-p3 0.1589 0.159 0.1677);
+  --dark-color-border-floating: color(display-p3 0.3328 0.3328 0.3426);
+  --dark-color-border-overlay: color(display-p3 0.2796 0.2796 0.2891);
+  --dark-color-border-raised: color(display-p3 0.228 0.2281 0.2372);
+  --dark-color-border-sunken: color(display-p3 0.1792 0.1792 0.1792);
+  --dark-color-border-top: color(display-p3 0.3328 0.3328 0.3426);
   --dark-color-border: color(display-p3 0.1792 0.1792 0.1792);
   --dark-color-button-danger-border: color(display-p3 0.7365 0.2216 0.2026);
   --dark-color-button-danger-fill: color(display-p3 0.8114 0.4167 0.3761);
diff --git a/packages/ui/src/theme/generated/dark-tokens.css b/packages/ui/src/theme/generated/dark-tokens.css
index 51dd65c8..20b94fc3 100644
--- a/packages/ui/src/theme/generated/dark-tokens.css
+++ b/packages/ui/src/theme/generated/dark-tokens.css
@@ -1,6 +1,13 @@
 [data-equality-theme='dark'] .root {
   color-scheme: dark;
-  --color-background: color(display-p3 0.03547 0.03547 0.04268);
+  --color-background-base: color(display-p3 0.06018 0.06019 0.06787);
+  --color-background-bottom: color(display-p3 0.00001094 0.000005131 0.00006469);
+  --color-background-floating: color(display-p3 0.1399 0.14 0.1485);
+  --color-background-overlay: color(display-p3 0.1121 0.1122 0.1204);
+  --color-background-raised: color(display-p3 0.08523 0.08526 0.09324);
+  --color-background-sunken: color(display-p3 0.03547 0.03547 0.04268);
+  --color-background-top: color(display-p3 0.1399 0.14 0.1485);
+  --color-background: color(display-p3 0.06018 0.06019 0.06787);
   --color-badge-background-accepted: color(display-p3 0.2473 0.1645 0.5241);
   --color-badge-background-comment: color(display-p3 0.2473 0.1645 0.5241);
   --color-badge-background-compliant: color(display-p3 0.1689 0.3045 0.136);
@@ -31,6 +38,13 @@
   --color-badge-text-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
   --color-badge-text-success: color(display-p3 0.8698 0.8698 0.8698);
   --color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204);
+  --color-border-base: color(display-p3 0.1792 0.1792 0.1792);
+  --color-border-bottom: color(display-p3 0.1589 0.159 0.1677);
+  --color-border-floating: color(display-p3 0.3328 0.3328 0.3426);
+  --color-border-overlay: color(display-p3 0.2796 0.2796 0.2891);
+  --color-border-raised: color(display-p3 0.228 0.2281 0.2372);
+  --color-border-sunken: color(display-p3 0.1792 0.1792 0.1792);
+  --color-border-top: color(display-p3 0.3328 0.3328 0.3426);
   --color-border: color(display-p3 0.1792 0.1792 0.1792);
   --color-button-danger-border: color(display-p3 0.7365 0.2216 0.2026);
   --color-button-danger-fill: color(display-p3 0.8114 0.4167 0.3761);
diff --git a/packages/ui/src/theme/generated/global-dark-tokens.css b/packages/ui/src/theme/generated/global-dark-tokens.css
index 123e710e..9978c20f 100644
--- a/packages/ui/src/theme/generated/global-dark-tokens.css
+++ b/packages/ui/src/theme/generated/global-dark-tokens.css
@@ -1,6 +1,13 @@
 html[data-equality-theme='dark'] {
   color-scheme: dark;
-  --color-background: color(display-p3 0.03547 0.03547 0.04268);
+  --color-background-base: color(display-p3 0.06018 0.06019 0.06787);
+  --color-background-bottom: color(display-p3 0.00001094 0.000005131 0.00006469);
+  --color-background-floating: color(display-p3 0.1399 0.14 0.1485);
+  --color-background-overlay: color(display-p3 0.1121 0.1122 0.1204);
+  --color-background-raised: color(display-p3 0.08523 0.08526 0.09324);
+  --color-background-sunken: color(display-p3 0.03547 0.03547 0.04268);
+  --color-background-top: color(display-p3 0.1399 0.14 0.1485);
+  --color-background: color(display-p3 0.06018 0.06019 0.06787);
   --color-badge-background-accepted: color(display-p3 0.2473 0.1645 0.5241);
   --color-badge-background-comment: color(display-p3 0.2473 0.1645 0.5241);
   --color-badge-background-compliant: color(display-p3 0.1689 0.3045 0.136);
@@ -31,6 +38,13 @@ html[data-equality-theme='dark'] {
   --color-badge-text-ready-for-review: color(display-p3 0.7289 0.7853 0.9401);
   --color-badge-text-success: color(display-p3 0.8698 0.8698 0.8698);
   --color-badge-text-warning: color(display-p3 0.9327 0.8528 0.7204);
+  --color-border-base: color(display-p3 0.1792 0.1792 0.1792);
+  --color-border-bottom: color(display-p3 0.1589 0.159 0.1677);
+  --color-border-floating: color(display-p3 0.3328 0.3328 0.3426);
+  --color-border-overlay: color(display-p3 0.2796 0.2796 0.2891);
+  --color-border-raised: color(display-p3 0.228 0.2281 0.2372);
+  --color-border-sunken: color(display-p3 0.1792 0.1792 0.1792);
+  --color-border-top: color(display-p3 0.3328 0.3328 0.3426);
   --color-border: color(display-p3 0.1792 0.1792 0.1792);
   --color-button-danger-border: color(display-p3 0.7365 0.2216 0.2026);
   --color-button-danger-fill: color(display-p3 0.8114 0.4167 0.3761);
diff --git a/packages/ui/src/theme/generated/global-light-tokens.css b/packages/ui/src/theme/generated/global-light-tokens.css
index d52746a8..34aad387 100644
--- a/packages/ui/src/theme/generated/global-light-tokens.css
+++ b/packages/ui/src/theme/generated/global-light-tokens.css
@@ -13,7 +13,14 @@ html {
   --color-amber-700: color(display-p3 0.4327 0.2812 0.1347);
   --color-amber-800: color(display-p3 0.2643 0.1753 0.09139);
   --color-amber-900: color(display-p3 0.1121 0.07777 0.04646);
-  --color-background: color(display-p3 0.9738 0.9799 0.9872);
+  --color-background-base: color(display-p3 0.8264 0.8324 0.8394);
+  --color-background-bottom: color(display-p3 0.6765 0.6823 0.689);
+  --color-background-floating: color(display-p3 0.9424 0.9485 0.9557);
+  --color-background-overlay: color(display-p3 0.9034 0.9095 0.9166);
+  --color-background-raised: color(display-p3 0.8648 0.8708 0.8779);
+  --color-background-sunken: color(display-p3 0.7758 0.7817 0.7887);
+  --color-background-top: color(display-p3 0.9817 0.9878 0.9951);
+  --color-background: color(display-p3 0.8264 0.8324 0.8394);
   --color-badge-background-accepted: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-comment: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-compliant: color(display-p3 0.7403 0.8486 0.7417);
@@ -54,7 +61,14 @@ html {
   --color-blue-700: color(display-p3 0.1442 0.2013 0.4303);
   --color-blue-800: color(display-p3 0.1017 0.1411 0.2832);
   --color-blue-900: color(display-p3 0.06177 0.08243 0.1475);
-  --color-border: color(display-p3 0.8698 0.8698 0.8698);
+  --color-border-base: color(display-p3 0.7432 0.7432 0.7432);
+  --color-border-bottom: color(display-p3 0.6158 0.6214 0.6281);
+  --color-border-floating: color(display-p3 0.8011 0.807 0.814);
+  --color-border-overlay: color(display-p3 0.8011 0.807 0.814);
+  --color-border-raised: color(display-p3 0.7383 0.7441 0.751);
+  --color-border-sunken: color(display-p3 0.7432 0.7432 0.7432);
+  --color-border-top: color(display-p3 0.8011 0.807 0.814);
+  --color-border: color(display-p3 0.7432 0.7432 0.7432);
   --color-brand-green: color(display-p3 0.4374 0.6383 0.4134);
   --color-brand-primary: color(display-p3 0.7319 0.6108 0.8873);
   --color-brand-red: color(display-p3 0.8114 0.4167 0.3761);
diff --git a/packages/ui/src/theme/generated/light-tokens.css b/packages/ui/src/theme/generated/light-tokens.css
index e8fa96f1..0833c568 100644
--- a/packages/ui/src/theme/generated/light-tokens.css
+++ b/packages/ui/src/theme/generated/light-tokens.css
@@ -13,7 +13,14 @@
   --color-amber-700: color(display-p3 0.4327 0.2812 0.1347);
   --color-amber-800: color(display-p3 0.2643 0.1753 0.09139);
   --color-amber-900: color(display-p3 0.1121 0.07777 0.04646);
-  --color-background: color(display-p3 0.9738 0.9799 0.9872);
+  --color-background-base: color(display-p3 0.8264 0.8324 0.8394);
+  --color-background-bottom: color(display-p3 0.6765 0.6823 0.689);
+  --color-background-floating: color(display-p3 0.9424 0.9485 0.9557);
+  --color-background-overlay: color(display-p3 0.9034 0.9095 0.9166);
+  --color-background-raised: color(display-p3 0.8648 0.8708 0.8779);
+  --color-background-sunken: color(display-p3 0.7758 0.7817 0.7887);
+  --color-background-top: color(display-p3 0.9817 0.9878 0.9951);
+  --color-background: color(display-p3 0.8264 0.8324 0.8394);
   --color-badge-background-accepted: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-comment: color(display-p3 0.795 0.7755 0.9866);
   --color-badge-background-compliant: color(display-p3 0.7403 0.8486 0.7417);
@@ -54,7 +61,14 @@
   --color-blue-700: color(display-p3 0.1442 0.2013 0.4303);
   --color-blue-800: color(display-p3 0.1017 0.1411 0.2832);
   --color-blue-900: color(display-p3 0.06177 0.08243 0.1475);
-  --color-border: color(display-p3 0.8698 0.8698 0.8698);
+  --color-border-base: color(display-p3 0.7432 0.7432 0.7432);
+  --color-border-bottom: color(display-p3 0.6158 0.6214 0.6281);
+  --color-border-floating: color(display-p3 0.8011 0.807 0.814);
+  --color-border-overlay: color(display-p3 0.8011 0.807 0.814);
+  --color-border-raised: color(display-p3 0.7383 0.7441 0.751);
+  --color-border-sunken: color(display-p3 0.7432 0.7432 0.7432);
+  --color-border-top: color(display-p3 0.8011 0.807 0.814);
+  --color-border: color(display-p3 0.7432 0.7432 0.7432);
   --color-brand-green: color(display-p3 0.4374 0.6383 0.4134);
   --color-brand-primary: color(display-p3 0.7319 0.6108 0.8873);
   --color-brand-red: color(display-p3 0.8114 0.4167 0.3761);
diff --git a/packages/ui/src/theme/generated/tailwind-tokens.css b/packages/ui/src/theme/generated/tailwind-tokens.css
index dd27cea4..9af08494 100644
--- a/packages/ui/src/theme/generated/tailwind-tokens.css
+++ b/packages/ui/src/theme/generated/tailwind-tokens.css
@@ -11,6 +11,13 @@
   --color-amber-700: var(--color-amber-700);
   --color-amber-800: var(--color-amber-800);
   --color-amber-900: var(--color-amber-900);
+  --color-background-base: var(--color-background-base);
+  --color-background-bottom: var(--color-background-bottom);
+  --color-background-floating: var(--color-background-floating);
+  --color-background-overlay: var(--color-background-overlay);
+  --color-background-raised: var(--color-background-raised);
+  --color-background-sunken: var(--color-background-sunken);
+  --color-background-top: var(--color-background-top);
   --color-background: var(--color-background);
   --color-badge-background-accepted: var(--color-badge-background-accepted);
   --color-badge-background-comment: var(--color-badge-background-comment);
@@ -52,6 +59,13 @@
   --color-blue-700: var(--color-blue-700);
   --color-blue-800: var(--color-blue-800);
   --color-blue-900: var(--color-blue-900);
+  --color-border-base: var(--color-border-base);
+  --color-border-bottom: var(--color-border-bottom);
+  --color-border-floating: var(--color-border-floating);
+  --color-border-overlay: var(--color-border-overlay);
+  --color-border-raised: var(--color-border-raised);
+  --color-border-sunken: var(--color-border-sunken);
+  --color-border-top: var(--color-border-top);
   --color-border: var(--color-border);
   --color-brand-green: var(--color-brand-green);
   --color-brand-primary: var(--color-brand-primary);
diff --git a/packages/ui/src/theme/theme-base.css b/packages/ui/src/theme/theme-base.css
index 750b58a6..afaf48f4 100644
--- a/packages/ui/src/theme/theme-base.css
+++ b/packages/ui/src/theme/theme-base.css
@@ -21,6 +21,12 @@
   --z-index-dropdown: 50;
   --z-index-highest: 9999;
 
+  --color-shadow-sunken: rgba(0, 0, 0, 0.05);
+  --color-shadow-base: transparent;
+  --color-shadow-raised: rgba(0, 0, 0, 0.05);
+  --color-shadow-overlay: rgba(0, 0, 0, 0.1);
+  --color-shadow-floating: rgba(0, 0, 0, 0.15);
+
   /* Animation */
   --animate-grow-in: grow-in 800ms ease-in-out backwards;
   --animate-fade-in: fade-in 800ms ease-in-out backwards;