Skip to main content
Design tools bring everything visual about your Noah project into one place. You can use them to quickly change the overall look with Themes or fine-tune specific sections with Visual Edit, all from the same view. To open Design tools, click the Design button next to Preview in the top bar of your project. Design tools view

​
Why use Design tools

Design tools make it easy for anyone on your team — designers, marketers, and non-technical teammates — to confidently adjust your app’s look and feel.
  • Consistent branding: Apply a shared theme so colors, typography, and spacing stay aligned across pages.
  • Faster iteration: Change layouts and copy visually instead of editing code or writing long prompts.
  • Accessible for all roles: Give non-developers a safe way to tweak UI without breaking logic.
  • Live preview: See every visual change instantly in the preview before you publish.

​
Themes

Themes define your project’s core design system: colors, fonts, border radius, shadows, and spacing tokens that Noah uses across components. With Themes, you can:
  • Apply a ready‑made Noah theme to quickly give your project a polished base.
  • Generate a new theme from your existing project to unify styles.
  • Customize tokens for colors, typography, and spacing from a single panel.
  • Share themes across projects so multiple apps stay on the same brand.
Use Themes when you want to change the overall vibe of your project (for example, switching from a light marketing site to a dark trading dashboard) without manually editing every screen.

​
Visual Edit

The Visual Edit tab lets you change individual sections directly on the page. Instead of editing JSX or CSS, you interact with the live preview. Core capabilities include:
  • Select and edit components: Click any section, card, or button to adjust text, colors, or layout.
  • Tweak spacing and alignment: Adjust padding, margins, and alignment to fine-tune how content fits.
  • Swap images: Replace hero images, logos, or illustrations by uploading files or pasting URLs.
  • Make focused layout changes: Reorder sections, resize columns, or hide blocks you no longer need.
Visual Edit is ideal when your theme is mostly correct, but a specific page or component needs extra polish.

​
Quick start

Follow these steps to start using Design tools on a Noah project.
1

Open Design tools

In your project, click Design next to Preview. The Design panel opens with tabs for Visual Edit and Themes.
2

Pick how you want to work

Switch to Themes when you want to change the global look and feel (brand colors, fonts, spacing). Switch to Visual Edit when you want to adjust a specific page or component.
3

Make changes and preview

Apply a theme or edit elements in Visual Edit. Your changes appear live in the preview so you can quickly compare different options.
4

Save and publish

When you are happy with your design, keep building in Noah or publish your project so the updated design goes live.
For quick, targeted tweaks, start in Visual Edit. For broader brand updates across multiple pages, start with Themes.

​
What’s next

Visual Edit

Learn how to visually tweak individual sections, layouts, and content on any page.

Themes

Dive deeper into customizing your global design system, tokens, and reusable themes.