Design Library

The Design Library holds your brand as tokens — colors, typography, corners, borders, shadows, and logos — as one published source of truth that everything Frontic builds reads from. Find it at Library → Brand in the admin app. The reason it exists: agents are good at design and bad at remembering. Told “use our brand blue”, an agent will produce a blue, then a slightly different blue next week. Tokens remove the guess. The Experience Designer can only reference brand tokens — a hardcoded brand color, font, or corner radius fails its build — so every experience is on-brand by construction rather than by review.

​

Getting a brand

Two ways to start. Either way you can change everything afterwards. A token that’s never been touched is marked as using the Frontic default, so it’s easy to see what came from your shop and what’s still a placeholder.

​

What’s in it

​

Colors

Colors are grouped by what they’re for, not by what they look like: The Commerce group is the one that’s unique to Frontic, and it’s the reason experiences come out looking like commerce rather than like a landing-page template. An add-to-cart button is styled from the buy token even when buy and your primary action currently resolve to the same color — so when you restyle later, the two move independently and the storefront stays correct. Every color slot has a foreground partner: the color of content sitting on it. The editor checks contrast between the pairs and tells you the ratio and whether it passes AA, so a brand decision that would make text unreadable is caught while you’re making it, not after it ships. Colors can be organized into folders and renamed. A token can also reference another token instead of carrying its own value — useful when three roles should always move together. References that can’t be resolved block publishing.

​

Typography

Three roles: Body, Headings, and Code. Each is either a system stack or a custom family, and each carries a full font-family stack rather than a single name. Text styles sit on top — named sizes that ride the scale, so a style either pairs its line height and weight onto a scale step or defines its own.

​

Shape

Base radius drives the whole sm–xl scale. Set it to 0 and everything goes sharp at once. Borders and shadows are named styles rather than loose values: a border carries a width and a style, a shadow carries one or more layers. Naming them is what lets an agent pick “the card shadow” instead of inventing one.

​

Logos

Three slots — Desktop, Mobile, and Favicon — pulled from your shop during Initialize. They’re read-only in the Library.

​

Draft and published

The Library edits a draft. Nothing an agent builds with changes until you publish it.

• Edits save to the draft as you make them, and the header shows how many tokens differ from the published brand
• Publish creates a new version and makes it the live brand
• Connected experiences pick the new brand up on their next build — publishing a brand never changes anything for shoppers on its own

That last point matters. Publishing a brand is not a deploy. A live experience keeps rendering with the brand it was built against until someone rebuilds and republishes it, which means you can revise your brand without a storefront-wide visual change landing unannounced.

​

Version history

Every publish is kept. Restoring an earlier version creates a new draft from it rather than making it live, so a restore is something you look at before it counts. Reset brand goes further back: it restores the original result from Initialize and discards every edit and import since. Published versions stay in history either way.

​

Exporting

The Export dialog gives you the brand in three shapes: This is how the brand reaches a storefront Studio built, or a codebase that predates Frontic — export once, and your own frontend and your experiences share the same values.

​

Related