AI Toolkit

Reference files for humans and AI agents building with the UiPath design system. Grab a starter kit for your use case, or download individual files.

How it works: These Markdown and JSON files contain design tokens, component specs, grid rules, and typography formulas. Drop them into your AI agent's context (Claude, Codex, Cursor, Copilot) or use them as reference while coding manually. Each kit bundles exactly what you need — no extra noise.

Start here

Starter Kits

Pick the kit that matches what you're trying to do. Each is a single zip with all the files you need.

Build Components

Implement UiPath sections in code. Includes all 23 component specs, design tokens (CSS + JSON), color variables, and grid layout rules.

35 files — design-system.md, grid, tokens, all component specs

Mock Up Pages

Assemble page layouts from content documents. Great for content strategists and PMs prototyping with AI agents using content reference files.

33 files — design-system.md, grid, section + UI component specs

Audit & Compare

Check live pages or Contentful output against the design system. Token values, color palettes, spacing, and grid specs for verification.

3 files — design-system.md, color-variables.md, grid

Design in Figma

Create or modify Figma components with AI agents. Includes the foundational skill, Plugin API gotchas, variable IDs, and all component specs.

36 files — foundational skill, gotchas, tokens, all specs

Everything

The full design system package. Every token, every spec, every reference file. For teams that want complete context.

37 files — all references, all specs, all tools

Reference

What's in Each Kit

File	Build	Mockup	Audit	Figma
`design-system.md`	•	•	•	•
`color-variables.md`	•		•	•
`figma-grid-layout.md`	•	•	•	•
`clamp-typography-tokens.json`	•
`uipath-figma-component.md`				•
`figma-gotchas.md`				•
UI component specs (8 files)	•	•		•
Section component specs (19 files)	•	•		•

Individual files

All Files

Prefer to pick exactly what you need? Download files individually.

System References

design-system.md

Master reference — colors, typography, spacing, grid, tokens

color-variables.md

108 primitives + 104 tokens across 4 themes + size tokens

figma-grid-layout.md

6 breakpoints, columns, gutters, margins, content spans

clamp-typography-tokens.json

DTCG-format — 21 tokens, 3 modes, Figma-importable

Figma Agent Skills

uipath-figma-component.md

Foundational skill — tokens, IDs, grid, type scale for Figma agents

figma-gotchas.md

29 Plugin API pitfalls — essential for Figma automation

UI Components

button.md

3 types, 3 sizes, 2 structures, 4 themes, all states

breadcrumbs.md

Breadcrumbs — page-level trail under the nav (Home icon · parent links · current page) in a labelled nav › ol; body-sm type, Icon Library home + chevrons as masks, four themes via data-theme, CSS-only collapse to "‹ Parent" below 640, placement over every hero type, a11y + contrast audit, migration notes from the live component

segmented-control.md

Segmented Control — rounded track (bg-control) with a sliding, resizing thumb in the active Pill's style; 2–5 segments, md / sm / xs (label / label-sm / label-xs), four themes via data-theme, tablist or radiogroup with arrow-key move-and-select; token map, type & spacing, engine contract, a11y, full CSS + JS; names the bg-control + label-xs dependencies

toggle.md

Toggle Switch — one on / off setting applied immediately; rounded track (bg-control / bg-control-selected) with a knob that grows and slides; md 32×56 and sm 24×40; label as a real <label for>, native button role=switch, change event; 4 themes, no new tokens

tooltip.md

Tooltip — a short, non-interactive label floating next to the thing it explains, 12×6 arrow aimed at the trigger; tooltip (hover 300ms / focus, role=tooltip + aria-describedby) and toggletip (click on a .tip-info button, role=status live region, aria-expanded); caption 12/16 + optional caption-bold title, 8×12 padding, max 240px, no stroke / shadow / radius; two new Surface / Tooltip tokens (bg-tooltip, label-tooltip); top / bottom / left / right with flip + slide, fixed bubble in body, 300px scroll-away fade; WCAG 1.4.13; full CSS + engine

chip.md

Chip — static label for status, category, plan badges and comparison-table values: square, 1 px edge, never interactive (clickable = Pill); Filled / Outlined / Solid × Neutral, Teal, Orange, Blue, Purple; md 32 (label-sm) / sm 24 (body-sm) / xs 20 (caption-bold, new); optional leading UI Icon; four themes via data-theme; the 35 Surface / Chip tokens with per-theme primitives, usage rules (chip or Pill, table values), contrast exceptions, canonical CSS. Dependencies: Surface / Chip tokens + caption-bold.

arrow-button.md

36 variants — circular/square nav buttons

textlink.md

24 variants — 2 types, 2 sizes, 6 states

pill.md

16 variants — 4 sizes, 4 structures, tabs + tags

play-button.md

3 sizes — orange circle with play icon

Section Components

content-block.md

54 variants — foundational section with CTA pairs

content-columns.md

54 variants — multi-column with responsive stacking

media-text.md

8 variants — side-by-side media + text, 4 media types

accordion.md

16 variants — expandable sections, 3 themes

key-stats.md

16 variants — Big + Small types, CSS-only underlines

featured-resource.md

8 variants — Strong + Soft promotional cards, reveal animations

grids.md

Logo Grid · Image Grid · Logo Ticker — 3 use cases, 3 column counts, 4 themes, mask-fade ticker

divider.md

Full-bleed sticky-image section + content card — 12 variants, scroll-blur, reveal animation

quotes.md

Testimonial carousel — 16 variants, 4 themes, mouse-tied gradient quote marks, fade + height-morph slider

case-studies.md

Customer-stories carousel — 4 themes, 2 card themes, hover-revealed stats, fade + DOM-reorder slider, reveal observer

footer.md

Global site footer + Footer Minimal — 4 themes via Color Token modes, canonical link inventory, language-selector listbox, masked monochrome icons, static by design (no reveal)

navigation.md

Global site navigation — 4 themes + brand hex with auto-flip, Solid/Blur surfaces, Start Transparent, BG-aware, Over/Push layouts, anchored panels, LM sheet, mobile accordion, i18n rules

videos.md

Video playlist with tab menu — 4 themes, Pill-based tablist, centered-card slider with peek, Content Block intro, mouse-tied gradient highlight

icons-text.md

Grid of pictogram + heading + body tiles — 4 themes (Light/Dark/Gray/Colored), 3 column counts (2/3/4), 3 icon positions, optional bullet list, Content Block reveal animation

products.md

Product-page Artefacts hero — 19 platform products, each with a logo lockup + unique 2–3-family rag color combo (teal/orange/brightblue/purple/deepblue). Animated gradient "rags" on a fluid cell grid over a DeepBlue10 tone wash: Converge 2.0 entrance, mouse-move reshuffle, scroll exit, ≤0.3 dim over text. Rags hidden <640. Full engine + a11y notes

solutions.md

Industry-locked Solutions hero — 8 industries (Financial Services, Healthcare, Manufacturing, Procurement, Public Sector, QA Testing, Retail, Accounting), gradient + room photo + Solution Tag SVG, scroll choreography (load stagger → text fade-out → white-overlay reveal at trigger → sticky-Tabs handoff), full a11y audit

hero-cards.md

Solution cards for Solutions pages — 3 configurations (Single + vertical anchors nav, Double, Triple), 6 named gradients × 4 themes, scroll-reveal animation, full a11y audit

solution-package.md

White-bg Solution Package hero for productised-solution sub-pages — 8 industries, colored Solution Tag, industry-accent title, optional 1–2 CTA combo, two top-corner pixel-symbol decorations + gradient gridlines (128/96/64 px, hidden on Mobile), one-shot scroll-reveal stagger, full a11y audit

solutions-listing.md

Solutions listing-page hero — a runtime mosaic of colored grid squares (orange → teal field behind a white display-lg title → purple/grey) with 8 industry pattern-tiles that pop as oblique 3D cubes. Single fluid cell drives everything; ≥1024 fixed centred ensemble (odd cols), 640–1023 8-tile edge frame, <640 mosaic banner + quantized teal-square title block (flat squares). Full engine + a11y audit

minimal.md

Minimal company-page hero (About Us, Leadership, Board, Newsroom, Careers) — text band on bg-accent with optional body-md-bold eyebrow, display-lg title, body-lg subtitle and 0–2 CTAs (Primary + Tertiary). Squares variant adds a top tint and an auto-animated white-square field (round-robin swaps, parks when unseen, hidden on Mobile); Plain is the flat band. Class mapping to the live .lb-hero build

tabs.md

Horizontal tab menu — Anchors (in-page links) or Switcher (content swap) · 4 themes · 2 directions · 2 alignments · Mobile collapse to single Active row + hamburger / +- · theme-cascade CSS-var tokens · Content Block reveal animation

combo-x2.md

Container section that composes 2 inner sections side-by-side · 4 layouts (CB+CB, CB+CC, CB+Accordion, CB+Accordion-bg) · 4 themes · 5 padding tokens × pt/pb · gradient hairline splitter on inner Content Blocks · inner-section padding reset · scroll reveal

combo-x3.md

Container section that composes 3 inner sections · 7 layouts across 3 shapes (row, two-col, vertical-stack) · L-bracket gradient frame on Horizontal MT × 3 cards · splitter on CB + MT · 4 themes · inner-section padding reset · scroll reveal

Usage

How to Use These Files

With AI agents (Claude, Codex, Cursor, Copilot)

Add the relevant kit files to your agent's context or project directory. At minimum, include design-system.md for any frontend work. The files are structured so agents can extract exact values — clamp formulas, hex colors, padding values, breakpoint rules — without ambiguity.

For manual development

Open design-system.md alongside your editor. Copy the CSS custom properties into your root stylesheet. Reference component specs for spacing, responsive behavior, and token names.

For page mockups from content docs

Give your AI agent the Mockup Pages kit alongside your content reference file (Word doc, spreadsheet, content brief). The agent can map your content fields to the right components — headings into ContentBlock, features into ContentColumns, FAQ into Accordion — and generate a complete page layout.

For Figma automation

The Design in Figma kit contains everything an AI agent needs to create or modify components directly on the Figma canvas via the use_figma MCP tool. The foundational skill provides variable IDs, collection IDs, and build conventions. The gotchas file prevents the most common Plugin API pitfalls.