diff --git a/src/components/common/404.tsx b/src/components/common/404.tsx
index 99e8d1cda1..7d52709ab8 100644
--- a/src/components/common/404.tsx
+++ b/src/components/common/404.tsx
@@ -296,7 +296,7 @@ const $404SVG: Component = ({ className }) => {
           d="M273.813 410.969s-54.527 39.501-115.34 38.218c-2.28-.048-4.926-.241-7.841-.548-68.038-7.178-134.288-43.963-167.33-103.87-.908-1.646-1.793-3.3-2.654-4.964-18.395-35.511-37.259-83.385-32.075-118.817"
         />
         <path
-          fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+          fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -305,7 +305,7 @@ const $404SVG: Component = ({ className }) => {
           d="m338.164 454.689-64.726-17.353c-11.086-2.972-17.664-14.369-14.692-25.455l15.694-58.537c3.889-14.504 18.799-23.11 33.303-19.221l52.349 14.035c14.504 3.889 23.11 18.799 19.221 33.303l-15.694 58.537c-2.972 11.085-14.368 17.663-25.455 14.691z"
         />
         <g
-          fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+          fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -316,7 +316,7 @@ const $404SVG: Component = ({ className }) => {
           <circle cx={323.666} cy={235.617} r={6.375} />
         </g>
         <g
-          fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+          fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -327,7 +327,7 @@ const $404SVG: Component = ({ className }) => {
           <path d="M388.762 434.677c5.234-3.039 7.731-8.966 6.678-14.594a15.804 15.804 0 0 1 5.837 5.793c4.411 7.596 1.829 17.33-5.767 21.741-7.596 4.411-17.33 1.829-21.741-5.767-1.754-3.021-2.817-5.818-2.484-9.046 4.34 4.551 11.802 5.169 17.477 1.873z" />
         </g>
         <g
-          fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+          fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -345,7 +345,7 @@ const $404SVG: Component = ({ className }) => {
           strokeWidth={3}
         >
           <path
-            fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+            fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
             d="M353.351 365.387a58.685 58.685 0 0 1-24.48-1.278 58.678 58.678 0 0 1-21.836-11.14c-17.004 4.207-31.269 17.289-36.128 35.411l-1.374 5.123c-7.112 26.525 8.617 53.791 35.13 60.899h0c26.513 7.108 53.771-8.632 60.883-35.158l1.374-5.123c4.858-18.122-.949-36.585-13.569-48.734z"
           />
           <path
@@ -361,12 +361,12 @@ const $404SVG: Component = ({ className }) => {
           strokeWidth={3}
         >
           <path
-            fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+            fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
             d="m312.957 456.734-14.315 53.395c-1.896 7.07 2.299 14.338 9.37 16.234h0c7.07 1.896 14.338-2.299 16.234-9.37l17.838-66.534c-8.633 5.427-18.558 6.928-29.127 6.275z"
           />
           <path fill="none" d="m304.883 486.849 25.604 6.864" />
           <path
-            fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+            fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
             d="M296.315 452.273 282 505.667c-1.896 7.07-9.164 11.265-16.234 9.37h0c-7.07-1.896-11.265-9.164-9.37-16.234l17.838-66.534c4.759 9.017 12.602 15.281 22.081 20.004z"
           />
           <path fill="none" d="m262.638 475.522 25.603 6.865" />
@@ -374,7 +374,7 @@ const $404SVG: Component = ({ className }) => {
         <ellipse
           cx={341.295}
           cy={315.211}
-          fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+          fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -398,7 +398,7 @@ const $404SVG: Component = ({ className }) => {
           transform="rotate(.997 279.669 262.457)"
         />
         <path
-          fill="hsl(var(--b1)/var(--tw-bg-opacity,1))"
+          fill="oklch(var(--b1)/var(--tw-bg-opacity,1))"
           stroke="currentColor"
           strokeLinecap="round"
           strokeLinejoin="round"
diff --git a/src/components/layout/header/internal/HeaderContent.tsx b/src/components/layout/header/internal/HeaderContent.tsx
index 857f9399d4..553a960e74 100644
--- a/src/components/layout/header/internal/HeaderContent.tsx
+++ b/src/components/layout/header/internal/HeaderContent.tsx
@@ -109,7 +109,7 @@ const ForDesktop: Component<{
         'rounded-full bg-gradient-to-b from-zinc-50/70 to-white/90',
         'shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur-md',
         'dark:from-zinc-900/70 dark:to-zinc-800/90 dark:ring-zinc-100/10',
-        'group [--spotlight-color:hsl(var(--a)_/_0.05)]',
+        'group [--spotlight-color:oklch(var(--a)_/_0.12)]',
         'duration-200',
         shouldHideNavBg && '!bg-none !shadow-none !ring-transparent',
         className,
diff --git a/src/components/ui/banner/Banner.tsx b/src/components/ui/banner/Banner.tsx
index 2cf69a440b..b2930eff12 100644
--- a/src/components/ui/banner/Banner.tsx
+++ b/src/components/ui/banner/Banner.tsx
@@ -18,24 +18,24 @@ const IconMap = {
 
 const bgColorMap = {
   warning: 'bg-amber-50 dark:bg-amber-300',
-  info: 'bg-always-blue-50 dark:bg-always-blue-300',
-  success: 'bg-always-green-50 dark:bg-always-green-300',
-  error: 'bg-always-red-50 dark:bg-always-red-300',
+  info: 'bg-blue-50 dark:bg-blue-300',
+  success: 'bg-green-50 dark:bg-green-300',
+  error: 'bg-red-50 dark:bg-red-300',
 }
 
 const borderColorMap = {
   warning: 'border-amber-300',
-  info: 'border-always-blue-300',
+  info: 'border-blue-300',
 
-  success: 'border-always-green-300',
-  error: 'border-always-red-300',
+  success: 'border-green-300',
+  error: 'border-red-300',
 }
 
 const iconColorMap = {
   warning: 'text-amber-500',
-  info: 'text-always-blue-500',
-  success: 'text-always-green-500',
-  error: 'text-always-red-500',
+  info: 'text-blue-500',
+  success: 'text-green-500',
+  error: 'text-red-500',
 }
 
 export const Banner: FC<{
@@ -51,7 +51,7 @@ export const Banner: FC<{
   return (
     <div
       className={clsx(
-        'flex flex-col items-center gap-4 rounded-md border p-6 text-neutral-900 dark:bg-opacity-10 dark:text-[#c4c4c4] md:flex md:flex-row',
+        'flex flex-col items-center gap-4 rounded-md border p-6 text-neutral-900 md:flex md:flex-row dark:bg-opacity-10 dark:text-[#c4c4c4]',
         bgColorMap[props.type] || bgColorMap.info,
         borderColorMap[props.type] || borderColorMap.info,
         placement == 'center' ? 'justify-center' : 'justify-start',
diff --git a/src/components/ui/collapse/Collapse.tsx b/src/components/ui/collapse/Collapse.tsx
index 3f19910714..96c947e783 100644
--- a/src/components/ui/collapse/Collapse.tsx
+++ b/src/components/ui/collapse/Collapse.tsx
@@ -33,9 +33,9 @@ export const Collapse: Component<{
 
     if (withBackground) {
       // @ts-expect-error
-      v.open.background = `hsl(var(--a) / 10%)`
+      v.open.background = `oklch(var(--a) / 10%)`
       // @ts-expect-error
-      v.collapsed.background = `hsl(var(--a) / 0%)`
+      v.collapsed.background = `oklch(var(--a) / 0%)`
     }
 
     return v
diff --git a/src/components/ui/divider/Divider.tsx b/src/components/ui/divider/Divider.tsx
index b8a44d6477..ab3a7d14e4 100644
--- a/src/components/ui/divider/Divider.tsx
+++ b/src/components/ui/divider/Divider.tsx
@@ -10,7 +10,7 @@ export const Divider: FC<
   return (
     <hr
       className={clsxm(
-        'my-4 h-[0.5px] border-0 bg-always-black !bg-opacity-30 dark:bg-always-white',
+        'my-4 h-[0.5px] border-0 bg-black !bg-opacity-30 dark:bg-white',
         className,
       )}
       {...rest}
@@ -25,7 +25,7 @@ export const DividerVertical: FC<
   return (
     <span
       className={clsxm(
-        'mx-4 inline-block h-full w-[0.5px] select-none bg-always-black !bg-opacity-30 text-transparent dark:bg-always-white',
+        'mx-4 inline-block h-full w-[0.5px] select-none bg-black !bg-opacity-30 text-transparent dark:bg-white',
         className,
       )}
       {...rest}
diff --git a/src/components/ui/input/TextArea.tsx b/src/components/ui/input/TextArea.tsx
index fab4695df5..377ef0cc95 100644
--- a/src/components/ui/input/TextArea.tsx
+++ b/src/components/ui/input/TextArea.tsx
@@ -34,7 +34,7 @@ export const TextArea = forwardRef<
   const inputProps = useInputComposition(props)
   return (
     <div
-      className="group relative h-full [--spotlight-color:hsl(var(--a)_/_0.05)]"
+      className="group relative h-full [--spotlight-color:oklch(var(--a)_/_0.12)]"
       onMouseMove={handleMouseMove}
     >
       {!isMobile && (
diff --git a/src/components/ui/markdown/markdown.module.css b/src/components/ui/markdown/markdown.module.css
index e0876ed012..e623cae363 100644
--- a/src/components/ui/markdown/markdown.module.css
+++ b/src/components/ui/markdown/markdown.module.css
@@ -12,7 +12,7 @@
       text-decoration: none;
       border-radius: 3px;
 
-      @apply bg-current text-stone-700 dark:text-neutral-500 print:!bg-transparent print:line-through;
+      @apply bg-current text-stone-700 print:!bg-transparent print:line-through dark:text-neutral-500;
 
       &:hover {
         background: transparent;
@@ -110,9 +110,9 @@
   }
 
   mark {
-    --lightness: 80%;
+    --lightness: 0.3;
     --highlighted: 1;
-    --highlight: hsl(var(--inc) / var(--lightness));
+    --highlight: oklch(var(--a) / var(--lightness));
     background: transparent;
   }
 
@@ -126,7 +126,7 @@
   }
 
   [data-theme='dark'] mark {
-    --lightness: 35%;
+    --lightness: 0.35;
   }
 
   mark span {
diff --git a/src/components/ui/markdown/parsers/alert.tsx b/src/components/ui/markdown/parsers/alert.tsx
index 780f0af187..bd90a93af8 100644
--- a/src/components/ui/markdown/parsers/alert.tsx
+++ b/src/components/ui/markdown/parsers/alert.tsx
@@ -11,13 +11,13 @@ import {
 import { Markdown } from '../Markdown'
 
 const textColorMap = {
-  NOTE: 'text-always-blue-500 dark:text-always-blue-400',
+  NOTE: 'text-blue-500 dark:text-blue-400',
   IMPORTANT: 'text-accent',
   WARNING: 'text-amber-500 dark:text-amber-400',
 } as any
 
 const borderColorMap = {
-  NOTE: 'border-always-blue-500 dark:border-always-blue-400',
+  NOTE: 'border-blue-500 dark:border-blue-400',
   IMPORTANT: 'border-accent',
   WARNING: 'border-amber-500 dark:border-amber-400',
 } as any
diff --git a/src/components/ui/markdown/parsers/mark.tsx b/src/components/ui/markdown/parsers/mark.tsx
index 5173b9c16f..2f54be9440 100644
--- a/src/components/ui/markdown/parsers/mark.tsx
+++ b/src/components/ui/markdown/parsers/mark.tsx
@@ -15,7 +15,7 @@ export const MarkRule: MarkdownToJSX.Rule = {
     return (
       <mark
         key={state?.key}
-        className="rounded-md bg-always-yellow-400 bg-opacity-80 px-1 text-black"
+        className="rounded-md bg-yellow-400 bg-opacity-80 px-1 text-black"
       >
         <span>{output(node.content, state!)}</span>
       </mark>
diff --git a/src/styles/variables.css b/src/styles/variables.css
index f75eacc152..c3c650de84 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -26,7 +26,7 @@ html {
 
 ::selection {
   background-color: var(--theme-color) !important;
-  color: theme(colors.always.white) !important;
+  color: theme(colors.white) !important;
   text-shadow: none;
 }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5152b99947..dea83d5971 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,5 @@
 import daisyui from 'daisyui'
 import { withTV } from 'tailwind-variants/transformer'
-import twColors from 'tailwindcss/colors'
 import type { Config } from 'tailwindcss'
 import type { PluginAPI } from 'tailwindcss/types/config'
 
@@ -223,7 +222,6 @@ const twConfig: Config = {
 
       colors: {
         uk: UIKitColors,
-        always: { ...twColors },
 
         themed: {
           bg_opacity: 'var(--bg-opacity)',