Skip to content

Align docs site design with codex-website brand #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KaladinX merged 1 commit into from
Apr 2, 2026
Merged

Align docs site design with codex-website brand #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 60 additions & 51 deletions app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,58 +2,67 @@
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

/* Warm, earthy color palette */
:root {
/* Primary accent - Sage green */
--fd-primary: 145 44% 51%;
--fd-primary-foreground: 0 0% 100%;
/* Background - Linen (warm off-white) */
--fd-background: 45 33% 97%;
/* Surface - Alabaster (sidebar with green tint) */
--fd-card: 135 18% 95%;
--fd-muted: 135 18% 95%;
/* Text colors */
--fd-foreground: 212 23% 23%; /* Charcoal */
--fd-muted-foreground: 216 16% 52%; /* Stone */
/* Borders */
--fd-border: 135 15% 88%;
/* Hover state - Deep Forest */
--fd-accent: 150 48% 35%;
/* Primary — Codex teal */
--fd-primary: 168 100% 42%;
--fd-primary-foreground: 240 44% 7%;

/* Background — Codex parchment */
--fd-background: 60 20% 97%;

/* Surfaces — clean white cards, warm muted fills */
--fd-card: 0 0% 100%;
--fd-muted: 37 21% 93%;

/* Text — Codex ink and muted stone */
--fd-foreground: 240 28% 14%;
--fd-muted-foreground: 240 9% 46%;

/* Borders — warm neutral */
--fd-border: 37 20% 87%;

/* Hover / active — deeper teal */
--fd-accent: 168 100% 36%;
--fd-accent-foreground: 0 0% 100%;

/* Semantic colors */
--fd-destructive: 0 76% 57%; /* Error red */
--fd-warning: 40 67% 51%; /* Warning yellow */

/* Subtle refinements */

/* Semantic */
--fd-destructive: 358 75% 59%;
--fd-warning: 45 80% 55%;

--fd-radius: 0.625rem;
}

.dark {
/* Keep dark mode with adjusted warmth */
--fd-primary: 145 44% 58%;
--fd-background: 212 25% 12%;
--fd-card: 212 24% 15%;
--fd-muted: 212 24% 15%;
--fd-foreground: 45 10% 88%;
--fd-muted-foreground: 216 12% 62%;
--fd-border: 212 20% 22%;
--fd-accent: 150 48% 42%;
--fd-destructive: 0 76% 62%;
--fd-warning: 40 67% 58%;
--fd-primary: 168 100% 42%;
--fd-primary-foreground: 240 44% 7%;

/* Background — Codex deep navy */
--fd-background: 240 28% 14%;

/* Surfaces — Codex surface navy */
--fd-card: 240 26% 18%;
--fd-muted: 240 22% 21%;

/* Text — warm off-white */
--fd-foreground: 36 10% 90%;
--fd-muted-foreground: 240 9% 58%;

/* Borders — subtle navy edges */
--fd-border: 240 18% 20%;

/* Hover — brighter teal for dark backgrounds */
--fd-accent: 168 100% 46%;
--fd-accent-foreground: 36 10% 90%;

--fd-destructive: 358 75% 62%;
--fd-warning: 45 80% 58%;
}

/* Smooth page transitions */
html {
scroll-behavior: smooth;
}

/* Subtle shadow refinements for cards */
/* Card hover lift */
.fd-card {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
Expand All @@ -62,31 +71,31 @@ html {
transform: translateY(-1px);
}

/* Subtle code block polish */
/* Code block border */
pre {
border: 1px solid hsl(var(--fd-border) / 0.5);
}

/* Inline code with subtle color tint */
/* Inline code — warm parchment tint */
:not(pre) > code {
background: hsl(135 18% 93%);
border: 1px solid hsl(135 15% 88%);
color: hsl(212 23% 23%);
background: hsl(37 21% 94%);
border: 1px solid hsl(37 20% 88%);
color: hsl(240 28% 14%);
}

.dark :not(pre) > code {
background: hsl(212 24% 18%);
border: 1px solid hsl(212 20% 25%);
color: hsl(45 10% 88%);
background: hsl(240 26% 20%);
border: 1px solid hsl(240 18% 24%);
color: hsl(36 10% 90%);
}

/* Active sidebar item - sage accent (10% rule) */
/* Sidebar active item — teal accent bar */
[data-active="true"] {
border-left: 2px solid hsl(var(--fd-primary)) !important;
background: hsl(var(--fd-primary) / 0.08) !important;
}

/* Links with sage color */
/* Prose links */
.prose a:not([class]) {
color: hsl(var(--fd-primary));
text-decoration-thickness: 1px;
Expand All @@ -98,7 +107,7 @@ pre {
color: hsl(var(--fd-accent));
}

/* Refined focus states */
/* Focus states */
:focus-visible {
outline: 2px solid hsl(var(--fd-primary));
outline-offset: 2px;
Expand Down
59 changes: 40 additions & 19 deletions app/layout.config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";

/**
* Shared layout configurations
*
* you can customise layouts individually from:
* Home Layout: app/(home)/layout.tsx
* Docs Layout: app/docs/layout.tsx
*/
export const baseOptions: BaseLayoutProps = {
nav: {
title: (
Expand All @@ -19,35 +12,63 @@ export const baseOptions: BaseLayoutProps = {
aria-label="Codex Editor Logo"
>
<defs>
<linearGradient id="navGradient" x1="40%" y1="80%" x2="50%" y2="80%">
<stop offset="0%" style={{stopColor:'#db3636', stopOpacity:1}} />
<stop offset="100%" style={{stopColor:'#000000', stopOpacity:0}} />
<linearGradient
id="navGradient"
x1="40%"
y1="80%"
x2="50%"
y2="80%"
>
<stop
offset="0%"
style={{ stopColor: "#db3636", stopOpacity: 1 }}
/>
<stop
offset="100%"
style={{ stopColor: "#000000", stopOpacity: 0 }}
/>
</linearGradient>
</defs>
<g transform="matrix(13.786793,0,0,13.786793,-1042,-1161.5577)">
<path
style={{fontWeight:'bold', fontSize:'4.9389px', lineHeight:1.2, fontFamily:'.Al Bayan PUA', strokeWidth:'0.265'}}
style={{
fontWeight: "bold",
fontSize: "4.9389px",
lineHeight: 1.2,
fontFamily: ".Al Bayan PUA",
strokeWidth: "0.265",
}}
d="m 78.315977,85.277281 c -0.273311,0 -0.525549,0.0434 -0.75706,0.130225 -0.229903,0.08682 -0.422828,0.209805 -0.578776,0.368969 -0.162378,0.165595 -0.286344,0.364319 -0.371553,0.59583 -0.08521,0.23151 -0.127641,0.489548 -0.127641,0.774112 0,0.305466 0.04438,0.574584 0.132808,0.807703 0.09003,0.233119 0.215894,0.427479 0.378272,0.583427 0.162379,0.155949 0.35628,0.273653 0.58136,0.352433 0.226686,0.07878 0.473642,0.117823 0.740523,0.117823 0.161274,-0.0031 0.304389,-0.0142 0.436149,-0.03152 l -0.01395,0.02015 0.03359,-0.02274 c 0.805821,-0.111504 1.12401,-0.493877 1.777669,-1.158069 l 0.773596,1.180807 H 82.3917 l -1.273307,-1.844849 1.254187,-1.746147 h -1.024744 l -0.769462,1.118795 -0.08527,-0.077 c -0.431049,-0.429967 -0.820333,-0.930661 -1.431954,-1.078487 -0.102894,-0.02733 -0.215261,-0.04904 -0.337447,-0.06511 -0.120579,-0.01773 -0.256602,-0.02635 -0.407727,-0.02635 z m 0.142627,0.691947 c 0.117363,0 0.227318,0.01786 0.330212,0.05323 0.102894,0.03538 0.198385,0.07878 0.286804,0.130225 0.151559,0.08064 0.816624,0.905052 0.933794,1.035079 4.3e-5,4.7e-5 -4.3e-5,4.69e-4 0,5.16e-4 l -0.338998,0.480591 c -0.0547,0.06918 -0.108031,0.137897 -0.153996,0.200505 -0.419048,0.429323 -0.940625,0.446484 -1.053165,0.446484 -0.117363,0 -0.236506,-0.01831 -0.357084,-0.05529 -0.120579,-0.03858 -0.229559,-0.102266 -0.327629,-0.190686 -0.09646,-0.08682 -0.177019,-0.205959 -0.241329,-0.357084 -0.0627,-0.151125 -0.09405,-0.339226 -0.09405,-0.564306 0,-0.215433 0.02894,-0.398713 0.08682,-0.549838 0.05949,-0.151125 0.136651,-0.272162 0.231511,-0.363802 0.09968,-0.09485 0.208198,-0.162381 0.325561,-0.202571 0.117363,-0.0418 0.241329,-0.06305 0.371554,-0.06305 z"
fill="currentColor"
/>
<path
style={{fontWeight:'bold', fontSize:'4.9389px', lineHeight:1.2, fontFamily:'.Al Bayan PUA', strokeWidth:'0.265'}}
style={{
fontWeight: "bold",
fontSize: "4.9389px",
lineHeight: 1.2,
fontFamily: ".Al Bayan PUA",
strokeWidth: "0.265",
}}
d="m 78.309252,85.284383 c -0.273311,0 -0.525549,0.0434 -0.75706,0.130225 -0.229903,0.08682 -0.422828,0.209805 -0.578776,0.368969 -0.162378,0.165595 -0.286344,0.364319 -0.371553,0.59583 -0.08521,0.23151 -0.127641,0.489548 -0.127641,0.774112 0,0.305466 0.04438,0.574584 0.132808,0.807703 0.09003,0.233119 0.215894,0.427479 0.378272,0.583427 0.162379,0.155949 0.35628,0.273653 0.58136,0.352433 0.226686,0.07878 0.473642,0.117823 0.740523,0.117823 0.161274,-0.0031 0.304389,-0.0142 0.436149,-0.03152 l -0.01395,0.02015 0.03359,-0.02274 c 0.805821,-0.111504 1.12401,-0.493877 1.777669,-1.158069 l 0.773596,1.180807 h 1.070736 l -1.273307,-1.844849 1.254187,-1.746147 h -1.024744 l -0.769462,1.118795 -0.08527,-0.077 c -0.431049,-0.429967 -0.820333,-0.930661 -1.431954,-1.078487 -0.102894,-0.02733 -0.215261,-0.04904 -0.337447,-0.06511 -0.120579,-0.01773 -0.256602,-0.02635 -0.407727,-0.02635 z m 0.142627,0.691947 c 0.117363,0 0.227318,0.01786 0.330212,0.05323 0.102894,0.03538 0.198385,0.07878 0.286804,0.130225 0.151559,0.08064 0.816624,0.905052 0.933794,1.035079 4.3e-5,4.7e-5 -4.3e-5,4.69e-4 0,5.16e-4 l -0.338998,0.480591 c -0.0547,0.06918 -0.108031,0.137897 -0.153996,0.200505 -0.419048,0.429323 -0.940625,0.446484 -1.053165,0.446484 -0.117363,0 -0.236506,-0.01831 -0.357084,-0.05529 -0.120579,-0.03858 -0.229559,-0.102266 -0.327629,-0.190686 -0.09646,-0.08682 -0.177019,-0.205959 -0.241329,-0.357084 -0.0627,-0.151125 -0.09405,-0.339226 -0.09405,-0.564306 0,-0.215433 0.02894,-0.398713 0.08682,-0.549838 0.05949,-0.151125 0.136651,-0.272162 0.231511,-0.363802 0.09968,-0.09485 0.208198,-0.162381 0.325561,-0.202571 0.117363,-0.0418 0.241329,-0.06305 0.371554,-0.06305 z"
fill="url(#navGradient)"
/>
</g>
</svg>
Codex Editor
<span className="font-semibold">Documentation</span>
</>
),
url: '/docs',
url: "/docs",
},
// see https://fumadocs.dev/docs/ui/navigation/links
links: [
{
text: 'Documentation Home',
url: '/docs',
active: 'nested-url',
text: "Documentation",
url: "/docs",
active: "nested-url",
},
{
text: "Website",
url: "https://codexeditor.app",
external: true,
},
],
};
6 changes: 3 additions & 3 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import './global.css';
import { RootProvider } from 'fumadocs-ui/provider/next';
import { Inter } from 'next/font/google';
import { Plus_Jakarta_Sans } from 'next/font/google';
import type { ReactNode } from 'react';
import type { Metadata } from 'next';

const inter = Inter({
const jakarta = Plus_Jakarta_Sans({
subsets: ['latin'],
});

Expand All @@ -21,7 +21,7 @@ export const metadata: Metadata = {

export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<html lang="en" className={jakarta.className} suppressHydrationWarning>
<head>
<script defer src="https://cloud.umami.is/script.js" data-website-id="16ce21bc-d12b-4ff0-93d0-bf6e1388cd56"></script>
</head>
Expand Down
Loading