How to style all pages using the Design View

Learn how to use Design View to style your wireframes and get a visual preview of your site before exporting to Figma or Webflow.

In this doc, you'll learn how to:

  1. Edit color schemes manually
  2. Add images to interior pages

What is Design View?

Design View is a lightning-fast styling tool built directly into the Relume Site Builder. Once you've built your sitemap and wireframe, Design View instantly applies your Style Guide - including colors, typography, and UI elements - across your entire site so you can see what it looks like before exporting to Figma or Webflow.

Think of Design View as your design accelerator, not your final canvas. It gets you 80% of the way to a finished design in a fraction of the time - so when you do export, you're refining and polishing rather than starting from scratch.

Note: Design View is not a full design editor. Fine-tuning details like exact spacing, custom animations, and pixel-level refinements should be done in Figma or Webflow after export.

Edit color schemes manually

Color schemes control the background, text, foreground, border, and accent colors for each section in Design View. 

To edit color schemes:

  1. Click on the Scheme button to open up the list of color schemes that are in the project.
  2. Hover over a scheme and click on the 3 dot button.
  3. Click Edit to view all of the primitive colors in the project.
  4. You can only edit the background color - editing the text, border, or accent colors are done automatically and are intentionally not customizable. 

Applying a color scheme to a section

  1. Click on any section in Design View to select it
  2. Clicking on the schemes button will open a menu for you to choose any existing color scheme that exists in the project.

Adding a new color scheme

  1. Click on the schemes button
  2. Click the + button to add a new scheme

Again, you will only be able to choose a background color, the rest of the elements colors are set automatically.

Removing a color scheme

  1. Click on the schemes button
  2. Hover over a scheme
  3. Click on the three dot menu 
  4. Click on delete


Add images to interior pages

If you click on a section that has images, you will notice an “Images” button in the panel. Clicking on this button will bring you to a list of images where you can quickly swap out images for the entire section.

Note: It is not possible to generate images in these slots in the design view. Only the homepage concept (style guide) can generate images.
Frequently Asked Questions
No items found.

Give feedback

Was this resource helpful?

Thank you for rating!
Thank you for rating.