Brand PeelBrand Peel (Alpha)
Back to Docs

Design Editor

Fine-tune light and dark themes with live previews, presets, and accessibility tools.

Design Editor

The Design Editor turns brand direction into reusable theme tokens. It combines detailed controls with live previews, accessibility checks, history, and CSS export.

The editor appears in the sidebar when the active project has a theme or after any project has finished setup. Using Setup Theme in a project's Visual Identity document applies that theme and opens the editor immediately.

Setup Theme creates or updates a custom editor preset from the theme saved on that project. The Design Editor is a reusable local workspace: later editor changes do not automatically write back to the project's saved theme.

Choose or create a theme

The preset menu combines Brand Peel's example themes with custom themes saved on this device. Filter the list by All, Example, or Custom.

You can:

  • Apply a built-in or custom preset
  • Create a new custom theme from Brand Peel's default values
  • Create a custom theme from the currently selected theme
  • Rename or delete custom themes

Custom presets and the current editor state persist locally.

Edit light and dark modes

Every theme has light and dark values. Use the mode control to choose which side you are editing.

Enable Sync base settings to both themes when typography, radius, and any existing base spacing token should stay aligned across light and dark modes. There is no separate spacing-scale control. Color changes remain mode-specific.

If one side is already established, Generate Opposite Mode derives a complementary set of colors for the other side while checking contrast pairs.

Controls

The left panel is organized into four tabs.

Colors

Edit semantic tokens for backgrounds, text, cards, popovers, primary and secondary actions, borders, charts, and the sidebar.

Each color control supports:

  • A visual picker
  • Hex entry
  • HSL-based editing
  • Tailwind palette choices
  • Picking a color from anywhere on the screen in the desktop app
  • Copying or generating a paired color for the opposite mode

Typography

Configure:

  • Sans-serif, serif, and monospace font families
  • Body and heading line height
  • Body and heading letter spacing
  • Base font size
  • Heading weight and text transformation

Other

Adjust border radius and shadow properties, including opacity, blur, spread, inset or outset mode, and shadow color.

Accessibility

The accessibility panel evaluates content and interactive color pairs against WCAG 2.2. It reports normal-text, large-text, and non-text ratings and can:

  • Suggest a lighter or darker compliant value
  • Fix individual contrast problems
  • Apply available fixes across all failing pairs

Review both modes after automatic fixes; accessibility targets and brand character sometimes require a manual balance.

Explore the live preview

The right panel has five views:

  • Components — theme-aware interface examples
  • Text — typography samples
  • Colors — the semantic palette
  • Code — generated theme CSS and its diff from the saved checkpoint
  • Design System — a broader token and component reference

Inspector mode shows which theme variables affect a preview element and lets you jump to the corresponding control. Edit mode allows local preview-copy changes in the Components and Text views. Those copy edits do not change the exported theme variables.

The preview can also enter full screen.

Undo, redo, and reset

Theme edits are tracked locally. Use Undo and Redo to move through the edit history, or Reset to return to the saved checkpoint. The Code view compares the current CSS with that checkpoint.

Import a theme

Open Import and either paste content or upload a file.

  • Accepted files: JSON and CSS
  • Maximum size: 256 KiB
  • CSS import: Tailwind CSS v4 theme syntax with light values under and dark values under .dark

Imported themes are validated for required tokens and safe values before being added as custom presets.

Copy or download CSS

In the Code view, choose an output color format:

  • OKLCH
  • HSL
  • RGB
  • Hex

Then copy the current CSS or download it as a CSS file. The generated theme uses Tailwind CSS v4's @theme inline structure.

A project-level export from the Brand Creator writes theme.css and theme.json from the theme saved on that project. Because Design Editor changes do not automatically replace that saved project theme, copy or download the current CSS from the Code view when you need the latest editor-only changes.

Next steps

Previous
Brand Creator
Next
Design Sandbox