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..7e7fe7bb 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,59 @@ 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">
+        <DisplayFieldWithSlotExample
+          truncate={truncate}
+          copy={copy}
+          prefix={prefix}
+          variant={variant}
+          elevation={elevation}
+        />
+        <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/sidebar.astro b/packages/demo/src/components/sidebar.astro
index 4632df79..57304b21 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) => ({
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..7e73f504 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 (default)
+
+<Icon
+  icon="Shield"
+  client:only="react"
+  background="square"
+  elevation={ELEVATION.SUNKEN}
+/>
+
+### Base
+
+<Icon
+  icon="Shield"
+  client:only="react"
+  background="square"
+  elevation={ELEVATION.BASE}
+/>
+
+### Raised
+
+<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..9874fcdb
--- /dev/null
+++ b/packages/demo/src/pages/getting-started/elevation.mdx
@@ -0,0 +1,105 @@
+---
+layout: "@demo/layouts/mdx-layout.astro"
+heading: "Elevation"
+---
+
+import { Icon, Card, CardContent } from "@eqtylab/equality";
+import { DisplayFieldWithSlotDemo } from "@demo/components/demo/display-field";
+import { TooltipDemo } from "@demo/components/demo/tooltip";
+import { DialogWithTableDemo } from "@demo/components/demo/dialog";
+import { ELEVATION } from "@eqtylab/equality";
+
+## What is Elevation
+
+Elevation defines how components are layered and how much visual emphasis they carry.
+
+Generally, nested elevations should only ever be one level away from one another.
+
+## Types of Elevation
+
+### Sunken
+
+A low-emphasis elevation that recedes into the background. Ideal for secondary or decorative elements that should feel embedded rather than prominent.
+
+<Icon
+  icon="Shield"
+  client:only="react"
+  background="square"
+  elevation={ELEVATION.SUNKEN}
+/>
+
+### Base
+
+A neutral elevation that forms the baseline of the interface. Most components will use this level in standard layouts.
+
+<DisplayFieldWithSlotDemo
+  prefix="Key"
+  client:only="react"
+  elevation={ELEVATION.BASE}
+/>
+
+### Raised
+
+A higher-priority elevation used to lift important content out of the page flow without breaking it.
+
+<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
+
+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..c82ccf26 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,54 @@
           "hex": "#2E2E2E"
         }
       },
+      "border-base": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "display-p3",
+          "components": [0.1792, 0.1792, 0.1792],
+          "hex": "#2E2E2E"
+        }
+      },
+      "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 +919,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.7383, 0.7441, 0.751],
+          "hex": "#BCBEC0"
+        }
+      },
+      "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 +1311,56 @@
         "$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-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..35eccee7 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.73829 0.74414 0.75102 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.67651 0.68226 0.68903 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/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..b3302635 100644
--- a/packages/ui/src/components/display-field/display-field.module.css
+++ b/packages/ui/src/components/display-field/display-field.module.css
@@ -61,9 +61,61 @@
 
 .slot {
   @apply -mt-(--radius-md) pt-(--radius-md) relative;
-  @apply bg-card-background rounded-b-md;
+  @apply rounded-b-md;
 }
 
 .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-sunken;
+}
+.display-field--sunken .slot {
+  @apply bg-background-bottom border-border-bottom;
+}
+
+.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..7b812960 100644
--- a/packages/ui/src/components/icon/icon.module.css
+++ b/packages/ui/src/components/icon/icon.module.css
@@ -7,7 +7,7 @@
 }
 
 .icon-container:not(.background--transparent) {
-  @apply bg-greyscale-800;
+  @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;
+}
+
+.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..86753d32 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.SUNKEN);
+
 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.SUNKEN, ...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/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/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..119af1e8 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.7383 0.7441 0.751);
+  --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,13 @@
   --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-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 +248,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 +286,12 @@
   --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-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..dfdd7002 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,12 @@
   --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-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..b2a9f864 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,12 @@ 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-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..657f7fd3 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.7383 0.7441 0.751);
+  --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,13 @@ 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-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..b7d92138 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.7383 0.7441 0.751);
+  --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,13 @@
   --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-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..7501cdfd 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,12 @@
   --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-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..d6aa8f1e 100644
--- a/packages/ui/src/theme/theme-base.css
+++ b/packages/ui/src/theme/theme-base.css
@@ -21,6 +21,18 @@
   --z-index-dropdown: 50;
   --z-index-highest: 9999;
 
+  /* TODO: TEMP ELEVATION COLORS - NEEDS ADJUSTING AND TO BE PUT INTO TOKENS INSTEAD OF BEING PLACED HERE */
+  --color-background-bottom: var(--color-card-background);
+  /* Extra for further down subcomponents */
+
+  --color-border-bottom: transparent; /* Extra for further down subcomponents */
+
+  --color-shadow-sunken: transparent;
+  --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;