MISTICUS MIND
Transforming a fragmented legacy UI into a scalable design system powering consistent, AI-driven workflows
BACKGROUND
Built the foundational design system for Legal Genius, an AI legal research and drafting platform, during a full product rebuild, simultaneously with the product redesign. The system went from zero to a production-ready token architecture, component library, and AI-specific patterns in 3 months, as the sole designer on a team of one PM and one developer.
TEAM
Product Manager
Developer
AI Engineers
Me (Founding Product Designer)
MY ROLE
UX & UI Design
User Research
Design System
PRODUCT
AI-powered legal research and drafting platform
SCOPE
0→1 Design System + End-to-end platform redesign
TIMELINE
3 Months
100%
WCAG AA Compliant
46%
Boost in Development Efficiency
50%
Faster Feature Delivery
PROBLEM
The legacy platform had grown without a system, resulting in a fragmented and inconsistent experience.
Key issues:
1. Lack of foundations
The platform was built without a defined design foundation, resulting in inconsistent visual and interaction patterns. There were no standardized color tokens, typography scale, spacing system, or component specifications.
-
Multiple button styles and inconsistent spacing
-
No clear visual hierarchy
-
High visual noise across screens
-
Important space wasted in highlighting zero state cards with no value
2. Unstructured and Form- and Modal-Heavy Workflows
User flows were dominated by long, linear forms and nested modals, particularly in case management.
-
Poor scannability and task clarity
-
Users often had to complete multi-step forms in a modal, causing high cognitive load and frustration
-
Modals were nested and forms were overly long, revealing no standardized patterns for multi-step interactions or hierarchy
-
Increased likelihood of errors during legal tasks
Workflows were designed around forms and modals rather than guiding the user through tasks, creating friction and reducing efficiency.
3. AI Chat – Disconnected, Hidden, and Workflow-Breaking
AI-generated responses lacked hierarchy, formatting, and trust indicators.
-
AI chat was isolated from main dashboards; draft creation, document sources, and workflow triggers had no standardized pattern in the design system
-
Lack of defined patterns for integrating AI with case management created fragmented experiences
“Add documents” is tucked in the top-left sidebar - hard to notice
No way to copy, or edit or view sources to check where the information is coming from
AI chat became a separate task rather than integrated into legal workflows
No way to add documents, preferences/ user control or way to create draft in the chat
4. Content & Terminology Inconsistencies
Key terms from legal documents displayed in JSON format, which decreased workflow efficiency
System had no content guidelines, so messaging and terminology were inconsistent, causing frustration and lack of user trust
PROBLEM
After auditing key product flows across research and drafting workflows, and mapping components and interaction patterns I identified repeated UI patterns and inconsistencies
-
20+ inconsistencies across core screens
-
No standardized design foundations and component library
-
Repeated reinvention of UI patterns
-
Unclear states (error, loading, empty) added visual noise over the value
STRATEGIC CONTEXT
Why we rebuilt instead of migrating
The product was being rebuilt in a new environment entirely. The decision I had to make early: carry forward the existing UI patterns and clean them up, or start from the foundations. I recommended starting from the foundations. Here's why:
What migration would have meant
Carrying forward hardcoded visual styles, no token logic, inconsistent spacing decisions baked into every component, and a color system that had no semantic meaning. Cleaning "on top of" those issues would have been archaeology, not design.
What rebuilding enabled
A token-first architecture from day one. Every visual decision, color, spacing, typography, elevation was defined as a named value before a single component was built. Future changes happen at the token level, not in 40 places across the file.
The key argument I made to the PM: "If we migrate the old patterns, the new product will have the same debt in a new coat of paint. The rebuild is the one window we have to do this correctly, and it won't come again."
GOALS & DESIGN PRINCIPLES
Setting goals & principles for design system
-
Create a scalable design system to ensure consistency
-
Simplify complex legal workflows through structured UI patterns
-
Improve clarity, trust, and usability of AI-generated outputs
-
Enable faster and more efficient collaboration between design and engineering
1. Design for Variability
AI outputs are unpredictable. The system should accommodate dynamic content without breaking structure.
2. Clarity Over Decoration
Legal workflows demand precision. Visual styling should support comprehension, not compete with content.
3. Trust Is a Design Constraint
AI-generated content must feel reliable and transparent. Interaction states and citation visibility reinforce credibility.
Before defining these principles, I audited IBM Carbon (dense data interfaces), Shopify Polaris (high-task-frequency B2B), and Atlassian Design System (collaborative professional tools) to understand how systems handle high-density data and trust-critical UI. The audit shaped the principle of "designed restraint", the explicit rejection of decorative UI in favor of functional hierarchy.
FOUNDATIONS
Token architecture — decisions before components
Everything downstream depends on foundations being right. I built tokens before any component, if a token changes, every component that uses it updates automatically. This is the core principle that prevents design debt from accumulating.
1. Color System
This was the most visible and most debated system decision. The original platform used purple, a common "modern AI SaaS" color. I proposed shifting the primary brand color to golden yellow.
Why? Gold carries legal symbolism globally, court seals, judicial regalia, and law firm letterheads. It differentiates from every AI competitor. It conveys authority and heritage without feeling archaic. Critically, it works as an accent color on white/off-white legal document backgrounds, purple didn't.
Full semantic color token system
Beyond brand color, I defined WCAG AA compliant semantic tokens that map intent to value, so the system scales without requiring individual color decisions for every new component.
.png)
2. Typography
AI-generated content and user-authored content needed to be visually distinguishable without being jarring. I used a slightly larger line-height (1.6 vs 1.4) and a subtle background token for AI containers, enough to signal "this came from the AI" without making it look like a warning box.
.png)
3. Spacing
All spacing values are multiples of 8px. This creates predictable layout rhythm, eliminates arbitrary spacing decisions, and gives developers a system they can implement without guessing. Sub-4px values exist only for internal component padding (e.g., icon margins).
4. Elevation
In dense research workflows, shadow and elevation do one job: tell you which layer you're on. I defined 4 elevation levels with explicit usage rules. Every shadow answers the question, "Is this above the base layer, and by how much?"
COMPONENT LIBRARY
Built inside real workflows, not in isolation
Built a reusable component library to eliminate duplication and improve efficiency. Every component was extracted from a real screen need during the product redesign, which meant each one was stress-tested against actual content before it was documented.
Key Components
-
Buttons (primary, secondary, states)
-
Inputs and form elements
-
Tables (critical for legal data)
-
Modals and Cards
-
Navigation Bar
Each Component Includes
-
Variants and states (hover, focus, error, disabled)
-
Clear usage guidelines
-
Consistent behavior across contexts
PATTERNS
AI patterns - the most novel part of the system
Standard design systems don't have AI patterns. Legal Genius needed them. I designed 5 AI-specific components that didn't exist in any reference system I looked at, they had to be invented for the specific constraints of legal AI output.
Key Components
-
AI search: A self-sizing container that accommodates 2 lines to 40+ lines without breaking
-
AI loading
-
Citation / source panel
-
AI features
.png)
NEW DESIGNS
System Adoption
The design system enabled a shift from fragmented UI decisions to a scalable product foundation.
HOME
DRAFTS
CASE CREATION
AI RESEARCH
IMPACT
What changed after new design system
Product
-
Launched new platform without inheriting legacy UI debt
-
Standardized UI across core research and drafting workflows
-
Created a scalable foundation for future feature expansion
Engineering
-
Reduced UI inconsistencies during implementation
-
Established shared component logic between design and development
-
Enabled faster iteration through reusable component structur
Operations
-
Prevented redundant component creation
-
Reduced ambiguity in design decisions
-
Centralized visual standards in a single system
Brand
-
Repositioned visual identity from generic AI SaaS to legal-aligned authority
-
Improved trust perception through cohesive system design
Reflections
🌱 When rebuilding a platform, the design system should anchor the product, not follow it. Defining foundations early prevented design debt from re-entering the new environment.
🌱 Establishing spacing, typography, color, and component logic upfront created consistency across workflows from day one.
🌱 Embedding system thinking into real product redesign enabled faster iteration and reduced ambiguity between design and engineering.
🌱 Aligning the visual identity with the legal domain strengthened product credibility during relaunch.