Designer SGEN onboarding guide
| Field | Value ||---|---|| Audience | sgen-admins || Page type | guide || Area | _workflows/role-onboarding || Updated | 2026-05-25 |How to onboard as a Designer in SGEN
This guide is your operating playbook as a designer using SGEN. It covers the four surfaces you own — Globals, SG-Builder, Media, and Templates — and shows you how to establish the brand kit once, build layouts that editors can extend without breaking, and hand off a design system that stays coherent from homepage to landing page. The workflow is structured in phases: load the brand into Globals before you touch a single page, build the homepage hero before any secondary layout, and create reusable section templates before handing anything off. It also names the areas you should never need to enter, so you can stay focused on the visual layer and route the rest to the right person.
Before you start
Before your first design session, confirm the following with your site owner or administrator:
- Your account exists and is assigned at least the Editor role — Editors can open SG-Builder and save pages. If your access is set to Author or lower, SG-Builder opens in read-only mode and saves are blocked.
- You have the brand kit ready: a primary color (hex or RGB), a secondary color, a heading font name (from Google Fonts or your uploaded custom font files), and a body font name. These go into Globals before anything else. If the brand kit is not finalized, push back — applying an uncommitted kit to SG-Builder means a full-site re-sweep when colors change.
- Any logo, hero image, and icon files are uploaded to Media or available on your desktop. Phase 0.7b of the build process is an asset manifest — work through that before opening the SG-Builder editor on any live page.
- You have agreed with your team on scope per area: which surfaces are SG-Builder (page-level sections), which are Globals tokens (site-wide color + font), and which need Custom CSS (fine-grained overrides only). Blurring this boundary mid-project is the main source of design-system drift.
If anything above is missing, share this guide with your site owner and ask them to resolve the account role and brand-kit decisions before your first session.
Where to go
Your four primary areas inside the SGEN admin panel:
| Area | What you do there |
|---|---|
| the admin → Settings → Globals | Load primary + secondary colors, heading and body fonts as site-wide tokens |
| Pages → Edit → SG-Builder | Build and edit page sections — hero, features, testimonials, footer |
| Pages → Edit → SG-Builder → Templates | Save a finished section as a reusable template; load a template into any page |
| Media | Upload and organize assets — hero images, logos, icons, background textures |
| the admin → Settings → Custom CSS | Precise visual overrides that Globals cannot reach — fine-grained spacing, hover state polish |
You do not need to visit Analytics, Forms, Popups, Blog, Users, or the code-level Custom Codes screen. Those areas change how the site functions — they belong to other roles. Visual design in SGEN runs through Globals, SG-Builder, Media, and Custom CSS only.
What is this for?
This doc is a role-scoped onboarding guide for a designer working on a SGEN-hosted site. It answers "what should I do first, second, and at handoff?" rather than teaching individual feature fields from scratch. Each section links to the relevant reference doc for the feature it covers — follow those links for field-level detail.
The workflow covers the full scope of a designer's work on a SGEN site: loading the brand kit into Globals so tokens cascade site-wide, building the first homepage hero in SG-Builder as the visual benchmark, constructing reusable section templates for content editors, configuring per-breakpoint behavior so mobile is not an afterthought, and publishing a final visual verification pass before handoff.
Good use cases
- You joined a new site project and need to establish the visual system from scratch before any content goes in.
- Your team is refreshing an existing brand and you need to update Globals tokens without rebuilding every page.
- You have finished a new landing page section in SG-Builder and need to save it as a reusable template.
- You are auditing an existing site's design system and want to confirm that Globals are doing the token work, not hundreds of one-off inline color choices.
- You need to hand the site over to a content editor and want them to be able to add sections without touching the visual system.
- You are running a mobile polish pass and need to confirm per-breakpoint styles are applied in SG-Builder rather than patched via Custom CSS.
What NOT to use this for
- Do not use this guide to manage ongoing content authoring — writing blog posts, editing page copy, or updating form text is the content editor's role. Designers own the visual container; content editors fill it.
- Do not use this guide to make code-level theme changes — PHP templates, theme file edits, or plugin configuration are the developer's territory. Custom CSS in SGEN is the approved design override surface, not the theme layer.
- Do not use this guide if you are running a marketing campaign — campaign copy, popup design, and analytics review belong to the marketing manager. Designers build the canvas; marketing runs the campaigns on it.
- Do not use Custom CSS as your primary design tool — Custom CSS in SGEN is a polish layer, not a design system. Build in Globals and SG-Builder first. Custom CSS only for overrides that Globals and SG-Builder cannot reach.
- Do not save SG-Builder pages without a per-device visual check — a section that looks correct at 1920px can collapse at 767px if per-breakpoint styles were not set. Always sweep all six breakpoints before marking a section complete.
How this connects to other features
- Globals — color and font tokens — your brand kit lives here; any token change cascades site-wide to every page and section that reads from Globals.
- SG-Builder — page editor — the primary design environment; builds page sections, applies per-breakpoint styles, and publishes live.
- SG-Builder — section templates — save any finished section as a template so content editors can reuse it without touching the visual layer.
- Media library — asset repository for every image, icon, and logo used in SG-Builder components; organize here before building.
- Custom CSS — design-system override surface for spacing, hover states, and edge cases Globals cannot reach; scoped to specific pages via
body.page_id-<n>selectors. - Add or edit a user — out of scope for your daily work, but your administrator uses this to set your role; share it with them if your SG-Builder access appears read-only.
What success looks like
After a completed brand-kit setup and first build pass, a healthy design practice on a SGEN site looks like:
Brand kit: Globals holds your primary and secondary colors, heading font, and body font. Every new section created in SG-Builder picks up the brand palette automatically without manual hex entry. Font stacks render correctly at 1920px and 375px without a Custom CSS patch.
SG-Builder: The homepage hero section is complete, published, and confirmed at all six breakpoints. At least two additional sections (features, testimonials, or an equivalent) are saved as reusable templates. Content editors can insert a template into a new page and fill in the content without touching any style settings.
Handoff: Every section that a content editor will touch has been built in template form with locked style bindings. Mobile layout does not require separate maintenance — per-breakpoint styles are set inside SG-Builder, not patched via Custom CSS after the fact. A visual verification pass confirms the live site matches the design reference at desktop and mobile without colour or spacing drift.
A representative site at the end of a brand-refresh cycle looks like this:
What to do if it does not work
Brand color not applying site-wide after saving Globals. Open the admin → Settings → Globals and confirm you pressed Save after entering the hex value — the field accepts input without a forced save, so it is possible to navigate away before the write commits. If the color is saved but not applying, open a page in SG-Builder and confirm its color properties are reading from the Globals token rather than an overriding inline value. Inline values set at the component level override Globals — reset those components to the Globals default. See Globals — color and font tokens for the token hierarchy.
SG-Builder save returns "saved" but the change does not appear on the live page. SGEN returns saved even when a save is silently rejected. After any save, reload the page in SG-Builder and verify the change persists. If it does not, the most common cause is a stale localStorage entry from a previous session. Open your browser's developer storage panel, clear localStorage for the site domain, reload the editor, and re-apply the change. See SG-Builder — page editor for the save verification workflow.
Mobile layout collapses at 767px or below. Go to the affected page in SG-Builder and click the 767 breakpoint button in the editor toolbar. Inspect the section at that breakpoint — if the layout is missing padding, font-size, or column-count settings, those per-device properties were never set. Apply the correct values at the 767px breakpoint and re-publish. Do not patch this in Custom CSS — a Custom CSS override at mobile will survive the session but is invisible in SG-Builder's device view and will create maintenance debt for the next designer.
Template reused on a new page but content drifted from the original design. When a content editor inserts a template, style bindings carry over but the content fields are editable. If an editor changed a color or font inside a component, the change is local to that component and does not affect the template source. Open the affected page in SG-Builder, identify the drifted component, and reset its style properties to the Globals token. If drift is recurring, brief the content editor: style fields inside SG-Builder sections are not for editors to touch — only text and image content fields.
Fonts not loading on the live site. If you loaded a Google Font by name in Globals, confirm the name matches exactly the Google Fonts library name (case-sensitive). If you uploaded a self-hosted font, confirm the upload used a unique font name in the Custom Fonts form — SGEN does not deduplicate font names and a non-unique name will load the wrong file. If the font loads in the SG-Builder preview but not on the public page, the font may be referenced in a component style that was saved before the Globals font token was set — re-save the affected sections. See Globals — typography for the Google Fonts and custom font setup steps.
Phase 1 — Load the brand kit into Globals
This is the first thing you do on any new SGEN site. Globals are the site-wide design tokens. Set them once, correctly, and SG-Builder picks them up automatically on every section you build. Skip this step and you will spend the rest of the project manually entering hex values into individual components.
Steps — loading the brand kit
1. Open Globals and set your color tokens
Go to the admin → Settings → Globals. You will see color input fields for primary and secondary brand colors, plus optional accent and neutral slots. Enter your primary brand color first. SGEN Globals accept standard hex (#2D5BE3), RGB, and linear-gradient(...) strings for the primary color field — if your brand uses a gradient on the primary action color, you can set it here directly.
For SGEN's design team, the token set at the start of a brand refresh looks like this:
Press Save after each token. Do not set all four and save once — confirm each save individually so you can catch a silent-fail before it cascades. See Globals — color and font tokens for the full field list and save confirmation workflow.
2. Set the typography tokens
Still in Globals, move to the typography section. Enter your heading font name exactly as it appears in Google Fonts (for example: Inter, Playfair Display, DM Sans). Enter your body font name separately. SGEN loads Google Fonts automatically when the exact name matches the library. For self-hosted or custom-axis fonts, use the Custom Fonts form and assign a unique internal name before referencing it here.
Confirm that both fonts render in the Globals preview panel before moving to SG-Builder. If a font shows as fallback serif or sans-serif in the preview, the name is wrong — check spelling and case.
3. Upload brand assets to Media before opening the builder
Go to Media. Before you open a single page in SG-Builder, upload all assets you will use in the first build: logo files (SVG or PNG), hero images, and any icons. Toggle WebP conversion and compression on before uploading — SGEN defaults to Format: Original and Compression: Off, which produces unoptimized uploads. Organize assets into folders by section (Hero, Features, Testimonials) so SG-Builder's media picker is navigable once the library grows. SGEN does not rename files on upload — use clean, descriptive filenames before uploading.
Phase 2 — Build the homepage hero in SG-Builder
The homepage hero is your visual benchmark. Everything that follows — typography scale, section spacing, color contrast — is calibrated against this first section. Do not build secondary pages or interior sections until the hero is confirmed at all six breakpoints.
Steps — building the first section
1. Open the page in SG-Builder
Go to Pages, find the homepage, and click Edit. In the page edit view, click the SG-Builder button to open the visual editor. The editor loads with the current published state of the page. If the page is new and empty, SG-Builder shows a blank canvas — that is the correct starting point.
SGEN's editor is accessed via window.grapesjs.editors[0] — this matters only if you are working alongside a developer who needs to interact with the editor object. For standard design work, you do not need to reference this.
2. Add the hero section and populate content
In the SG-Builder left panel, open the Components or Blocks library. Drag the hero block type onto the canvas. With the hero selected, use the right panel to set:
- Background image — pick from Media (your uploaded hero image); set overlay color using the Globals primary or secondary token.
- Heading text — the
<h1>content for this page. - Subheading text — one sentence, no filler.
- CTA button label and link — button text and destination URL.
SGEN text components render as <div> elements, not <p> tags. If you need to target text styling precisely in Custom CSS, use a class assigned via the component's Attributes panel, not a p selector.
3. Set per-breakpoint styles
Before publishing, sweep every breakpoint. Click the breakpoint buttons in the SG-Builder toolbar in this order: 1920 → 1199 → 991 → 767 → 575 → 480. At each breakpoint, adjust:
- Font size (heading and subheading)
- Section padding (top and bottom)
- Column layout (single column at 767px and below is the standard starting point)
Do not rely on desktop styles cascading to mobile automatically. SG-Builder requires explicit per-device values — if a mobile breakpoint has no values set, it falls through to desktop values, which will almost always break the layout on a phone.
A clean hero section at breakpoint sweep completion:
4. Publish and verify on the live page
Once the breakpoint sweep is complete, click Publish in SG-Builder. After publishing, open the live page in a browser tab and confirm:
- Brand colors applied correctly (not fallback browser defaults).
- Heading font rendering as expected (not a system serif fallback).
- Mobile layout at 375px width — resize the browser window or use the browser's responsive-design mode.
Do not advance to the next section until the hero passes this check. This is the benchmark everything else is calibrated against.
Phase 3 — Build reusable section templates
Once the homepage hero is confirmed, build the remaining sections — features, testimonials, call-to-action — and save each as a reusable template. A template in SGEN is a saved snapshot of a section's structure and styles. Content editors can insert a template into any page and replace the text and images without touching the visual layer.
Steps — creating and saving a section template
1. Build the section
Build the section on the page where it belongs (homepage for features, a landing-page template for a campaign section). Follow the same per-breakpoint sweep workflow from Phase 2 — confirm all six breakpoints before saving as a template. A section with unset mobile styles will produce broken layouts for every editor who inserts the template.
2. Save as template
With the section selected in SG-Builder, right-click or use the component context menu and choose Save as Template. Give the template a clear, descriptive name: SGEN — 3-column Features Grid, SGEN — Full-width Testimonial, SGEN — CTA Banner Dark. Do not use generic names like Section 1 or Block A — content editors need to identify the right template from a list without opening each one.
3. Test the template on a second page
Create a test page (or use an existing draft page that is not live). Open it in SG-Builder, go to Templates, and insert the saved template. Confirm:
- The section renders with brand colors and fonts from Globals.
- The layout matches the original at desktop and mobile.
- Text and image fields are editable — the content editor can change them without triggering a style change.
If the template renders with an unexpected layout or color on the second page, there is a style specificity issue — the component has inline overrides that are not reading from Globals. Return to the source section, reset those overrides to the Globals token, re-save the template, and test again.
A healthy template library after Phase 3 — four named, tested templates ready for the content team:
How to complete a design-system handoff
The handoff is the moment design ownership transfers from the designer to the content editor. It is a gate, not a ceremony — if the system is not ready, the handoff does not happen.
What the handoff checklist covers
Before declaring a design handoff complete for a SGEN site, confirm the following:
| Check | Pass condition |
|---|---|
| Globals color tokens set and saving correctly | At least primary and secondary tokens saved; confirmed applying in SG-Builder sections |
| Globals typography set | Heading and body fonts confirmed rendering in preview and on live page |
| Homepage hero published and verified at all 6 breakpoints | No mobile collapse, no font fallback, colors from Globals not inline |
| At least 2 reusable section templates saved | Each tested on a second page by inserting from the Templates panel |
| Content editors briefed on their editable scope | Text and image fields only; no style settings |
Custom CSS scoped to body.page_id-<n> selectors | No bare class overrides that will bleed to other pages |
| Media library organized | Assets in named folders; optimized WebP uploads |
When all seven checks are green, the design system is ready for handoff. Share this guide with the content editor and brief them verbally on the first two items in the "editable scope" section above — what they can touch, and what they cannot.
Things you should NOT need access to
The workflow above is your complete scope in SGEN as a designer. The following areas are explicitly out of scope — if someone asks you to make changes here, route the request to the correct role.
You should NOT need access to:
- Analytics → Reports / Event Logs — traffic and lead data. Marketing manager's territory.
- Forms → Submissions / Reports — lead capture data and channel attribution. Marketing manager's territory.
- Blog — editorial content. Content editor's territory.
- Custom Codes — injecting raw HTML, JavaScript, or third-party tracking. Developer's territory. Custom Codes is a different endpoint from Custom CSS — Custom CSS is yours for design overrides; Custom Codes is not.
- User management — creating, editing, or deactivating accounts. Site owner and administrator only.
You DO need access to:
| Feature | What you do | Reference |
|---|---|---|
| the admin → Settings → Globals | Load brand color + font tokens | Globals — color and font tokens |
| Pages → Edit → SG-Builder | Build and edit page sections | SG-Builder — page editor |
| Pages → Edit → SG-Builder → Templates | Save and insert reusable section templates | SG-Builder — section templates |
| Media | Upload and organize assets | Media library |
| the admin → Settings → Custom CSS | Fine-grained override styles — polish layer only | Custom CSS overview |
If you find yourself needing access to something not in this table, flag it to your administrator before making changes. Visual-layer access creeping into functional areas is the most common source of accidental data or configuration changes.
Examples
Example 1: Brand color update across a live site. SGEN's design team decides to shift the primary blue from #2D5BE3 to #1E4AD4 after a rebrand session. The designer opens the admin → Settings → Globals, updates the primary color token to #1E4AD4, and saves. Every SG-Builder section reading from the primary Globals token updates site-wide — no individual page or section needs touching. Two sections that had the old color set as inline overrides (not Globals references) remain at #2D5BE3 — the designer opens those sections in SG-Builder, resets the color properties to the Globals token, re-publishes. Total sweep time: 20 minutes. See Globals — color and font tokens.
Example 2: New homepage hero not showing on mobile. Your new homepage hero looks sharp at 1920px. On mobile (375px), the heading is overflowing the container and the CTA button is clipping. The designer opens the page in SG-Builder, clicks the 767 breakpoint button, and finds no font-size or padding values set at that breakpoint — the section has only desktop values. She sets font-size: 2rem on the heading, padding: 48px 24px on the section container, and width: 100% on the button at 767px. She repeats the check at 575px and 480px. Both collapse similarly — she sets values at each breakpoint individually. After publishing, the mobile layout is clean at all three mobile breakpoints. See SG-Builder — per-device styles.
Example 3: Template reused but content drifts from brand palette. A content editor inserts the Testimonials template on a new page. The editor changes the background color of a card from the brand neutral (#F5F5F7) to a light purple they preferred. The next designer reviewing the site notices the color inconsistency. She opens the page in SG-Builder, finds the card component, and resets its background to the Globals neutral token. She then briefs the content editor: the only fields safe to edit inside a template are the quote text, the name field, and the image — not the background or font color. See SG-Builder — section templates.
Day-one and first-week path
Use this table on your first project day to confirm access and establish the design baseline before building anything visible to visitors.
| When | Action | Expected outcome |
|---|---|---|
| Day 1 — morning | Open the admin → Settings → Globals and confirm you can save a color token | Token saves and you see the saved value on reload |
| Day 1 — morning | Upload all brand assets to Media with WebP + compression enabled | Assets available in Media picker with no unoptimized originals |
| Day 1 — afternoon | Set all four Globals color tokens; set heading and body font | Color and font tokens confirmed saved; fonts rendering in preview |
| Day 1 — afternoon | Open homepage in SG-Builder — confirm editor loads and you can publish | Page publishes without error; editor is not read-only |
| Day 2 | Build homepage hero section; do full breakpoint sweep before publishing | Hero confirmed at all 6 breakpoints; colors and fonts from Globals |
| Days 3-4 | Build two secondary sections (Features, Testimonials); save each as template | Templates saved with descriptive names; tested on a second page |
| Week 1 end | Complete design handoff checklist — all 7 checks green | Content editor can insert a template and edit content without breaking styles |
Other roles on this site
Each role on a SGEN site has its own onboarding guide. Use the table below to understand who owns adjacent surfaces — and who to route a request to when it is outside your scope.
| Role | What they own |
|---|---|
| Marketing Manager | Analytics, lead forms, popup campaigns, blog publishing |
| Content Editor | Blog posts, pages, media library, comment moderation |
| Ecommerce Manager | Orders, products, coupons, and fulfillment cadence |
| SEO Specialist | SEO audit grid, redirects, robots.txt, Search Console |
| Developer | Custom Codes, tracking scripts, theme-level changes, SG-Builder additional CSS |
| Support Agent | Read-only admin lookups, ticket triage, escalation paths |
| Platform Admin | Site provisioning, user management, billing, SMTP settings |
| Partner / Agency | Multi-client delivery, white-label, reseller billing |
Related reading
- Globals — color and font tokens
- SG-Builder — page editor
- SG-Builder — section templates
- SG-Builder — per-device styles
- Media library
- Custom CSS overview
- Add or edit a user