ui: enforce brand consistency throughout the codebase

Author: apsinghdev

apps/web/src/app/(main)/dashboard/account/page.tsx

@@ -23,25 +23,27 @@ const AccountPageContent = memo(function AccountPageContent({
           <ArrowLeft className="h-4 w-4" />
           <span>Back to Dashboard</span>
         </Link>
-        <h1 className="text-2xl md:text-3xl font-semibold text-white">
+        <h1 className="text-2xl md:text-3xl font-semibold text-text-primary">
           Account Settings
         </h1>
       </div>
 
       <div className="bg-ox-sidebar border border-dash-border rounded-lg p-6 max-w-2xl">
         <div className="space-y-4">
           <div>
-            <label className="text-sm text-zinc-400 mb-2 block">Plan</label>
+            <label className="text-sm text-text-muted mb-2 block">Plan</label>
             <div className="flex items-center gap-2">
-              <span className="text-lg font-semibold text-white">{plan}</span>
+              <span className="text-lg font-semibold text-text-primary">
+                {plan}
+              </span>
               {isPaidUser && <ActiveTag />}
             </div>
           </div>
           {!isPaidUser && (
             <div>
               <Link
                 href="/pricing"
-                className="inline-flex items-center justify-center px-3 py-1.5 bg-ox-purple hover:bg-ox-purple-2 text-white rounded-md transition-colors text-xs font-medium"
+                className="inline-flex items-center justify-center px-3 py-1.5 bg-ox-purple hover:bg-ox-purple-2 text-text-primary rounded-md transition-colors text-xs font-medium"
               >
                 be a pro
               </Link>
@@ -60,7 +62,7 @@ export default function AccountPage() {
     <div className="w-full h-full flex flex-col p-6 bg-ox-content">
       {isLoading ? (
         <div className="flex items-center justify-center h-full">
-          <span className="text-zinc-400">Loading...</span>
+          <span className="text-text-muted">Loading...</span>
         </div>
       ) : (
         <AccountPageContent isPaidUser={isPaidUser} />

apps/web/src/app/(main)/dashboard/layout.tsx

@@ -31,9 +31,12 @@ export default function DashboardLayout({
       <div className="flex-1 flex flex-col h-full bg-dash-base">
         <div className="xl:hidden flex items-center h-16 px-4 border-b border-dash-border bg-dash-base">
           <IconWrapper onClick={() => setShowSidebar(true)}>
-            <Bars3Icon className="size-5 text-ox-purple" />
+            <Bars3Icon className="size-5 text-brand-purple" />
           </IconWrapper>
-          <Link href="/" className="ml-4 text-lg font-semibold text-ox-white hover:text-ox-purple transition-colors">
+          <Link
+            href="/"
+            className="ml-4 text-lg font-semibold text-text-primary hover:text-brand-purple transition-colors"
+          >
             Opensox
           </Link>
         </div>

apps/web/src/app/(main)/dashboard/pro/dashboard/page.tsx

@@ -17,7 +17,7 @@ export default function ProDashboardPage() {
   if (isLoading) {
     return (
       <div className="w-full h-full flex items-center justify-center bg-ox-content">
-        <p className="text-white">Loading...</p>
+        <p className="text-text-primary">Loading...</p>
       </div>
     );
   }
@@ -29,7 +29,7 @@ export default function ProDashboardPage() {
   return (
     <div className="w-full h-full flex items-center justify-center bg-ox-content p-6">
       <div className="max-w-2xl mx-auto text-center">
-        <h1 className="text-2xl md:text-3xl font-semibold text-white mb-4">
+        <h1 className="text-2xl md:text-3xl font-semibold text-text-primary mb-4">
           hi investors, ajeetunc is on the way to deliver the shareholder value.
           soon you&apos;ll see all the pro perks here. thanks for investing
         </h1>

apps/web/src/app/(main)/dashboard/sheet/page.tsx

@@ -53,11 +53,11 @@ const SheetTableRow = memo(function SheetTableRow({
         isComingSoon ? "opacity-50" : ""
       }`}
     >
-      <TableCell className="text-white text-[12px] sm:text-sm p-3 text-left">
+      <TableCell className="text-text-primary text-[12px] sm:text-sm p-3 text-left">
         {index}
       </TableCell>
 
-      <TableCell className="text-white text-[12px] sm:text-sm p-3">
+      <TableCell className="text-text-primary text-[12px] sm:text-sm p-3">
         <div className="flex items-center gap-2">
           <span className="max-w-[80px] md:max-w-none break-words">
             {module.name}
@@ -72,7 +72,7 @@ const SheetTableRow = memo(function SheetTableRow({
 
       <TableCell className="text-center p-3">
         {isComingSoon ? (
-          <span className="inline-flex items-center gap-1 text-gray-500 cursor-not-allowed pointer-events-none">
+          <span className="inline-flex items-center gap-1 text-text-muted cursor-not-allowed pointer-events-none">
             <FileText className="h-4 w-4" />
             <span className="text-[12px] sm:text-sm font-medium">read</span>
           </span>
@@ -81,7 +81,7 @@ const SheetTableRow = memo(function SheetTableRow({
             href={`/sheet/${module.id}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-white hover:text-ox-purple transition-colors"
+            className="inline-flex items-center gap-1 text-text-primary hover:text-brand-purple transition-colors"
           >
             <FileText className="h-4 w-4" />
             <span className="text-[12px] sm:text-sm font-medium">read</span>
@@ -122,7 +122,7 @@ const SheetTableRow = memo(function SheetTableRow({
               onCheckboxChange(module.id, checked === true)
             }
             disabled={isComingSoon}
-            className="border-ox-purple/50 data-[state=checked]:bg-ox-purple data-[state=checked]:border-ox-purple data-[state=checked]:text-white disabled:opacity-50 disabled:cursor-not-allowed"
+            className="border-ox-purple/50 data-[state=checked]:bg-ox-purple data-[state=checked]:border-ox-purple data-[state=checked]:text-text-primary disabled:opacity-50 disabled:cursor-not-allowed"
           />
         </div>
       </TableCell>
@@ -320,7 +320,7 @@ export default function SheetPage() {
   if (isLoading) {
     return (
       <div className="w-full p-6 flex items-center justify-center h-[80vh]">
-        <p className="text-ox-gray">Loading...</p>
+        <p className="text-text-muted">Loading...</p>
       </div>
     );
   }
@@ -329,33 +329,33 @@ export default function SheetPage() {
     <div className="w-full h-full flex flex-col p-2 sm:p-6 overflow-hidden">
       <div className="w-[95vw] md:w-[90vw] lg:w-full flex items-start justify-between pb-6 flex-row lg:flex-shrink-0 lg:gap-4">
         <div className="flex flex-col gap-2">
-          <h2 className="text-xl sm:text-2xl md:text-3xl font-semibold text-white tracking-tight">
+          <h2 className="text-xl sm:text-2xl md:text-3xl font-semibold text-text-primary tracking-tight">
             30 days of Open Source sheet
           </h2>
-          <span className="text-xs text-ox-white">
+          <span className="text-xs text-text-secondary">
             (i don&apos;t have a marketing budget,
             <br className="sm:hidden" /> please share this sheet with others 🙏
             :)
           </span>
         </div>
         <div className="flex items-center md:gap-3 flex-shrink-0">
           {copied && (
-            <Badge className="bg-ox-purple text-white border-0 flex items-center gap-1">
+            <Badge className="bg-brand-purple text-text-primary border-0 flex items-center gap-1">
               <Check className="h-3 w-3" />
               Copied
             </Badge>
           )}
           <button
             onClick={handleDownloadPDF}
-            className="p-2 text-white hover:text-ox-purple transition-colors rounded-md hover:bg-ox-header/50"
+            className="p-2 text-text-primary hover:text-brand-purple transition-colors rounded-md hover:bg-ox-header/50"
             title="Download as PDF"
             aria-label="Download as PDF"
           >
             <Download className="h-5 w-5" />
           </button>
           <button
             onClick={handleShare}
-            className="p-2 text-white hover:text-ox-purple transition-colors rounded-md hover:bg-ox-header/50"
+            className="p-2 text-text-primary hover:text-brand-purple transition-colors rounded-md hover:bg-ox-header/50"
             title="Share sheet"
             aria-label="Share sheet"
           >
@@ -370,7 +370,7 @@ export default function SheetPage() {
         </div>
 
         <div className="mb-6 flex-shrink-0">
-          <p className="text-white text-sm italic">
+          <p className="text-text-primary text-sm italic">
             &quot;sometimes, these modules may feel boring and hard af but
             that&apos;s the cost of learning something worthy. you go through
             it. you win. simple.&quot; — ajeet
@@ -384,20 +384,20 @@ export default function SheetPage() {
           [&::-webkit-scrollbar]:w-2
           [&::-webkit-scrollbar]:h-2
           [&::-webkit-scrollbar-track]:bg-transparent
-          [&::-webkit-scrollbar-thumb]:bg-ox-purple/30
+          [&::-webkit-scrollbar-thumb]:bg-brand-purple/30
           [&::-webkit-scrollbar-thumb]:rounded-full
-          [&::-webkit-scrollbar-thumb]:hover:bg-ox-purple/50
+          [&::-webkit-scrollbar-thumb]:hover:bg-brand-purple/50
         "
         >
           <Table className="w-full min-w-[600px] sm:min-w-[800px]">
             <TableHeader>
-              <TableRow className="border-b border-dash-border bg-ox-header">
+              <TableRow className="border-b border-dash-border bg-dash-surface">
                 {tableColumns.map((name, i) => (
                   <TableHead
                     key={name}
                     className={[
-                      "px-3 py-3 font-semibold text-white text-[12px] sm:text-sm whitespace-nowrap",
-                      "sticky top-0 z-30 bg-ox-header",
+                      "px-3 py-3 font-semibold text-text-primary text-[12px] sm:text-sm whitespace-nowrap",
+                      "sticky top-0 z-30 bg-dash-surface",
                       i === 0 ? "text-left" : "text-center",
                     ].join(" ")}
                   >

apps/web/src/app/(main)/sheet/[moduleId]/page.tsx

@@ -158,7 +158,7 @@ export default function ModuleDocPage() {
 
   if (currentModule.comingSoon) {
     return (
-      <div className="min-h-screen bg-ox-header text-white font-DMfont">
+      <div className="min-h-screen bg-ox-header text-text-primary font-DMfont">
         <div className="max-w-4xl mx-auto px-6 py-8">
           <div className="mb-6">
             <Link
@@ -168,7 +168,7 @@ export default function ModuleDocPage() {
               <ArrowLeft className="h-4 w-4" />
               <span>Back to Sheet</span>
             </Link>
-            <h1 className="text-3xl font-bold text-white mb-2">
+            <h1 className="text-3xl font-bold text-text-primary mb-2">
               {currentModule.name}
             </h1>
           </div>
@@ -177,7 +177,7 @@ export default function ModuleDocPage() {
             <Badge className="bg-ox-purple/20 text-ox-purple border-ox-purple/30 mb-4">
               Soon
             </Badge>
-            <p className="text-gray-300 text-lg">
+            <p className="text-text-secondary text-lg">
               This module is coming very soon. Stay tuned!
             </p>
           </div>
@@ -187,7 +187,7 @@ export default function ModuleDocPage() {
   }
 
   return (
-    <div className="min-h-screen bg-ox-header text-white font-DMfont">
+    <div className="min-h-screen bg-ox-header text-text-primary font-DMfont">
       <div className="max-w-4xl mx-auto px-6 py-8">
         {/* Header with back button and actions */}
         <div className="mb-6">
@@ -201,30 +201,30 @@ export default function ModuleDocPage() {
             </Link>
             <div className="flex items-center gap-3 flex-shrink-0">
               {copied && (
-                <Badge className="bg-ox-purple text-white border-0 flex items-center gap-1">
+                <Badge className="bg-brand-purple text-text-primary border-0 flex items-center gap-1">
                   <Check className="h-3 w-3" />
                   Copied
                 </Badge>
               )}
               <button
                 onClick={handleDownloadPDF}
-                className="p-2 text-white hover:text-ox-purple transition-colors rounded-md hover:bg-ox-content/50"
+                className="p-2 text-text-primary hover:text-brand-purple transition-colors rounded-md hover:bg-ox-content/50"
                 title="Download as PDF"
                 aria-label="Download as PDF"
               >
                 <Download className="h-5 w-5" />
               </button>
               <button
                 onClick={handleShare}
-                className="p-2 text-white hover:text-ox-purple transition-colors rounded-md hover:bg-ox-content/50"
+                className="p-2 text-text-primary hover:text-brand-purple transition-colors rounded-md hover:bg-ox-content/50"
                 title="Share module"
                 aria-label="Share module"
               >
                 <Share2 className="h-5 w-5" />
               </button>
             </div>
           </div>
-          <h1 className="text-3xl font-bold text-white mb-2">
+          <h1 className="text-3xl font-bold text-text-primary mb-2">
             {currentModule.name}
           </h1>
         </div>
@@ -234,7 +234,7 @@ export default function ModuleDocPage() {
           <div
             // eslint-disable-next-line react/no-danger -- Safe: docContent is sanitized with DOMPurify before rendering
             dangerouslySetInnerHTML={{ __html: sanitizedDocContent }}
-            className="text-white [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4 [&_h1]:mt-6 [&_h1]:text-white [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:mb-3 [&_h2]:mt-5 [&_h2]:text-white [&_p]:text-gray-300 [&_p]:mb-4 [&_p]:leading-relaxed [&_ul]:list-disc [&_ul]:ml-6 [&_ul]:mb-4 [&_ul]:text-gray-300 [&_li]:mb-2 [&_pre]:bg-ox-sidebar [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:mb-4 [&_pre]:font-DMfont [&_pre]:border [&_pre]:border-ox-header [&_code]:text-ox-purple [&_code]:bg-ox-sidebar [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:font-DMfont [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-5 [&_img]:border [&_img]:border-ox-header"
+            className="text-text-primary [&_h1]:text-2xl [&_h1]:font-bold [&_h1]:mb-4 [&_h1]:mt-6 [&_h1]:text-text-primary [&_h2]:text-xl [&_h2]:font-semibold [&_h2]:mb-3 [&_h2]:mt-5 [&_h2]:text-text-primary [&_p]:text-text-secondary [&_p]:mb-4 [&_p]:leading-relaxed [&_ul]:list-disc [&_ul]:ml-6 [&_ul]:mb-4 [&_ul]:text-text-secondary [&_li]:mb-2 [&_pre]:bg-ox-sidebar [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:mb-4 [&_pre]:font-DMfont [&_pre]:border [&_pre]:border-ox-header [&_code]:text-brand-purple [&_code]:bg-ox-sidebar [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:font-DMfont [&_img]:max-w-full [&_img]:h-auto [&_img]:rounded-lg [&_img]:my-5 [&_img]:border [&_img]:border-ox-header"
           />
         </div>
       </div>

apps/web/src/components/dashboard/DashboardHeader.tsx

@@ -27,9 +27,12 @@ export const DashboardHeader = () => {
         className="flex h-full w-[40%] justify-start space-x-3 items-center"
       >
         <IconWrapper className="block xl:hidden" onClick={menuClickHander}>
-          <Bars3Icon className="size-4 text-ox-purple"></Bars3Icon>
+          <Bars3Icon className="size-4 text-brand-purple"></Bars3Icon>
         </IconWrapper>
-        <Link href="/" className="text-lg md:text-2xl font-medium hover:text-ox-purple transition-colors">
+        <Link
+          href="/"
+          className="text-lg md:text-2xl font-medium hover:text-brand-purple transition-colors"
+        >
           Opensox
         </Link>
       </div>
@@ -38,7 +41,7 @@ export const DashboardHeader = () => {
         className="flex h-full w-1/2 md:w-[40%] items-center justify-end space-x-2 lg:space-x-8"
       >
         <Button
-          className="font-bold text-xs flex hover:bg-white-500 text-white bg-ox-purple cursor-pointer p-2 h-7 md:p-auto md:h-auto"
+          className="font-bold text-xs flex hover:bg-white-500 text-text-primary bg-ox-purple cursor-pointer p-2 h-7 md:p-auto md:h-auto"
           onClick={startHandler}
         >
           Find projects