Trainual

Trainual | 2020 - 2022

$2.5M > $10.5M | 3.33x

ARR 2020 - 2022 | yoy growth

2.5k > 6.3K+

account growth

systems established

role transitions

Achievements & Impact

Explosive growth

Trainual ranked No 255 on Inc. 5000 2022 annual List for 2,113% 3-Year growth rate at $10mm ARR and 6.3k active accounts

Award winning product design

Achieved multiple G2 awards year over year, including best usability, top 100 software products and top 50 small business products

Product-led growth

Implemented product-led growth strategy focusing on activation, engagement and retention through AAARRR funnel

Strategic pivot

Drove product strategy transformation including building new features and pricing model, contributing to $27mm Series B

Lead & coach

Alongside design lead, scaled design team from 2 to 6 Product Squads while leading & coaching design system and growth squads

End-to-end R&D

Executed multiple product-led initiatives to enhance usability and product differentiation

Design System Foundations

Led development of saguaro design system, implementing component standards and driving cross-functional adoption

press

Trainual Ranks No. 255 on the 2022 Inc. 5000 Annual List

Trainual wins G2 2022 awards including Top 100 Software Products and Top 50 Small Business Products

Trainual Raises $27M Series B to Solve Onboarding and Training Pains of New Hybrid Workforce

Trainual Ranked #1 In 7 Categories By G2’s Fall 2020 Report

G2 Reveals Best Software Companies 2020: Trainual Earns Spot On List

highlights

Driving product vision

Trainual's next-generation Business Playbook vision seamlessly connects teams across desktop, mobile, and AR/VR platforms. Powered by AI assistance, it makes business knowledge more accessible and engaging for modern remote teams.

We identified that Product, Design & Engineering teams struggled with maintaining consistency while preserving autonomy during rapid growth, largely due to technical debt and platform fragmentation.

To address this, we needed a clear long-term product vision that would unify teams while maintaining their autonomy. The vision needed to be cross-platform and technically feasible, with room for teams to implement solutions independently.

I partnered with executive leadership to create a unified product vision spanning desktop, mobile, tablet, and AR/VR platforms, within 6 weeks.

The challenge was to craft a vision that would inspire our entire company and board while providing enough flexibility for teams to maintain their autonomy in implementation approaches.

The final deliverable was a product vision video to be presented at the Q2 All Hands meeting.
‍

Results

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

Collaborated in vision planning through intensive brainstorming sessions with C-level executives and department heads to align on core business objectives and technical feasibility of cross-platform integration.

Strategic Architecture: Developed detailed current and future sitemap architectures in collaboration with Founders, Product, & Engineering leadership
Creative Direction: Created storyboards and shot planning for product vision video presentation
Design Innovation: Designed new visual language using Glassmorphism approach for unified cross-device experience
Technical Excellence: Built complex hi-fi prototypes in Figma for desktop, mobile, tablet, and AR/VR experiences
Production Leadership: Built complex hi-fi prototypes in Figma for desktop, mobile, tablet, and AR/VR experiences
Experience Design: Developed detailed sketches for key product areas including My Desk, Company Profile, People, and Content creation

PLG pricing Optimization

A well-designed three-tier pricing model is fundamental to product-led growth, creating a natural progression that aligns with user value realization and willingness to pay.

The existing 2-tier one-size-fits-all pricing model wasn't serving our diverse user base effectively.

Enterprise customers wanted advanced features, price-sensitive users found the entry point too expensive, and misaligned value propositions created friction in the user journey. This hindered our product-led growth strategy.
‍
We created an intuitive, scalable pricing model with clear value tiers and progression paths.

We built a flexible system that adapts to user behavior while reducing churn and improving conversion rates.
‍

Strategic Design: Implemented value-based progression with clear upgrade triggers
Market Coverage: Created comprehensive pricing tiers from startups to enterprises
Optimization Framework: Built flexible architecture for continuous data-driven improvements

Results

Reduced Churn: ~41% decrease in price-related customer loss
Increased Conversion: ~150% improvement in upgrade rates
Market Validation: New $49 "Build" plan proved effective as our entry-level tier and remains successful today

Saguaro Design System

Like its namesake desert plant, the Saguaro design system is built to be resilient and adaptable in challenging environments. Its efficient architecture manages resources and delivers consistent value, while its modular structure allows components to branch out across product features while maintaining a cohesive identity.

As a rapidly growing org, we faced challenges with inconsistent user interfaces, slow development cycles, and mounting design debt across multiple product teams.

The company needed a scalable solution to maintain design consistency while improving development efficiency.
‍
As lead Product Designer, I took on the responsibility of creating and implementing a comprehensive design system.

My primary goals were to streamline design operations and development workflow.

Additionally, I focused on establishing consistent design patterns across the product.

The role also involved creating efficient documentation and training resources, while improving collaboration between design and development teams.
‍

System Development: Led cross-functional teams to build component architecture using Figma, established documentation with Zeroheight/Storybook, and created a comprehensive Accessible SaSS color system.
Team Enablement: Implemented training workshops, design reviews, and collaboration processes to drive system adoption across departments
Quality Assurance: Established rigorous testing protocols and feedback loops to ensure component reliability and performance

Results

Efficiency Gains: Achieved 50% faster design iterations, 30% quicker development time, and 90% component reuse rate
Quality & Culture: Significantly improved product consistency while enhancing cross-team collaboration and onboarding processes
Cost Savings: Reduced design and development costs by eliminating redundant work and streamlining processes

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

My desk 2.0

Our team successfully revitalized our dashboard interface to better serve our users' needs. By transforming what was previously an underutilized home page, we created a powerful productivity hub that now provides clear, measurable productivity gains.

Our homepage was severely underutilized by users. Through extensive research with our user base, we identified core goals and needs that could be surfaced effectively on the homepage.

We created an efficient and engaging user experience that addressed multiple pain points and improved content completion rates, all while navigating strict technical constraints.
‍

Narrowed scope to focus on three key deliverables: Trial checklist, Up Next section, and content metrics
Implemented anonymized data visualization to balance personal accountability with team performance
Created an intuitive UI to focus users on assigned incomplete content

Results

Achieved 20% reduction in content completion time, saving users nearly an hour per week
Secured exceptional user adoption with 70% day-one retention, growing to 79% after two weeks
Successfully transformed the dashboard into a productive central hub despite technical limitations

Trainual + Slack

Teams often struggle with redundant work and outdated information, while finding it difficult to convert informal discussions into useful documentation. We aimed to tackle this by building a slack integration, allowing teams to instantly capture and share knowledge within Trainual where work happens daily.

We built a comprehensive Slack App that would allow teams to seamlessly access and create documentation within Slack, eliminating the need to switch between platforms, while increasing product stickiness and brand awareness through daily user engagement.

The app makes it easy for team members to search, create, and share documentation without leaving their primary communication platform.

By integrating directly into existing workflows, we not only improved efficiency but also encouraged more consistent documentation practices across teams.
‍

Development Timeline: Implemented a 4-week rapid development cycle using Slack's Block Kit
Search Feature: Built instant search functionality for existing Trainual documentation in slack
Content Creation: Created workflows to create content from any conversation within slack

Results

Workflow Impact: Reduced platform switching and improved workflow, resulting in ~30% faster documentation creation
Documentation: Enabled instant documentation of Slack conversations, leading to ~2x increase in knowledge capture
Engagement: Increased user engagement and brand visibility, with teams using the integration daily

Quick Embeds

Users faced a complex and time-consuming process for embedding external content in their documentation. To address this, we created a streamlined solution that simplifies content integration and preserves formatting, helping teams work more efficiently - ultimately reducing churn by 70% for users of this feature.

Users were experiencing significant friction when trying to embed external content into their documents.

This process was not only time-consuming but also resulted in inconsistent formatting and required constant switching between platforms, ultimately leading to user frustration and increased risk of customer churn.

Our team created a quick embed feature to streamline content integration. We focused on building a seamless process that preserved formatting while allowing users to stay in their workflow.

Our goal was to reduce churn by 12% in 90 days and triple content creation in 30 days, targeting project managers who frequently needed to embed external content.

Discovery: Conducted competitor analysis and identified key design patterns like inline slash commands
Implementation: Chose third-party integrations for broad support and developed solution within Froala editor
Measurement: Set up comprehensive analytics tracking to measure feature performance

Results

User Impact: Attracted 1,200+ active users with 23% adoption rate and 88% task success rate
Retention: Reduced churn from 4.5% to 1.3% for feature users, achieving 70% decrease across user base
Performance: New embedding method consistently outperformed old approach, driving sustained behavior change

more experience

Emerging market leader of waste management software solutions enabling haulers to streamline operations, optimize efficiency, and maximize profitability through integrated business management tools.

Hualerhero.com

HAULER HERO