ShipNext

Replace the ShipNext brand name, logo, favicon, Open Graph image, theme colors, fonts, radius, and color mode behavior.

Branding is split across configuration, static assets, and CSS variables. Update the site name and URL in Website Configuration, then replace the visual assets.

Key files

Purpose	File	Current state
Brand name, logo path, favicon path	`config/website.ts`	`metadata.logo = "/logo.svg"`
Logo component	`components/*`	Some surfaces still render text brand
Marketing navigation	`components/navbar/*`	Reads `websiteConfig.metadata.title`
Footer copy	`components/landing/footer/*`	Reads configured labels and links
Theme variables	`app/globals.css`	Tailwind v4 variables with light and dark tokens
Font loading	`app/layout.tsx`	`Geist`, `Geist_Mono`, `Space_Grotesk`
Theme provider	`app/layout.tsx`	Driven by `websiteConfig.ui.mode`
Email visuals	`src/modules/email/components/email-layout.tsx` in full template variants	Email styles are independent from site CSS

Logo

Place the logo in public/, for example:

public/logo.svg

Then keep or update the path:

const metadataConfig = {
  logo: "/logo.svg",
};

If you want every surface to show an image logo instead of text, replace the relevant brand title usage with the shared logo component or next/image.

Favicon and Open Graph image

The favicon convention file currently lives at:

app/favicon.ico

websiteConfig.metadata.favicon can also be used by metadata, but App Router convention files have direct browser impact. Check both when replacing the favicon.

The default social sharing image is typically:

public/og.png

Use a 1200x630 PNG and preview it with social sharing tools before launch.

Theme colors and radius

Theme variables live in app/globals.css:

:root {
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --radius: 0.625rem;
}

.dark {
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
}

Tailwind classes such as bg-primary, text-primary-foreground, and rounded-lg map to these variables. When changing colors, check contrast for buttons, links, focus rings, forms, Dashboard navigation, and docs surfaces.

Fonts

The root layout loads fonts with next/font:

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

If your product targets Chinese users heavily, use a font strategy that covers Chinese glyphs and verify the CSS variable mapping.

Light and dark mode

app/layout.tsx uses ThemeProvider and websiteConfig.ui.mode to control theme switching. After changing brand colors, verify:

/
/pricing
/sign-in
/dashboard/settings/profile
/dashboard/settings/billing
/docs

If any section hardcodes bg-white or text-black, convert it to semantic classes such as bg-background and text-foreground.

Recommended order

Update websiteConfig.metadata.title, description, and url.
Replace public/logo.svg and connect it where needed.
Replace app/favicon.ico.
Replace public/og.png.
Adjust app/globals.css tokens for --primary, --ring, --radius, and .dark.
Update footer brand copy.
Update email template visuals if you need the same branding in email.

Checklist

Navbar, auth pages, footer, and Dashboard use the same brand name.
Logo is clear on light and dark backgrounds.
Favicon appears correctly in browser tabs.
Social sharing title, description, and image are correct.
Buttons, links, and focus rings match the brand and remain accessible.
Dark mode has no obvious white leaks.
Email branding matches the site.

Branding

On this page