Managing Your Color Palette

A well-crafted color palette is the foundation of any polished interactive experience — whether you're building a touch-screen exhibit for a natural history museum, a wayfinding kiosk, or an educational quiz for a school gallery. In Zibit, your project's colors live in the Style Editor, where you can define a palette once and apply it consistently across every moment and view. Changes you make here ripple through your entire project automatically, so you can experiment freely and refine as you go.

Exploring the Style Editor

The Style Editor is your central workspace for defining how your project looks and feels across every moment. On the left, you'll find panels organized into Typography, Colors & Scheme, Shadows & Effects, Animations & Transitions, and component-specific styles — covering everything from basic text and images to interactive timelines and buttons.

As you make changes, the live preview in the center updates in real time so you can see exactly how your style set will look on a real display. This is especially useful for museum exhibits and digital signage, where consistent branding across all moments matters. Everything here can be adjusted at any point — nothing is permanent until you're ready.

The Zibit Style Editor interface showing a left panel with collapsible sections for Typography, Colors and Scheme, Shadows and Effects, Animations and Transitions, and component style groups, alongside a live preview area displaying sample text, buttons, and a video component — The Style Editor gives you full control over typography, colors, and component styles — all with a live preview.

Setting Up Your Color Palette

The Colors & Scheme panel is where you define the core colors for your entire project. You'll see swatches for key roles like Foreground, Background, Surfaces, Border, Primary, Secondary, and Tertiary — these map automatically to components throughout your experience, so changing one color here updates everything that uses it.

Click any swatch to pick a new color for that role. You can also use Add color to create a custom named color or Add gradient to define a gradient you can reuse across components. Don't worry about getting it perfect now — you can return to this panel and adjust your palette at any point.

The Colors and Scheme panel in the Style Editor, showing labeled color swatches for Foreground, Background, Surfaces, Border, Primary, Secondary, and Tertiary roles, each with an Opacity control, along with Add color and Add gradient buttons. — Define your project's color roles in the Colors & Scheme panel.

Name and Configure Your New Color Swatch

A new swatch row has appeared in your Colors & Scheme palette, ready for you to set up. Give it a clear, descriptive name — something like "Accent Blue" or "Gallery Wall" — so it's easy to identify when applying styles across your project's moments and components.

Next, click the color swatch itself to open the color picker and choose your value. You can also set the Opacity for this entry if you need a semi-transparent version. Don't worry — you can rename, recolor, or delete any palette entry at any time using the Delete palette entry button that appears on the row.

The Style Editor showing the Colors and Scheme section with a newly added blank swatch row ready to be named and configured, alongside existing palette entries such as Foreground, Background, Surfaces, and Primary. — A new swatch row appears in the palette — give it a name and pick a color to get started.

Fine-Tuning a Color with the Color Picker

When you click a color swatch in the Colors & Scheme section, a color picker popover opens. Use the visual gradient to choose a hue, then dial in the exact shade using the Hue and Alpha sliders below it. You can also type precise values directly into the Hex or RGB fields — useful when your museum or institution has official brand colors to match.

The Opacity field lets you control transparency, which is handy for overlays or subtle background tints on exhibit displays. Don't forget to give your color a meaningful name in the Color Name field — something like "Gallery Teal" or "Primary Accent" makes your style set much easier to manage later. Any changes you make here are saved to your style set and can be updated at any time.

Color picker popover open in the Style Editor, showing a gradient color field, hue and alpha sliders, and input fields for hex value, RGB values, opacity, and a color name field — Use the color picker to set exact brand colors for your exhibit's style set

Assign Colors to Semantic Roles

With your palette defined, you can now map specific colors to semantic roles — the functional slots that control how color is applied across your project. Under Colors & Scheme, you'll see roles like Foreground, Background, Surfaces, Border, Primary, and Secondary. For each role, choose a palette color and set its Opacity to fine-tune how it appears.

Think of semantic roles as a layer of meaning on top of your raw colors. Rather than applying a hex value directly to every component, you assign a role — for example, Primary might drive button fills and highlights throughout your exhibit. This means you can update your whole project's look by changing one palette entry, not dozens of individual components.

The Colors & Scheme section of the Style Editor, showing semantic color role fields including Foreground, Background, Surfaces, Border, Primary, and Secondary, each with a color swatch and opacity control — Map palette colors to roles like Primary and Background to theme your entire project at once

You now have a working color palette with named swatches, fine-tuned hues, and semantic roles assigned — the building blocks for a visually consistent project. Everything you've set up here can be updated at any time without having to touch individual components or moments.

Apply your palette to components: Select any component on the canvas and use the style panel to reference your named colors, so updates to the palette instantly reflect everywhere.
Create multiple style sets: Build alternate palettes — for example, a high-contrast accessibility mode or a seasonal theme — and switch between them without redesigning your project.
Explore typography settings: Head back to the Style Editor to pair your color choices with a type scale, completing your project's visual identity.
Reuse your palette across projects: Export your style set and import it into a new project to keep branding consistent across a whole suite of exhibits or displays.
Test colors on real displays: Preview your moments on different display profiles to make sure your palette reads clearly at kiosk size, tablet scale, and beyond.