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 104 semantic tokens with 4 theme modes.
Typography
Fluid clamp() type scale with 21 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.
Tools
Tools & Resources
Utilities that turn the design system into ready-to-ship assets.
AI Toolkit
Starter kits and reference files for humans and AI agents building with the design system.
Thumbnail Generator
Branded 2560×1440 video thumbnails in seconds — fill in the fields, pick a theme, download.
Image Optimizer
Raw images in, optimized WebP out — with AI alt text, SEO filenames, and a metadata CSV.
Logo Converter
Fit client and partner logos to the 560×280 artboard and export color, white, and black PNGs.
Logo Library
Client and partner logos in Color, Black, and White — transparent 2× PNGs for stories and decks.
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.