From 98149dde877af80a3d7bfb70ffbf40ce66fd05ff Mon Sep 17 00:00:00 2001
From: mfahampshire <maxhampshire@pm.me>
Date: Wed, 25 Feb 2026 10:05:20 +0000
Subject: [PATCH] Max/docs theme tweaks (#6480)

* Simplified landing page card layout, centered text, switched to raw
layout on index page for theming flexibility.

* Tweak theme
---
 .../docs/components/landing-page.tsx          | 68 +++++++------------
 .../outputs/api-scraping-outputs/time-now.md  |  2 +-
 documentation/docs/pages/_app.tsx             |  6 +-
 documentation/docs/pages/index.mdx            |  1 +
 documentation/docs/pages/styles.css           | 43 ++++++++++--
 documentation/docs/theme.config.tsx           |  2 +
 6 files changed, 73 insertions(+), 49 deletions(-)

diff --git a/documentation/docs/components/landing-page.tsx b/documentation/docs/components/landing-page.tsx
index a3e274994a..699e704263 100644
--- a/documentation/docs/components/landing-page.tsx
+++ b/documentation/docs/components/landing-page.tsx
@@ -51,8 +51,8 @@ export const LandingPage = () => {
   };
 
   return (
-    <Box margin={"0 auto"}>
-      <Typography variant="h2" mb={6}>
+    <Box margin={"0 auto"} textAlign="center">
+      {/*<Typography variant="h2" mb={6}>
         Nym Docs
       </Typography>
 
@@ -62,70 +62,54 @@ export const LandingPage = () => {
         using blinded, re-randomizable, decentralized credentials. Our goal is
         to allow developers to build new applications, or upgrade existing apps,
         with privacy features unavailable in other systems.
-      </Typography>
-      <Grid container border={"1px solid #262626"}>
+      </Typography>*/}
+      <Grid container border={"1px solid #2E3538"}>
         {squares.map((square, index) => (
           <Grid
             item
             key={index}
             xs={12}
-            lg={6}
+            sm={6}
             padding={{ xs: 3, xl: 4 }}
-            width={"100%"}
             sx={{
               borderBottom: {
-                xs: index < 3 ? "1px solid #262626" : "none",
-                lg: index === 0 || index === 1 ? "1px solid #262626" : "none",
+                xs: index < 3 ? "1px solid #2E3538" : "none",
+                sm: index === 0 || index === 1 ? "1px solid #2E3538" : "none",
               },
               borderRight: {
-                md: index === 0 || index === 2 ? "1px solid #262626" : "none",
+                xs: "none",
+                sm: index === 0 || index === 2 ? "1px solid #2E3538" : "none",
               },
             }}
           >
-            <Link href={square.href} target="_blank" rel="noopener noreferrer">
+            <Link href={square.href}>
               <Box
                 display={"flex"}
                 gap={{ xs: 3, xl: 4 }}
                 height={"100%"}
-                flexDirection={{ xs: "column", sm: "row" }}
-                alignItems={{ xs: "center" }}
+                flexDirection="column"
+                alignItems="center"
               >
+                <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                  {square.text}
+                </Typography>
+
+                <Typography
+                  variant="body1"
+                  textAlign="center"
+                  sx={{
+                    color: "#909195",
+                  }}
+                >
+                  {square.description}
+                </Typography>
+
                 <Image
                   src={square.icon}
                   alt={square.text}
                   width={isDesktop ? 180 : isTablet ? 140 : 180}
                   height={isDesktop ? 134 : isTablet ? 90 : 134}
                 />
-                <Box
-                  display={"flex"}
-                  flexDirection={"column"}
-                  justifyContent={"space-between"}
-                  alignItems={{ xs: "center", sm: "flex-start" }}
-                  flexGrow={1}
-                  height={"100%"}
-                >
-                  <Typography variant="h5" sx={{ fontWeight: 600 }}>
-                    {square.text}
-                  </Typography>
-
-                  <Typography
-                    variant="body1"
-                    textAlign={{ xs: "center", sm: "left" }}
-                    sx={{
-                      color: "#909195",
-                      display: {
-                        lg: "none",
-                        xl: "block",
-                      },
-                    }}
-                  >
-                    {square.description}
-                  </Typography>
-
-                  <Typography sx={{ color: "#14E76F", fontWeight: 600 }}>
-                    Open
-                  </Typography>
-                </Box>
               </Box>
             </Link>
           </Grid>
diff --git a/documentation/docs/components/outputs/api-scraping-outputs/time-now.md b/documentation/docs/components/outputs/api-scraping-outputs/time-now.md
index 518b0b968d..32d8432bb0 100644
--- a/documentation/docs/components/outputs/api-scraping-outputs/time-now.md
+++ b/documentation/docs/components/outputs/api-scraping-outputs/time-now.md
@@ -1 +1 @@
-Monday, February 23rd 2026, 22:45:55 UTC
+Tuesday, February 24th 2026, 10:08:37 UTC
diff --git a/documentation/docs/pages/_app.tsx b/documentation/docs/pages/_app.tsx
index b3fbeaf252..f76d9a47ef 100644
--- a/documentation/docs/pages/_app.tsx
+++ b/documentation/docs/pages/_app.tsx
@@ -10,7 +10,11 @@ const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
         palette: {
           mode: 'dark',
           primary: {
-            main: '#e67300',
+            main: '#85E89D',
+          },
+          background: {
+            default: '#242B2D',
+            paper: '#2A3235',
           },
         },
       }),
diff --git a/documentation/docs/pages/index.mdx b/documentation/docs/pages/index.mdx
index f3953b9b63..fac51a908b 100644
--- a/documentation/docs/pages/index.mdx
+++ b/documentation/docs/pages/index.mdx
@@ -4,6 +4,7 @@ description: "Official Nym documentation hub. Build privacy-enhanced application
 schemaType: "TechArticle"
 section: "Documentation"
 lastUpdated: "2026-02-11"
+layout: raw
 ---
 
 import { LandingPage } from '../components/landing-page.tsx'
diff --git a/documentation/docs/pages/styles.css b/documentation/docs/pages/styles.css
index aa26004976..0e5c829a30 100644
--- a/documentation/docs/pages/styles.css
+++ b/documentation/docs/pages/styles.css
@@ -1,3 +1,29 @@
+/* nym.com-aligned colour tokens */
+:root {
+  --colorPrimary: #85E89D;
+  --textPrimary: #FFFFFF;
+  --bg-dark: #1E2426;
+  --border-dark: #2E3538;
+}
+
+/* dark mode background override */
+html.dark {
+  background-color: var(--bg-dark);
+}
+
+html.dark body {
+  background-color: var(--bg-dark);
+}
+
+/* nextra main content area bg */
+html.dark .nextra-nav-container,
+html.dark .nextra-sidebar-container,
+html.dark .nextra-content,
+html.dark .nx-bg-white,
+html.dark .dark\:nx-bg-dark {
+  background-color: var(--bg-dark) !important;
+}
+
 footer {
   text-align: center;
 }
@@ -19,7 +45,7 @@ footer {
   padding-right: 0px;
   padding-left: 0px;
   /* text-align: right; */
-  border-left: 1px solid #262626;
+  border-left: 1px solid var(--border-dark);
 }
 
 .nextra-content {
@@ -34,14 +60,21 @@ footer {
   background-color: hsl(var(black) 100% 77%/0.1) !important;
 }
 
-/* Sidebar buttons */
+/* Sidebar active item */
 :is(html .dark\:nx-bg-primary-400\/10) {
-  background: var(--colorPrimary) !important;
-  color: var(--textPrimary) !important;
+  background: transparent !important;
+  border-left: 2px solid #85E89D;
+  color: #FFFFFF !important;
+}
+
+:is(html:not(.dark) .dark\:nx-bg-primary-400\/10) {
+  background: transparent !important;
+  border-left: 2px solid #4A9E5C;
+  color: #242B2D !important;
 }
 
 .nextra-sidebar-container {
-  border-right: 1px solid #262626;
+  border-right: 1px solid var(--border-dark);
   width: 300px !important;
 }
 
diff --git a/documentation/docs/theme.config.tsx b/documentation/docs/theme.config.tsx
index 603d6407ef..304eb1c4ca 100644
--- a/documentation/docs/theme.config.tsx
+++ b/documentation/docs/theme.config.tsx
@@ -152,6 +152,8 @@ const config: DocsThemeConfig = {
   //   text: Footer,
   // },
   darkMode: true,
+  primaryHue: 135,
+  primarySaturation: 64,
   nextThemes: {
     defaultTheme: "dark",
   },