Customizing Tobesee: Changing Colors, Fonts, and Layout Without Breaking Things

Tobesee ships with a clean emerald-green design, but most site owners want to make it their own. This guide shows you how to change colors, fonts, and layouts safely — making modifications that look professional without introducing bugs or breaking the responsive design.

Before You Start

Make all customizations on a local development environment first. Run npm run dev and preview changes in your browser before deploying. This way, if something breaks, your live site is unaffected.

Keep a mental model of the customization layers:

Tailwind config (tailwind.config.js) — global design tokens like colors and fonts
Component files (src/components/) — reusable UI elements
Page files (src/app/) — individual page layouts
Global styles (src/app/globals.css) — base styles and Tailwind directives

Changing the Color Scheme

Method 1: Find and Replace Color Classes

The quickest approach is to search for the current color classes and replace them. Tobesee uses emerald as its primary color. To switch to blue:

Search for emerald across all files in src/ and replace with blue:

text-emerald-700 → text-blue-700
bg-emerald-50 → bg-blue-50
border-emerald-100 → border-blue-100
from-emerald-50 to-teal-50 → from-blue-50 to-indigo-50

This works for simple color swaps but can miss edge cases.

Method 2: Define Custom Colors in Tailwind Config

For more control, define a custom color palette:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
        },
      },
    },
  },
};

Then replace emerald-XXX classes with primary-XXX throughout the codebase. This approach makes future color changes easier — you only need to update the config file.

Changing Fonts

Step 1: Choose a Font

Google Fonts offers thousands of free fonts. Popular choices for content sites:

Inter (current default) — clean, modern, excellent readability
Merriweather — serif font, great for long-form reading
Fira Code — monospace, ideal for code-heavy sites
Poppins — geometric, friendly feel
Source Sans Pro — professional, neutral

Step 2: Add the Font

In src/app/layout.tsx, import the font from next/font/google:

import { Poppins } from 'next/font/google';

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '500', '600', '700'],
  variable: '--font-poppins',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={poppins.variable}>
      <body className="font-sans">{children}</body>
    </html>
  );
}

Step 3: Update Tailwind Config

Tell Tailwind to use your new font:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-poppins)', 'system-ui', 'sans-serif'],
      },
    },
  },
};

Next.js next/font automatically optimizes font loading — it self-hosts the font files and eliminates layout shift during loading.

Modifying the Layout

Changing the Navigation

The navigation component is in src/components/. To add a new link:

<a href="/new-page" className="text-emerald-600 hover:text-emerald-800 transition-colors">
  New Page
</a>

To reorder links, simply move the <a> elements within the navigation component.

Adjusting Content Width

Tobesee uses max-w-6xl (1152px) for the main content area. To make it wider or narrower:

max-w-4xl — 896px (narrower, better for text-heavy pages)
max-w-5xl — 1024px (medium)
max-w-6xl — 1152px (current default)
max-w-7xl — 1280px (wider, good for grid layouts)

Search for max-w-6xl in your components and replace as needed.

Adding a New Static Page

Create a new directory under src/app/:

src/app/new-page/page.tsx

Add the page component:

export const metadata = {
  title: 'New Page - Tobesee',
  description: 'Description for SEO',
};

export default function NewPage() {
  return (
    <div className="max-w-4xl mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold text-emerald-800 mb-6">New Page</h1>
      <p className="text-emerald-600">Your content here.</p>
    </div>
  );
}

Add the page to your navigation and sitemap.

Modifying the Footer

The footer component (src/components/Footer.js) contains site links, legal links, and copyright information. Common modifications:

Change the copyright text — update the year and site name
Add social media links — add icons and links to your profiles
Modify link sections — add or remove link groups
Change the background color — modify the bg- class on the footer element

Testing Your Changes

After making customizations:

Visual check — browse every page on your local dev server
Responsive check — resize your browser window or use Chrome DevTools device emulation
Build test — run npm run build to catch any errors
Lighthouse audit — run a Lighthouse test to check performance, accessibility, and SEO scores

Common Mistakes to Avoid

Editing node_modules — never modify files in node_modules/. Changes are lost on npm install.
Hardcoding colors — use Tailwind classes instead of inline style attributes. This keeps your design consistent and maintainable.
Removing responsive classes — if you see md: or lg: prefixed classes, they handle tablet and desktop layouts. Removing them breaks the responsive design.
Forgetting the sitemap — when adding new pages, update src/app/sitemap.ts so search engines can find them.

Summary

Customizing Tobesee is straightforward because the design system is built on Tailwind CSS utility classes. Change colors in the Tailwind config, swap fonts through Next.js font optimization, and modify layouts by adjusting component files. Always test locally before deploying, and keep your changes organized so future updates to the Tobesee codebase can be merged without conflicts.