JS Design System
A universal SaaS design system, built on Figma variables, with ready patterns for AI features.
Overview & Role
What
A universal component library for SaaS products, not tied to any one app. Built for product teams who need a solid, themeable base for dashboards, admin tools and AI features, without starting from scratch every time.
Tools
Figma (Variables, Components, Team Library), Claude + Figma MCP
Role
Solo designer - foundations, components, patterns and documentation
Status
In progress
Timeline
3 Weeks - Ongoing
Why I Built This
I wanted to go deep - not another starter kit, but an extensive, production-grade system with variables, theming, complex components and AI patterns. I also wanted to test a new way of working: building it with Claude and the Figma MCP, with me setting the architecture, rules and quality bar.
Approach & Principles
Four principles guide every decision:
Tokens first: every color, space and radius comes from a variable, never a raw value.
Built for real screens: components are tested inside real app layouts, not just on a spec sheet.
Consistent states: hover, focus and disabled follow the same rules everywhere.
Process: foundations, then components, patterns and guidelines, then tested in a real app (Acme CRM).
Built with AI
Claude and the Figma MCP did the heavy lifting, while every decision stayed with me:
My role: architecture, token structure, naming rules, visual QA and every final call.
Claude via Figma MCP: generating components, variants and documentation from my specs.
What I learned: AI speeds up repetitive variants and documentation, but token bindings, states and component reuse need close review - I caught and fixed cases where icons broke size tokens and tables were rebuilt instead of reused.
Foundations & Tokens
1,731 variables in 5 collections, so any component can switch brand, theme and device without a single hard-coded value:
Primitives: 581 raw values - 506 colors, type, opacity, 5 breakpoints and 4/8/12-column grids
Semantics: 237 tokens with Brand A and Brand B modes, so a new brand never touches components
Theme - Color: 755 tokens for surface, text, icon, border, chart and gradient, in Light and Dark
Theme - Layout: 146 tokens for spacing, radius, typography and shadows across Desktop, Tablet and Mobile
Theme - Motion: 12 tokens for durations and easings
Typography: Inter for headings, Poppins for body and JetBrains Mono for code - 104 text styles, plus 11 effect styles for shadows, focus halos and glass.
Components & Architecture
227 component sets and 5,261 variants across 65 component pages, grouped into eight families:
Actions: button, button group, link
Forms and inputs: input, select, combobox, OTP, rich text editor, date and time picker, calendar, file upload, color picker
Navigation: tabs, breadcrumb, pagination, stepper, dropdown menu, tree view
Data display: table, filters and bulk actions, kanban board, 13 chart components, badges, avatars, timeline
Feedback: alerts and toasts, notifications, messaging, progress, skeleton, empty states
Overlays: modal, drawer, popover, tooltip
Patterns: app shell, header, sidebar, page header, cards, form layout, invite and permissions, onboarding
AI: 23 component sets for AI features (see below)
Plus 188 icons drawn in one consistent style, each with size variants.
AI Patterns
Trust & Transparency
Source chips, citation markers, confidence indicators, feedback controls and AI disclaimers.
Suggestions & Insights
AI suggestion cards, suggested value chips, score badges and risk flags, shown inline.
AI Assistant
Prompt input, suggested prompts, AI responses, refine-draft and a full assistant panel.
Agents & Governance
Action approval cards, agent progress, review changes, AI settings and an AI audit log.
Templates & Screens
18 page templates and about 120 screens, built only from system components, in Light and Dark, desktop and mobile:
Auth, Dashboard, List, Detail, Form, Settings, First-use, System pages, Billing, Wizard, Import, Inbox, Kanban, Calendar, Integrations, Audit log, Profile and Search.
Light & Dark Themes
Both themes run off the same components. Switching the variable mode updates every surface, text color and border - no separate component sets to maintain.
Guidelines & Documentation
Documentation sits right next to the components:
Surfaces and nesting: how cards and panels layer on each background
Focus and hover states: consistent, visible feedback on every component
Accessibility: contrast, focus visibility and readable sizes
Team library: published in Figma, ready to use in any file
In Use: Acme CRM
The system is being tested on Acme CRM, a full SaaS app built only with JS Design System components. Case study coming soon.
What’s Next
Next up:
Finish the remaining components and pattern pages
Complete the Acme CRM.
Expand documentation with usage do’s and don’ts
See it in Figma
Want to see the Figma file? I’ll walk you through it live on a call.