recent product work
Highlight images are optimized for Desktop
2024
Hauler hero
Account & Suspension groups
Our account group system has transformed waste management operations by automating key tasks and improved efficiency for companies of all sizes, earning widespread praise throughout the industry, reducing processing time by ~60%.
Impact
Challenge
Execution
Before / After
Account Listitem
Account groups
Suspension groups
Reflection

Reactions

“The suspension groups!!!! What an amazing tool! I freaking love you guys!” - Wendy W. | Wallace refuse
"Now with all of the groups... being able to see everything based on the aging. GAME CHANGER!" - Jessica | Grogan Disposal
"Coming recently from Routeware... this is a capability that they can only dream of!" - Park G. | Account exec
“I just wanted to say thank you for adding the improvements and coming soon pop ups to Hauler Hero. Love the recently viewed option! Kudos to you all for rocking it!!!!” - Shannon M. | Davis Disposal

Results

  1. Industry-Leading Innovation: Pioneered cutting-edge grouping and automation features specifically designed for waste management
  2. Time Efficiency: Slashed account management time by 60% through innovative bulk operations and smart automation
  3. Enhanced Customer Insights: Revolutionized account oversight with powerful filtering, sorting, and strategic grouping tools
  4. Streamlined Operations: Transformed workflow efficiency with advanced account hierarchies and aging management system

Backdrop

Customers struggled with inefficient CRM workflows and disconnected experiences that made bulk operations for customer accounts impossible.

Many relied on messy Excel-based workarounds and frequently submitted data requests for bulk actions, creating a significant burden on our engineering team.

The system's poor tracking capabilities and limited visibility into customer account status led to mounting challenges.

As we scaled, the high volume of customer requests for bulk operations began overwhelming both our support and engineering teams.

We needed to develop a comprehensive account management system that could handle bulk operations efficiently, provide clear visibility into account statuses, and automate routine tasks - all while maintaining system performance and reliability at scale.

The solution had to address both immediate operational bottlenecks and provide a foundation for future growth.
‍

Challenges

  1. Process Automation: Streamlining bulk operations for autopay tracking, late fees, and holds across multiple accounts
  2. User Experience: Creating intuitive filtering and sorting with clear visibility of account statuses
  3. Performance: Optimizing speed for bulk operations across large customer bases
  4. ‍Communication: Enabling efficient bulk management of invoices, portal invitations, and customer notifications‍
  5. Seasonal Management: Creating flexibility for seasonal customers

Execution

  1. Reusable Architecture: Built on existing payment infrastructure for seamless user experience
  2. Automated Workflows: Streamlined aging and suspension process workflows to reduce manual work
  3. Enhanced Visibility: Integrated dashboard metrics and status indicators for better oversight within groups
  4. ‍Search & Navigation: Improved account discovery with advanced filtering and quick-access navigation tabs‍
  5. Bulk Operations: Simplified workflows for Portal invitations and Account grouping and aging management of invoices

Wins

  1. ‍Customer Impact: Achieved ~60% reduction in account management time through streamlined bulk operations and automated workflows‍
  2. Technical Innovation: Successfully built an intuitive grouping system that integrates seamlessly with existing payment infrastructure
  3. Industry Leadership: Set new standards for CRM functionality, earning praise from customers transitioning from competitor systems

Learnings

  1. Feature Scope: Made strategic decisions to focus on essential functionality first, enabling faster delivery of core features while planning future enhancements
  2. Resource Balance: Development capacity constraints led to prioritizing core functionality over enhanced filtering and sorting capabilities
2024
Hauler hero
Real-time Waste Route Management
A transformation of routing capabilities that turned 4-hour planning sessions into 15-minute tasks. This innovative system combines visual route planning and real-time tracking, helping waste companies optimize thousands of stops while keeping all stakeholders synchronized.
Impact
Challenge
Execution
Before
After
Changelog
Reflection

Reactions

“Our last software, to sequence a route and put it back in would take me almost half a day. This workflow is more efficient and it's made my life a lot easier.” - Justin C. | Major Waste
“Awesome Feature! Very helpful when honing in the routes” - Thomas | Greenleaf Recycling
“FANTASTIC!” - Danny | Trigg Trash
“Outstanding job, Team!! This is so money! I’ve practiced it a few times and am ready to demo it on my next sales call.” - Clint S. - Head of Sales
“This is awesome! I would argue this is one of, if not THE most badass feature we have now!” - Abbey A. - CS specialist

Results

  1. Performance: ~75% faster route planning - tasks that took half a day now take minutes to complete
  2. Key Benefits: Real-time tracking, bulk stop management, improved team communication, and route optimization enhance driver productivity and route efficiency
  3. Customer Satisfaction: Widespread positive feedback from customers across different roles - from operations managers to dispatchers - highlighting improved efficiency and ease of use

Backdrop

The existing route manager struggled with several critical challenges that impacted waste management operations.

Route planning was extremely time-consuming, with dispatchers spending multiple hours manually sequencing hundreds of stops per route.

The system lacked the ability to view both map and list views simultaneously, making it difficult for dispatchers to efficiently plan and modify routes.

Real-time route adjustments were cumbersome, especially when responding to unexpected situations like driver overtime or the need for backup support.

These technical limitations created significant bottlenecks in daily operations, reducing team productivity and making it harder to respond to changing conditions in the field.
‍

Challenges

  1. Visual Interface: Developed combined map and list views to address dispatcher feedback about needing both views for efficient route planning
  2. Bulk Management Tools: Created intuitive drag-and-drop functionality and map-based bulk selection capabilities to handle routes with 300-500+ stops efficiently and visually
  3. Real-time Optimization: Implemented tools for quick route modifications to handle urgent route changes without effecting the primary route sequence‍
  4. Real-time Driver Locations: Enhanced fleet visibility through real-time tracking, enabling route monitoring and optimization‍
  5. Route Sequencing: Streamlined the route planning and sequencing process, cutting route planning time from half a day down to minutes

Execution

  1. Visual Interface: Developed combined map and list views to address dispatcher feedback about needing both views for efficient route planning
  2. Bulk Management Tools: Created intuitive drag-and-drop functionality and map-based bulk selection capabilities to handle routes with 300-500+ stops efficiently and visually
  3. Real-time Optimization: Implemented tools for quick route modifications to handle urgent route changes without effecting the primary route sequence‍
  4. Real-time Driver Locations: Enhanced fleet visibility through real-time tracking, enabling route monitoring and optimization‍
  5. Route Sequencing: Streamlined the route planning and sequencing process, cutting route planning time from half a day down to minutes

Release highlights

  1. Driver Path - Real time updates
  2. Change route sequence (with map)

Features

  1. Jun 21,2023 - Route status update
  2. Jun 28, 2023 - Action colors have been updated
  3. Aug 14, 2023 - Unassigned Bulk Move
  4. Oct 27, 2023 - Enhanced route information
  5. Nov 08, 2023 - Route from Customer's profile
  6. Nov 22, 2023 - Update Route / Sequence - Customer profile
  7. Dec 12, 2023 - Improved Map View on Route Manager
  8. Dec 18, 2023 - Route Unassigned stops from Map
  9. Jan 09, 2024 - New Bulk Route Move
  10. Jan 23, 2024 - Driver Path - Updates in Real Time
  11. Feb 22, 2024 - Change Route Sequence (with map)
  12. Feb 23, 2024 - Permanently Change Recurring Day from Route Manager
  13. May 03, 2024 -  View Stop Completion Date / Time

Wins

  1. ‍Dramatic Efficiency Gains: Reduced route planning for dispatchers from half a day to minutes‍
  2. Widespread Adoption & Enthusiasm: Widespread positive feedback from operations, sales, and customer service teams‍
  3. Revenue Growth: The feature set was quickly mastered by the sales team, who could effectively demo it within hours of practice—delivering immediate value to our sales pipeline

Learnings

  1. Scope limitations: While feedback was overwhelmingly positive, we released a minimum viable product, with additional routing features still planned for future development
  2. Technical constraints: Mapbox dependencies created some limitations in visual capabilities
  3. Legacy code: The need to maintain the old system while building new features slowed down development velocity
2023
Hauler hero
Remote-first feedback loops
Implemented structured remote-first feedback loops that reduced iteration cycles from monthly to weekly while creating an inclusive, transparent feedback culture across distributed teams.
Impact
Challenge
Execution
Product feedback
Company-wide
Internal teams
Customer engagement

Reactions

“We should all be proud of what we’ve done with Hauler Hero this past year. UX has made amazing progress!..Kudos to everyone! - Christian N. | Principal Engineer
"So far all of the updates that have been rolling out have been great." - Ryan D.

Results

  1. Performance Metrics: Accelerated iteration cycles from months to weeks
  2. Key Benefits: Enhanced cross-team alignment, faster insight-to-action time, improved operational efficiency
  3. Customer Satisfaction: Created more collaborative team environment with user needs as north star
Traditional feedback mechanisms for communication are inadequate in a fast-paced distributed work environments, leading to siloed communication between teams and delayed product development cycles that impacted feature delivery and team morale.

To address these challenges, I implemented a remote-first feedback system that enables effective asynchronous communication through an integrated Slack-based tech stack, automating feedback collection to identify patterns and guide priorities.
‍

Challenges

  1. Time Zone Management: Coordinating across different time zones and locations
  2. Team Alignment: Maintaining team alignment in distributed environment
  3. User Focus: Ensuring user experience remained central to all decision-making‍
  4. Communication: Breaking down communication silos

Execution

  1. System & service Design: Established multi-channel feedback systems combining sync/async communication
  2. Process & Analysis: Implemented structured feedback collection and analysis processes
  3. Training & Documentation: Trained organization on feedback tracking best practices
  4. Leading by example: Guided teams to optimal outcomes while maintaining motivation and focus
2023 - current
Hauler hero
Pitlane Design system
A comprehensive design system overhaul that standardized the design-to-deployment pipeline, resulting in ~70% faster handoffs, 3x component reuse, and ~90% reduction in UI inconsistencies while dramatically improving product delivery, user experience, and sales performance.
Impact
Context
Files / Before
Components / Before
Files / After
Components / After

Reactions

“..I’m incredibly THANKFUL for  this amazing software! I just can’t even express! Love you all so much xoxoxo” - Wendy W. | Wallace Refuse
"I think we are all witnessing the UI revolution you have brought in... it's really something." - Giriraj B., Principal Engineer

Results

  1. Team Performance: Significantly improved product development cycles and feature delivery through enhanced collaboration
  2. Process Optimization: Streamlined decision-making through effective cross-functional process and clear ownership structures
  3. Team Stability: Maintained team retention and morale during significant growth challenges
The Pitlane Design System emphasizes precision, speed, and coordination. Our UX-centric approach evolves through rapid user feedback cycles, optimizing every component while keeping user needs at the forefront.

Through standardization and optimization from design to deployment, we enable teams to operate at peak efficiency.

Our rapid iteration cycles, powered by continuous feedback and A/B testing, ensure we deliver high-quality solutions that meet user needs quickly. This approach has dramatically accelerated our product delivery while maintaining exceptional user experiences.
‍
  1. System Architecture: Built core design system using MUI and Figma, including comprehensive component library with documentation
  2. Workflow & Integration: Established design-to-development processes and led cross-functional implementation
  3. Documentation & Communication: Maintained stakeholder alignment through regular updates & system upgrades
  4. Team Leadership: Led cross-functional teams in adopting and implementing new design system practices

Results

  1. Development & Quality: Reduced component development time by ~60%, UI inconsistencies by ~90%, and increased component reusability ~3x
  2. Team & Process: Improved cross-team collaboration with ~70% faster handoffs, ~40% faster feature delivery, and ~50% shorter iteration cycles
  3. Collaboration: Achieved~ 80% better alignment between teams and higher satisfaction scores through enhanced tools and processes
2020-2022
Trainual
Saguaro Design System
Like its namesake desert plant, the Saguaro Design System demonstrates remarkable resilience and adaptability in complex development environments. This comprehensive system implementation has streamlined product development, improved consistency, and enhanced cross-team collaboration, resulting in ~50% faster design iterations and ~30% quicker development cycles - proving as enduring and flexible as the iconic cactus it's named after.
Impact
Challenge
Execution
Product evolution
Evangelism
Design files
Foundations
Palette system
Open source docs
Reflection

Reactions

"This is the best internal design documentation I've ever seen. Especially the color perception section, freaking amazing." - Jared G. | Sr. Engineer
"Already making converting designs to dark mode 4x faster and 4x less brain power" - Tyler R. | PD
“The design system you built at Trainual is light years ahead you have no idea. - Tyler R. | Sr. PD

Results

  1. Dramatic Performance Gains: ~50% faster design iterations, ~30% quicker development time, ~90% component reuse rate, resulting in significant cost savings and improved team efficiency
  2. Game-Changing Benefits: Streamlined development process, consistent design patterns, improved team collaboration, leading to enhanced product quality and faster time-to-market
  3. Outstanding User Satisfaction: Overwhelmingly positive feedback from both designers and developers on usability and documentation, with reported 4x improvement in dark mode implementation speed

Backdrop

Our rapidly growing organization struggled with a fragmented design ecosystem that created three major challenges: inconsistent user experiences across products, inefficient development cycles that wasted engineering resources, and accumulating design debt that became increasingly difficult to manage.

Development teams were spending up to ~40% of their time wrestling with UI implementation details and fixing design-related bugs instead of building new features. This technical overhead severely impacted our ability to ship products quickly and maintain quality.

Most critically, the lack of a unified design system meant we couldn't deliver the cohesive, professional brand experience our enterprise customers expected, putting us at a competitive disadvantage in the B2B SaaS market.
‍

Challenges

  1. Inherited Project Crisis: Took over a critical redesign initiative that was 6 months behind schedule from an external contractor, requiring immediate intervention and strategic realignment
  2. Critical Organizational Barrier: Complex organizational dynamics with varying levels of design maturity across teams
  3. Strategic Quality Imperative: Balancing speed of delivery with quality and systematic approach
  4. Core Technical Bottleneck: Technical knowledge gaps and varying expertise levels within development teams‍
  5. Fundamental Design Complexity: Need for scalable, consistent design patterns while maintaining flexibility

Execution

  1. Architecture Innovation: Revolutionized the design infrastructure by implementing an advanced component system using Figma's new variant and prop capabilities
  2. Documentation Excellence: Established a comprehensive knowledge base through Zeroheight and Storybook UI, providing robust documentation and hands-on team mentorship
  3. System Architecture: Crafted an enterprise-grade UI component system featuring sophisticated color hierarchies, typography frameworks, and responsive layout principles
  4. Team Development & Leadership: Orchestrated immersive training programs and design reviews, elevating the entire product and design organization's expertise in system architecture‍
  5. Organizational Scale Impact: Successfully built and scaled a dedicated Design Systems team, driving exponential value across internal teams while fostering strong cross-functional alignment
  6. ‍Color System Innovation: Engineered an accessible SaSS color system with hierarchical scaling, supporting both light and dark modes while ensuring WCAG compliance and flexible white-labeling capabilities

Accent Mapping

$accent-palette: $neutral-palette;

Palette Mappings

@import '../../palettes/blue/light';
@import '../../palettes/green/light';
@import '../../palettes/grey/light';
@import '../../palettes/magenta/light';
@import '../../palettes/neutral/light';
@import '../../palettes/ocre/light';
@import '../../palettes/orange/light';
@import '../../palettes/purple/light';
@import '../../palettes/red/light';
@import '../../palettes/teal/light';
@import '../../palettes/violet/light';

Palettes

$neutral-light: (

    00: #FFFFFF,
    05: #F9F9F9,
    10: #F1F1F1,
    15: #E3E3E3,
    20: #D5D5D5,
    25: #C6C6C6,
    30: #AAAAAA,
    40: #8E8E8E,
    50: #717171,
    60: #555555,
    70: #393939,
    80: #1C1C1C,
    90: #121212,
    transparent-1: rgba( 0, 0, 0, 0.05),
    transparent-2: rgba( 0, 0, 0, 0.1),
    transparent-3: rgba( 0, 0, 0, 0.25),
    transparent-4: rgba( 0, 0, 0, 0.1),
);

Themes

1@use 'sass:map';
2
3// Light Mode 🌞 //
4
5// State 🌞
6// critical UI states
7$state-info: map-get($blue-palette, 20);
8$state-error: map-get($red-palette, 20);
9$state-caution: map-get($orange-palette, 20);
10$state-favorite: map-get($ocre-palette, 20);
11$state-success: map-get($green-palette, 20);
12$state-info-background: map-get($teal-palette, 00);
13$state-caution-background: map-get($orange-palette, 00);
14$state-error-background: map-get($red-palette, 00);
15$state-success-background: map-get($green-palette, 00);
16$state-info-hover: map-get($blue-palette, 40);
17$state-error-hover: map-get($red-palette, 40);
18$state-caution-hover: map-get($orange-palette, 40);
19$state-success-hover: map-get($green-palette, 40);
20
21// Foundation 🌞
22// backgrounds, modals, elevated surfaces, icon backgrounds, menu items
23$foundation-base-1: map-get($neutral-palette, 05);
24$foundation-base-2: map-get($neutral-palette, 10);
25$foundation-surface-1: map-get($neutral-palette, 00);
26$foundation-surface-2: map-get($neutral-palette, 90);
27$foundation-surface-3: map-get($accent-palette, 30);
28$foundation-hover: map-get($neutral-palette, 05);
29
30// Icon 🌞
31$icon-1: map-get($neutral-palette, 30);
32$icon-2: map-get($neutral-palette, 60);
33$icon-overdue: $state-error;
34$icon-active: $state-success;
35
36// text 🌞
37// text colors that are not color-themed
38$text-placeholder: map-get($neutral-palette, 40);
39$text-default: map-get($neutral-palette, 60);
40$text-surface: map-get($neutral-palette, 00);
41$text-hover: map-get($neutral-palette, 70);
42$text-active: map-get($neutral-palette, 80);
43$text-active-vibrant: map-get($teal-palette, 20);
44$text-hover-vibrant: map-get($teal-palette, 30);
45$text-pressed: map-get($neutral-palette, 80);
46$text-disabled: map-get($neutral-palette, 30);
47
48// Border 🌞
49// default elements such as text inputs
50// $border-surface-1/2 is use in conjunction with $foundation-surface-1/2 to form containers like modals and cards
51$border-surface-1: map-get($neutral-palette, 10);
52$border-surface-2: map-get($neutral-palette, 15);
53$border-surface-3: map-get($accent-palette, 30);
54$border-default: map-get($neutral-palette, 40);
55$border-hover: map-get($neutral-palette, 60);
56$border-active: $state-info;
57$border-disabled: map-get($neutral-palette, 25);
58
59// accent primary 🌞
60// primary button fills
61$accent-primary-default: map-get($accent-palette, 30);
62$accent-primary-hover: map-get($accent-palette, 50);
63$accent-primary-pressed: map-get($accent-palette, 60);
64$accent-primary-disabled: map-get($neutral-palette, 15);
65
66// accent secondary 🌞
67// secondary buttons fills
68$accent-secondary-default: $foundation-surface-1;
69$accent-secondary-hover: map-get($accent-palette, 00);
70$accent-secondary-pressed: map-get($accent-palette, 05);
71$accent-secondary-disabled: map-get($neutral-palette, 15);
72
73// accent border 🌞
74$accent-border-default: map-get($accent-palette, 20);
75$accent-border-hover: map-get($accent-palette, 30);
76$accent-border-disabled: map-get($neutral-palette, 25);
77
78// accent text 🌞
79$accent-text-placeholder: map-get($accent-palette, 15);
80$accent-text-default: map-get($accent-palette, 30);
81$accent-text-hover: map-get($accent-palette, 40);
82$accent-text-active: map-get($accent-palette, 70);
83$accent-text-pressed: map-get($accent-palette, 70);
84$accent-text-disabled: map-get($neutral-palette, 30);
85
86// accent toggle 🌞
87$accent-toggle-off: map-get($neutral-palette, 00); // toggle switch
88$accent-toggle-on: map-get($accent-palette, 00); // toggle switch
89$accent-toggle-default: map-get($accent-palette, 05); // toggle switch bg
90$accent-toggle-hover: map-get($accent-palette, 10); // toggle switch bg
91$accent-toggle-active: map-get($accent-palette, 30); // toggle switch bg
92$accent-toggle-active-hover: map-get($accent-palette, 20); // toggle switch
93$accent-toggle-disabled: map-get($neutral-palette, 20); // toggle switch bg
94
95// Badge 🌞
96$trainual-purple: map-get($violet-palette, 30);
97$badge-error: $state-error;
98$badge-caution: $state-caution;
99$badge-success: $state-success;
100$badge-info: $state-info;
101$badge-general: map-get($neutral-palette, 50);
102
103// CHARTS AND GRAPHS
104// Chart onw 🌞
105$chart-one-00: map-get($blue-palette, 00);
106$chart-one-05: map-get($blue-palette, 05);
107$chart-one-10: map-get($blue-palette, 10);
108$chart-one-15: map-get($blue-palette, 15);
109$chart-one-20: map-get($blue-palette, 20);
110$chart-one-30: map-get($blue-palette, 30);
111$chart-one-40: map-get($blue-palette, 40);
112$chart-one-50: map-get($blue-palette, 50);
113$chart-one-60: map-get($blue-palette, 60);
114$chart-one-70: map-get($blue-palette, 70);
115$chart-one-80: map-get($blue-palette, 80);
116$chart-one-90: map-get($blue-palette, 90);
117
118// Chart two 🌞
119$chart-two-00: map-get($green-palette, 00);
120$chart-two-05: map-get($green-palette, 05);
121$chart-two-10: map-get($green-palette, 10);
122$chart-two-15: map-get($green-palette, 15);
123$chart-two-20: map-get($green-palette, 20);
124$chart-two-30: map-get($green-palette, 30);
125$chart-two-40: map-get($green-palette, 40);
126$chart-two-50: map-get($green-palette, 50);
127$chart-two-60: map-get($green-palette, 60);
128$chart-two-70: map-get($green-palette, 70);
129$chart-two-80: map-get($green-palette, 80);
130$chart-two-90: map-get($green-palette, 90);
131
132// Chart three 🌞
133$chart-three-00: map-get($orange-palette, 00);
134$chart-three-05: map-get($orange-palette, 05);
135$chart-three-10: map-get($orange-palette, 10);
136$chart-three-15: map-get($orange-palette, 15);
137$chart-three-20: map-get($orange-palette, 20);
138$chart-three-30: map-get($orange-palette, 30);
139$chart-three-40: map-get($orange-palette, 40);
140$chart-three-50: map-get($orange-palette, 50);
141$chart-three-60: map-get($orange-palette, 60);
142$chart-three-70: map-get($orange-palette, 70);
143$chart-three-80: map-get($orange-palette, 80);
144$chart-three-90: map-get($orange-palette, 90);
145
146// chart four 🌞
147$chart-four-00: map-get($red-palette, 00);
148$chart-four-05: map-get($red-palette, 05);
149$chart-four-10: map-get($red-palette, 10);
150$chart-four-15: map-get($red-palette, 15);
151$chart-four-20: map-get($red-palette, 20);
152$chart-four-30: map-get($red-palette, 30);
153$chart-four-40: map-get($red-palette, 40);
154$chart-four-50: map-get($red-palette, 50);
155$chart-four-60: map-get($red-palette, 60);
156$chart-four-70: map-get($red-palette, 70);
157$chart-four-80: map-get($red-palette, 80);
158$chart-four-90: map-get($red-palette, 90);
159
160// drop shadow color only 🌞
161$shadow-color-top-xsmall: map-get($neutral-palette, transparent-3);
162$shadow-color-top-small: map-get($neutral-palette, transparent-1);
163$shadow-color-top-medium: map-get($neutral-palette, transparent-2);
164$shadow-color-top-large: map-get($neutral-palette, transparent-2);
165
166$shadow-color-center-small: map-get($neutral-palette, transparent-1);
167$shadow-color-center-medium: map-get($neutral-palette, transparent-2);
168$shadow-color-center-large: map-get($neutral-palette, transparent-2);
169
170$shadow-color-special-wysiwyg: map-get($neutral-palette, transparent-3);
171$shadow-color-special-data-table: map-get($neutral-palette, transparent-4);
172
173// drop shadows 🌞 // SaSS doesn't like these but we want to be able to include the color with the box shadow size
174
175$shadow-top-xsmall: 0 1px 3px map-get($neutral-palette, transparent-3);
176$shadow-top-small: 0 5px 10px map-get($neutral-palette, transparent-1);
177$shadow-top-medium: 0 5px 15px map-get($neutral-palette, transparent-2);
178$shadow-top-large: 0 5px 40px map-get($neutral-palette, transparent-2);
179
180$shadow-center-small: 0 0 10px map-get($neutral-palette, transparent-1);
181$shadow-center-medium: 0 0 15px map-get($neutral-palette, transparent-2);
182$shadow-center-large: 0 0 40px map-get($neutral-palette, transparent-2);
183
184$shadow-special-wysiwyg: 0 2px 4px map-get($neutral-palette, transparent-3);
185$shadow-special-data-table: 0 5px 10px map-get($neutral-palette, transparent-4);
186
187$logo-bkg-color: #ffffff;
188
189$black-transparent-068: map-get($neutral-palette, transparent-1);

UI Mapping

1// Mapping old to new
2
3
4// BASE COLORS
5$foundation-100: #f9f9f9; // NEW VALUE // $foundation-color('base-1')
6$foundation-200: #f5f5f5; // NEW VALUE // $foundation-color('base-2')
7$gray-100: #f1f1f1;      
8$gray-200: #d7d7d7;
9$gray-300: #bebebe;
10$gray-400: #a4a4a4;
11$gray-500: #717171;
12$gray-600: #585858;
13$gray-700: #3e3e3e;
14$gray-800: #252525;
15$gray-900: #262626;
16$blue: #00b3e2;
17$purple: #482d8c;
18$pink: #e83e8c;
19$green: #75c181;
20$teal: #20c997;
21$cyan: #17b5e3;
22$indigo: #6d57a3;
23$red: #eb5757;
24$orange: #f8a13f;
25$yellow: #f2c94c;
26$black: #000;
27$dark-gray: $gray-600;
28$white: #fff;
29$primary: $purple !default;                 // Primary will change when we start leveraging the new theme variables colors
30$primary-light: #8d85c0;                  //
31$primary-25: lighten($primary, 60%);        //
32$primary-50: lighten($primary, 55%);        //
33$primary-100: lighten($primary, 50%);       // 
34$primary-200: lighten($primary, 40%);       //
35$primary-300: lighten($primary, 30%);       //
36$primary-400: lighten($primary, 20%);       //
37$primary-500: lighten($primary, 10%);       //      
38$primary-600: darken($primary, 10%);        //  
39$primary-700: darken($primary, 20%);        //
40$primary-800: darken($primary, 30%);        //
41$primary-outline-hover: $primary-25;        //
42$primary-outline-active: $primary-50; // "Pressed"
43$secondary: $gray-600;
44$success: $green;   // NEW VALUE // $state-color('success')
45$info: $cyan;       // NEW VALUE // $state-color('info')
46$warning: $orange;  // NEW VALUE // $state-color('warning')
47$danger: $red;      // NEW VALUE // $state-color('error')
48$light: $gray-100;
49$dark: $gray-800;
50$black-transparent-01: rgba(0, 0, 0, 0.1);    // NEW VALUE // neutral-lt('transparent-2')
51$black-transparent-015: rgba(0, 0, 0, 0.15);
52$black-transparent-002: rgba(0, 0, 0, 0.2);   // NEW VALUE // neutral-lt('transparent-3')
53$black-transparent-001: rgba(0, 0, 0, 0.01);
54$black-transparent-005: rgba(0, 0, 0, 0.05);  // NEW VALUE  // neutral-lt('transparent-1')
55$black-transparent-068: rgba(1, 0, 1, 0.68);
56// Text Colors
57$text-color: $gray-600;                        // NEW VALUE  // $text-color('default')
58$alt-text-color: $gray-600;                    // NEW VALUE  // $text-color('default')
59$white-text: $white;                           // NEW VALUE  // $text-color('surface')
60$text-color-hover: $primary;                   // This will change when we start leveraging new theme variables colors
61$text-color-active: $primary-600;// "Pressed"  // NEW VALUE  // $text-color('active')
62$text-color-disabled: $gray-200;               // NEW VALUE  // $text-color('disabled')
63$placeholder-color: $gray-400;                 // NEW VALUE  // $text-color('placeholder')
64$disabled-color: $gray-200;                    // NEW VALUE  // $text-color('disabled')
65// Table Colors
66$table-header-background: $foundation-100;     // NEW VALUE // $foundation-color('base-1')
67
68// Controls
69$select-item-color: $gray-700;                      // ???? what is this // // NEW VALUE PROBABLY  // $text-color('default')
70$outline-card-action-active-color: $blackcurrant;   // NEW VALUE  // $text-color('active')
71$outline-card-action-default-color: $dark-gray;     // NEW VALUE  // $text-color('default')
72
73// Icons                                            // this section is seupposed to be icons? the variable names dont seem to match with that
74$icon-navidation-background: $foundation-200;       // NEW VALUE // $foundation-color('base-2')
75$info-accent-color: $cyan;                          // NEW VALUE // $state-color('info')
76
77$user-avatar-border-color: $white;                  // NEW VALUE // $state-color('info')
78
79$current-plan-background-color: $primary;           // ?? what is this //
80$unpublished-badge-color: $gray-100;                // unpublished badges are orange? //
81
82$filter-item-text-color: $gray-700;                 // NEW VALUE PROBABLY  // $text-color('default')
83$filter-item-line-color: $filter-item-text-color;   // NEW VALUE PROBABLY  // $text-color('default')
84
85$secondary-badge-color: $gray-600;                  // ?? what is this //
86
87$activity-item-divider-color: $gray-100;            // NEW VALUE // $border-color('surface-1')
88
89$curriculum-view-selected-color: $gray-600;         // ?? what is this //
90
91$datatable-current-color: $white;                   // ?? what is this // NEW VALUE PROBABLY // $foundation-color('surface-1')
92
93$billing-plan-tracker-text: $black;                 // NEW VALUE // $text-color('active')
94
95$help-block-text-color: $gray-300;                  // NEW VALUE // $text-color('placeholder')
96
97$modal-select-border-color: $gray-300;              // NEW VALUE // $border-color('surface-2')         
98
99$select-search-text-color: $black;                  // NEW VALUE // $text-color('active')
100$select-search-outline-color: $gray-300;            // NEW VALUE // $border-color('surface-2')   
101
102$curriculum-owner-assign-color: $gray-600;          // ?? what is this //
103
104$due-date-overdue-color: $red;                      // NEW VALUE // $icon-color('overdue')
105$due-date-color: $gray-400;                         // NEW VALUE // $icon-color('default')
106// Froala
107$froala-quick-insert-icon-background: $white;       // NEW VALUE // $foundation-color('surface-1')
108$froala-quick-insert-icon-hover: $foundation-100;   // NEW VALUE // $foundation-color('base-1')
109$froala-quick-insert-icon-color: $gray-600;         // NEW VALUE // $icon-color('dark')
110
111$froala-toolbar-default-icon-color: inherit;        
112$froala-toolbar-active-hover-icon-color: $gray-600;                  // NEW VALUE // $icon-color('dark')
113$froala-toolbar-active-hover-background-color: $foundation-100;      // NEW VALUE // $foundation-color('base-1')
114$froala-toolbar-default-background-color: $white;                    // NEW VALUE // $foundation-color('surface-1')
115
116$froala-secondary-toolbar-default-background-color: $foundation-200;     // NEW VALUE // $foundation-color('base-2')
117
118$froala-dropdown-menu-selected-background-color: $gray-100;              // NEW VALUE // $foundation-color('base-1')
119
120$froala-input-text-color: $gray-600;                                 // NEW VALUE // $text-color('default')
121
122// Horizonal Line
123$froala-horizonal-line-color: inherit;
124
125// Browse Images Add Button
126$froala-browse-images-add-button-background-color: inherit;
127$froala-browse-images-add-button-hover-color: $gray-600;                        // NEW VALUE // $text-color('default')
128$froala-browse-images-add-button-hover-background-color: $foundation-100;       // NEW VALUE // $foundation-color('base-1')
129$froala-browse-images-add-button-color: $white;                                 // NEW VALUE // $foundation-color('surface-1')
130
131// Froala Embedly
132$embed-plugin-default-background-color: $white;                // NEW VALUE // $foundation-color('surface-1')
133
134$card-input-color: $gray-600;                                  // ?? what is this // // NEW VALUE PROBABLY // $text-color('default')
135
136$template-preview-card-border-color: $gray-100;                // NEW VALUE // $border-color('surface-1')
137
138$badge-light-text-color: $gray-600;                            // NEW VALUE // $text-color('default')
139
140$selected-card-toggle-color: $white;                           // NEW VALUE // $foundation-color('surface-1')          
141$selected-card-toggle-background: $gray-600;                   // ?? what is this //
142
143$emebedly-3-dot-action-menu-background-color: $white;          // NEW VALUE // $foundation-color('surface-1') 
144$emebedly-3-dot-action-menu-color: $gray-400;                  // NEW VALUE // $icon-color('default')
145$emebedly-3-dot-action-menu-hover-color: $gray-600;            // NEW VALUE // $icon-color('dark')
146
147// Modals
148$modal-title-color: $gray-800;                        // NEW VALUE // $text-color('default')
149$modal-subtitle-color: $gray-600;                     // NEW VALUE // $text-color('default')
150$modal-body-text-color: $gray-600;                    // NEW VALUE // $text-color('default')
151$modal-body-title-color: $modal-title-color;          // NEW VALUE // $text-color('default')
152$modal-btn-undo-color: $gray-600;                     // NEW VALUE // $text-color('default')
153$modal-body-label-color: $gray-800;                   // NEW VALUE // $text-color('active')
154$modal-body-advanced-settings: $cyan;                 // NEW VALUE // $state-color('info')
155$modal-footer-invite-later-color: $gray-600;          // NEW VALUE // $text-color('default')
156
157// Pagination
158$pagination-color: $primary;                          // NEW COLOR // $brand-primary-color('default')
159$pagination-bg: $white;                               // NEW VALUE // $foundation-color('surface-1') 
160$pagination-border-color: $gray-100;                  // NEW VALUE // $foundation-color('base-2') 
161
162$pagination-hover-color: darken($primary, 15%);       // NEW COLOR // $brand-primary-color('hover')
163$pagination-hover-bg: $gray-200;                      // NEW VALUE // $foundation-color('base-2')
164$pagination-hover-border-color: $gray-100;            // NEW VALUE // $border-color('surface-1')
165
166$pagination-active-color: $white;                     // this is text? // NEW VALUE // $text-color('surface')
167$pagination-active-bg: $primary;                      // NEW COLOR // $brand-primary-color('default')
168$pagination-active-border-color: $primary;            // NEW COLOR // $brand-primary-color('default')
169
170$pagination-disabled-color: $gray-200;                // this is text? // NEW VALUE // $text-color('disabled')
171$pagination-disabled-bg: $gray-100;                   // NEW COLOR // $brand-primary-color('disabled')
172$pagination-disabled-border-color: $gray-200;         // NEW VALUE // $border-color('disabled')         
173
174// Curriculum card
175$curriculum-card-emoji-background-color: $foundation-100;           // NEW VALUE // $foundation-color('base-1')
176$curriculum-card-title-color: $black;                               // NEW VALUE // $text-color('default')
177$curriculum-card-description-color: $gray-600;                      // NEW VALUE // $text-color('default')
178$curriculum-card-lock-icon-color: $gray-400;                        // NEW VALUE // $icon-color('default')             
179$curriculum-card-info-icon-color: $gray-400;                        // NEW VALUE // $icon-color('default')
180$curriculum-card-clock-icon-color: $gray-400;                       // NEW VALUE // $icon-color('default')
181$curriculum-card-info-completed-assignment-color: $gray-400;        // NEW VALUE // $icon-color('default')
182$curriculum-card-info-overdue-assignment-color: $red;               // NEW VALUE // $icon-color('overdue')
183$curriculum-card-info-ongoing-assignment-color: $green;             // NEW VALUE // $icon-color('active')
184$curriculum-card-info-tooltip-border-color: $gray-100;              // NEW VALUE // $border-color('surface-1') 
185$curriculum-card-info-tooltip-background-color: $white;             // NEW VALUE // $foundation-color('surface-1')
186$curriculum-card-info-tooltip-text-color: $gray-400;                // NEW VALUE // $text-color('placeholder')
187$curriculum-card-info-tooltip-icons-color: $gray-400;               // NEW VALUE // $icon-color('default')
188$curriculum-card-sortable-curriculum-ghost-border-color: $black;    // NEW VALUE // $foundation-color('surface-2')
189
190// Users Curriculum card
191$users-curriculum-card-info-tooltip-border-color: $gray-100;                     // NEW VALUE // $border-color('surface-1')
192$users-curriculum-card-info-tooltip-background-color: $white;                    // NEW VALUE // $foundation-color('surface-1')
193$users-curriculum-card-info-tooltip-box-shadow-color: $black-transparent-005;    // NEW VALUE // $shadow-top('small')
194$users-curriculum-card-info-tooltip-text-color: $gray-400;                       // NEW VALUE // $icon-color('default')
195$users-curriculum-card-info-tooltip-icons-color: $gray-400;                      // NEW VALUE // $icon-color('default')
196
197// My Desk Curriculum card
198$my-desk-curriculum-card-lock-icon-color: $gray-400;                                    // NEW VALUE // $icon-color('default')
199$my-desk-curriculum-card-info-icon-color: $gray-400;                                    // NEW VALUE // $icon-color('default')
200$my-desk-curriculum-card-info-tooltip-border-color: $gray-100;                          // NEW VALUE // $border-color('surface-1')
201$my-desk-curriculum-card-info-tooltip-background-color: $white;                         // NEW VALUE // $foundation-color('surface-1')
202$my-desk-curriculum-card-info-tooltip-box-shadow-color: $black-transparent-005;         // NEW VALUE // $shadow-top('small')
203$my-desk-curriculum-card-info-tooltip-text-color: $gray-400;                            // NEW VALUE // $text-color('default')
204$my-desk-curriculum-card-info-tooltip-icons-color: $gray-400;                           // NEW VALUE // $icon-color('default')
205
206// Edit Curriculum card
207$edit-curriculum-card-emoji-hover-background-color: $gray-200;                  // NEW VALUE // $foundation-color('base-2')
208$edit-curriculum-card-emoji-border-color: $transparent;                         // ? //
209$edit-curriculum-card-emoji-default-color: $gray-400;                           // NEW VALUE // $icon-color('default')
210$edit-curriculum-card-heading-editable-title-color: $gray-800;                  // is this when you click to edit text? //  NEW VALUE // $text-color('active')
211$edit-curriculum-card-info-editable-text-color: $gray-600;                      // is this when you click to edit text? //  NEW VALUE // $text-color('active')
212$edit-curriculum-card-footer-time-estimate-icon-color: $silver-chalice;         // NEW VALUE // $icon-color('default')
213$edit-curriculum-card-footer-time-estimate-text-color: $silver-chalice;         // NEW VALUE // $icon-color('default')
214$edit-curriculum-card-content-more-roles-color: $silver-chalice;                // NEW VALUE // $text-color('placeholder')
215$edit-curriculum-card-content-link-text-color: $suva-grey;                      // NEW VALUE // $icon-color('default')
216$edit-curriculum-card-element-outline-time-estimate-color: $gray-300;           // NEW VALUE // $text-color('placeholder')
217$edit-curriculum-card-element-cancel-icon-color: $gray-400;                     // NEW VALUE // $icon-color('default')
218$edit-curriculum-card-sortable-item-ghost-color: $transparent;                  // ? //
219$edit-curriculum-card-sortable-item-ghost-border-color: $black;                 // NEW VALUE // $foundation-color('surface-2')
220$edit-curriculum-card-locked-icons-color: $gray-400;                            // NEW VALUE // $icon-color('default')
221
222// Show Curriculum card
223$show-curriculum-card-content-due-date-color: $gray-400;                    // text? // NEW VALUE // $text-color('placeholder')
224$show-curriculum-card-element-outline-icon-color: $gray-400;                // NEW VALUE // $icon-color('default')
225$show-curriculum-card-element-outline-brand-icon-color: $purple;            // ? //
226$show-curriculum-card-element-outline-utilities-color: $gray-400;           // ? //
227$show-curriculum-card-body-time-estimate-icon-color: $silver-chalice;       // NEW VALUE // $icon-color('default')
228$show-curriculum-card-body-time-estimate-text-color: $silver-chalice;       // NEW VALUE // $text-color('default')
229
230// Scrollbar
231$scrollbar-color: $gray-200;                            // NEW VALUE // $border-color('surface-2')
232
233// Old Welcome Wizard
234$old-welcome-wizard-title-color: $bunker;               // NEW VALUE // $text-color('default')
235$old-welcome-wizard-subtitle-color: $bunker;            // NEW VALUE // $text-color('default')
236
237// Welcome Wizard
238$welcome-wizard-title-color: $gray-800;                 // NEW VALUE // $text-color('default')
239$welcome-wizard-subtitle-color: $gray-600;              // NEW VALUE // $text-color('default')
240$welcome-wizard-action-btn-color: $white;               // NEW VALUE // $text-color('surface')
241
242// Empty State
243$empty-state-title-color: $gray-800;                    // NEW VALUE // $text-color('default')                   
244$empty-state-subtitle-color: $gray-800;                 // NEW VALUE // $text-color('default') 
245
246// Welcome Wizard Templates page
247$template-card-gray-200-border-color: $gray-200;        // NEW VALUE // $border-color('surface-1')
248$template-card-gray-400-border-color: $gray-400;        // NEW VALUE // $border-color('surface-2')
249$template-card-purple-border-color: $primary;           // NEW VALUE // $theme-border-color('default')
250
251// Manage Users Modal
252$manage-users-tab-underline-color: $gray-400;           // NEW VALUE // $border-color('default')
253$manage-users-tab-active-underline-color: $gray-700;    // NEW VALUE // $border-color('hover')
254$content-access-dropdown-menu-border-color: $gray-100;  // NEW VALUE // $border-color('surface-2')
255
256//  Welcome Wizard Old Select Goals Step
257$old-select-goals-wizard-content-card-checked-box-shadow-color: $purple;
258$old-select-goals-wizard-content-card-text-before-color: $purple;
259$old-select-goals-wizard-content-card-text-color: $bunker;
260$old-select-goals-wizard-content-card-box-shadow-color: $black-transparent-002;
261$old-select-goals-wizard-content-card-border-color: $silver;
262$old-select-goals-wizard-content-card-check-color: $purple;
263
264//  Welcome Wizard Select Goals Step
265$select-goals-wizard-content-card-border-color: $gray-100;
266$select-goals-wizard-content-card-background-color: $white;
267$select-goals-wizard-content-card-text-title-color: $black;
268$select-goals-wizard-content-card-check-color: $purple;
269$select-goals-wizard-content-card-hover-border-color: $primary;
270$select-goals-wizard-content-card-hover-card-text-description-color: $gray-600;
271$select-goals-wizard-content-card-checked-border-color: $primary;
272$select-goals-wizard-content-card-box-shadow-color: $black-transparent-005;
273$select-goals-wizard-action-wrapper-background-color: $white;
274
275// Welcome Wizard User setup page
276$user-setup-purple-color: $primary;
277$cropit-preview-background-color: $white;
278$image-hover-overlay-color: $gray-800;
279$image-hover-overlay-background-color: rgba(216, 216, 216, 0.7);
280$default-placeholder-color: $nobel-grey;
281$tooltip-icon-color: $gray-400;
282
283//  Welcome Wizard Old Brand Account Step
284$old-brand-account-brand-options-logo-title-color: $medium-spring-green;
285$old-brand-account-brand-options-logo-subtitle-color: $medium-spring-green;
286$old-brand-account-brand-options-logo-cropit-preview-border-color: $medium-spring-green;
287$old-brand-account-brand-options-logo-cropit-image-background-color: $white;
288$old-brand-account-brand-options-logo-cropit-preview-background-color: $white;
289$old-brand-account-brand-options-logo-controls-background-color: $white;
290$old-brand-account-brand-options-logo-controls-rotation-btn-color: $grey;
291$old-brand-account-brand-options-logo-controls-border-color: $white-smoke;
292$old-brand-account-brand-options-color-section-label-color: $bunker;
293$old-brand-account-brand-options-color-section-picker-inner-background-color: $purple;
294$old-brand-account-brand-options-color-section-picker-inner-border-color: $alto;
295$old-brand-account-brand-options-color-section-subtitle-color: $medium-spring-green;
296$old-brand-account-brand-preview-border-color: $silver;
297$old-brand-account-brand-preview-background-color: $solitude;
298$old-brand-account-brand-preview-navbar-background-color: $white;
299$old-brand-account-brand-preview-navbar-actions-avatar-background-color: $silver;
300$old-brand-account-brand-preview-navbar-actions-icon-color: $silver;
301$old-brand-account-brand-preview-sidebar-background-color: $black-transparent-068;
302$old-brand-account-brand-preview-sidebar-option-background-color: $transparent;
303$old-brand-account-brand-preview-sidebar-option-bar-background-color: $medium-spring-green;
304$old-brand-account-brand-preview-sidebar-option-selected-bar-background-color: $gainsboro;
305$old-brand-account-brand-preview-sidebar-option-selected-background-color: $charcoal;
306$old-brand-account-brand-preview-main-content-filters-main-bar-background-color: $black;
307$old-brand-account-brand-preview-main-content-filters-small-bar-background-color: $silver;
308$old-brand-account-brand-preview-main-content-button-border-color: $alto;
309$old-brand-account-brand-preview-main-content-button-background-color: $white;
310$old-brand-account-brand-preview-main-content-button-bar-background-color: $silver;
311$old-brand-account-brand-preview-main-content-card-box-shadow-color: $black-transparent-001;
312$old-brand-account-brand-preview-main-content-upper-card-box-shadow-color: $black-transparent-001;
313$old-brand-account-brand-preview-main-content-upper-card-main-bar-color: $black;
314$old-brand-account-brand-preview-main-content-upper-card-background-color: $white;
315$old-brand-account-brand-preview-main-content-card-row-background-color: $white;
316$old-brand-account-brand-preview-main-content-card-row-box-shadow-color: $black-transparent-001;
317$old-brand-account-brand-preview-main-content-card-row-title-background-color: $black;
318$old-brand-account-brand-preview-main-content-card-row-description-background-color: $silver;
319$old-brand-account-brand-preview-main-content-card-row-content-bar-2-background-color: $black;
320$old-brand-account-brand-preview-main-content-card-row-content-bar-3-background-color: $silver;
321
322//  Welcome Wizard Brand Account Step
323$brand-account-brand-options-logo-title-color: $gray-600;
324$brand-account-brand-options-logo-subtitle-color: $gray-400;
325$brand-account-brand-options-logo-cropit-image-background-color: $white;
326$brand-account-brand-options-logo-cropit-preview-border-color: $medium-spring-green;
327$brand-account-brand-options-logo-cropit-preview-background-color: $white;
328$brand-account-brand-options-logo-controls-background-color: $white;
329$brand-account-brand-options-logo-controls-rotation-btn-color: $grey;
330$brand-account-brand-options-logo-controls-border-color: $white-smoke;
331$brand-account-brand-options-color-section-label-color: $bunker;
332$brand-account-brand-options-color-section-picker-inner-background-color: $purple;
333$brand-account-brand-options-color-section-picker-inner-border-color: $gainsboro;
334$brand-account-brand-options-color-section-subtitle-color: $medium-spring-green;
335$brand-account-brand-preview-background-color: $white;
336$brand-account-brand-preview-border-color: $gray-100;
337$brand-account-brand-preview-box-shadow-color: $black-transparent-005;
338$brand-account-brand-preview-sidebar-background-color: $white;
339$brand-account-brand-preview-sidebar-search-box-background-color: $white;
340$brand-account-brand-preview-sidebar-search-box-border-color: $gainsboro;
341$brand-account-brand-preview-sidebar-search-box-field-background-color: $silver;
342$brand-account-brand-preview-sidebar-option-background-color: $transparent;
343$brand-account-brand-preview-sidebar-option-icon-background-color: $silver;
344$brand-account-brand-preview-sidebar-option-bar-background-color: $silver;
345$brand-account-brand-preview-sidebar-footer-progress-bar-icon-background-color: $silver;
346$brand-account-brand-preview-sidebar-footer-options-bar-icon-background-color: $silver;
347$brand-account-brand-preview-sidebar-footer-options-bar-avatar-background-color: $silver;
348$brand-account-brand-preview-sidebar-footer-info-bar-icon-background-color: $silver;
349$brand-account-brand-preview-sidebar-footer-info-bar-bar-background-color: $orange;
350$brand-account-brand-preview-main-content-background-color: $white;
351$brand-account-brand-preview-main-content-filters-main-bar-background-color: $gray-600;
352$brand-account-brand-preview-main-content-filters-main-tabs-small-bar-background-color: $silver;
353$brand-account-brand-preview-main-content-filters-main-tabs-active-background-color: $gray-600;
354$brand-account-brand-preview-main-content-upper-card-background-color: $white;
355$brand-account-brand-preview-main-content-upper-card-box-shadow-color: $black-transparent-005;
356$brand-account-brand-preview-main-content-upper-card-main-bar-title-color: $gray-600;
357$brand-account-brand-preview-main-content-card-box-shadow-color: $black-transparent-005;
358$brand-account-brand-preview-main-content-card-box-background-color: $white;
359$brand-account-brand-preview-main-content-card-box-title-text-background-color: $gray-600;
360$brand-account-brand-preview-main-content-card-box-title-star-icon-color: $silver;
361$brand-account-brand-preview-main-content-card-box-description-bar-color: $silver;
362$brand-account-brand-preview-main-content-card-box-content-bar-3-color: $gray-600;
363
364//  Welcome Wizard Old Choose Your Setup
365$old-choose-your-setup-card-background-color: $white;
366$old-choose-your-setup-card-border-color: $silver;
367$old-choose-your-setup-card-box-shadow-color: $black-transparent-002;
368$old-choose-your-setup-card-hover-box-shadow-from-color: $black-transparent-015;
369$old-choose-your-setup-card-hover-box-shadow-to-color: $black-transparent-01;
370$old-choose-your-setup-card-text-color: $bunker;
371
372//  Welcome Wizard Choose Your Setup
373$choose-your-setup-card-background-color: $white;
374$choose-your-setup-card-border-color: $gray-100;
375$choose-your-setup-card-box-shadow-color: $black-transparent-005;
376$choose-your-setup-card-hover-box-shadow-from-color: $black-transparent-015;
377$choose-your-setup-card-hover-box-shadow-to-color: $black-transparent-01;
378$choose-your-setup-card-text-color: $bunker;
379$choose-your-setup-content-subtext-color: $bunker;
380$choose-your-setup-modal-header-title-color: $gray-800;
381$choose-your-setup-modal-header-subtitle-color: $gray-600;
382$choose-your-setup-modal-footer-btn-color: $white;
383$choose-your-setup-modal-footer-btn-secondary-border-color: $purple;
384
385//  Welcome Wizard Old Content Creator Step
386$old-content-creator-modal-header-title-color: $gray-800;
387$old-content-creator-modal-header-sub-text-color: $gray-600;
388$old-content-creator-modal-body-ability-icon-color: $cyan;
389$old-content-creator-modal-body-info-text-color: $cyan;
390
391//  Welcome Wizard Content Creator Step
392$content-creator-wizard-content-error-message-color: $red;
393$content-creator-modal-header-title-color: $gray-800;
394$content-creator-modal-header-sub-text-color: $gray-600;
395$content-creator-modal-body-ability-image-color: $gray-600;
396$content-creator-modal-body-ability-text-color: $gray-600;
397$content-creator-modal-body-info-text-icon-color: $cyan;
398$content-creator-modal-body-info-text-color: $cyan;
399$content-creator-content-subtext-color: $bunker;
400
401// Select Content Types Step
402$content-type-card-box-shadow-color: $black-transparent-005;
403$content-type-card-border-color: $silver;
404$content-type-card-text-color: $bunker;
405$content-type-card-check-color: $purple;
406$content-type-card-tagsinput-border-color: $purple;
407$content-type-card-tagsinput-background-color: $purple;
408$content-type-card-tagsinput-text-color: $white;
409
410// Welcome Wizard Delegated Setup User
411$setup-delegated-user-background-color: $white;
412$setup-delegated-user-image-heading-mobile-title-color: $black;
413$setup-delegated-user-image-heading-title-color: $bunker;
414$setup-delegated-user-form-label-color: $gray-800;
415$setup-delegated-user-form-checkbox-label-color: $gray-600;
416
417// Trial Ended Banner
418$trial-ended-background-color: $gray-200; // NEW VALUE // $foundation-color('base-2')
419$trial-ended-text-color: $gray-600;       // NEW VALUE // $text-color('default')
420$trial-ended-link-color: $cyan;           // NEW VALUE // $text-color('active-color')
421
422
423// Select2 Dropdown
424$add-user-icon-background-color: $white;    // NEW VALUE // $foundation-color('surface-1')
425$add-user-icon-color: $gray-200;            // NEW VALUE // $icon-color('default')
426$add-user-icon-border-color: $gray-200;     // NEW VALUE // $border-color('surface-2')
427

Open source docs

  1. Storybook
  2. Github
  3. ZeroHeight - Saguaro.Trainual

Wins

  1. Rapid Design Evolution: Exponentially improved design iteration speed, enabling faster product improvements
  2. Maximum Efficiency: Achieved high component reusability across squads, reducing duplicate work
  3. Brand Cohesion: Established consistent design patterns throughout the product, strengthening user experience‍
  4. Seamless Integration: Improved onboarding experience for new team members, accelerating productivity‍
  5. Color System Innovation: Developed an innovative accessible color system that streamlined dark mode implementation and enabled flexible white-labeling while maintaining WCAG compliance

Learnings

  1. Feature Placement Strategy: Critical features must be strategically distributed across tiers to create natural upgrade triggers while maintaining value at each level.
  2. Value Communication: Clear, compelling communication of tier differences is essential for customer understanding and successful conversions.‍
  3. Data-Driven Iterations: Regular analysis of usage patterns and upgrade triggers is crucial for continuous optimization of the pricing model.
2022
Trainual
Driving product vision
Led development of unified product vision integrating desktop, mobile, and AR/VR with AI features, successfully aligning Product, Design, and Engineering teams
Impact
Challenge
Execution
Design sprint
Film week
Sketches
Trainual Visiontype
Reflection

Reactions

"Inspire and ralley: Mission Accomplished!" - Shawn J.
"This is so damn cool." - Joe C.
"This is CRAZYYYY COOL! How exciting!" - Marlowe E.
"That is EPIC" - Seiji C.
"THIS IS FIRE!" - Chris R.

Results

  1. Strategic Impact: Successful rollout of comprehensive product vision at Q2 All Hands meeting
  2. Team Engagement: Received overwhelming positive feedback from cross-functional team members
  3. Organizational Unity: Created alignment across Product, Design, and Engineering departments
  4. Future Vision: Established clear direction for future product development and improvements

Backdrop

After successfully pivoting the product strategy while scaling the PD&E org, the product suffered from fragmented and disconnected experiences.

Squads struggled with maintaining consistency, largely due to technical debt and green talent.

To improve this, we needed a clear long-term product vision.

The vision needed to be cross-platform and technically feasible, with room for teams to implement solutions independently.

‍

Challenges

  1. Technical Feasibility: Create a technically feasible cross-platform solution with a 3-5 year timeline horizon
  2. Timeline Management: Deliver a compelling presentation within 6 weeks
  3. Strategic Balance: Balance inspiration with practicality
  4. Technical Limitations: Prototype performance on a web-based tool (Figma)
  5. Quality Assurance: Time to QA & stress test prototypes

Execution

  1. Strategic Architecture: Developed detailed current and future sitemap architectures in collaboration with Founders, Product, & Engineering leadership
  2. Creative Direction: Created storyboards and shot planning for product vision video presentation
  3. Design Innovation: Designed new visual language using Glassmorphism approach for unified cross-device experience
  4. Technical Excellence: Built complex hi-fi prototypes in Figma for desktop, mobile, tablet, and AR/VR experiences
  5. Production Leadership: Collaborated with videography team during filming week to capture all interface interactions‍
  6. Experience Design: Developed detailed sketches for key product areas including My Desk, Company Profile, People, and Content creation

Wins

  1. Project Management: I successfully managed the ambitious project and timeline, dedicating several weeks exclusively to this project to ensure success, wearing both Designer and Product Manager hats while keeping executives informed of progress
  2. Personal Growth: This was one of the most enjoyable initiatives I've led, allowing me to leverage my expertise in prototyping, videography, storytelling, vision shaping, and cross-team collaboration.

Learnings

  1. Scope Limitations: Time constraints prevented us from fully exploring Trainual's potential as an AR-integrated ecosystem. The final vision-type video was mostly a snapshot of different feature sets and key experiences we wanted to highlight for the PD&E org.
  2. Timing and Implementation: Despite successfully unifying teams around the vision, proactive planning could have yielded even stronger results. Earlier planing and rollout of the vision, before executing it company-wide, would have prevented several cases of employee burnout and created a smoother organizational pivot.
2019
Integrate
Design Systems for SaaS Products
At PHXDW 2019, we presented how Integrate implemented a modern component-based design system with Storybook UI to streamline workflows and speed up product delivery.
Impact
Challenge
Images
Reflection

Results

  1. Outstanding Reach: Delivered comprehensive design systems presentation to packed breakout session
  2. Deep Impact: Generated 45-minute technical deep-dive Q&A session with engaged audience
  3. Positive Reception: Garnered strong praise for real-world design system implementation insights

Backdrop

Phoenix Design Week (PHXDW) brought together designers from various disciplines, with UX/UI and digital product design being relatively new additions to the conference program.

This presentation aimed to demonstrate how Integrate implemented a modern component-based design system to streamline workflows and speed up product delivery.

With multiple moving parts and teams, there was a need to establish a cohesive system that would maintain consistency across applications while improving development efficiency.

The company's commitment to becoming a world-class product organization drove the initiative to create a comprehensive design system.
‍

Challenges

  1. Communication Gaps: Addressing communication silos between teams that previously resulted in duplicated development efforts
  2. Technical Debt: Reducing accumulated technical debt from inconsistent component implementations across teams
  3. Product Growth: Technical inconsistencies and legacy code slowing down feature development and limiting ability to scale product offerings
  4. Multiple Systems: Managing complex deployment pipelines with Webpack configuration, Jenkins integration, and environment management across development and production
  5. Version Control: Establishing semantic versioning practices while coordinating releases and managing breaking changes across applications

Wins

  1. Outstanding Reach: Delivered comprehensive design systems presentation to packed breakout session
  2. Deep Impact: Generated 45-minute technical deep-dive Q&A session with engaged audience
  3. Positive Reception: Garnered strong praise for real-world design system implementation insights

Learnings

  1. Strategic Investment: Design system implementation demands substantial initial investment but pays long-term dividends
  2. Executive Champion: Strong executive sponsorship and organizational alignment are essential for success
  3. Brand Evolution: Positioning the design system as a core product with its own identity drives meaningful engagement and adoption‍
  4. Scalable Structure: Organizational structure must evolve thoughtfully to maintain efficiency as teams grow‍
  5. Unified Vision: Cross-functional collaboration and shared vision are fundamental to lasting impact
experience
Emerging market leader of waste management software solutions enabling haulers to streamline operations, optimize efficiency, and maximize profitability through integrated business management tools.
B2b SaaS - Waste & Recycling
Hualerhero.com
See more
HAULER HERO
Leading SaaS platform for business documentation and training that streamlines onboarding, reduces redundancy, and enables scalable growth through improved operational efficiency.
B2b SaaS - Onboarding & training
Trainual.com
See more
TRAINUAL
Leading SaaS platform for business documentation and training that streamlines onboarding, reduces redundancy, and enables scalable growth through improved operational efficiency.
B2b SaaS | Enterprise Martech
Integrate.com
See more
Integrate
product Reviews
Wendy W.

“...I’m incredibly THANKFUL for you and this amazing software! I just can’t even express! I love you all so much xoxoxo”

‍

Hauler Hero
December 3, 2024
Sarah

“I am so thankful that your system is just so easy because I just logged in on my brother’s laptop, did what I needed to do, made a few changes and logged out. I wanted to cry and just say thank you that your system is so easy and I didn’t have to worry about it even in a situation like this.”

‍

Hauler Hero | A&C Waste
November 1, 2024
Ashley

"We have overall been very very pleased with the software. It has made my job SO much easier."

Hauler Hero
October 2, 2024
Jessica

"...Now with all of the groups, the account groups, suspension groups, and then being able to see everything, you know, based on the aging. GAME CHANGER!

Hauler Hero | Grogan Disposal
September 26, 2024
Justin C.

“Our last software, to sequence a route and put it back would take me almost half a day. This workflow is more efficient and it’s made my life a lot easier.”

‍

Hauler Hero
September 1, 2024
Wendy W

"The Suspension Groups!!!! What an amazing tool! I freaking love you guys!"

Hauler Hero
August 26, 2024
Pete

I think this is one of the favorite, one of my favorite things that you've shown me because it just looks so simple. It's a really good design guys."

Hauler Hero | Waste Central
August 16, 2024
Lori E.

"This is extremely user friendly software. I LOVE IT!!"

‍

Trainual
March 1, 2021
Cindhy S.

"Training is now enjoyable thanks to Trainual!"

‍

Trainual
November 17, 2020
Andrew K.

“I just wanted to send the biggest possible thank tou for what you guys did with reporting. It has made my life so much easier and stress free..”

‍

Integrate
July 3, 2019
Abby D.

“..And also, just want to say a huge huge thank you for the new reporting facelift...we are super pumped about how fast it’s loading and how much better the UI is..It’s been a major game changer and all of the services team is thrilled!!!”

‍

Integrate
July 1, 2019
Sarah

“I am so thankful that your system is just so easy because I just logged in on my brother’s laptop, did what I needed to do, made a few changes and logged out. I wanted to cry and just say thank you that your system is so easy and I didn’t have to worry about it even in a situation like this.”

‍

Hauler Hero | A&C Waste
Nov 2024
Jessica

"...Now with all of the groups, the account groups, suspension groups, and then being able to see everything, you know, based on the aging. GAME CHANGER!

Hauler Hero | Grogan Disposal
Sept 26th, 2024
Pete

I think this is one of the favorite, one of my favorite things that you've shown me because it just looks so simple. It's a really good design guys."

Hauler Hero | Waste Central
Aug 16th, 2024
Aaron

"Excellent experience"

‍

Trainual
May 12, 2022
Fabian V.

“Very easy to use and in some way “ergonomic”

‍

Trainual
Mar 2021
Jenna R.

“Trainual is super easy to use, our team is so happy we have implemented this tool!”

‍

Trainual
Mar 2021
Lori E.

"This is extremely user friendly software. I LOVE IT!!"

‍

Trainual
Mar 1st, 2021
Alex G.

“Totally CHANGED our onboarding and training game”

‍

Trainual
Mar 2021
Cindhy S.

"Training is now enjoyable thanks to Trainual!"

‍

Trainual
Nov 17th, 2020
Sean H.

“Trainual is a priceless tool that allows you to grow your business!”

‍

Trainual
Aug 2020
Andrew K.

“I just wanted to send the biggest possible thank tou for what you guys did with reporting. It has made my life so much easier and stress free..”

‍

Integrate
2019
Abby D.

“..And also, just want to say a huge huge thank you for the new reporting facelift...we are super pumped about how fast it’s loading and how much better the UI is..It’s been a major game changer and all of the services team is thrilled!!!”

‍

Integrate
2019
Wendy W.
Nov 2024
Customer - office ops

“...I’m incredibly THANKFUL for you and this amazing software! I just can’t even express! I love you all so much xoxoxo”

‍

Hauler Hero
Sarah
Nov 2024
Customer - Ofice Ops

“I am so thankful that your system is just so easy because I just logged in on my brother’s laptop, did what I needed to do, made a few changes and logged out. I wanted to cry and just say thank you that your system is so easy and I didn’t have to worry about it even in a situation like this.”

‍

Hauler Hero | A&C Waste
Ashley
Oct 2nd, 2024
Billing & CSR specialist

"We have overall been very very pleased with the software. It has made my job SO much easier."

Hauler Hero
Jessica
Sept 26th, 2024
BIlling & CSR specialist

"...Now with all of the groups, the account groups, suspension groups, and then being able to see everything, you know, based on the aging. GAME CHANGER!

Hauler Hero | Grogan Disposal
Justin C.
Jan 2024
Dispatch - operations

“Our last software, to sequence a route and put it back would take me almost half a day. This workflow is more efficient and it’s made my life a lot easier.”

‍

Hauler Hero
Wendy W
Aug 26, 2024
Billing & CSR Specialist

"The Suspension Groups!!!! What an amazing tool! I freaking love you guys!"

Hauler Hero
Pete
Aug 16th, 2024
Owner Operator

I think this is one of the favorite, one of my favorite things that you've shown me because it just looks so simple. It's a really good design guys."

Hauler Hero | Waste Central
Aaron
May 12, 2022
Admin - Architecture

"Excellent experience"

‍

Trainual
Fabian V.
Mar 2021
Customer - Client relationships

“Very easy to use and in some way “ergonomic”

‍

Trainual
Jenna R.
Mar 2021
Customer - Director, communications

“Trainual is super easy to use, our team is so happy we have implemented this tool!”

‍

Trainual
Lori E.
Mar 1st, 2021
Admin

"This is extremely user friendly software. I LOVE IT!!"

‍

Trainual
Alex G.
Mar 2021
Cuustomer - Director of Experience

“Totally CHANGED our onboarding and training game”

‍

Trainual
Cindhy S.
Nov 17th, 2020
Admin

"Training is now enjoyable thanks to Trainual!"

‍

Trainual
Sean H.
Aug 2020
Customer - Director, Operations

“Trainual is a priceless tool that allows you to grow your business!”

‍

Trainual
Andrew K.
2019
Customer Success team

“I just wanted to send the biggest possible thank tou for what you guys did with reporting. It has made my life so much easier and stress free..”

‍

Integrate
Abby D.
2019
Internal teams - Customer success

“..And also, just want to say a huge huge thank you for the new reporting facelift...we are super pumped about how fast it’s loading and how much better the UI is..It’s been a major game changer and all of the services team is thrilled!!!”

‍

Integrate
See more
HomeArtDesignAbout
The latest articles in your inbox.
Excellent 🤌 😎
Oh no. Try again? 😕
ZacElletson ©