Skip to main content

​
Brand Colors

Edit config/branding.ts at the top: 
export const brandConfig = {
  primary: "#a855f7",   // Main brand color
  light: "#a86fe0",     // Lighter shade for hover states
  dark: "#7c3aed",      // Darker shade for active states
};

​
How to Choose Colors

Use a color picker
  1. Visit coolors.co or color.adobe.com
  2. Pick your main brand color
  3. Generate lighter and darker shades
  4. Copy hex codes (e.g., #a855f7)
Creating shades:
  • Light: Increase brightness by 10-15%
  • Dark: Decrease brightness by 10-15%
Online shade generators:

​
🏢 Site Information

Basic company info: 
export const siteConfig = {
  name: "Latch",
  copyright: `© ${new Date().getFullYear()} Latch. All rights reserved.`,

  // External links (panels, status page)
  links: {
    billingPanel: "https://billing.latch.gg",
    gamePanel: "https://panel.latch.gg",
    status: "https://status.latch.gg",
    careersEmail: "[email protected]",
    partnerEmail: "[email protected]",
  },

  // Email addresses
  emails: {
    contact: "[email protected]",
    partners: "[email protected]",
    careers: "[email protected]",
  },
};
Customization:
  • Replace “Latch” with your company name
  • Update all URLs to your actual panel URLs
  • Change email addresses to your domains
Add your social media profiles: 
export const socialLinks = [
  {
    name: "Discord",
    url: "https://discord.gg/latch",
    icon: "discord",  // Built-in icon OR custom URL
  },
  {
    name: "Twitter",
    url: "https://twitter.com/latchgg",
    icon: "twitter",
  },
  {
    name: "GitHub",
    url: "https://github.com/latch",
    icon: "github",
  },
];

​
Built-in Icons

Available social icons (no setup needed):
  • discord
  • twitter
  • github
  • facebook
  • instagram
  • youtube
  • linkedin
  • tiktok
  • twitch

​
Custom Icons

Use your own icon image: 
{
  name: "Custom Platform",
  url: "https://example.com",
  icon: "/icons/custom.svg"  // Path to your icon file
}
Icon requirements:
  • Place in public/icons/ folder
  • Format: SVG or PNG
  • Size: 24x24px minimum
  • Color: White/monochrome (for dark backgrounds)

​
Full Example

export const socialLinks = [
  { name: "Discord", url: "https://discord.gg/yourserver", icon: "discord" },
  { name: "Twitter", url: "https://twitter.com/yourhandle", icon: "twitter" },
  { name: "YouTube", url: "https://youtube.com/@yourchannel", icon: "youtube" },
  { name: "TikTok", url: "https://tiktok.com/@yourhandle", icon: "tiktok" },
  { name: "Instagram", url: "https://instagram.com/yourhandle", icon: "instagram" },
  { name: "Twitch", url: "https://twitch.tv/yourchannel", icon: "twitch" },
  { name: "LinkedIn", url: "https://linkedin.com/company/yourcompany", icon: "linkedin" },
  { name: "Facebook", url: "https://facebook.com/yourpage", icon: "facebook" },
  { name: "GitHub", url: "https://github.com/yourorg", icon: "github" },
];