The Global and Application Styles feature is a powerful new enhancement in Yeeflow that allows administrators and app owners to define the visual look and feel of the platform—both globally and at the individual app level. With this feature, you can customize colors, typography, and control styles to align with your organization's branding, improve user experience, and maintain visual consistency across all workspaces and applications.
Whether you're standardizing design across the entire platform or tailoring the appearance of specific apps, Global and Application Styles offer a centralized, code-free way to manage how Yeeflow looks and feels—making every interaction with your workflow beautifully branded.
🔧 Accessing Style Settings
Global Styles are managed from the Admin Center and apply system wide.
Application Styles are configured per app from the App Settings panel.
🌐 Global Styles (Admin Center)
Administrators with appropriate permissions can define the default appearance of the entire Yeeflow platform.
To access:
Go to Admin Center
Select Global styles
Configure the following three categories:
1. 🎨 Global Color
You can define the system-wide Primary, Secondary, and Neutral colors. These color schemes affect:
System modals and confirmation dialogs (e.g., Submit / Cancel buttons)
Default action and operation buttons
Backgrounds, borders, and hover states for system components
To modify colors, click the Edit color button next to any color group. Once you pick a base color, Yeeflow automatically generates a complete set of tonal variants.
Each color category automatically generates a full set of tonal variants—Light, Light: hover, Light: active, Normal, Normal: hover, Normal: active, Dark, Dark: hover, Dark: active, and Darker—based on the base color you select. This ensures a consistent color system across all UI states and provides flexibility when designing buttons, dialogs, and other components.
Once satisfied with your color setup, click Apply colors to confirm your selection, or Cancel to discard changes.
2. ✍️ Global Typography
Global Typography settings allow you to define the default font styles across the entire platform. These settings influence text elements in workspaces, navigation, forms, dashboards, and system messages.
Click Edit Typography, you can configure the following:
Font Family: Select the default font for all text (e.g., Helvetica, Inter)
Base size: Set the base font size (e.g., 14px)
Scale: Defines the typographic scale (e.g., 1.125), which multiplies with the base size to create larger headings
Line height: Controls the spacing between lines of text
Once configured, Yeeflow will automatically generate a full typographic system under the selected font family and weight, including:
Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, as well as Large, Base, Small, and Xsmall text levels.
For example:
These values are calculated based on your selected Base Size and Scale, ensuring visual hierarchy and consistency across UI components.
After adjusting settings, click Apply fonts to immediately apply changes across the platform. Use Cancel if you wish to discard updates.
Typography changes affect:
Workspace names
Home page navigation
Menus and content under “My Items”
Default text in forms, dashboards, and system labels
3. 🧩 Global Control Styles
Yeeflow provides default system control styles (e.g., “Modern Minimal”), and supports up to 5 custom global control styles.
Features include:
Control layout (e.g., spacing, alignment)
Borders and button shapes
Font and background customization for controls
These global control styles:
Can be reused across all applications
Are available in the form designer of every app
Can be set as the default system style
✅ You can also import styles using .ycs files.
📦 Application Styles (App Settings)
For app-level design customization, each application includes its own Application Styles section.
To configure:
Open the target application
Go to Settings → Application Styles
You’ll find three configuration areas:
1. 🎨 Application Color
Set Primary, Secondary, and Neutral color palettes specific to the app.
These apply to:
In-app dialogs (e.g., confirmation prompts)
App-level action buttons
Section highlights or menu items
App color settings override global settings—but only within the selected app.
2. ✍️ Application Typography
Define the fonts and base size for all text displayed in the app:
Component labels
Navigation menu items
Form and dashboard titles
Action buttons
Changes apply instantly to the app and do not affect other applications.
3. 🧩 Application Control Styles
Each application can have up to 5 custom control styles for its own use.
You can:
Create or import control styles per app
Apply them within the app's form designer
Set one of them as the default for this application
These styles are isolated from the global styles and won’t affect other applications.
🎯 How to Use Defined Styles
When using the form or dashboard designer:
Click any control (e.g., a button, text block, input field)
Open the Style tab
Use the color and typography pickers
Select from global or app-defined styles
A Global Style icon will appear when applicable. You can also add commonly used values to Extra Colors or Fonts for quick reuse.
💡 Why This Matters
Implementing Global and Application Styles helps you:
Ensure visual consistency across teams and apps
Accelerate design and deployment with reusable styles
Easily match corporate branding without writing CSS
Empower non-technical users to manage UI layout visually
Keep both desktop and mobile experiences aligned