activepieces-design-system
Installation
SKILL.md
Activepieces Design System
You are designing for Activepieces — an open-source AI automation platform where users assemble triggers + actions from 280+ "pieces" into automated flows. Every piece doubles as an MCP server.
Read README.md in this folder first — it is the canonical reference. This file is a fast-loading summary for agent use.
Inventory
README.md— full spec (content fundamentals, visual foundations, iconography, caveats). Read first.colors_and_type.css— CSS tokens (colors, fonts, radii, shadows, spacing, type ramp). Import in every HTML file.fonts/— Inter 400/500/600/700/800 +Sentient-Variable.woff2(display alt, not used in app).assets/logo.svg— brand mark. Purple#8142E3.assets/— piece-tile SVGs (Shopify, Airtable, Google, OpenAI, Slack, Gmail) + MCP/code glyphs.preview/— ~700px-wide design-system cards (type, color, spacing, components).ui_kits/web/— high-fidelity recreation of the Activepieces web app. Entryui_kits/web/index.html. Form-controls showcase atui_kits/web/forms.html. Modular JSX via Babel standalone. Screens: Flows dashboard, Builder (dotted canvas + step panel), Runs table, Connections list, Ask AI chat overlay (Lottie-animated "thinking" loader atassets/ai-loader.lottie.json). Supports light + dark mode via.darkclass on<html>— toggle lives in the sidebar footer.insights/— Interactive Insights page. Entryinsights/Insights.html. Composes theui_kits/web/shell (Sidebar, TopBar, Primitives, Overlays) and adds chart primitives inInsightsCharts.jsx:Sparkline,LineChart(multi-series + hover crosshair + tooltip),BarChart(stacked/grouped),Donut,Heatmap(days × hours). Page-scoped styles ininsights.cssdefine theins-*class vocabulary (stat cards, AI summary card, quota meter, flow/error/team rows, piece grid, narrative hero). Two layout variations — Classic dashboard (hero stats + chart + donut + quota + top flows/errors + heatmap + team + live feed) and Editorial (dark narrative hero that tells the week's story + 3 highlight cards + heatmap/feed). Time range picker (24h/7d/30d/90d), compare-to-previous toggle, scope tabs (Workspace/Flow/Piece/Teammate), clickable stat cards, hover tooltips. Tweaks: layout (Classic ↔ Editorial), chart style (line/bar), AI summary on/off, density. Respects light/dark toggle.