UI Styling

Overview

UI Styling defines the visual system of your application. It controls colors, typography, and component styles that apply consistently across every page generated in your build.

All styling decisions are application-wide. Styles cannot vary by page or component instance.

Where UI Styling Appears

UI Styling is part of the UI stage within each implementation sprint.

In all sprints except the final one, the editor runs in preview mode. You can explore styling options, but changes cannot be saved.

Final styling decisions must be saved in the last UI sprint.

Previewing Your Changes

The right side of the screen shows a live preview of your application as styling changes are made.

Use the Pages panel to select which page to preview. The listed pages reflect the actual pages built across your sprints.

Changing the selected page affects only the preview context. All styling changes remain global.

Color

Color Presets

Six predefined themes provide structured starting points. The currently active theme appears at the top as Current.

Selecting a preset updates the full palette automatically. Individual values can then be adjusted.

Custom Palette

The palette gives you direct control over four color values:

• Primary Color - buttons, links, and key UI elements
• Secondary Color - supporting elements and accents
• Background Color - base page background
• Surface/Card Color - cards, panels, and contained elements

Each value is editable as a hex code, as shown in image above. Changes apply across the entire application.

Typography

Typography settings control application text styles:

Body Font - paragraphs, labels, and general interface text

Heading Font - all heading elements

Selected from dropdown menus.

Component Style

Corner Radius

Controls how rounded interface components appear, including buttons and cards. Adjustable via a slider from 0 (sharp corners) to 1rem (fully rounded). The setting applies globally.

Saving and Resetting

Save Changes - applies the current styling configuration. Available only in the final UI sprint. In earlier sprints, the button remains disabled even if changes are made in preview mode. In the final sprint, it activates once changes are detected.

Reset Theme - restores the default visual system and removes customizations.