How to Add Your Own Logo and Branding in SassyPack

Your SaaS should look like you, not a template.
SassyPack makes rebranding fast and clean — no messy edits or buried configs.

Here’s how to give your app its own identity.

---

1. Replace the Logo

Go to: client/src/assets/logo.png

Replace it with your own logo file.
Recommended size: 512×512 px, PNG or SVG format.

Then open: client/src/components/Navbar.jsx

And update the import:

import logo from "../assets/logo.png";

If you’re using an SVG:

import { ReactComponent as Logo } from "../assets/logo.svg";

---

2. Update Colors (DaisyUI + Tailwind)

Open: tailwind.config.js

Find the theme section:

daisyui: {
  themes: [
    {
      mytheme: {
        primary: "#3D065F",
        secondary: "#F1A208",
        accent: "#FFF1EB",
        neutral: "#1A1A1A",
        "base-100": "#FFFFFF",
      },
    },
  ],
},

Change the colors to match your brand palette.

Example:

primary: "#2563EB", // Blue
secondary: "#14B8A6", // Teal
accent: "#FDE68A", // Soft Yellow

Then in your pages, use Tailwind classes like:

<button className="btn btn-primary">Get Started</button>

---

3. Set Global Font

Open: client/src/index.css

Add your preferred Google Font:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

body {
  font-family: "Inter", sans-serif;
}

You can also experiment with:

• Poppins — clean & modern
• Space Grotesk — techy & SaaS feel
• DM Sans — friendly & readable

---

4. Update Meta Info

For SEO and sharing, go to: client/public/index.html

Edit:

<title>Your SaaS Name</title>
<meta name="description" content="Your short product tagline here" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

Add your logo as a favicon:

• Replace public/favicon.ico with your own icon.

---

5. Customize Landing Page Hero

Open: client/src/pages/LandingPage.jsx

Change the heading and tagline:

<h1 className="text-5xl font-bold text-primary">
  Build your SaaS 5× faster
</h1>
<p className="mt-4 text-lg text-gray-600">
  Skip boilerplate. Start building what matters.
</p>

You can use your tone here — playful, professional, or bold.

---

6. Optional: Add Animation Flair

To make your branding pop, add subtle animations using Framer Motion:

npm install framer-motion

Then in your Hero section:

import { motion } from "framer-motion";

<motion.h1
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Your SaaS Name
</motion.h1>

---

Final Thoughts

Your brand tells your story.
SassyPack just gives you the head start — the rest is all yours.

Download SassyPack →

Build SaaS that looks and feels like you.