Skip to main content

Branding & Design

Make the workspace and customer portals look like your own brand.

What is this?​

The Branding & Design section lets you upload your company logos, pick your brand's official colors, and choose the fonts and button styles used across Orbit.

Why would I use this?​

A consistent brand looks professional. Instead of your staff and customers seeing generic Orbit branding, they will see your logo, your corporate colors, and a design that feels like an extension of your own company.

You may need to update Branding & Design when:

  • Your company undergoes a visual rebrand.
  • You want to modernize the look of your customer storefront.
  • You have a new, updated company logo.

How to get here​

  1. Open Orbit.
  2. Go to Settings in your navigation menu.
  3. Under Organization, select Branding & Design.

Application URL: /org/settings?tab=branding

How to use this page​

You can upload image files directly from your computer, or paste a web link to an image you already have online. For colors, you can use the color picker tool or type in a specific Hex code (like #000000 for black).

(Image: Branding and Design - Assets)

(Image: Branding and Design - UI)

Fields​

What it is: Your primary company picture. What should I enter? Upload an image file (Max 2MB) from your computer, or paste a link to an image in the "Main Logo URL" box. Example: Your company's full logo with the name included. Required? No, but highly recommended. What happens if I change it? This logo appears in the top corner of your main workspace and at the top of customer-facing storefronts. Things to know: The system will automatically resize huge images so they load quickly.

Favicon​

What it is: The tiny icon that shows up in your web browser's tab, right next to the page title. What should I enter? Upload a small, square image (Max 1MB). Example: Just the symbol or first letter of your brand. Required? No. What happens if I change it? When someone has your workspace open in their browser, they will see this tiny icon on the tab. Things to know: Because this icon is displayed so small, avoid using text. A simple shape works best.

What it is: A version of your logo optimized for small phone screens. What should I enter? Upload an image file. Usually, this is just your brand symbol without the full company name. Required? No. What happens if I change it? When a customer views your storefront on a mobile phone, Orbit will use this logo instead of the Main Logo to save space. Things to know: If you leave this blank, the system will just shrink your Main Logo to fit on phones.

What it is: An alternate logo used when the screen background is dark. What should I enter? Upload an image file. If your normal logo is black, your Dark Mode Logo should be white. Required? No. What happens if I change it? If a user switches their computer to "Dark Mode", Orbit will automatically swap to this logo so it remains readable against the dark background. Things to know: If your Main Logo is already bright and colorful, you might not need a Dark Mode Logo.

Primary Color​

What it is: Your brand's main highlight color. What should I enter? Click the color box to pick a color, or type a 6-character Hex code. Example: #2563eb (Blue) Required? No. What happens if I change it? The main buttons (like "Save" or "Submit"), active menu links, and important highlights across your customer pages will instantly change to this color. Things to know: Choose a color that is easy to read if white text is placed on top of it.

Secondary Color​

What it is: An accent color for less important elements. What should I enter? A color that complements your Primary Color. Example: #1e40af (Dark Blue) Required? No. What happens if I change it? Secondary buttons and subtle background highlights will use this color. Things to know: If you aren't sure, picking a slightly darker version of your Primary Color is a safe choice.

Font Family​

What it is: The style of text used across the platform. What should I enter? Select a font from the dropdown list. Example: Inter Required? No. What happens if I change it? All the text—from menus to customer descriptions—will instantly change to the selected font style. Things to know: "Inter" and "Roboto" are excellent, readable defaults for modern businesses.

Button Style​

What it is: The physical shape of buttons on the screen. What should I enter? Select either Rounded, Sharp, or Pill. Example: Pill Required? No. What happens if I change it? All clickable buttons will change their corners. Sharp gives perfect squares, Rounded softens the edges, and Pill makes the sides completely round. Things to know: This is purely a stylistic choice to match your brand's vibe.

Theme Mode​

What it is: The default color scheme of the workspace. What should I enter? Select Light, Dark, or System. Example: System Required? No. What happens if I change it? Light forces a white background, Dark forces a dark background. System automatically matches whatever the user prefers on their computer. Things to know: Setting this to System provides the best experience for most users.

Border Radius & Base Font Size​

What it is: Advanced settings for exact spacing and text sizing. What should I enter? A CSS measurement value. Example: 0.5rem or 16px Required? No. What happens if I change it? Changes the global sizing calculations. Things to know: Unless you are a web designer and know what "rem" or "px" means, it is highly recommended to leave these fields exactly as they are!

What happens after I save?​

When you click Save Changes, your new logos, colors, and fonts are saved. The workspace will immediately refresh, and you will see your new colors applied to the buttons on the screen right in front of you. Customers visiting your storefronts will also instantly see the updated branding.

Example​

Suppose your company decides to rebrand with a new vibrant green theme. You come to this page, upload your new logo, and change the Primary Color to #10b981 (Green). You click Save Changes. Instantly, the "Add Project" buttons, the navigation highlights, and the "Buy Now" buttons on your online store turn green to match your new brand.

Common questions​

Do I have to upload all four logos?​

No. You only need to upload the Main Logo. Orbit will automatically handle mobile screens and dark mode the best it can using just the Main Logo. The other options are just there if you want perfect control.

I uploaded an image, but it looks squished or blurry. Why?​

Orbit resizes images to ensure your pages load quickly. For the best results, use a high-quality PNG image with a transparent background.

Common problems​

I can't read the text on my buttons anymore​

Why you're seeing this: You likely chose a very bright or very light Primary Color (like bright yellow or white). Orbit puts white text on primary buttons, so white text on a white button becomes invisible. How to fix it: Choose a darker, richer Primary Color.

Things to keep in mind​

  • Brand Consistency: These settings affect your entire organization. Changing a color here changes it for all your projects and storefronts simultaneously.

Technical / Implementation Notes​

Component: OrganizationSettings (Branding Tab) API: PUT /org/config/branding Source files: /src/routes/org/OrganizationSettings.tsx Downstream usage:

  • primary_color and secondary_color are passed dynamically to the PageRenderer and layoutBlocks.tsx to override CSS custom properties (variables) on the fly for storefront rendering.
  • Uploaded images are passed through a client-side resize utility (using ImageUploadGroup with maxSizeMB) before being converted to Base64 and sent to the backend.