Reading Your Colours, Logo and Fonts Straight From Your Website
What this article covers: how a brand kit gathers your colours, logo and fonts into one saved identity, the three ways to start one, and how Magic Fetch builds most of it for you from a single web address.
Every event Express builds picks up colours, a logo and type from somewhere. That somewhere is a brand kit. This guide takes one from nothing to saved: fetching your identity straight off your own website, adjusting each piece by hand, and watching a live preview redraw itself every time you change something.
Find Your Brand Library
Brand kits don't live inside an event, they sit at the account level. Open any event and click the palette icon on the far-left rail, and you'll land in your Brand Library.
Every kit on the account lives here, one card each. A card previews itself at a glance: two colour circles, the heading font, and four core swatches along the bottom. One card carries a gold star, and that's your account default, the kit any new event picks up when nobody's specified a different one.
Click New Brand Kit and the editor opens with a Component Sandbox running down the right side. Hold onto that panel, it's a live registration-form mockup, and it redraws itself the instant you change a colour, a logo or a font, so you see exactly what you're building before you save a thing.
Three Ways to Begin
There are three ways to start a kit, and none of them needs a design background. Scroll to the bottom of the Brand Library and you'll find three ready-made Quick Start Themes, pick one and its colours, fonts and swatches all come with it. Prefer a blank slate? Click New Brand Kit and it opens straight into the colour editor, already carrying a default palette under the name Untitled Brand Kit. Nothing in it is real yet. A kit only becomes permanent once you save it.
The third way is the fastest, and it's the one the rest of this guide follows: Magic Fetch (right after you click on + New Brand Kit), the button at the top of the left rail. If your brand already exists on a website, Magic Fetch reads it for you.
Let Magic Fetch Read Your Website
Magic Fetch takes over the whole screen, and there's barely anything to it: one field for your organisation's website, one button, and a line underneath promising it'll scan for logos, colours and fonts.
Type in the address, click Fetch, and give it a few seconds while it reads the page. It comes back with the three primary colours it found, plus whatever else it can pull. Every swatch carries two links that do different things: Add drops the colour into your library for later, Apply puts it straight into a slot in this kit, and Add All to Library grabs the whole set in one click.
Below the colours sits the logo it found. Hover over it and Use as Primary assigns it in a single click.
Keep scrolling and there's a hero banner it lifted straight off the page, the wide image that runs across the top of a registration form. Images behave a little differently from colours: they offer Add to Pantry rather than Apply, since artwork goes into your shared store first and gets assigned to a slot afterwards. It also read two typefaces off the page, one marked for headings and one for body copy. Between the colours, the logo, the banner and the fonts, that's four things worked out from a single address.
None of it is committed yet, it's still just a set of findings sitting in front of you. Click Save to Kit to turn them into something real.
Express asks for a name and keeps Create Kit greyed out until you type one, so give it something you'll still recognise months from now, then click Create Kit.
Set Your Colours
That's a kit now. The header names it instead of saying Untitled, and Overview gives you a one-screen summary of everything it holds, colour palette, brand identity and typography, each with its own button through to the section that owns it.
Click Color Palette on the left rail and you'll find four named slots, primary, secondary, surface and text, each showing its own hex value. Underneath sit seven ready-made palettes. If you skipped Magic Fetch entirely, this is where you'd start instead, one click sets all four colours at once.
Want to set a single slot by hand? Click the pencil beside its hex code. The hex turns into a text box you can type six characters into directly, or click the colour swatch itself to open an eyedropper and pick a shade visually.
Drop In Your Logo
Click Logos & Icons and you'll see three slots: a primary logo, an optional dark-mode inverse, and a favicon. Below them sits the Logo Pantry, and its heading tells you something worth knowing, it's labelled All Uploads for a reason. Every logo anyone on the account has ever uploaded lives in this one shared pantry. A kit only remembers which ones it picked.
Assigning one is a drag, not a click. Pick a logo out of the pantry and drag it up into the slot you want, then do the same for the favicon.
Choose Your Font
Click Typography and you'll see three slots again, each labelled with what it drives: Headings covers your H1 through H3, Body Text covers paragraphs, and Buttons reads Inherits Headings, so you get that one for free unless you override it.
If Magic Fetch found a heading font on your site, it's already sitting in that slot. Body text tends to stay on the default, which is worth knowing, the fetch fills in what it's confident about and leaves the rest to you.
Your library holds whatever fonts you've added. To add one, click Browse Google Fonts, every family previews with its classification and a specimen line, so you can judge it before committing to it. Drag any font from My Library into a slot the same way you dragged the logo, and when the kit reads right, click Save Changes.
Your Finished Kit
Back on Overview, the whole kit sits in one view: the palette you set, the logo you dragged in, and the type. This is the screen you'll land on every time you come back to it.
And there it is, back in your Brand Library alongside every other kit on the account, ready for any event you build from here to pick up automatically.
The short version
- A brand kit lives at the account level, never inside a single event, and one kit is always marked the account default.
- Magic Fetch reads your website in seconds: colours, a logo, a hero banner and two typefaces, all from one address.
- Nothing Magic Fetch finds is committed until you click Save to Kit and give it a name.
- Four colour slots, primary, secondary, surface and text, define a kit. Set them all at once from a ready-made palette, or edit one by hand with the pencil or the eyedropper.
- Logos and fonts both live in shared, account-wide libraries. A kit only remembers which ones it assigned.
- Click Save Changes after any edit, or it won't stick.
Comments
0 comments
Please sign in to leave a comment.