yamcodes · yamcodes · Nov 29, 2025 · Nov 29, 2025 · Nov 29, 2025 · Nov 29, 2025
diff --git a/apps/www/app/layout.config.tsx b/apps/www/app/layout.config.tsx
@@ -10,7 +10,7 @@ import { Logo } from "~/components/page/logo";
  */
 export const baseOptions: BaseLayoutProps = {
 	nav: {
-		title: <Logo className="text-xl mb-1" />,
+		title: <Logo className="mb-1" />,
 	},
 	githubUrl: process.env.NEXT_PUBLIC_GITHUB_URL,
 };
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -4,24 +4,24 @@ import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { RootProvider } from "fumadocs-ui/provider/next";
 import type { Metadata } from "next";
-import { Inter, JetBrains_Mono } from "next/font/google";
+import { Geist, JetBrains_Mono } from "next/font/google";
 import type { ReactNode } from "react";
 import { Toaster } from "~/components/ui/toaster";
 
-const inter = Inter({
+const geist = Geist({
 	subsets: ["latin"],
 });
 
-const jetbrainsMono = JetBrains_Mono({
+const mono = JetBrains_Mono({
+	variable: "--font-mono",
 	subsets: ["latin"],
-	variable: "--font-jetbrains-mono",
 });
 
 export const metadata: Metadata = {
 	icons: {
 		icon: [
 			{
-				url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sailboat"><style>@media (prefers-color-scheme:dark){svg{stroke:%23ffffff}}</style><path d="M22 18H2a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4Z"/><path d="M21 14 10 2 3 14h18Z"/><path d="M10 2v16"/></svg>',
+				url: "/assets/icon.svg",
 				type: "image/svg+xml",
 			},
 		],
@@ -32,7 +32,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 	return (
 		<html
 			lang="en"
-			className={`${inter.className} ${jetbrainsMono.variable}`}
+			className={`${geist.className} ${mono.variable}`}
 			suppressHydrationWarning
 			data-scroll-behavior="smooth"
 		>

diff --git a/apps/www/app/styles/base.css b/apps/www/app/styles/base.css
@@ -12,8 +12,8 @@
 	code,
 	pre {
 		font-family:
-			var(--font-jetbrains-mono), ui-monospace, SFMono-Regular, Menlo, Monaco,
-			Consolas, "Liberation Mono", "Courier New", monospace;
+			var(--font-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+			"Liberation Mono", "Courier New", monospace;
 	}
 }
 

diff --git a/apps/www/components/page/logo.test.tsx b/apps/www/components/page/logo.test.tsx
@@ -10,32 +10,42 @@ describe("Logo", () => {
 	it("renders the ArkEnv text", () => {
 		render(<Logo />);
 
-		const logo = screen.getByText("ArkEnv");
-		expect(logo).toBeInTheDocument();
+		const logoText = screen.getByText("ArkEnv");
+		expect(logoText).toBeInTheDocument();
+	});
+
+	it("renders the logo icon", () => {
+		render(<Logo />);
+		// Check for the image element
+		const img = document.querySelector("img");
+		expect(img).toBeInTheDocument();
+		expect(img).toHaveAttribute(
+			"src",
+			expect.stringContaining("/assets/icon.svg"),
+		);
 	});
 
 	it("applies default styling classes", () => {
 		render(<Logo />);
 
-		const logo = screen.getByText("ArkEnv");
-		expect(logo).toHaveClass("font-bold");
-		expect(logo).toHaveClass("text-fd-foreground");
-		expect(logo).toHaveClass("decoration-wavy");
-		expect(logo).toHaveClass("underline");
-	});
+		const container = screen.getByText("ArkEnv").parentElement;
+		expect(container).toHaveClass("flex");
+		expect(container).toHaveClass("items-center");
+		expect(container).toHaveClass("gap-2");
 
-	it("accepts custom className", () => {
-		render(<Logo className="custom-class" />);
+		const text = screen.getByText("ArkEnv");
+		expect(text).not.toHaveClass("font-bold");
+		expect(text).toHaveClass("text-fd-foreground");
 
-		const logo = screen.getByText("ArkEnv");
-		expect(logo).toHaveClass("custom-class");
-		expect(logo).toHaveClass("font-bold"); // should still have default classes
+		const img = document.querySelector("img");
+		// next/image might apply styles differently, but we passed className="size-6"
+		expect(img).toHaveClass("size-6");
 	});
 
-	it("renders as a code element", () => {
-		render(<Logo />);
+	it("accepts custom className", () => {
+		render(<Logo className="custom-class" />);
 
-		const logo = screen.getByText("ArkEnv");
-		expect(logo.tagName).toBe("CODE");
+		const container = screen.getByText("ArkEnv").parentElement;
+		expect(container).toHaveClass("custom-class");
 	});
 });
diff --git a/apps/www/components/page/logo.tsx b/apps/www/components/page/logo.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { cn } from "~/lib/utils";
 
 /**
@@ -8,13 +9,16 @@ import { cn } from "~/lib/utils";
  */
 export function Logo({ className }: { className?: string }) {
 	return (
-		<code
-			className={cn(
-				"font-bold text-fd-foreground relative decoration-[rgb(180,215,255)] decoration-wavy decoration-1 underline underline-offset-4",
-				className,
-			)}
-		>
-			ArkEnv
-		</code>
+		<div className={cn("flex items-center gap-2", className)}>
+			<Image
+				src="/assets/icon.svg"
+				alt=""
+				aria-hidden="true"
+				width={24}
+				height={24}
+				className="size-6"
+			/>
+			<span className="text-fd-foreground">ArkEnv</span>
+		</div>
 	);
 }
diff --git a/apps/www/content/docs/arkenv/index.mdx b/apps/www/content/docs/arkenv/index.mdx
@@ -9,6 +9,19 @@ import { SiGithub as GitHub } from "@icons-pack/react-simple-icons";
 <include cwd>../../packages/arkenv/README.md#introduction</include>
 <include cwd>../../packages/arkenv/README.md#features</include>
 
+## The ArkEnv icon 
+
+
+<img src="/assets/icon.svg" alt="ArkEnv icon" width="128" height="128"/>
+
+
+The ArkEnv icon tells the story of what we're building. It weaves together three distinct symbols:
+
+- **A gear**: At first glance, it's a settings gear, representing the core mechanical purpose of the library: precise environment configuration.
+- **A ship's wheel**: Look closer, and it's a ship's wheel. This honors the Ark motif, symbolizing the freedom to explore and build, steered by reliable technology.
+- **A lighthouse**: It is also the Japanese map symbol for a lighthouse. Just as a lighthouse warns sailors of danger, ArkEnv's typesafety guides your apps away from the rocky shores of runtime errors.
+
+
 ## Next steps
 
 <Cards>

diff --git a/apps/www/lib/source.tsx b/apps/www/lib/source.tsx
@@ -6,7 +6,7 @@ import { createElement } from "react";
 import { docs } from "~/.source";
 import { Badge } from "~/components/ui/badge";
 
-export type IconName = keyof typeof icons | "New";
+export type IconName = keyof typeof icons | "New" | "Updated";
 
 export const source = loader({
 	baseUrl: "/docs",
@@ -20,6 +20,10 @@ export const source = loader({
 			return createElement(SimpleIcons[`Si${icon}` as never]);
 		if (icon === "New")
 			return <Badge className="h-4 text-[10px] px-[0.2rem] order-1">new</Badge>;
+		if (icon === "Updated")
+			return (
+				<Badge className="h-4 text-[10px] px-[0.2rem] order-1">updated</Badge>
+			);
 
 		throw new Error(`${icon} is not a valid icon`);
 	},

diff --git a/apps/www/public/assets/icon.svg b/apps/www/public/assets/icon.svg
diff --git a/packages/arkenv/README.md b/packages/arkenv/README.md
@@ -1,7 +1,6 @@
 <p align="center">
-  <a href="https://arkenv.js.org">
-    <img alt="arkenv - Typesafe Environment Variables" src="https://og.tailgraph.com/og?titleFontFamily=JetBrains+Mono&textFontFamily=Inter&title=ArkEnv&titleTailwind=text-[%23e9eef9]%20font-bold%20relative%20decoration-%5Brgb(180,215,255)%5D%20decoration-wavy%20decoration-[5px]%20underline%20underline-offset-[16px]%20text-5xl%20mb-8&text=Typesafe%20environment%20variables%20powered%20by%20ArkType&textTailwind=text-[%238b9dc1]%20text-3xl&bgTailwind=bg-gradient-to-b%20from-[%23061a3a]%20to-black" width="645px">
-  </a>
+  <img alt="ArkEnv Logo" src="https://arkenv.js.org/assets/logo.svg" width="200px" align="center"/>
+  <h1 align="center">ArkEnv</h1>
   <br />
   <a href="https://github.com/yamcodes/arkenv/actions/workflows/test.yml?query=branch%3Amain"><img alt="Test Status" src="https://github.com/yamcodes/arkenv/actions/workflows/tests-badge.yml/badge.svg?branch=main"></a>
   <a href="https://bundlephobia.com/package/arkenv"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/arkenv"></a>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml