NewAlerts at Digibee — from proactive-monitoring research to a released feature.Read the case study
Pedro MergenerSenior Product Designer
← APIPASS

APIPASS · 2025

A new design system

Translating APIPASS's identity into a modern, scalable system — and redesigning the platform's core surfaces on top of it.

Role
Research, design system, UI redesign
Company
APIPASS — iPaaS · Integration platform
Focus
Design system, UI redesign, Research

The platform's layout had become outdated. After aligning stakeholder expectations with customer feedback, I began researching how to translate APIPASS's existing identity into a new, more modern and more effective design system.

Assets

There was no existing library of components, tokens or other elements needed to support a scalable redesign. That gap was addressed before designing any page. Below are some of the assets created along the way.

Buttons

Every variant, size and state, including disabled and icon-leading.

Inputs and form fields

Text, search, select and error states across four widths.

Date picker, pagination and dropdowns

Selection patterns shared across the platform.

Monitor components

Dashboard cells, execution rows, logs and status patterns for the monitoring surface.

Forms, dialogs and alerts

Form layouts, confirmation modals, accordions and inline error messaging.

Component specs

Once the library existed, each surface was specced frame by frame — anatomy, states and responsive behaviour — so engineering never had to guess what a component should do outside its happy path.

Widget builder

Creating a dashboard widget happens in a single modal: configuration on the left, live preview and query composition on the right. Nothing can be saved before the query returns a result, so users always see what they are about to build.

New widget — configuration, query builder and preview in one modal, with the unexecuted empty state.

Chart preview

One component, eight variants. Big number, bars, lines, top list, table, area, pie and heatmap share the same header, query footer and empty state, so switching visualisation never moves the surrounding layout.

  • The chart type select in the header is the only control that changes the variant.
  • Colour is reserved for meaning — completions, retries, asynchronous runs and failures.
Eight chart variants of the same component, plus the chart type select.

Responsive tables

The table specced across 1440, 1280, 1024 and 768. Column priority, row expansion, status pills and inline actions are defined per breakpoint, so columns collapse in a fixed order instead of being reinvented on every page.

Table v2 — density, sorting, expanded rows and column collapse across four breakpoints.

Flow page components

Atoms and set pieces for the flows surface: connector icons, status dots, filter chips, search fields, flow nodes in every state, error tooltips, editor bars and the project and flow cards.

Flow page anatomy — atoms on the left, flow node states and cards on the right.

Side menu

Type and state crossed: retracted or expanded, default, hover and active. Icon and label are instance properties and item visibility is a boolean set, so any product area composes its own menu without new components.

Side menu — minimised and expanded, with item examples up to eight entries.

Typography scale

A single type ramp for the whole platform: hero and page titles, subtitles, headings, body, emphasis, links, code and small text — plus the paired heading/subheading, title/subtitle, price and list blocks built on top of it.

  • Alignment is a property, not a new style — every pairing exists in start and centre.
The full type ramp with its composed heading, title, price and list blocks.

Icon library

An extended icon set covering everything the platform needed beyond the base library — the same glyphs drawn in outline, sharp and filled, alongside brand logos for connectors and integrations.

  • Three weights of the same grid, so a screen can switch style without redrawing icons.
  • Connector logos live in the library too, which keeps integration lists consistent.
Extra icons in outline, sharp and filled, plus the connector and brand logo set.

Spec rules

Rules that hold it together

  • 01One component, many variants — variation lives in properties, never in a duplicated frame.
  • 02Four breakpoints, one collapse order: 1440, 1280, 1024, 768.
  • 03Status is always colour plus text, never colour alone.
  • 04Every value comes from a token — no loose hex codes, spacings or radii in a spec.
  • 05Every state is drawn: default, hover, active, disabled, loading, error and empty.
  • 06Copy is written in the spec, not left to implementation.

Deliverables

Handed to engineering, ready to build

All the tokens, components and variables were handed off for the engineering team to build the company's new interface.

01

Tokens

Colour, type, spacing, radius and elevation as named variables — one source of truth shared by design and code.

02

Components

Every component published as a variant set with all states drawn, so engineers build from the spec instead of guessing.

03

Documentation

Usage rules, breakpoints and copy written next to each component, so the system survives without me in the room.

Accessibility & state tokens

Every state has a token

Beyond colour, the system defines how components behave for assistive tech and interaction. No guesswork on focus, error or loading states.

Accessibility

  • Focus rings use a 2 px offset plus a high-contrast outline.
  • Colour is never the only signal — status pairs a hue with an icon and text.
  • Interactive elements keep visible labels or aria-label for screen readers.
  • Keyboard order follows the visual flow; no positive tab indexes.
  • Reduced-motion preference is respected for transitions.

Right / Success

  • Green-500 fill on status pills and validation icons.
  • Check icon paired with a short confirmation message.
  • Enabled confirmation buttons return to default after action completes.

Wrong / Error

  • Destructive border and text on inputs with inline error copy.
  • Error icons sit left of the message for scanning.
  • Failed actions keep the button enabled so users can retry.

Hover

  • Background lightens 5 % on default buttons.
  • Links gain an underline instead of relying on colour alone.
  • Cursor and target size meet 44 × 44 px minimum.

Pressed / Active

  • Background darkens 8 % and inset shadow drops.
  • Selected nav item uses a left accent bar plus bold text.
  • Toggles shift immediately with a 120 ms transition.

Focus

  • Focus-visible ring uses primary colour with 2 px offset.
  • Focus state is removed on mouse click to avoid visual noise.
  • Modals trap focus and return it to the trigger on close.

Disabled

  • Muted background at 40 % opacity with no shadow.
  • Cursor changes to not-allowed and the element is removed from tab order.
  • Disabled buttons keep their label so intent stays readable.

Loading

  • Spinner replaces the button icon, label stays visible.
  • Skeleton screens use subtle pulse instead of spinners on large areas.
  • Loading state preserves layout to prevent content shift.