UiPath Web Style Guide
The complete reference for UiPath's web design system — colors, typography, spacing, grids, and components. Built with and for the tokens that power UiPath's digital experience.
Quick Access
Explore the System
Jump into any section of the design system.
Colors
108 color primitives across 6 families, plus 39 semantic tokens with 4 theme modes.
Typography
Fluid clamp() type scale with 16 tokens — Poppins for display, Inter for body.
Spacing
22 spacing primitives on a base-4 scale, with responsive padding and margin tokens.
Grid & Layout
6-breakpoint responsive grid system — 4, 8, and 12 column layouts.
Button
Primary, Secondary, and Tertiary buttons with icon variants across 4 theme modes.
Surfaces & Elevation
Background tokens, border hierarchy, shadow system, and the sharp-corners rule.
Philosophy
Key Design Principles
The rules that guide every design decision in the UiPath web experience.
01
Orange is the hero
Orange50 is the primary CTA color — it commands attention and drives action.
02
Teal for focus & accent
Teal50 powers focus rings, selection highlights, and accent details. Links use BrightBlue.
03
DeepBlue90 is the black
#172125 replaces pure black for text, icons, and dark surfaces — warmer and more refined.
04
Sharp corners always
Square radius is the default. Round corners are reserved for pills and circle buttons only.
05
Poppins for brand, Inter for UI
Display, headings, subtitles, and labels use Poppins. Body and UI chrome use Inter.
06
Fluid typography
clamp() tokens scale continuously between 360px and 1680px. Body and UI chrome are fixed.
07
Three button tiers
Primary (Orange filled), Secondary (dark filled), Tertiary (outlined) — clear visual hierarchy.
08
Four theme modes
Light, Dark, Gray, and Colored — all driven by semantic tokens that resolve per mode.
09
Design at 3 widths
Desktop (1440/12-col), Tablet (768/8-col), Mobile (390/4-col). clamp() handles the rest.
10
S / M / L sizing
All interactive components have Small, Medium, and Large variants — consistent and predictable.