Skip to main content
Themes define the global design system for your Noah project — colors, typography, spacing, and radii that every page and component inherits. Instead of updating styles one screen at a time, you adjust the theme and Noah applies it everywhere. You can manage Themes from the Design tools, alongside Visual Edit. Use Themes to set the overall vibe of your project, then use Visual Edit for fine-grained tweaks on individual pages. Theme selector

​
Why use Themes

  • Keep pages consistent: Ensure marketing pages, dashboards, and forms all share the same colors and typography.
  • Switch looks quickly: Try different presets (for example, minimal vs. playful) without rebuilding layouts.
  • Share a brand system: Reuse a single theme across multiple Noah projects so everything feels on-brand.

​
Browse and apply built-in themes

Use Themes to quickly give your project a polished starting point.
1

Open the Themes view

In your project, open Design and switch to the Themes tab. You will see a list of available themes for your app.
2

Preview different themes

Hover over or select a theme from the list to see how it changes the look of your current page — colors, typography, and UI accents update in the preview.
3

Apply a theme to your project

When you find a theme that fits your product, apply it to make it the default look for the entire app. All pages that use theme tokens will update automatically.

​
Create and customize your own theme

When you need something that perfectly matches your brand, create a custom theme instead of relying only on presets. Custom theme editor In the theme editor, you can adjust:
  • Colors: Background, foreground, card, popover, primary, secondary, accent, and more.
  • Typography: Font families, sizes, and weights for headings, body text, and labels.
  • Components & features: Any additional tokens or toggles your project exposes through the design system.
1

Start from a base theme

In the Themes tab, pick an existing theme that is closest to your desired look and choose the option to create or duplicate it as a new theme.
2

Tweak design tokens

Use the editor to update color swatches, typography settings, and other design tokens. Watch the preview panel to see how components respond to each change.
3

Review across key screens

Open important pages (such as the home page, dashboard, and forms) to confirm that text remains readable and key actions stand out.
4

Save and reuse your theme

Save the theme so it becomes available to the rest of your workspace. You can apply it to other Noah projects to keep your brand consistent.

​
Best practices

Start from a theme that is already close to your brand, then refine colors and typography instead of building everything from scratch.
  • Check contrast: Make sure buttons and text remain legible on all backgrounds.
  • Test real content: Review your theme using real copy and data, not just placeholders.
  • Align with Visual Edit: Use Themes for global style decisions, then use Visual Edit for per-page adjustments.
For a full overview of visual customization options in Noah, see the Design tools guide.