Hi everyone 👋🏼

This week, we released OutSystems UI 3.0, a major version of OutSystems UI for both ODC and O11. It brings a new default theme, built from the ground up on OutSystems Design Tokens, so your apps look polished out of the box and are much easier to customize. These are the same design tokens Mobile UI uses, which makes it easier to keep your web and mobile apps visually consistent.

This release changes styles only. Patterns keep the same HTML, classes, parameters and JavaScript APIs, and your existing apps keep their current look until you decide to move.

What's new in OutSystems UI 3.0

• A new default theme - Every pattern was redesigned against a new Figma design kit: refreshed colors, spacing, shapes, shadows and states across Widgets, Adaptive, Content, Interaction, Navigation, Numbers, Advanced and Utilities. New apps use it by default.
• Built on OutSystems Design Tokens - Colors, spacing, typography, radius and shadows now come from one shared token set, the same one used by Mobile UI. Change a role such as --color-primary or --border-radius-default once at the app level and it flows through the whole library.
• A CSS API for every component - Around 390 documented --osui-{component}-{property} custom properties across 79 components. To restyle one component, override its documented properties instead of the framework's internal styles.
• Dark mode - A dark theme is now available, with a new SetDarkMode client action to switch between light and dark at runtime.
• Inter as the default font - Inter replaces Roboto for a cleaner, more readable type scale, with responsive typography.
• Updated defaults - Form controls use the Soft shape by default (new rectangular and round utility classes are available), and Alerts use the Light style by default (a bold utility class is available).

What this means for your existing apps

• Nothing changes until you opt in - Existing apps keep the current theme (now called Classic), which stays supported and available in OutSystems UI. When you are ready to move, follow the Migration guide (link below).
• New apps start with the new theme - App templates use OutSystems UI 3.0 by default, and you can always switch a new app to the Classic theme.
• Check your custom CSS before you move - Some legacy variables were retired (--space-*, --font-size-*, --shadow-*, --border-size-*), and several components changed padding, line-height, colors or selected states. Apps that override pattern styles with custom CSS may look different after the switch, so test them first. The Migration guide lists what changed per component.

Resources

• OutSystems UI Storybook: the new official documentation. Browse every pattern live in light and dark, and look up each component's CSS API. It replaces the current OutSystems UI website.
• Migration guide: what changed per component and how to move an existing app to the new theme.
• Figma Kit (OutSystems UI 3.0): the updated design kit, so designers can prototype with the same tokens and components developers use.

Tell us what you think

This is the biggest visual update to OutSystems UI in years, and it sets the foundation for what comes next in theming. Try it on a new app or update your existing apps, and share your feedback, questions or issues with us in this thread.

Thank you,
UI Components team