What Is the Design System Area?
The Design System area is where you create and manage themes — "Create and customise themes to use across your applications." To open it, go to the platform's side navigation and, under AI Applications, click Design System. A theme bundles your colors, typography, corner-radius style, icon set, per-component styling, design tokens, and custom CSS, so every app using it looks consistent. For how themes work, see Theme Builder.
It has two tabs: Your Themes (the ones your team created) and Theme Library (ready-made starter themes you can duplicate). Each app uses one theme as its default.
Creating a Theme
From the Design System area, click Create Theme.
Give it a Theme Name.
Choose Theme Modes: Both (light and dark), Light, or Dark. With Both, your users can switch between light and dark at runtime; with a single mode, they always see that mode's colors.
Optionally check Set as default theme so new apps start from it.
Click Proceed. The theme editor opens.
To start from an existing look, use Duplicate on any theme card (including Theme Library themes) and edit the copy. Theme Library and standard themes are read-only — always duplicate rather than editing in place.
Note: Deleting a theme that apps currently use automatically switches those apps to the workspace default theme.
What a Theme Defines
Opening a theme opens its editor with a tab for each part of the design system:
| Tab | What You Control |
Colors | Brand colors (Primary auto-generates the brand palette), Status colors, Text colors, Background colors, Accent colors, Gradients |
Typography | Text Font Family, Code Font Family, Type Hierarchy (Heading, Subtitle, Body, Paragraph, Code) with one Base Font Size driving the whole scale |
Border | Corner-radius preset: Fully Square, Soft Square, Rounded, or Fully Rounded |
Icons | Built-in Unify Icons or a custom pack uploaded as a zip of SVGs |
Components | Per-component styling for 16 components, plus hide/rename for all components |
Fonts | Upload your own typefaces for the theme (TTF, OTF, WOFF2) |
Tokens and CSS | Reusable CSS variables (design tokens) and scoped style overrides |
Note: If you open a theme from an app's Settings → Design System in the builder, you get a compact editor with Colors, Typography and Border only. For every tab, open the theme from the Design System area.
The Components Tab
The Components tab is a searchable catalog of every component in the no-code builder. Search with Search components and narrow with filter pills: Visible, Hidden, Renamed, and Customizable.
Actions on every component card
| Action | What it does | Available for |
| Customize style | Opens the full-page style editor for that component | Only the 16 Customizable components |
| Hide from builder / Show in builder | Removes or restores the component from the add-component menu for all apps using this theme | All components |
| Rename | Gives it a different display name in the builder; shows the original under Default name | All components |
Note: Hiding and renaming save immediately — there is no separate Save step on this tab. When a search or filter matches nothing, you'll see "No components found."
Which 16 components can be restyled
Only these components show Customize style in the card menu. Everything else is rename-and-hide only:
Button, Link, Icon Button, Icon, Button Group, Text Input, Text Area, Toggle, Checkbox, Radio Button, Tag, Typography, Loader, Calendar, Image, Snackbar.
Special component behaviors
Icon — Opening it shows a switcher between Default (plain icon) and Fill (filled badge-capable "featured" icon), each styled separately.
Snackbar — The toast notification has no block to drag onto a page. It appears under Other as a style-only entry — customizable, but with nothing to hide or rename.
Inside a Component's Style Editor
Customize style opens a full-page editor for that one component:
Live preview in the middle
Variants — the dimensions a builder picks from (Color, Size, Variant, State, Shape). You can add custom options or disable standard ones.
States — Hover, Pressed, Focused, Disabled, and others. Styles set on a state apply on top of the base look.
Property sections — Background, Border, Outline, Layout, Icon, Text Formatting, Text Styles, and sub-parts for complex components.
Custom CSS — free-form CSS for anything the panels don't cover.
A light/dark toggle sits at the top. Each mode holds its own values. Switch modes before styling to edit the right one.
The Tokens and CSS Tab
A plain CSS editor for the whole theme, applied last — after tokens, the border style, and every component style. Rules here beat everything else.
Two critical rules
Scope every rule to
.interface-theme. Your app renders inside an element carrying that class. A bare class rule is less specific than the theme's own scoped rules and quietly loses wherever the theme already styles the same thing.Use the dual-selector pattern for dark mode. The active color mode is a
data-color-schemeattribute that can sit on either the app's root or a child element. Cover both placements:.interface-theme[data-color-scheme='dark'], .interface-theme [data-color-scheme='dark'] { --my-token: #value; }. See the Light and Dark Mode Pattern section of Tokens & Custom CSS.
The Fonts Tab
Open the theme's Fonts tab.
Click Upload Font. The Upload a font dialog opens.
Drop in the file (static or variable, TTF / OTF / WOFF2).
Enter the Family name.
Click Add font. The font appears in the table and in the Typography tab's pickers.
The table lists uploaded families alongside built-in System fonts. Search the table to find a font; each row is tagged System or Custom. Each custom row offers Edit (Update font) and Delete Font.
Warning: Deleting a custom font is irreversible. Any text using that font will fall back to the default font.
Applying and Setting the Default Theme
Set as workspace default — from the theme's card menu, choose Set as Default. New apps start from this theme.
Set per app — in the builder, open Settings → Design System and pick the app's theme there.
Permissions
| Action | Required |
| Create Theme | Create access |
| Edit / Set as Default | Edit access — without it, Save is disabled even if you can open the theme |
| Duplicate | Create access |
| Delete | Delete access |
A theme card only shows the actions you're permitted to run and shows no actions menu at all if you can only view.
Related Pages
Theme Builder — deep dive into how themes work