Surfaces & Elevation — UiPath Web Style Guide

Backgrounds

Surface Tokens

Background surfaces for pages, cards, sections, and inverted contexts.

bg-default White · #FFFFFF

bg-accent DeepBlue05 · #F0F9FC

bg-inverted DeepBlue90 · #172125

bg-brand Orange50 · #FA4616

Selection

Text Selection

The highlight color when users select text. Uses teal to stay within the brand palette.

selection-bg Teal10 · #CEECF0

selection-text DeepBlue90 · #172125

Try it — select this text to see the teal highlight in action.

CSS

::selection {
  background: var(--teal-10);    /* Teal10 · #CEECF0 */
  color: var(--deepblue-90);     /* DeepBlue90 · #172125 */
}

Borders

Border Hierarchy

Six border tokens ordered from strongest to faintest, plus a dedicated focus ring color.

border-strong DeepBlue85 · #202E33 — Emphasized dividers

border-firm DeepBlue40 · #8A9EA6 — Emphasized borders

border-normal DeepBlue30 · #A3B7BF — Card borders

border-subtle DeepBlue15 · #D5E3E8 — Table cells, inputs

border-faint DeepBlue10 · #E4F0F5 — Lightest separation

border-focus Teal50 · #0BA2B3 — Focus rings on interactive elements

Radius

Sharp Corners Rule

UiPath's design language uses square corners as the default. Rounded corners are applied contextually — pills use full-round (32px), and circle buttons use 50%.

0px Default

32px Pills

50% Circle buttons

Design principle

Never add border-radius to frames, buttons, cards, inputs, or other UI elements unless they are specifically pills or circle-shaped. Sharp corners are a core part of UiPath's visual identity.

Elevation

Shadow Tokens (work in progress)

Four shadow tokens define the elevation system. Never use arbitrary rgba() shadow values — always reference these tokens.

shadow-default

Cards, panels, dropdowns

shadow-heavy

Modals, dialogs, popovers

inner-shadow-default

Pressed/active inputs

CSS Custom Properties

:root {
  --shadow-default:
    0px 0px 0px 1px rgba(25, 37, 50, 0.10),
    0px 3px 7px -3px rgba(25, 37, 50, 0.10),
    0px 6px 12px -2px rgba(25, 37, 50, 0.10);

  --shadow-heavy:
    0px 0px 0px 1px rgba(25, 37, 50, 0.10),
    0px -6px 16px -6px rgba(25, 37, 50, 0.03),
    0px 8px 16px -8px rgba(25, 37, 50, 0.20),
    0px 13px 27px -5px rgba(25, 37, 50, 0.15);

  --inner-shadow-default: inset 0px 2px 0px 0px rgba(231, 235, 238, 0.20);
}

Usage

When to Use What

Element	Shadow Token	Additional
Cards & panels	`shadow-default`	—
Dropdowns, tooltips	`shadow-default` or `shadow-heavy`	—
Modals & dialogs	`shadow-heavy`	—
Pressed inputs	`inner-shadow-default`	—