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." 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.

It has two tabs: Your Themes (the ones your team created) and 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. The mode you select is accessible to your users at runtime.
Optionally check Set as default theme so new apps start from it.
Click Create. The theme editor opens immediately.

To start from an existing look, use Duplicate on any theme card (including Library themes) and edit the copy. 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 15 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

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 15 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 15 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, 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-scheme attribute that can sit on either the app's root or a child element. Cover both placements.

The Fonts Tab

Open the theme's Fonts tab.
Click Upload Font → Add Custom Font.
Drop in the file (static or variable, TTF / OTF / WOFF2).
Give it a Font name.
Click Add. The font appears in the table and in the Typography tab's pickers.

The table lists uploaded families alongside built-in System fonts. Use All fonts / System / Custom tabs to filter. 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 — open the app's Design System settings in the builder 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.

Theme Builder — deep dive into how themes work
Colors & Color Scheme
Typography
Borders & Radius
Custom Icons
Tokens & Custom CSS
Appearance & Styling Guide

Design System & Themes Screen