diff --git a/components/dashboard/src/components/ContextMenu.tsx b/components/dashboard/src/components/ContextMenu.tsx
index 194070519ad2c8..55d955c6f07e70 100644
--- a/components/dashboard/src/components/ContextMenu.tsx
+++ b/components/dashboard/src/components/ContextMenu.tsx
@@ -184,7 +184,7 @@ export const MenuEntry: FunctionComponent<MenuEntryProps> = ({
                 customFontStyle || "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100",
                 {
                     "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700": clickable,
-                    "bg-gray-50 dark:bg-gray-800": active,
+                    "bg-pk-surface-secondary": active,
                     "rounded-t-lg": isFirst,
                     "rounded-b-lg": isLast,
                     "border-b border-gray-200 dark:border-gray-800": separator,
diff --git a/components/dashboard/src/components/EmptyMessage.tsx b/components/dashboard/src/components/EmptyMessage.tsx
index 7a773d82419571..4da20218788e6c 100644
--- a/components/dashboard/src/components/EmptyMessage.tsx
+++ b/components/dashboard/src/components/EmptyMessage.tsx
@@ -5,7 +5,7 @@
  */
 
 import classNames from "classnames";
-import { FC, ReactNode, useCallback } from "react";
+import { FC, ReactNode } from "react";
 import { Button } from "@podkit/buttons/Button";
 import { Heading2, Subheading } from "./typography/headings";
 
@@ -17,20 +17,17 @@ type Props = {
     className?: string;
 };
 export const EmptyMessage: FC<Props> = ({ title, subtitle, buttonText, onClick, className }) => {
-    const handleClick = useCallback(() => {
-        onClick && onClick();
-    }, [onClick]);
     return (
         <div
             className={classNames(
-                "w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-14",
+                "w-full flex justify-center mt-2 rounded-xl bg-pk-surface-secondary px-4 py-14",
                 className,
             )}
         >
             <div className="flex flex-col justify-center items-center text-center space-y-4">
-                {title && <Heading2 color="light">{title}</Heading2>}
+                {title && <Heading2 className="text-pk-content-invert-secondary">{title}</Heading2>}
                 {subtitle && <Subheading className="max-w-md">{subtitle}</Subheading>}
-                {buttonText && <Button onClick={handleClick}>{buttonText}</Button>}
+                {buttonText && <Button onClick={onClick}>{buttonText}</Button>}
             </div>
         </div>
     );
diff --git a/components/dashboard/src/components/ItemsList.tsx b/components/dashboard/src/components/ItemsList.tsx
index 3457f31e57fe02..285a91d95127d2 100644
--- a/components/dashboard/src/components/ItemsList.tsx
+++ b/components/dashboard/src/components/ItemsList.tsx
@@ -4,6 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import { cn } from "@podkit/lib/cn";
 import ContextMenu, { ContextMenuEntry } from "./ContextMenu";
 
 export function ItemsList(props: { children?: React.ReactNode; className?: string }) {
@@ -18,14 +19,17 @@ export function Item(props: { children?: React.ReactNode; className?: string; he
     }
 
     // cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
-    const solidClassName = props.solid ? "bg-gray-100 dark:bg-gray-800" : "hover:bg-gray-100 dark:hover:bg-gray-800";
+    const solidClassName = props.solid ? "bg-pk-surface-secondary" : "hover:bg-gray-100 dark:hover:bg-gray-800";
     const headerClassName = "text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800";
     const notHeaderClassName = "rounded-xl focus:bg-kumquat-light " + solidClassName;
     return (
         <div
-            className={`${layoutClassName} w-full p-3 transition ease-in-out ${
-                props.header ? headerClassName : notHeaderClassName
-            } ${props.className || ""}`}
+            className={cn(
+                layoutClassName,
+                "w-full p-3 transition ease-in-out",
+                props.header ? headerClassName : notHeaderClassName,
+                props.className,
+            )}
         >
             {props.children}
         </div>
@@ -50,9 +54,11 @@ export function ItemFieldContextMenu(props: {
 
     return (
         <div
-            className={`flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer min-w-8 w-8 ${cls} ${
-                props.className || ""
-            }`}
+            className={cn(
+                "flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer min-w-8 w-8",
+                cls,
+                props.className,
+            )}
         >
             <ContextMenu changeMenuState={props.changeMenuState} menuEntries={props.menuEntries} />
         </div>
diff --git a/components/dashboard/src/components/PrebuildLogs.tsx b/components/dashboard/src/components/PrebuildLogs.tsx
index e2a9cd21c25980..1a0c3b1830fbf8 100644
--- a/components/dashboard/src/components/PrebuildLogs.tsx
+++ b/components/dashboard/src/components/PrebuildLogs.tsx
@@ -171,7 +171,7 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
     }, [logsEmitter, props.workspaceId, workspace?.instanceId, workspace?.phase]);
 
     return (
-        <div className="rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-800 flex flex-col mb-8">
+        <div className="rounded-xl overflow-hidden bg-pk-surface-secondary flex flex-col mb-8">
             <div className="h-96 flex">
                 <Suspense fallback={<div />}>
                     <WorkspaceLogs
@@ -182,7 +182,7 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
                     />
                 </Suspense>
             </div>
-            <div className="w-full bottom-0 h-20 px-6 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 flex flex-row items-center space-x-2">
+            <div className="w-full bottom-0 h-20 px-6 bg-pk-surface-secondary border-t border-gray-200 dark:border-gray-600 flex flex-row items-center space-x-2">
                 {prebuild && <PrebuildStatusOld prebuild={prebuild} />}
                 <div className="flex-grow" />
                 {props.children}
diff --git a/components/dashboard/src/components/UsageBasedBillingConfig.tsx b/components/dashboard/src/components/UsageBasedBillingConfig.tsx
index 8f8995237db163..c8a95a358903d8 100644
--- a/components/dashboard/src/components/UsageBasedBillingConfig.tsx
+++ b/components/dashboard/src/components/UsageBasedBillingConfig.tsx
@@ -240,21 +240,21 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
                     </Alert>
                 )}
                 {showSpinner && (
-                    <div className="flex flex-col mt-4 h-52 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
-                        <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Balance</div>
+                    <div className="flex flex-col mt-4 h-52 p-4 rounded-xl bg-pk-surface-secondary">
+                        <div className="uppercase text-sm text-pk-content-tertiary">Balance</div>
                         <Spinner className="m-2 animate-spin" />
                     </div>
                 )}
                 {showBalance && (
-                    <div className="flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
-                        <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Balance</div>
+                    <div className="flex flex-col mt-4 p-4 rounded-xl bg-pk-surface-secondary">
+                        <div className="uppercase text-sm text-pk-content-tertiary">Balance</div>
                         <div className="mt-1 text-xl font-semibold flex-grow">
                             <span className="text-gray-900 dark:text-gray-100">
                                 {balance.toLocaleString(undefined, { maximumFractionDigits: 2 })}
                             </span>
-                            <span className="text-gray-400 dark:text-gray-500"> Credits</span>
+                            <span className="text-pk-content-tertiary"> Credits</span>
                         </div>
-                        <div className="mt-4 text-sm flex text-gray-400 dark:text-gray-500">
+                        <div className="mt-4 text-sm flex text-pk-content-tertiary">
                             <span className="flex-grow">
                                 {typeof currentUsage === "number" &&
                                     typeof usageLimit === "number" &&
@@ -273,10 +273,10 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
                         <div className="mt-2 flex">
                             <ProgressBar value={percentage} />
                         </div>
-                        <div className="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 -m-4 p-4 mt-4 rounded-b-xl flex">
+                        <div className="bg-pk-surface-secondary border-t border-gray-200 dark:border-gray-700 -m-4 p-4 mt-4 rounded-b-xl flex">
                             <div className="flex-grow">
-                                <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Period</div>
-                                <div className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                                <div className="uppercase text-sm text-pk-content-tertiary">Current Period</div>
+                                <div className="text-sm font-medium text-pk-content-primary">
                                     <span title={billingCycleFrom.toDate().toUTCString().replace("GMT", "UTC")}>
                                         {billingCycleFrom.format("MMM D, YYYY")}
                                     </span>{" "}
@@ -302,29 +302,27 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
                 )}
                 {showUpgradeTeam && (
                     <>
-                        <div className="flex flex-col mt-4 p-4 rounded-t-xl bg-gray-50 dark:bg-gray-800">
-                            <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
-                            <div className="mt-1 text-xl font-semibold flex-grow text-gray-600 dark:text-gray-400">
+                        <div className="flex flex-col mt-4 p-4 rounded-t-xl bg-pk-surface-secondary">
+                            <div className="uppercase text-sm text-pk-content-tertiary">Current Plan</div>
+                            <div className="mt-1 text-xl font-semibold flex-grow text-pk-content-secondary">
                                 {freePlanName}
                             </div>
-                            <div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
+                            <div className="mt-4 flex space-x-1 text-pk-content-tertiary">
                                 <div className="m-0.5 w-5 h-5 text-orange-500">
                                     <Check />
                                 </div>
                                 <div className="flex flex-col w-96">
-                                    <span className="font-bold text-gray-500 dark:text-gray-400">
-                                        {usageLimit} credits
-                                    </span>
+                                    <span className="font-bold text-pk-content-secondary">{usageLimit} credits</span>
                                     <span>{usageLimit / 10} hours of Standard workspace usage.</span>
                                 </div>
                             </div>
                         </div>
-                        <div className="flex flex-col p-4 rounded-b-xl bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
-                            <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Upgrade Plan</div>
-                            <div className="mt-1 text-xl font-semibold flex-grow text-gray-800 dark:text-gray-100">
+                        <div className="flex flex-col p-4 rounded-b-xl bg-pk-surface-secondary border-t border-gray-200 dark:border-gray-700">
+                            <div className="uppercase text-sm text-pk-content-tertiary">Upgrade Plan</div>
+                            <div className="mt-1 text-xl font-semibold flex-grow text-pk-content-primary">
                                 Pay-as-you-go
                             </div>
-                            <div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
+                            <div className="mt-4 flex space-x-1 text-pk-content-tertiary">
                                 <div className="flex flex-col">
                                     <span>{priceInformation}</span>
                                 </div>
@@ -346,12 +344,12 @@ export default function UsageBasedBillingConfig({ hideSubheading = false }: Prop
                 )}
                 {showManageBilling && (
                     <div className="max-w-xl flex space-x-4">
-                        <div className="flex-grow flex flex-col mt-4 p-4 rounded-xl bg-gray-50 dark:bg-gray-800">
-                            <div className="uppercase text-sm text-gray-400 dark:text-gray-500">Current Plan</div>
-                            <div className="mt-1 text-xl font-semibold flex-grow text-gray-800 dark:text-gray-100">
+                        <div className="flex-grow flex flex-col mt-4 p-4 rounded-xl bg-pk-surface-secondary">
+                            <div className="uppercase text-sm text-pk-content-tertiary">Current Plan</div>
+                            <div className="mt-1 text-xl font-semibold flex-grow text-pk-content-primary">
                                 Pay-as-you-go
                             </div>
-                            <div className="mt-4 flex space-x-1 text-gray-400 dark:text-gray-500">
+                            <div className="mt-4 flex space-x-1 text-pk-content-tertiary">
                                 <Check className="m-0.5 w-8 h-5 text-orange-500" />
                                 <div className="flex flex-col">
                                     <span>{priceInformation}</span>
diff --git a/components/dashboard/src/components/typography/headings.tsx b/components/dashboard/src/components/typography/headings.tsx
index e9631a0e0eefe7..b45a41cabde121 100644
--- a/components/dashboard/src/components/typography/headings.tsx
+++ b/components/dashboard/src/components/typography/headings.tsx
@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import classNames from "classnames";
+import { cn } from "@podkit/lib/cn";
 import { FC } from "react";
 
 type HeadingProps = {
@@ -18,8 +18,8 @@ export const Heading1: FC<HeadingProps> = ({ id, color, tracking, className, chi
     return (
         <h1
             id={id}
-            className={classNames(
-                getHeadingColor(color),
+            className={cn(
+                "text-pk-content-primary",
                 getTracking(tracking),
                 "font-bold text-4xl leading-normal",
                 className,
@@ -34,7 +34,7 @@ export const Heading2: FC<HeadingProps> = ({ id, color, tracking, className, chi
     return (
         <h2
             id={id}
-            className={classNames(getHeadingColor(color), getTracking(tracking), "font-semibold text-2xl", className)}
+            className={cn("text-pk-content-primary", getTracking(tracking), "font-semibold text-2xl", className)}
         >
             {children}
         </h2>
@@ -45,7 +45,7 @@ export const Heading3: FC<HeadingProps> = ({ id, color, tracking, className, chi
     return (
         <h3
             id={id}
-            className={classNames(getHeadingColor(color), getTracking(tracking), "font-semibold text-lg", className)}
+            className={cn("text-pk-content-primary", getTracking(tracking), "font-semibold text-lg", className)}
         >
             {children}
         </h3>
@@ -55,16 +55,12 @@ export const Heading3: FC<HeadingProps> = ({ id, color, tracking, className, chi
 // Intended to be placed beneath a heading to provide more context
 export const Subheading: FC<HeadingProps> = ({ id, tracking, className, children }) => {
     return (
-        <p id={id} className={classNames("text-base text-pk-content-secondary", getTracking(tracking), className)}>
+        <p id={id} className={cn("text-base text-pk-content-secondary", getTracking(tracking), className)}>
             {children}
         </p>
     );
 };
 
-function getHeadingColor(color: HeadingProps["color"] = "dark") {
-    return color === "dark" ? "text-gray-800 dark:text-gray-100" : "text-gray-500 dark:text-gray-400";
-}
-
 function getTracking(tracking: HeadingProps["tracking"]) {
     if (tracking === "wide") {
         return "tracking-wide";
diff --git a/components/dashboard/src/feedback-form/FeedbackComponent.tsx b/components/dashboard/src/feedback-form/FeedbackComponent.tsx
index ac23fc6369d45a..955ed8db79b341 100644
--- a/components/dashboard/src/feedback-form/FeedbackComponent.tsx
+++ b/components/dashboard/src/feedback-form/FeedbackComponent.tsx
@@ -84,7 +84,7 @@ function FeedbackComponent(props: {
                 <div
                     className={
                         "flex flex-col justify-center px-6 py-4 border-gray-200 dark:border-gray-800 " +
-                        (props.isError ? "mt-20 bg-gray-100 dark:bg-gray-800 rounded-xl" : "border-t")
+                        (props.isError ? "mt-20 bg-pk-surface-secondary rounded-xl" : "border-t")
                     }
                 >
                     <p
@@ -105,16 +105,14 @@ function FeedbackComponent(props: {
                 <div
                     className={
                         "flex flex-col px-6 py-4 border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 " +
-                        (props.isError
-                            ? "w-96 mt-6 bg-gray-100 dark:bg-gray-800 rounded-xl"
-                            : "-mx-6 border-t border-b")
+                        (props.isError ? "w-96 mt-6 bg-pk-surface-secondary rounded-xl" : "-mx-6 border-t border-b")
                     }
                 >
                     <div className="relative">
                         <textarea
                             style={{ height: "160px", borderRadius: "6px" }}
                             autoFocus
-                            className="w-full resize-none text-gray-400 dark:text-gray-400 focus:ring-0 focus:border-gray-400 dark:focus:border-gray-400 rounded-md border dark:bg-gray-800 dark:border-gray-500 border-gray-500"
+                            className="w-full resize-none text-pk-content-secondary focus:ring-0 focus:border-gray-400 dark:focus:border-gray-400 rounded-md border bg-pk-surface-secondary border-pk-border-base"
                             name="name"
                             value={text}
                             placeholder="Have more feedback?"
@@ -122,7 +120,7 @@ function FeedbackComponent(props: {
                         />
                     </div>
                     <div>
-                        <p className="text-gray-500">
+                        <p className="mt-2 text-pk-content-secondary">
                             {" "}
                             By submitting this form you acknowledge that you have read and understood our{" "}
                             <a className="gp-link" target="gitpod-privacy" href="https://www.gitpod.io/privacy/">
@@ -148,7 +146,7 @@ function FeedbackComponent(props: {
                 <div
                     className={
                         "flex flex-col px-6 py-4 border-gray-200 dark:border-gray-800 " +
-                        (props.isError ? "mt-20 bg-gray-100 dark:bg-gray-800 rounded-xl" : "")
+                        (props.isError ? "mt-20 bg-pk-surface-secondary rounded-xl" : "")
                     }
                 >
                     <p className={"text-center text-base " + (props.isError ? "text-gray-400" : "text-gray-500")}>
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index ec49e428d231fb..073dbfe20affec 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -16,7 +16,7 @@
         /* Setup RGB color channel variables */
         --black: 22 22 22; /* #161616 */
         --white: 255 255 255; /* #FFFFFF */
-        /* TODO: determine if these are the reds we want - need to have correct constrast */
+        /* TODO: determine if these are the reds we want - need to have correct contrast */
         --red-600: 220 38 38;
         --red-400: 248 68 68;
         --gray-900: 18 16 12; /* #12100C */
@@ -39,7 +39,7 @@
         --content-tertiary: var(--gray-400);
         --content-disabled: var(--gray-450);
         --content-invert-primary: var(--gray-200);
-        --content-invert-secondary: var(--gray-300);
+        --content-invert-secondary: var(--gray-400);
         --content-danger: var(--red-600);
 
         /* Surfaces */
@@ -65,7 +65,7 @@
         --content-tertiary: var(--gray-500);
         --content-disabled: var(--gray-600);
         --content-invert-primary: var(--gray-900);
-        --content-invert-secondary: var(--gray-600);
+        --content-invert-secondary: var(--gray-450);
         --content-danger: var(--red-400);
 
         /* Surfaces */
diff --git a/components/dashboard/src/menu/OrganizationSelector.tsx b/components/dashboard/src/menu/OrganizationSelector.tsx
index 225c8ec852eb1d..cb8ee39433bc7d 100644
--- a/components/dashboard/src/menu/OrganizationSelector.tsx
+++ b/components/dashboard/src/menu/OrganizationSelector.tsx
@@ -16,6 +16,7 @@ import { isAllowedToCreateOrganization } from "@gitpod/public-api-common/lib/use
 import { OrganizationRole } from "@gitpod/public-api/lib/gitpod/v1/organization_pb";
 import { useInstallationConfiguration } from "../data/installation/default-workspace-image-query";
 import { useFeatureFlag } from "../data/featureflag-query";
+import { PlusIcon } from "lucide-react";
 
 export default function OrganizationSelector() {
     const user = useCurrentUser();
@@ -143,16 +144,9 @@ export default function OrganizationSelector() {
                   {
                       title: "Create a new organization",
                       customContent: (
-                          <div className="w-full text-gray-500 flex items-center">
+                          <div className="w-full text-pk-content-secondary flex items-center">
                               <span className="flex-1">New Organization</span>
-                              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" className="w-3.5">
-                                  <path
-                                      fill="currentColor"
-                                      fillRule="evenodd"
-                                      d="M7 0a1 1 0 011 1v5h5a1 1 0 110 2H8v5a1 1 0 11-2 0V8H1a1 1 0 010-2h5V1a1 1 0 011-1z"
-                                      clipRule="evenodd"
-                                  />
-                              </svg>
+                              <PlusIcon size={20} className="size-3.5" />
                           </div>
                       ),
                       link: "/orgs/new",
diff --git a/components/dashboard/src/onboarding/LinkedInBanner.tsx b/components/dashboard/src/onboarding/LinkedInBanner.tsx
index d489d2163c6b30..09d827416ece2b 100644
--- a/components/dashboard/src/onboarding/LinkedInBanner.tsx
+++ b/components/dashboard/src/onboarding/LinkedInBanner.tsx
@@ -64,7 +64,7 @@ export const LinkedInBanner: FC<Props> = ({ onSuccess }) => {
                 className={classNames(
                     "mt-6 p-6",
                     "border-2 border-dashed rounded-md space-y-4",
-                    "bg-gray-50 dark:bg-gray-800 dark:border-gray-600",
+                    "bg-pk-surface-secondary dark:border-gray-600",
                 )}
             >
                 <div className="flex items-center justify-center space-x-6">
diff --git a/components/dashboard/src/prebuilds/list/PrebuildListEmptyState.tsx b/components/dashboard/src/prebuilds/list/PrebuildListEmptyState.tsx
index 94db67efecd65b..f2e651c9eaf5c3 100644
--- a/components/dashboard/src/prebuilds/list/PrebuildListEmptyState.tsx
+++ b/components/dashboard/src/prebuilds/list/PrebuildListEmptyState.tsx
@@ -13,7 +13,7 @@ type Props = {
 };
 export const PrebuildListEmptyState = ({ onTriggerPrebuild }: Props) => {
     return (
-        <div className={cn("w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-20")}>
+        <div className={cn("w-full flex justify-center mt-2 rounded-xl bg-pk-surface-secondary px-4 py-20")}>
             <div className="flex flex-col justify-center items-center text-center space-y-4">
                 <Heading2>No prebuilds yet</Heading2>
                 <Subheading className="max-w-md flex flex-col items-center gap-4">
diff --git a/components/dashboard/src/prebuilds/list/PrebuildTable.tsx b/components/dashboard/src/prebuilds/list/PrebuildTable.tsx
index 76729142d84db8..c5eff273a2117d 100644
--- a/components/dashboard/src/prebuilds/list/PrebuildTable.tsx
+++ b/components/dashboard/src/prebuilds/list/PrebuildTable.tsx
@@ -126,7 +126,7 @@ export const PrebuildsTable: FC<Props> = ({
                 ) : (
                     <div
                         className={cn(
-                            "w-full flex justify-center rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-10 animate-fade-in-fast",
+                            "w-full flex justify-center rounded-xl bg-pk-surface-secondary px-4 py-10 animate-fade-in-fast",
                         )}
                     >
                         <Subheading className="max-w-md">No results found. Try adjusting your search terms.</Subheading>
diff --git a/components/dashboard/src/repositories/list/RepoListEmptyState.tsx b/components/dashboard/src/repositories/list/RepoListEmptyState.tsx
index 4285fe85444cce..40a2b793e201cd 100644
--- a/components/dashboard/src/repositories/list/RepoListEmptyState.tsx
+++ b/components/dashboard/src/repositories/list/RepoListEmptyState.tsx
@@ -14,7 +14,7 @@ type Props = {
 };
 export const RepoListEmptyState: FC<Props> = ({ onImport }) => {
     return (
-        <div className={cn("w-full flex justify-center mt-2 rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-20")}>
+        <div className={cn("w-full flex justify-center mt-2 rounded-xl bg-pk-surface-secondary px-4 py-20")}>
             <div className="flex flex-col justify-center items-center text-center space-y-4">
                 <Heading2>No added repositories yet</Heading2>
                 <Subheading className="max-w-md">
diff --git a/components/dashboard/src/repositories/list/RepositoryTable.tsx b/components/dashboard/src/repositories/list/RepositoryTable.tsx
index 9c43bee08dc3a8..b865a07b7405e0 100644
--- a/components/dashboard/src/repositories/list/RepositoryTable.tsx
+++ b/components/dashboard/src/repositories/list/RepositoryTable.tsx
@@ -125,7 +125,7 @@ export const RepositoryTable: FC<Props> = ({
                 ) : (
                     <div
                         className={cn(
-                            "w-full flex justify-center rounded-xl bg-gray-100 dark:bg-gray-800 px-4 py-10 animate-fade-in-fast",
+                            "w-full flex justify-center rounded-xl bg-pk-surface-secondary px-4 py-10 animate-fade-in-fast",
                         )}
                     >
                         <Subheading className="max-w-md">No results found. Try adjusting your search terms.</Subheading>
diff --git a/components/dashboard/src/start/StartWorkspace.tsx b/components/dashboard/src/start/StartWorkspace.tsx
index e49bc754073cd5..c7e1800dc0f660 100644
--- a/components/dashboard/src/start/StartWorkspace.tsx
+++ b/components/dashboard/src/start/StartWorkspace.tsx
@@ -585,7 +585,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                     statusMessage = (
                         <div>
                             <p className="text-base text-gray-400">Opening Workspace …</p>
-                            <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 mb-2 bg-gray-100 dark:bg-gray-800">
+                            <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 mb-2 bg-pk-surface-secondary">
                                 <div className="rounded-full w-3 h-3 text-sm bg-green-500">&nbsp;</div>
                                 <div>
                                     <p className="text-gray-700 dark:text-gray-200 font-semibold w-56 truncate">
@@ -690,7 +690,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                 phase = StartPhase.Stopping;
                 statusMessage = (
                     <div>
-                        <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 bg-gray-100 dark:bg-gray-800">
+                        <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 bg-pk-surface-secondary">
                             <div className="rounded-full w-3 h-3 text-sm bg-kumquat-ripe">&nbsp;</div>
                             <div>
                                 <p className="text-gray-700 dark:text-gray-200 font-semibold w-56 truncate">
@@ -735,7 +735,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                 }
                 statusMessage = (
                     <div>
-                        <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 mb-2 bg-gray-100 dark:bg-gray-800">
+                        <div className="flex space-x-3 items-center text-left rounded-xl m-auto px-4 h-16 w-72 mt-4 mb-2 bg-pk-surface-secondary">
                             <div className="rounded-full w-3 h-3 text-sm bg-gray-300">&nbsp;</div>
                             <div>
                                 <p className="text-gray-700 dark:text-gray-200 font-semibold w-56 truncate">
diff --git a/components/dashboard/src/teams/NewTeam.tsx b/components/dashboard/src/teams/NewTeam.tsx
index 46fc6959806f35..a0f26e62fa7c4d 100644
--- a/components/dashboard/src/teams/NewTeam.tsx
+++ b/components/dashboard/src/teams/NewTeam.tsx
@@ -13,8 +13,11 @@ import { useDocumentTitle } from "../hooks/use-document-title";
 import { organizationClient } from "../service/public-api";
 import { Button } from "@podkit/buttons/Button";
 import { TextInputField } from "../components/forms/TextInputField";
+import { cn } from "@podkit/lib/cn";
 
 export default function NewTeamPage() {
+    useDocumentTitle("New Organization");
+
     const invalidateOrgs = useOrganizationsInvalidator();
     const [name, setName] = useState("");
 
@@ -39,8 +42,6 @@ export default function NewTeamPage() {
         }
     };
 
-    useDocumentTitle("New Organization");
-
     return (
         <div className="flex flex-col w-96 mt-24 mx-auto items-center">
             <Heading1>New&nbsp;Organization</Heading1>
@@ -49,13 +50,13 @@ export default function NewTeamPage() {
                     Organizations
                 </a>{" "}
                 allow you to manage related{" "}
-                <a href="https://www.gitpod.io/docs/configure/projects" className="gp-link">
-                    projects
+                <a href="https://www.gitpod.io/docs/configure/repositories" className="gp-link">
+                    repositories
                 </a>{" "}
                 and collaborate with other members.
             </Subheading>
-            <form className="mt-16" onSubmit={createTeam}>
-                <div className="rounded-xl p-6 bg-gray-50 dark:bg-gray-800">
+            <form className="mt-6 mb-4" onSubmit={createTeam}>
+                <div className="rounded-xl p-6 bg-pk-surface-secondary">
                     <Heading3>You're creating a new organization</Heading3>
                     <Subheading>After creating an organization, you can invite others to join.</Subheading>
 
@@ -63,7 +64,7 @@ export default function NewTeamPage() {
                         label="Organization Name"
                         value={name}
                         autoFocus
-                        className={`w-full${!!creationError ? " error" : ""}`}
+                        className={cn("w-full", { error: !!creationError })}
                         onChange={setName}
                     />
                     {!!creationError && (
diff --git a/components/dashboard/src/teams/TeamOnboarding.tsx b/components/dashboard/src/teams/TeamOnboarding.tsx
index a0e2b7465d3ae5..05c0e0c531c823 100644
--- a/components/dashboard/src/teams/TeamOnboarding.tsx
+++ b/components/dashboard/src/teams/TeamOnboarding.tsx
@@ -81,11 +81,11 @@ export default function TeamOnboardingPage() {
                 <ConfigurationSettingsField>
                     <Heading3>Internal dashboard</Heading3>
                     <Subheading>
-                        The link to your internal dashboard. This link will be shown to your organization members during
-                        the onboarding process. You can disable showing a link by leaving this field empty.
+                        The link to your internal landing page. This link will be shown to your organization members
+                        during the onboarding process. You can disable showing a link by leaving this field empty.
                     </Subheading>
                     <form onSubmit={handleUpdateInternalLink}>
-                        <InputField label="Internal dashboard link" error={undefined} className="mb-4">
+                        <InputField label="Internal landing page link" error={undefined} className="mb-4">
                             <TextInput
                                 value={internalLink}
                                 type="url"
diff --git a/components/dashboard/src/teams/TeamSettings.tsx b/components/dashboard/src/teams/TeamSettings.tsx
index 25d11bbebacc86..8b8e5cc9e5e502 100644
--- a/components/dashboard/src/teams/TeamSettings.tsx
+++ b/components/dashboard/src/teams/TeamSettings.tsx
@@ -303,33 +303,57 @@ export default function TeamSettingsPage() {
                 onClose={close}
                 onConfirm={deleteTeam}
             >
-                <p className="text-base text-gray-500">
-                    You are about to permanently delete <b>{org?.name}</b> including all associated data.
-                </p>
-                <ol className="text-gray-500 text-m list-outside list-decimal">
-                    <li className="ml-5">
-                        All <b>projects</b> added in this organization will be deleted and cannot be restored
-                        afterwards.
-                    </li>
-                    <li className="ml-5">
-                        All <b>members</b> of this organization will lose access to this organization, associated
-                        projects and workspaces.
-                    </li>
-                    <li className="ml-5">Any free credit allowances granted to this organization will be lost.</li>
-                </ol>
-                <p className="pt-4 pb-2 text-gray-600 dark:text-gray-400 text-base font-semibold">
-                    Type <code>{org?.name}</code> to confirm
-                </p>
-                <input
-                    autoFocus
-                    className="w-full"
-                    type="text"
-                    onChange={(e) => setTeamNameToDelete(e.target.value)}
-                ></input>
+                <div className="text-pk-content-secondary">
+                    <p className="text-base">
+                        You are about to permanently delete <b>{org?.name}</b> including all associated data.
+                    </p>
+                    <ol className="text-m list-outside list-decimal">
+                        <li className="ml-5">
+                            All <b>projects</b> added in this organization will be deleted and cannot be restored
+                            afterwards.
+                        </li>
+                        <li className="ml-5">
+                            All <b>members</b> of this organization will lose access to this organization, associated
+                            projects and workspaces.
+                        </li>
+                        <li className="ml-5">Any free credit allowances granted to this organization will be lost.</li>
+                    </ol>
+                    <p className="pt-4 pb-2 text-base font-semibold text-pk-content-secondary">
+                        Type <code>{org?.name}</code> to confirm
+                    </p>
+                    <input
+                        autoFocus
+                        className="w-full"
+                        type="text"
+                        onChange={(e) => setTeamNameToDelete(e.target.value)}
+                    ></input>
+                </div>
             </ConfirmationModal>
         </>
     );
 }
+function parseDockerImage(image: string) {
+    // https://docs.docker.com/registry/spec/api/
+    let registry, repository, tag;
+    let parts = image.split("/");
+
+    if (parts.length > 1 && parts[0].includes(".")) {
+        registry = parts.shift();
+    } else {
+        registry = "docker.io";
+    }
+
+    const remaining = parts.join("/");
+    [repository, tag] = remaining.split(":");
+    if (!tag) {
+        tag = "latest";
+    }
+    return {
+        registry,
+        repository,
+        tag,
+    };
+}
 
 function WorkspaceImageButton(props: {
     settings?: OrganizationSettings;
@@ -337,29 +361,6 @@ function WorkspaceImageButton(props: {
     onClick: () => void;
     disabled?: boolean;
 }) {
-    function parseDockerImage(image: string) {
-        // https://docs.docker.com/registry/spec/api/
-        let registry, repository, tag;
-        let parts = image.split("/");
-
-        if (parts.length > 1 && parts[0].includes(".")) {
-            registry = parts.shift();
-        } else {
-            registry = "docker.io";
-        }
-
-        const remaining = parts.join("/");
-        [repository, tag] = remaining.split(":");
-        if (!tag) {
-            tag = "latest";
-        }
-        return {
-            registry,
-            repository,
-            tag,
-        };
-    }
-
     const image = props.settings?.defaultWorkspaceImage || props.installationDefaultWorkspaceImage || "";
 
     const descList = useMemo(() => {
@@ -386,17 +387,17 @@ function WorkspaceImageButton(props: {
 
     return (
         <InputField disabled={props.disabled} className="w-full max-w-lg">
-            <div className="flex flex-col bg-gray-50 dark:bg-gray-800 p-3 rounded-lg">
+            <div className="flex flex-col bg-pk-surface-secondary p-3 rounded-lg">
                 <div className="flex items-center justify-between">
                     <div className="flex-1 flex items-center overflow-hidden h-8" title={image}>
                         <span className="w-5 h-5 mr-1">
                             <Stack />
                         </span>
-                        <span className="truncate font-medium text-gray-700 dark:text-gray-200">
+                        <span className="truncate font-medium text-pk-content-secondary">
                             {parseDockerImage(image).repository}
                         </span>
                         &nbsp;&middot;&nbsp;
-                        <span className="truncate text-gray-500 dark:text-gray-400">{parseDockerImage(image).tag}</span>
+                        <span className="truncate text-pk-content-tertiary">{parseDockerImage(image).tag}</span>
                     </div>
                     {!props.disabled && (
                         <Button variant="link" onClick={props.onClick}>
@@ -405,7 +406,7 @@ function WorkspaceImageButton(props: {
                     )}
                 </div>
                 {descList.length > 0 && (
-                    <div className="mx-6 text-gray-400 dark:text-gray-500 truncate">{renderedDescription}</div>
+                    <div className="mx-6 text-pk-content-tertiary truncate">{renderedDescription}</div>
                 )}
             </div>
         </InputField>
diff --git a/components/dashboard/src/teams/variables/NamedOrganizationEnvvarItem.tsx b/components/dashboard/src/teams/variables/NamedOrganizationEnvvarItem.tsx
index 32f6c8e05ab770..c30eb9ad5ed0ab 100644
--- a/components/dashboard/src/teams/variables/NamedOrganizationEnvvarItem.tsx
+++ b/components/dashboard/src/teams/variables/NamedOrganizationEnvvarItem.tsx
@@ -15,6 +15,7 @@ import Modal, { ModalBody, ModalFooter, ModalFooterAlert, ModalHeader } from "..
 import { TextInputField } from "../../components/forms/TextInputField";
 import { useToast } from "../../components/toasts/Toasts";
 import { LoadingButton } from "@podkit/buttons/LoadingButton";
+import { MiddleDot } from "../../components/typography/MiddleDot";
 
 type Props = {
     disabled?: boolean;
@@ -47,13 +48,11 @@ export const NamedOrganizationEnvvarItem = ({ disabled, organizationId, name, va
             )}
 
             <InputField disabled={disabled} className="w-full max-w-lg">
-                <div className="flex flex-col bg-gray-50 dark:bg-gray-800 p-3 rounded-lg">
+                <div className="flex flex-col bg-pk-surface-secondary p-3 rounded-lg">
                     <div className="flex items-center justify-between">
                         <div className="flex-1 flex items-center overflow-hidden h-8 gap-2" title={value}>
-                            <span className="w-5 h-5">
-                                <Stack />
-                            </span>
-                            <span className="truncate font-medium text-gray-700 dark:text-gray-200">{name}</span>
+                            <Stack className="w-5 h-5" />
+                            <span className="truncate font-medium text-pk-content-secondary">{name}</span>
                         </div>
                         {!disabled && !variable && (
                             <Button variant="link" onClick={() => setShowAddModal(true)}>
@@ -66,12 +65,12 @@ export const NamedOrganizationEnvvarItem = ({ disabled, organizationId, name, va
                             </Button>
                         )}
                     </div>
-                    <div className="mx-7 text-gray-400 dark:text-gray-500 truncate">
-                        <>{value}</>
+                    <div className="mx-7 text-pk-content-tertiary truncate">
+                        {value}
                         {disabled && (
                             <>
-                                &nbsp;&middot;&nbsp; Requires <span className="font-medium">Owner</span> permissions to
-                                change
+                                <MiddleDot />
+                                Requires <span className="font-medium">Owner</span> permissions to change
                             </>
                         )}
                     </div>
@@ -117,7 +116,7 @@ export const AddOrgEnvironmentVariableModal = ({
         <Modal visible onClose={onClose} onSubmit={addVariable}>
             <ModalHeader>Add a variable</ModalHeader>
             <ModalBody>
-                <div className="mt-8">
+                <div>
                     <TextInputField
                         disabled={staticName !== undefined}
                         label="Name"
diff --git a/components/dashboard/src/usage/UsageView.tsx b/components/dashboard/src/usage/UsageView.tsx
index 14ca4f13d0887b..3d5254203e171a 100644
--- a/components/dashboard/src/usage/UsageView.tsx
+++ b/components/dashboard/src/usage/UsageView.tsx
@@ -129,7 +129,7 @@ export const UsageView: FC<UsageViewProps> = ({ attributionId }) => {
 
                 <div className="flex flex-col w-full mb-8">
                     <ItemsList className="mt-2 text-gray-400 dark:text-gray-500">
-                        <Item header={false} className="grid grid-cols-12 gap-x-3 bg-gray-100 dark:bg-gray-800">
+                        <Item header={false} className="grid grid-cols-12 gap-x-3 bg-pk-surface-secondary">
                             <ItemField className="col-span-2 my-auto ">
                                 <span>Type</span>
                             </ItemField>
diff --git a/components/dashboard/src/user-settings/EnvironmentVariables.tsx b/components/dashboard/src/user-settings/EnvironmentVariables.tsx
index 94502e3dd19f5b..a775655233e77b 100644
--- a/components/dashboard/src/user-settings/EnvironmentVariables.tsx
+++ b/components/dashboard/src/user-settings/EnvironmentVariables.tsx
@@ -109,7 +109,7 @@ function DeleteEnvVarModal(p: { variable: UserEnvVarValue; deleteVariable: () =>
                 <span className="truncate">Name</span>
                 <span className="truncate">Scope</span>
             </div>
-            <div className="grid grid-cols-2 gap-4 p-3 mt-3 text-gray-400 bg-gray-100 dark:bg-gray-800 rounded-xl">
+            <div className="grid grid-cols-2 gap-4 p-3 mt-3 text-gray-400 bg-pk-surface-secondary rounded-xl">
                 <span className="truncate text-gray-900 dark:text-gray-50">{p.variable.name}</span>
                 <span className="truncate text-sm">{p.variable.repositoryPattern}</span>
             </div>
@@ -249,9 +249,9 @@ export default function EnvVars() {
                 ) : null}
             </div>
             {envVars.length === 0 ? (
-                <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full h-96">
+                <div className="bg-pk-surface-secondary rounded-xl w-full h-96">
                     <div className="pt-28 flex flex-col items-center w-96 m-auto">
-                        <Heading2 color="light" className="text-center pb-3">
+                        <Heading2 className="text-pk-content-invert-secondary text-center pb-3">
                             No Environment Variables
                         </Heading2>
                         <Subheading className="text-center pb-6">
diff --git a/components/dashboard/src/user-settings/Integrations.tsx b/components/dashboard/src/user-settings/Integrations.tsx
index 23486e4d211212..bea97ef03c72aa 100644
--- a/components/dashboard/src/user-settings/Integrations.tsx
+++ b/components/dashboard/src/user-settings/Integrations.tsx
@@ -519,9 +519,9 @@ function GitIntegrations() {
             </div>
 
             {providers && providers.length === 0 && (
-                <div className="w-full flex h-80 mt-2 rounded-xl bg-gray-100 dark:bg-gray-800">
+                <div className="w-full flex h-80 mt-2 rounded-xl bg-pk-surface-secondary">
                     <div className="m-auto text-center">
-                        <Heading2 color="light" className="self-center mb-4">
+                        <Heading2 className="text-pk-content-invert-secondary self-center mb-4">
                             No Git Integrations
                         </Heading2>
                         <Subheading className="text-gray-500 mb-6">
diff --git a/components/dashboard/src/user-settings/PersonalAccessTokens.tsx b/components/dashboard/src/user-settings/PersonalAccessTokens.tsx
index ba0c872a1ea537..72fee88770d331 100644
--- a/components/dashboard/src/user-settings/PersonalAccessTokens.tsx
+++ b/components/dashboard/src/user-settings/PersonalAccessTokens.tsx
@@ -185,7 +185,7 @@ function ListAccessTokensView() {
                 </Alert>
             )}
             {tokenInfo && (
-                <div className="p-4 mb-4 divide-y rounded-xl bg-gray-50 dark:bg-gray-800">
+                <div className="p-4 mb-4 divide-y rounded-xl bg-pk-surface-secondary">
                     <div className="pb-2">
                         <div className="flex gap-2 content-center font-semibold text-gray-700 dark:text-gray-200">
                             <span>{tokenInfo.data.name}</span>
@@ -225,8 +225,8 @@ function ListAccessTokensView() {
             ) : (
                 <>
                     {tokens.length === 0 ? (
-                        <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full py-28 flex flex-col items-center">
-                            <Heading2 color="light" className="text-center pb-3">
+                        <div className="bg-pk-surface-secondary rounded-xl w-full py-28 flex flex-col items-center">
+                            <Heading2 className="text-center pb-3 text-pk-content-invert-secondary">
                                 No Access Tokens
                             </Heading2>
                             <Subheading className="text-center pb-6 w-96">
@@ -236,7 +236,7 @@ function ListAccessTokensView() {
                         </div>
                     ) : (
                         <>
-                            <div className="px-3 py-3 flex justify-between space-x-2 text-sm text-gray-400 mb-2 bg-gray-100 dark:bg-gray-800 rounded-xl">
+                            <div className="px-3 py-3 flex justify-between space-x-2 text-sm text-gray-400 mb-2 bg-pk-surface-secondary rounded-xl">
                                 <Subheading className="w-4/12">Token Name</Subheading>
                                 <Subheading className="w-4/12">Permissions</Subheading>
                                 <Subheading className="w-3/12">Expires</Subheading>
diff --git a/components/dashboard/src/user-settings/ShowTokenModal.tsx b/components/dashboard/src/user-settings/ShowTokenModal.tsx
index 41b206db3ce611..e8a5e4e6efcfcc 100644
--- a/components/dashboard/src/user-settings/ShowTokenModal.tsx
+++ b/components/dashboard/src/user-settings/ShowTokenModal.tsx
@@ -44,7 +44,7 @@ function ShowTokenModal(props: TokenModalProps) {
                 <div className="text-gray-500 dark:text-gray-400 text-md">
                     <span>{props.description}</span> <span className="font-semibold">{props.descriptionImportant}</span>
                 </div>
-                <div className="p-4 mt-2 rounded-xl bg-gray-50 dark:bg-gray-800">
+                <div className="p-4 mt-2 rounded-xl bg-pk-surface-secondary">
                     <div className="font-semibold text-gray-700 dark:text-gray-200">{props.token.name}</div>
                     <div className="font-medium text-gray-400 dark:text-gray-300">
                         {getTokenExpirationDescription(props.token.expirationTime!.toDate())}
diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index 0bcb9fc4f25a61..5fd634411fa419 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -295,13 +295,13 @@ const WorkspacesPage: FunctionComponent = () => {
                                         <div>
                                             <div
                                                 onClick={() => setShowInactive(!showInactive)}
-                                                className="flex cursor-pointer py-6 px-6 flex-row text-gray-400 bg-gray-50  hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded-xl mb-2"
+                                                className="flex cursor-pointer p-6 flex-row bg-pk-surface-secondary hover:bg-pk-surface-tertiary text-pk-content-tertiary rounded-xl mb-2"
                                             >
                                                 <div className="pr-2">
                                                     <Arrow direction={showInactive ? "down" : "right"} />
                                                 </div>
                                                 <div className="flex flex-grow flex-col ">
-                                                    <div className="font-medium text-gray-500 dark:text-gray-200 truncate">
+                                                    <div className="font-medium truncate">
                                                         <span>Inactive Workspaces&nbsp;</span>
                                                         <span className="text-gray-400 dark:text-gray-400 bg-gray-200 dark:bg-gray-600 rounded-xl px-2 py-0.5 text-xs">
                                                             {filteredInactiveWorkspaces.length}