The design catalog sets the colors, fonts, sizes and look of the components of your whole site in one go. This article teaches you to choose a palette, a typography and components, to see them on the preview and then to apply them.
Before you start
- The catalog is reserved for the site’s administrators.
- You work on the Staging. The applied design goes online at the site’s next publication.
- Nothing is saved until you click Apply this design to the whole site. You can try as many entries as you want.
- A design changes the look of your pages. Your texts, images, layouts and the styles you created stay in place.
Open the catalog
- In the admin menu, open Appearance then Preview. The design preview opens in the editor.
- Above the page, click Open the design catalog. The Design catalog sidebar opens on the right, on the panel Palette.
The notice stays displayed as long as the page is open. The catalog also opens with the palette icon in the editor toolbar. The catalog only exists on this page.
Understand a design’s choices
A design is made of independent choices, one per sidebar panel. You make them all at once or one by one. Changing the palette does not move a font and changing the buttons does not modify the fields.
| Panel | Settings applied to the site |
|---|---|
| Palette | The site’s eleven colors: background, text, surfaces, primary, secondary, accent and four states. The states are the same in all palettes. |
| Typography | The heading font, the body font and the handwriting font. Some typographies set the weight or the case of headings. |
| Links | The color, underline and weight of links written in a text. |
| Rhythm | The text sizes, the page’s line height and the large spacings between sections and between groups. |
| Buttons | The primary, secondary and tertiary buttons as well as the forms’ send and step buttons. |
| Cards | The background, border, rounding and shadow of the style Card. |
| Breadcrumb | The steps of the Breadcrumb block, the page being read and the separator. |
| Accordion | The accordion’s frame, the lines between its questions and the space around each question. |
| Forms | The input field and its state while typing, the dropdown, the checkbox and the radio button. |
| Tabs | The tab and the bar that carries the tabs. |
| Images | The corners, frame and shadow of a Media block’s image. The frame surrounds the image without its caption. |
| Icons | The color, the stroke weight and the badge around the drawing of an Icon block. |
| Tables | The lines and tinted rows of the Advanced table block. |
| Separators | The color, thickness and dashes of the Separator block. |
| PDF viewer | The border, corners and shadow of the PDF block. |
| Menu | The menu link, its active state and the submenu. |
| Table of contents | The entry of a table of contents and that of the heading being read. |
A product style that no panel names, such as Section or FAQ, keeps your colors, borders and shadows. Only the typography and the rhythm apply to it.
Buttons and cards take their roundings and shadows from your site’s scales. If you have adjusted the rounding scale, your values stay.
Choose light or dark mode
At the top of the Palette panel, the Light and dark modes menu sets the mode your site shows to its visitors.
| Choices | Your visitors see | Palettes show |
|---|---|---|
| Both | Light or dark, depending on their device or their choice in an appearance selector. | Their light row and their dark row. |
| Light | Always light. | Their light row only. |
| Dark | Always dark. | Their dark row only. |
The menu shows the choice saved for the site. Changing it switches the preview to that mode. The same setting is on the screen Design System.
Find a palette or a typography
The catalog has 49 palettes and 20 typographies. The Palette and Typography panels each have a search field and a row of family buttons.
| Tool | How it works |
|---|---|
| Field Search the palettes | Searches the name, the hues and the mood of each palette, for example sand, pastel or elegant. Capitals and accents do not count. If you type several words, only the palettes that contain all of them remain. |
| Main color buttons | Red, Orange, Brown, Yellow, Green, Blue, Purple, Pink and Neutral. One click keeps the palettes of that family and a second click removes the filter. Only the families present in the catalog have a button. |
| Field Search the typographies | Searches the font names and the keywords of each typography, for example serifs, magazine or plain. |
| Buttons Family | Neutral, Geometric, Humanist, Editorial, Elegant, Tech, Retro and Playful. One click keeps the typographies of that family. |
The search and the buttons combine. When nothing matches, the panel shows No palette matches. or No typography matches. A filter that hides the chosen entry does not remove your choice.
Choose an entry
- In the sidebar, open a panel, for example Buttons. The preview page scrolls to the section that this panel changes.
- Click an entry. It carries the Selected mark and the preview page changes right away.
- Optional: open another panel and choose an entry. Each click only replaces the choice of its panel.
Each entry shows what it changes. A palette shows its colors and a typography writes the name of its fonts in each of them. A component entry shows its buttons, its card or its small form, in your site’s colors and fonts.
The In use mark designates the entry your site carries today. The catalog recognizes it by comparing your settings to those of the entry. If you adjust a color of the palette, the entry is no longer recognized.
A palette or rhythm choice changes the whole page without scrolling it.
Adjust before applying
You can adjust the design on the preview’s sample blocks before applying it. These adjustments are kept until you apply.
- An adjustment on a sample block, for example a card’s rounding, is carried into the style that block carries.
- Updating, creating or deleting a style from the Styles tab prepares the change without saving it.
- A color or a shadow created from a selector is prepared the same way.
You cannot add or remove a sample block. The Body block keeps its Page style, which can be edited but not replaced.
Apply the design
- At the bottom of the sidebar, click Apply this design to the whole site. A confirmation appears.
- Read the sentence All the pages of the site change look, and your settings on the product styles that this design covers are replaced. Continue?
- Click Yes, apply. The page reloads with the design applied.
With no entry chosen and no block adjusted, the screen shows Nothing has changed on this screen: first choose a design or adjust a block. Each application adds a line to your site’s history with the chosen entries.
| Your setting | After applying |
|---|---|
| A setting covered by the design, for example your colors on the Primary style when you chose a buttons entry | Replaced by the design’s. |
| A covered setting that the chosen entry does not set, for example your colors on the button Tertiary | Removed. The style goes back to its shipped version. |
| A setting that the design does not cover, for example your colors on Section, or on buttons when you only chose a palette | Kept. |
| A style you created yourself or a default style you chose | Kept. |
| The fonts of a chosen typography | Installed in your site. They count toward your plan’s space. |
| The choice Light and dark modes | Saved for the whole site. |
Lift an application refusal
Three situations block the application. The sidebar shows a message that names the problem.
| Message | Fix |
|---|---|
| “…” carries … registered styles: keep only one before applying. | The adjusted block carries several styles. Remove some until you keep only one. |
| Two blocks that carry “…” are set differently: match them before applying. | Give them the same settings, or reset the adjustment on one of the two. |
| The design changed elsewhere since the page was opened | Another member or an AI modified the design. Reload the page and make your choices again. |
Two actions are refused on this page. Resetting a product style that was never adjusted shows This style carries no site setting to reset. Deleting a previously created style shows Delete this style from a page, not from the preview: the preview does not know which pages use it.
The catalog’s entries
This section describes the entries of each panel. The rounding sizes quoted are those the product ships. Values in dark mode follow your palette.
Palettes
A palette gives five colors. Your site derives its eleven colors from it while keeping every text readable.
| Site color | Resulting color |
|---|---|
| Primary and secondary | Two colors of the palette. A color that is too light is darkened until it reaches a 4.5:1 contrast on the background. |
| Accent | A color of the palette, as is. |
| Background and light surface | The darkest color of the palette, mixed with 97% white for the background and 90% for the surface. |
| Text | The same color, pushed toward black until it reaches a contrast of at least 12:1 on the background. |
| Dark surface | The text, lightened by 10%. |
| The four states | The product’s, in all palettes. |
Each palette gives its brand colors a value for dark mode. This value keeps the hue and lightens until it reads on the dark background: 4.5:1 for the primary and secondary, 3:1 for the accent.
Rhythms
| Rhythm | Top and bottom of a section | Inside a card | Body text | Level 1 heading | Line height |
|---|---|---|---|---|---|
| Airy | 160 px | 32 px | 17 px | 60 px | 1,65 |
| Editorial | 144 px | 28 px | 19 px | 68 px | 1,6 |
| Balanced | 128 px | 24 px | 16 px | 50 px | 1,5 |
| Tight | 96 px | 20 px | 16 px | 40 px | 1,4 |
| Compact | 64 px | 20 px | 16 px | 34 px | 1,45 |
Links
All the entries keep your primary color at rest and your secondary color on hover. The two entries that do not underline the link at rest carry a note under their name.
| Entry | At rest | On hover | Note |
|---|---|---|---|
| Underlined | Underlined with a thin line | The line thickens | None |
| Underlined and bold | Underlined and semibold | The line thickens | None |
| Subtle underline | Underlined with a light line, a little lower | The line takes the secondary color | None |
| Underlined on hover | No underline | Underlined | No underline: only its color sets the link apart from the text. |
| Bold | Bold, no underline | Underlined | Can be mistaken for a bold word in the text. |
Buttons
| Entry | Corners | Particularity |
|---|---|---|
| Classic | 4 px | The primary filled, the secondary bordered and the tertiary as a link. |
| Tonal | 8 px | The secondary on a light background of the primary color, without a border. |
| Pill | Pill-shaped | The tertiary without underline, with a light background on hover. |
| Square | 2 px | The secondary placed on the Neutral light color, without a border. |
| Plain | 8 px | The primary filled with the text color, with no brand color. |
| Secondary color | 4 px | The secondary filled with the secondary color. |
Cards
| Entry | Card |
|---|---|
| Bordered | A thin border, 8 px corners. |
| Shadowed | No border, lifted by the Elevation 1 shadow, which becomes Elevation 2 on hover. 16 px corners. |
| Filled | No border, placed on the Neutral light color. 16 px corners. |
| Bare | No border, no background, no shadow. 8 px corners. |
| Accent edge | A thick line in the primary color on the left side and a thin border elsewhere. 4 px corners. |
Forms
| Entry | Field | While typing |
|---|---|---|
| Outline | A thin border, 4 px corners | The border takes the primary color. |
| Filled | A light background and a line below | The line thickens in the primary color. |
| Underlined | A line below, no background | The line thickens in the primary color. |
| Soft fill | A light background, no visible border | A thick border in the primary color appears. |
| High contrast | A thick border in the text color | The border takes the primary color. |
| Pill | A thin border, pill-shaped | The border takes the primary color. |
| Tinted | A light background and a muted border in the primary color | The background darkens and the border becomes solid. |
| Shadowed | No border, lifted by the shadow Elevation 1 | A thin border appears and the shadow becomes Elevation 2. |
Each entry draws the checkbox and the radio button like its field. Once checked, they take the primary color. The switch and the Range field keep the product’s look.
Tabs
| Entry | Selected tab |
|---|---|
| Underlined | Underlined in the primary color, on a bar underlined with a thin line. |
| Pills | A solid pill in the primary color. |
| Tinted pills | A light pill in the primary color. |
| Segmented | A light background in a bordered bar. The tabs share the bar in equal parts. |
| Boxed | The selected tab is boxed at the top and on the sides. The others sit on a discreet background. |
| Top line | A line in the primary color above the label. |
Other components
| Panel | Entries |
|---|---|
| Breadcrumb | Simple, Underlined, Subtle and Badges. |
| Accordion | Lines (a line under each question), Boxed (a frame with 8 px corners) and Bare (no frame or line, tight spacing). |
| Images | Plain (2 px corners), Rounded (16 px), Shadowed (8 px and Elevation 2 shadow) and Frame (a light 8 px frame). |
| Icons | Bare, Thin line, Badge, Solid square and Outline. None changes the product’s 24 px size. |
| Tables | Boxed striped, Boxed, Striped lines, Lines, Striped and Borderless. These styles apply to the Advanced table block. |
| Separators | Thin, Thick (3 px), Dotted, Faded and Colored (2 px in the primary color). |
| PDF viewer | Frameless, Bordered, Shadowed and Rounded. |
| Menu | Simple, Underlined on hover, Active bar and Badges. Each draws the link of the page being read. |
| Table of contents | Simple, Rail and Badge. |