Themes & Styling

Launchpad Next is built as a unified design system where colors, fonts, and components all speak the same language.

At the center of it all is:

styles/globals.css

This is where your entire visual identity begins.

Global Styling

All theme values are controlled using CSS variables inside globals.css:

:root {
  --background: #0a0a0a;
  --foreground: #ffffff;
 
  --primary: #7c3aed;
  --secondary: #22c55e;
 
  --muted: #a1a1aa;
  --border: #27272a;
}

These variables power everything in the UI — buttons, text, borders, backgrounds, and accents.

Dark Mode

Dark mode is handled globally by toggling the .dark class:

.dark {
  --background: #0a0a0a;
  --foreground: #ffffff;
 
  --primary: #8b5cf6;
  --secondary: #34d399;
 
  --muted: #71717a;
  --border: #27272a;
}

Switching themes is just swapping variables — no component rewrites needed.

Fonts

Typography in Launchpad Next uses Next.js built-in font optimization for speed and zero layout shift.

Google Fonts

Example using Inter:

import { Inter } from "next/font/google"
 
export const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
})

Apply it globally:

<html lang="en" className={inter.variable}>
  <body>{children}</body>
</html>

Now your font is globally available through CSS variables.

Custom Fonts

You can also use your own fonts locally.

Step 1: Add your font file

public/fonts/
  Satoshi.woff2

Step 2: Register the font

import localFont from "next/font/local"
 
export const satoshi = localFont({
  src: "../public/fonts/Satoshi.woff2",
  variable: "--font-sans",
})

Step 3: Apply globally

<html lang="en" className={satoshi.variable}>

Font Strategy

Launchpad Next uses a simple three-variable typography system:

| Variable | Usage |
| --- | --- |
| `--font-sans` | Main UI text |
| `--font-display` | Hero headings (optional) |
| `--font-mono` | Code blocks |

This keeps your design scalable and consistent.

Components

Themes don't only control colors and fonts — they also define how components feel.

UI Components

Small reusable building blocks:

components/ui/button.tsx
components/ui/card.tsx
components/ui/input.tsx

Example:

export function Button({ children }: { children: React.ReactNode }) {
  return (
    <button className="px-4 py-2 rounded-md bg-primary text-white">
      {children}
    </button>
  )
}

These automatically inherit theme variables.

Section Components

Landing page sections:

components/sections/hero.tsx
components/sections/features.tsx
components/sections/pricing.tsx

Example:

import { heroContent } from "@/content/hero"
 
export function Hero() {
  return (
    <section className="py-24 text-center">
      <h1 className="text-5xl font-bold">
        {heroContent.title}
      </h1>
      <p className="mt-4 text-muted-foreground">
        {heroContent.subtitle}
      </p>
    </section>
  )
}

UI stays clean because content is separated from structure.

Layout Components

Structure-level components:

components/layout/navbar.tsx
components/layout/footer.tsx

Example:

export function Navbar() {
  return (
    <nav className="flex items-center justify-between p-4 border-b">
      <div className="font-bold">Launchpad Next</div>
    </nav>
  )
}

Shared Components

Reusable utilities:

components/shared/container.tsx

Example:

export function Container({ children }: { children: React.ReactNode }) {
  return <div className="mx-auto max-w-6xl px-6">{children}</div>
}

Mental Model

Think of Launchpad Next as layers that work independently but form one system:

| Layer | Role |
| --- | --- |
| `globals.css` | Visual DNA — colors and mood |
| Fonts | Voice of the product |
| Components | Physical structure |
| Content | Messaging layer |

Why This System Works

One file controls the global theme
Fonts are optimized via Next.js
Components inherit styles automatically
Content stays separate from UI logic
Rebranding takes minutes, not hours

You're Ready 🚀

Now you can:

Rebrand your SaaS instantly
Swap fonts without breaking layout
Build scalable UI systems
Maintain clean separation of design and content