Branding & Theming

Open Sky Commerce uses Tailwind CSS with a custom design token system. Colors, fonts, and spacing are configured in tailwind.config.js.

Colors

The theme defines a set of semantic color tokens. To change the primary brand color, update the blue palette in tailwind.config.js:

// tailwind.config.js
theme: {
  extend: {
    colors: {
      blue: {
        DEFAULT: "#3563E9",   // primary action color
        dark: "#1a3cb1",      // hover state
        light: "#93b4fb",     // accents, badges
      },
      dark: {
        DEFAULT: "#111928",
        2: "#1a2535",
        3: "#212c3c",
        4: "#6b7280",
      },
      // ...
    }
  }
}

Logo

Replace the logo image file at public/images/logo/. The header component references this path. Update the alt text in src/components/Header/ to match your brand name.

Fonts

The global font is set in src/app/layout.tsx via Next.js Font Optimization. Replace the imported Google Font with your preferred typeface:

import { Inter } from "next/font/google";

const font = Inter({ subsets: ["latin"] });

Site Name

Your site name is stored in the database under Admin → Settings → SEO → Site Name. It appears in page titles, email templates, and the header. Updating it there propagates everywhere automatically.

Favicon

Replace public/favicon.ico (and optionally add apple-touch-icon.png) to update the browser tab icon.

Global CSS

Additional global styles can be added in src/app/css/globals.css. Tailwind base, components, and utilities are imported there.