Uslimato Experience

Overview

Uslimato Experience is the new design language for the Uslimato app. It runs in parallel with the classic design — you can toggle between the two at any time from the header or the avatar menu. No data is moved, reloaded, or migrated when you switch.

The Experience mode is designed for teams who want a lighter, more focused workspace: a warm-grey sidebar, Uslimato-green accents, rounded cards, an app launcher, a global Create menu, a dedicated Admin context, and a global command palette.

How to toggle

You can switch modes in three places:

• Header icon: a sparkle (Experience active) or gauge (Classic active) icon in the top-right of the header opens and closes Experience mode in one click.
• Avatar dropdown → Design: a segmented control labelled Classic / Experience in the avatar menu.
• Command palette: open it with ⌘K / Ctrl + K and search for Toggle Uslimato Experience.

Your choice is stored in your browser session. It survives page reloads within the same tab session and is cleared when you close the browser — a fresh session starts in classic mode by default.

What changes

Experience mode is a visual transformation — all data, routes, permissions, and features behave identically in both modes.

• Palette: the accent stays on Uslimato Green (#03a900) across the Experience, matching the product brand line. A lighter Uslimato-green gradient (#b3e8b3 → #03a900 → #034d01) is used for hero and admin-strip treatments.
• Surfaces: warm product greys are replaced with zinc neutrals (#09090b → #fafafa) for a tighter contrast feel.
• Shell: the sidebar is a light surface with grouped navigation and a favourites section. The top bar is a dark command surface hosting an app launcher (9-dot), breadcrumb, command-palette search, tenant switcher, a green Create button, notifications, an admin-context toggle (gear), and the avatar menu.
• Controls: primary buttons are pill-shaped; cards adopt a larger corner radius and a softer shadow.
• Typography: the Experience follows the brand guide — Century Gothic (preferred, licensed, installed locally) for the wordmark and display elements, with Poppins 400 as the approved webfont fallback. JetBrains Mono is used for identifiers and counts.
• Logo: the Experience shell renders the brand-aligned Tidal lockup — the gradient-curl SVG mark from our brand guide (#6ee7b7 → #10b981 → #064e3b) paired with the Century Gothic wordmark. The classic shell keeps its PNG lockup unchanged.

The Create menu

The green Create button in the top bar opens a contextual menu with the actions most users reach for most often:

Entry	What it does
Add asset	Opens the asset-intake flow (/assets?create=1).
Create ticket	Opens the ticket create dialog on /tickets (ITSM licence required).
Start process	Opens the movement wizard on /movements.
Invite user	Opens the user-invite dialog on /users.

Entries are permission-gated — users only see actions they can actually perform.

Product ↔ Admin context

The gear icon in the top bar (visible only to users with the admin permission) flips the shell between two contexts:

• Product context — the workspace view: Dashboard, Assets, Processes, Movements, Tickets, Catalog, Locations, favourites.
• Admin context — the tenant-administration view: General settings, Branding, Modules, Users & roles, Locations, Billing, Integrations, API & webhooks.

The choice is stored in your browser session. An accent stripe under the top bar and a pill badge in the breadcrumb row make the current context unmistakable.

App Shelf (ecosystem launcher)

The 9-dot button at the far left of the top bar opens the App Shelf. It groups entries into three sections:

• Workspace — core product modules. Entries gated by a plan feature (e.g. Processes / Movements require the processes feature) render disabled with a plan-upgrade tooltip when your plan does not include them.
• Add-ons — ITSM Tickets and the Self-Service desk. Shown disabled with an explanatory tooltip when the ITSM add-on licence is not active or the per-feature flag is off.
• Ecosystem — external tools (Documentation, Developer Portal, the HGE Uslimato platform team). the HGE Uslimato platform team is only visible to users with the is_super_admin claim. External entries open in a new tab.

The launcher fetches its licence context on first open (no extra request per page load). If the licence endpoint is unreachable, every entry is rendered in "enabled" mode as a fail-open fallback — real enforcement still happens at the backend routes.

Process editor — step library

The Process Editor's left toolbar is now a full step library (n8n-style). Each available step type is shown as a labelled card with an icon chip and search filter. Editors can:

• Click a card to append a step at the end of the flow (keyboard-friendly).
• Drag a card onto the canvas to drop it anywhere (native HTML5 drag-drop; no third-party library).
• Search by label (German or English) or by internal step-type key.
• Steps are grouped into Inputs, Confirmations, and Identity for quicker scanning.

The underlying process schema is unchanged — only the editor interface was reworked. Read-only process views continue to hide the palette.

Tenant branding

Admins can customise their tenant's accent colour and wordmark text from /branding:

• The accent override is applied automatically across the entire app — both the classic shell and the Experience shell pick it up automatically.
• The wordmark override replaces the "uslimato" text in the Tidal lockup across the app. The Tidal gradient curl stays (no per-tenant logo yet).
• Both fields can be reset individually; a null accent falls back to Uslimato Green #03a900, a null wordmark falls back to uslimato.

All values are tenant-isolated — each tenant sees only its own branding.

Logo upload will follow in a later release.

Favourites

The star button on each sidebar nav item adds that section to your Favourites shortcut group at the top of the sidebar. Favourites are stored server-side and are tenant-isolated — each tenant has its own favourites list.

Offline / first-load behaviour: the list is loaded locally first and then reconciled with the server in the background. A network or permission error keeps the local list untouched — you never lose your pins due to a flaky connection.

Notifications

The bell icon in the top bar opens your personal notification feed. Each entry is created at the moment something happens to you or an entity you own — it is not a read of the audit log. The feed refreshes automatically every two minutes so the top bar badge always shows the current unread count.

• An accent-coloured badge on the bell shows the real server-side unread count.
• Opening the tray automatically marks all notifications as read — the badge briefly drains so the transition is visible. Clicking an individual entry also marks it read on its own.
• Clicking an entry navigates to the affected entity (asset, ticket, movement, user, or process).
• Offline or server interruptions do not affect already-read notifications — the read status is stored server-side.

Trigger points

Phase 2 connects notifications to business-critical events so the feed reflects real operational activity:

• Asset assigned — when an asset is created with an assignee or reassigned to another user, the new assignee is notified.
• Movement completed — when a movement finishes, each affected asset's current assignee is notified.
• Ticket assigned — when a ticket is created with an assignee or reassigned to another user, the new assignee is notified (requires ITSM add-on).
• Ticket status changed — status transitions notify the current assignee (requires ITSM add-on).

Self-assignments are suppressed — if you assign something to yourself, no notification is created. All notifications are tenant-isolated — you only see notifications from your own tenant.

Command palette

Experience mode introduces a Jira-style command palette, opened with ⌘K / Ctrl + K. It groups results by Navigate (jump to any page) and Actions (toggle modes, switch theme, sign out). Use the arrow keys to move and Enter to run.

As soon as you type at least two characters, the palette automatically searches for assets and users in parallel. Up to five matching assets (primary: asset name, secondary: asset tag and type) and four matching users (primary: display name, secondary: email) are surfaced as selectable entries under dedicated Assets and Users groups — the existing Navigate / Actions entries are then filtered to the substring match. Selecting a hit navigates to the asset or user detail page. The search is tenant-isolated — only results from your own tenant are shown.

What stays the same

• All permissions and RBAC rules are unaffected.
• All data paths (assets, tickets, movements, processes, users) behave identically.
• Dark mode and light mode still work — the new design adapts to both.
• The backend is untouched — no API changes were introduced.
• Tenant isolation and all security guarantees are unchanged.
• No third-party brand references are introduced — the Tidal mark is the in-house SVG lockup from our own brand guide.

Accessibility

• The mode toggle is a real <button> with aria-pressed.
• Colour contrast meets WCAG AA in both light and dark variants.
• The command palette is keyboard-only navigable.
• Touch targets remain ≥ 44 × 44 px on mobile.

Roadmap

Experience mode is rolling out in waves. The design-system foundation (tokens, primitives, shell, command palette, Create menu, Admin-context toggle) is live today. Screen-by-screen polish follows in upcoming releases:

• In-App Notification Center
• Favorites & Saved Views
• App Shelf / Ecosystem Launcher
• Tenant Branding (Admin)
• Visual Workflow Builder
• Self-Service Portal "My Workplace"
• Asset Detail Full-Edit (tab-based)
• Enhanced User Profile
• Lifecycle Kanban Board
• Module Management (Admin)

If you run into any visual regression while using Experience mode, switch back to Classic at any time — your work is not affected.