Set up your brand kit — colors, fonts, logo

How to set up your brand kit in SGEN

Every site on SGEN has a Globals layer — a single place where your brand colors, fonts, logo, and favicon are defined once and applied everywhere. When you update a color in Globals, it updates on every page that uses that color. When you swap your logo, it swaps on every header that displays it. One change, site-wide effect.

This guide walks through setting up that Globals layer for the first time. By the end, your SGEN site will reflect your actual brand — the right palette, the right typefaces, the right logo in the header, the right favicon in the browser tab. Every page you build afterward inherits those settings automatically.

The examples throughout this guide use a deep espresso brown (#2B1810) as primary, a warm cream (#F5EDE0) as secondary, Playfair Display for headings, and Source Sans 3 for body text. Swap in your own values as you work through each step.

What is this for?

Globals is SGEN's brand token system. It stores the design decisions that define how your site looks — colors, fonts, logo, and favicon — and makes them available to every part of the platform.

When SG-Builder renders a section, it reads those tokens. When your blog index renders a post title, it reads those tokens. When a visitor opens your site on a phone, the same tokens apply. You set the value once; the platform handles distribution.

The brand kit setup in this guide covers four token categories.

Colors — your primary brand color and secondary brand color. These feed into buttons, links, headings, backgrounds, and any component that references a brand color slot. SGEN Globals also supports accent and neutral color slots for teams that need a broader palette.

Fonts — your heading font and body font. These are applied to typographic elements across every page, including blog posts, landing pages, and forms. You can select from Google Fonts or upload a self-hosted typeface.

Logo — the image that appears in your site header. Uploaded through the Media library and referenced in Globals. SG-Builder reads the logo token when rendering header components, so a single upload propagates to every header template.

Favicon — the small icon that appears in the browser tab, in bookmarks, and in mobile home screen shortcuts. Separate from the logo — typically a simplified version of your mark at 32×32 or 64×64 pixels.

Good use cases

Setting up Globals is the right first step in any of these situations.

Launching a new site with a defined brand identity. Your designer has handed off exact hex values, a Google Fonts pairing, and finalized logo files. Before any page is built, the first task is entering those values into Globals so every page that gets built from that point forward is on-brand by default. Skipping this step means individually styling each page — which is how inconsistency accumulates.

Rebranding an existing site. When a visual identity refreshes — warmer palette, a new logotype, a different heading font — Globals makes the rebrand happen in one screen: update the primary color, swap the logo file, change the heading font, save. Every page updates automatically. Without Globals, the same change means hunting through hundreds of pages for hard-coded values.

Preparing a site for SG-Builder work. When the design team starts building pages in SG-Builder, they use Globals tokens as design inputs — not hard-coded values. If Globals is not set up before SG-Builder work begins, each designer picks their own color references and the pages come out inconsistent. Setting Globals first gives the team a shared foundation.

Ensuring the site header and favicon match the brand. Sometimes a site goes live with a placeholder logo or the default SGEN favicon. Globals is where you fix both. Upload the correct logo file, reference it in Globals, upload the correct favicon, and both are immediately live.

Onboarding a new team member who owns brand maintenance. When a new designer or marketing manager takes over the site, pointing them to Globals gives them a single screen where the brand is defined and editable. They do not need to find the right template or the right page — the token is in one place.

What NOT to use this for

Per-page color overrides. Globals sets site-wide defaults. If you need a specific section on one page to use a different background color, that override belongs in SG-Builder's per-component style controls or in a scoped Custom CSS rule — not in Globals. Changing a Globals value changes it everywhere, which is the wrong tool for a one-page exception.

Custom CSS one-off tweaks. Globals is not a CSS editor. If you need to target a specific selector with a custom rule, use the Custom CSS area under Settings. Globals is for design tokens — values that should propagate site-wide by design.

Theme rework or structural layout changes. Globals controls brand identity tokens. It does not control page structure, grid layout, spacing scale, or which templates are applied to which pages. Those decisions live in SG-Builder and in Template settings. If your layout is wrong, Globals is not the fix.

Uploading all brand assets. Globals references the logo and favicon, but it is not a general-purpose brand asset library. Marketing materials, social graphics, photography, and document templates all belong in the Media library. Globals specifically references the logo file and favicon file — nothing else.

Typography overrides for a specific post or page. If you want a single blog post to use a different font, that is an inline style or a Custom CSS override on that specific page type — not a Globals change. Changing the Globals font setting changes every heading or every body text on the entire site.

How this connects to other features

The brand kit you set up in Globals feeds into several other parts of SGEN.

SG-Builder reads color and font tokens from Globals when rendering components. When you drop a Hero component into a page and it displays in your brand's primary color, that is Globals at work. Designers working in SG-Builder should not hard-code color hex values — they should reference the token, so a future Globals update propagates automatically.

Custom CSS can reference Globals CSS variables for advanced styling. If your primary color is defined in Globals, it becomes available as a CSS variable in the Custom CSS editor, which means you can write rules that stay in sync with the brand token rather than duplicating the value.

Media library is where logo and favicon files are uploaded before being referenced in Globals. The upload happens in Media first; Globals then points to the uploaded file. If you need to swap the logo, you upload the new file to Media and update the reference in Globals — you do not delete the old file until you are sure the new one is live.

Templates use the heading and body fonts set in Globals. Blog post templates, page templates, and form templates all inherit typography from the Globals layer. There is nothing to configure per-template — the font choice propagates automatically once Globals is saved.

Favicon set in Globals appears in browser tabs, in bookmark lists, in mobile home screen shortcuts, and in browser history. It is small — 32×32 or 64×64 pixels — and should be a simplified version of your mark that is legible at that size. A small icon or symbol works better than the full horizontal wordmark at that scale.

Before you start

Have these four things ready before opening Globals.

Your primary and secondary brand colors as hex values. The color picker in Globals accepts hex codes directly. Have them written down — for example, a primary of #2B1810 and a secondary of #F5EDE0. RGB values and HSL values can be converted to hex using any free online color converter. If you are working from a brand style guide, the hex values are usually listed there. If you are working from a designer's Figma or Sketch file, the colors are in the design system panel.

Your logo file. A PNG or SVG file of your horizontal logotype. SVG is preferred because it scales without loss at any size — critical for retina displays and large-screen headers. PNG is fine if the SVG is not available. The file should have a transparent background if the header is a color other than white. Prepare a light-background and a dark-background version if your header color varies.

Your favicon file. A PNG file, ideally square, at 64×64 or 128×128 pixels. Modern browsers will resize it as needed. The image should be a simplified mark — an icon or a single letterform — not the full wordmark. If your logo is a wordmark with no icon, a single initial in your brand color on a transparent background works well.

Your font choices. Know which typeface you want for headings (H1-H4) and which for body text (paragraphs, labels, captions). If you are using Google Fonts, know the name as it appears in the Google Fonts library — for example, "Playfair Display" or "Source Sans 3" — not a nickname. If you are using a self-hosted font, have the font files ready for upload in the Custom Fonts area before you start the Globals setup.

Where to go

There are two paths to Globals.

Via SG-Admin Settings: Go to SG-Admin in the left navigation, then Settings, then Globals. This is the full Globals editor with all token categories on separate tabs.

Via SG-Builder: When editing a page in SG-Builder, click the Globals button in the top toolbar. This opens a panel that shows the same token settings. Changes made here are identical to changes made in the admin Settings — same data, same effect.

For the initial brand kit setup, the Settings path is recommended. It gives you a full view of all tabs and makes it easier to move between Colors, Typography, and Logo and Favicon without losing your place in a page editor.

Steps — Set up your brand kit in SGEN

These steps follow the order that makes the most sense on first setup: logo and favicon first so the site looks like yours immediately, then colors, then fonts.

1. Upload your logo to the Media library

Before Globals can reference your logo, the file needs to be in the Media library. Go to SG-Admin, then Media. Click Upload Files. Before clicking Upload, toggle the format to WebP (or keep PNG if you are uploading an SVG) and toggle compression to On — SGEN's media upload defaults are format=Original and compression=Off, which can result in oversized files.

Select your logo file and upload it. Once uploaded, click the file in the Media library to open its details panel. Copy the file URL from the details panel — you will not need to paste it anywhere, but knowing the file is there and ready is the checkpoint for this step.

Repeat for the favicon file. Upload it the same way. You now have both files in the Media library.

2. Set your logo and favicon in Globals

Go to the admin → Settings → Globals. Click the Logo and Favicon tab.

In the Logo field, click Select from Media. The Media library opens. Find and click the logo file you uploaded. Confirm the selection.

A preview of the logo appears below the field. Check that it looks correct — right file, not stretched, not pixelated. If the preview looks wrong, the file may need to be re-exported from your design tool at a higher resolution or in a different format.

In the Favicon field, follow the same process: click Select from Media, find the favicon file, confirm. The favicon preview shows a small square thumbnail — it should be legible as an icon at that size.

Do not save yet. Continue to the next step and set colors before saving everything at once.

3. Set your primary and secondary brand colors

Click the Colors tab in Globals.

In the Primary color field, type your brand's primary hex value. Press Tab or click out of the field — the color swatch next to the field updates to show the selected color.

Check the preview. Does the swatch match your brand color? If not, check that the hex value is entered correctly — six characters after the # sign, no spaces.

In the Secondary color field, enter your secondary brand color. The secondary color is typically used on background bands, alternate section fills, and secondary buttons.

If your brand kit includes an accent color — used on badges, highlights, or call-to-action variations — enter it in the Accent color field. If you do not have a defined accent, leave this field blank and it will default to the primary.

4. Set your heading and body fonts

Click the Typography tab in Globals.

In the Heading font dropdown, type the name of your heading typeface. If it is a Google Font, start typing the name and the dropdown will filter. Select the correct font.

Set the Heading font weight. Most display typefaces look correct at Bold (700). If your brand style guide specifies a different weight, match it here.

In the Body font dropdown, select your body typeface. Body fonts should be legible at small sizes — 14px to 16px — and in long reading contexts.

If you are using a self-hosted or custom typeface that does not appear in the Google Fonts list, you will need to upload it first via Settings → Custom Fonts, then return to the Typography tab and select it from the dropdown under Custom font (uploaded).

5. Preview the combined result

Before saving, use the Preview button on the Typography tab to see how the heading and body fonts render together. The preview shows a sample heading in H1, H2, and H3 sizes alongside body text paragraphs and a button using the primary color. This gives you a reasonable sense of how the brand kit will look before it is live.

Check these things in the preview.

• The heading font matches the brand — correct letterforms,

correct weight.

• The body font is legible at 16px in a paragraph block.
• The primary color on the button reads correctly — dark

enough to distinguish from white, light enough for white label text to contrast.

• The two fonts work together. A common issue is a heavy

decorative heading font paired with a body font that is too light or too heavy by comparison. If it looks off, adjust the heading weight or try a different body weight.

6. Save and confirm site-wide application

When the preview looks correct, click Save Changes. SGEN saves all open Globals values and applies them site-wide.

Open a new browser tab — or a private browser window to avoid cached assets — and navigate to your site's homepage. Verify four things.

1. The logo in the header matches the file you uploaded.
2. The favicon in the browser tab matches the file you

uploaded.

1. A heading on the homepage renders in your heading font.
2. Body text renders in your body font.

If the fonts or colors do not appear to have changed, the browser may be serving cached assets. Perform a hard refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) to force the browser to reload CSS.

What success looks like

When the brand kit is set up correctly, these things are true when you open your site in a private browser window.

• The correct logo appears in the site header on every

page — homepage, blog index, individual post pages, and any page built with SG-Builder.

• The favicon in the browser tab is the mark you uploaded,

not the default SGEN icon.

• Headings on every page render in the font you set in

Globals — the H1 on the homepage, the post title on a blog page, the section heading inside an SG-Builder component.

• Body text on every page renders in the body font you

set — paragraphs in blog posts, form labels, captions, navigation items.

• Buttons and primary links use the primary brand color

you set in Globals.

• Alternate section backgrounds use the secondary color

on pages built from templates that reference the secondary color token.

• No SGEN default placeholder colors appear — no leftover

blue from the default SGEN theme unless blue is your actual brand color.

• If you open a page in SG-Builder after saving Globals,

the component palette reflects your brand colors in the token slots.

What to do if it does not work

Font not loading — heading or body text falls back to a browser default serif or sans-serif. The most common cause is a typo in the font name in the Globals typography tab. Open the Typography tab in Globals and confirm the font name matches the Google Fonts library exactly. "Playfair Display" and "Playfair display" may behave differently depending on the field's case sensitivity. Delete the current value and re-type it, or use the dropdown to re-select. Save, then do a hard refresh (Ctrl+Shift+R / Cmd+Shift+R) in the browser.

If the font name is correct but the font still is not loading, the typeface may be blocked by a privacy filter in your browser or by an ad blocker. Google Fonts loads a stylesheet from fonts.googleapis.com. If your browser or network blocks that domain, the font will not load. Test in a different browser or on a different network to confirm. If it loads there but not on your usual browser, the issue is the privacy filter — the font is set correctly in SGEN.

Logo appears too large or too small in the header. The logo is the correct file, but it is rendering at the wrong size in the header. Go to Globals → Logo and Favicon. Find the Logo max-height field and adjust the value. A typical range is 32px to 64px. Most site headers look correct with a logo height between 40px and 56px. Try 48px as a starting point. Save and hard-refresh.

If the logo looks blurry at the correct height, the source file resolution is too low. Re-export the logo from your design tool at 2x or 3x the intended pixel height and re-upload. For a 48px display height, a source file at 144px or 192px tall will be sharp on all screens including retina.

Favicon stuck at default — the SGEN icon or a placeholder still appears in the browser tab. Favicons are heavily cached by browsers. After saving a new favicon in Globals and confirming it saved correctly (the preview in Globals shows the right image), the browser tab may still show the old favicon for the current session. Close all tabs on your site, close the browser entirely, reopen, and navigate back to your site. The new favicon should appear. If it still shows the old icon, clear the browser cache manually (Ctrl+Shift+Delete / Cmd+Shift+Delete) and reload.

Colors not applying to a specific component or section. Most SGEN components read from the Globals color tokens by default, but some components — especially ones built or modified in SG-Builder — may have their color set explicitly in the component's own style settings, overriding the Globals token. Open that component in SG-Builder, find the color setting, and check whether it has a hard-coded hex value. If it does, clear the hard-coded value and set it to use the Globals token instead. The component will then update automatically whenever the Globals value changes.

Fonts blocked by a privacy filter — fonts load in some browsers but not others. Some privacy-focused browsers and browser extensions block Google Fonts requests because they are cross-origin network calls. The font is set correctly in SGEN, but the browser refuses to load it. The solution is to self-host the font: download the font files from Google Fonts, upload them via the admin → Settings → Custom Fonts, and reference the custom uploaded version in Globals instead of the Google Fonts entry. Self-hosted fonts load from your own domain and are not affected by cross-origin privacy filters.

Primary color change did not update an existing page. Some pages built in SG-Builder before the Globals update may have hard-coded color values in their components rather than using the Globals token. The fix is the same as above: open the component in SG-Builder, find the hard-coded color, and replace it with the token reference. Going forward, designing with token references in SG-Builder means Globals updates propagate automatically.