Brand library

The brand library holds the images, fonts and colors your templates use. Everyone in the workspace shares it, and each workspace has its own. To open it, click Brand library in the sidebar.

What you can add

Kind	Formats	Largest file
Images	PNG, JPEG, GIF, WebP, SVG	10 MB (SVG: 5 MB)
Fonts	TTF, OTF, WOFF, WOFF2	2 MB
Colors	A hex value, such as #4338ca	None

JamFrame checks what is inside each file, not its name. An SVG must be plain vector art: one with scripts, or with links to other files, is refused.

Upload files

1. Click Upload.
2. Pick one or more files. You can add up to 20 at a time.

You can also drag files from your computer and drop them anywhere on the page. If a file is refused, the list shows why. Click Dismiss to clear it.

For a font, JamFrame reads the font’s name, weight and style from the file, so it shows up under the right name in the editor.

Add a color

1. Click + Add color.
2. Pick the color, or type its hex value.
3. Type a name, such as “Primary”. If you leave it empty, the hex value is the name.
4. Click Add.

Your brand colors show up as swatches in every color picker in the editor.

Import from your website

JamFrame can find the logos, colors and fonts on your website for you.

1. Click Import from website.
2. Type your website address, such as yourbrand.com, and click Scan.
3. JamFrame reads the page and its stylesheets and lists what it found under Logos and icons, Colors and Fonts. Tick what you want to keep. You can rename the colors here.
4. Click Add N to library, where N is the number of items you picked.
5. Check the summary and click Done.

Good to know:

• Imported items get two tags: the website’s domain (such as acme.com) and what the item is (logo, icon, social-image, brand-color or brand-font). To undo an import, filter by the domain tag and delete those items.
• Fonts found on Google Fonts are added in their regular and bold weights.
• Colors and fonts that are already in your library are skipped.
• A workspace can run 30 scans and imports every 10 minutes.

Find what you need

• The tabs at the top show one kind at a time, such as Images, Fonts or Colors. All shows everything.
• The search box finds assets by name, tag, font name or hex value.
• The All tags list shows only the assets with one tag.

Tags

Tags help you sort and find assets, for example logo, summer-sale or client-a.

• To add tags, click + Tag on an asset, type one or more tags separated by commas, and press Enter. Press Esc to close.
• Click the × on a tag to remove it.
• Click a tag to show only the assets that have it.

An asset can have up to 20 tags. A tag has up to 32 characters: letters, digits, spaces, -, _ and .. Tags are saved in lowercase.

Rename, copy and delete

• Rename: click the asset’s name, type the new name and press Enter.
• Copy URL copies the link to the file. For a color, Copy hex copies its hex value.
• Open opens the file in a new tab.
• Delete removes the asset after you confirm.

Use your assets in the editor

• Images tab: click Pick from brand library to add an image to the page. For the page background, click From library.
• Image properties: click Pick from library to swap the picture of the selected image.
• Fonts tab: Your fonts lists the fonts you uploaded. Select a text, then click a font to use it. You can also click + Upload font or + Add from URL there.
• Color pickers: when your library has colors, clicking a color control shows Brand colors. Click a swatch, or click Custom color… for any other color.

The picker has the same search and tag filter as the library. It also has Upload, and Generate with AI to make a new image (see AI images). Files you upload in the editor are added to the brand library too.

For more, see Text and fonts and Images, shapes and QR codes.

Use your assets in API renders

Click Copy URL on an image and send it as the value of an image field. Send a brand color as a color change:

{
  "templateId": "YOUR_TEMPLATE_ID",
  "modifications": {
    "logo": "https://cdn.jamframe.com/workspaces/…/images/….png",
    "headline.color": "#4338ca"
  }
}

Here logo is the key of an image layer and headline the key of a text layer. See Modifications for every kind of change.

Who can change the library

Viewers can browse the library and copy URLs. Editors can also upload, add colors, import, rename, tag and delete. See Team and roles.

Related

• AI images
• Text and fonts
• Modifications