Using the Design Library in the Builder

The Design Library opens over the builder canvas, so you can browse another site's designs
without leaving the page you're editing.

Open it

Open the Add panel, then click the book icon in its header — top-right, next to the
close button.

The library fills the screen: the set you're browsing on the left, a live preview in the
middle, and the design set chooser at the top.

Choose a design set

Design Set at the top-left lists every set registered on your site, plus This
Website. Pick one and the sidebar reloads with that set's contents.

The sidebar lists the set's pages, posts and Parts. If the set's author tagged them, the
tags become folders — Heroes, Pricing, Pages — that you expand to reach the items
inside. Search filters the whole set by name, and Filter by type narrows the list to a
single content type.

Click any item to preview it. The preview is the real page, rendered live by the site that
hosts the set, so what you see is what you get.

Preview at other breakpoints

The breakpoint switcher in the middle of the header renders the preview at any of your
site's breakpoints. Use it before you import something: a section that suits your page on
desktop may not be the one you want on a phone.

The expand icon on the right makes the library full-screen, and the arrow next to it opens
the source site in a new tab.

Bring a design into your page

With a page or Part previewed, Import Page at the top-right drops its entire design
into the page you're editing, below whatever is already there. Individual sections can be
taken one at a time: hover a section in the preview and use the copy button that appears on
it.

Everything that arrives is normal Oxygen content. Open the Structure panel and you'll find
ordinary elements you can restyle, rewrite or delete.

Import the set's variables and selectors

A design is only as good as the design system under it. When you select a set that depends
on its own design system, a banner appears above the preview:

This design set relies on Variables and Selectors. It won't look the same unless you
import them.

Click Import Settings to choose what to bring over.

Both boxes are ticked by default. Confirm Overwrite & Import replaces your site's
variables and selectors with the set's — this is a replacement, not a merge, so anything
you defined yourself under the same names is overwritten. Do it on a site you are starting
rather than one you have already styled.

Once it's done, the banner changes to You've already imported settings from this Design
Library, and the designs you pull in from that set render exactly as they do in the
preview.

Reuse your own designs

This Website is a design set you never have to set up. Every page you have already
built in Oxygen is listed there, so a section you got right once — a hero, a pricing table,
a call to action — can be pulled into the next page instead of rebuilt.

Because it's your own site, there is no design system to import: your variables and
selectors are already the ones the design uses.

Troubleshooting