Design System
Lentune · 2025
As Lentune’s range of tools expanded across invoice automation, approvals, and job management, fragmented UI patterns began slowing down team velocity. Engineers were rebuilding existing components, and designers lacked a single, scalable source of truth.
I identified the lack of a shared UI foundation as a scaling constraint and led the creation of Lentune’s design system from the ground up - defining the token architecture, component model and reusable patterns used across the product.The goal wasn’t simply visual consistency; it was to reduce repeated design decisions and give product and engineering teams a common foundation for shipping faster.
Token Architecture & Foundation
I set up a token structure in Figma that mapped design decisions directly to front-end CSS variables.
Functional Token Naming: Mapped raw values like hex codes and pixel sizes to functional names (e.g., surface-primary, border-secondary), making system-wide updates instant.
Component-Level Variables: Linked tokens directly to reusable components so visual changes propagated across complex table layouts and forms without breaking the UI.


Design Patterns & Reusable Templates
To speed up layout creation and ensure consistency across data-dense workflows, I established standardised UI patterns and master page templates.
Stepper Card
Header
Supporting text
Instance Slot
Instance Slot
Instance Slot
Instance Slot
Skip
Previous
Next
Stepper Card Example
Connect Your Email
We’ll pull supplier invoices straight from your accounts payable inbox and send them into Simpro and Xero. Just connect the email where you usually receive invoices.
Not ready for this step? You can skip it for now and upload invoices manually.
By connecting, you are agreeing to the terms and conditions.
Connect with Microsoft
Connect with Gmail
Skip
Previous
Next
Xero
Keep your accounting sorted with direct Xero sync.
Learn more
Connected
Disconnect
Label
Label
Label

Label
Label
Error message

Label
Supporting text
!
Label
Supporting text
Label
Supporting text
Label
Supporting text


Users
Add User
Active
Inactive
Search
Name
Emma Thompson
Noah Williams
emma@cactus.com
noah@cactus.com
Contact number
+64 27 184 3829
Role
Accounts Admin
Expense User
Last login
26 Jun 2025 11:33
03 Jun 2025 15:41
Edit user details
Resent invitation
Deactivate user

Design System
Lentune · 2025
As Lentune’s range of tools expanded across invoice automation, approvals, and job management, fragmented UI patterns began slowing down team velocity. Engineers were rebuilding existing components, and designers lacked a single, scalable source of truth.
I identified the lack of a shared UI foundation as a scaling constraint and led the creation of Lentune’s design system from the ground up - defining the token architecture, component model and reusable patterns used across the product.The goal wasn’t simply visual consistency; it was to reduce repeated design decisions and give product and engineering teams a common foundation for shipping faster.
Token Architecture & Foundation
I set up a token structure in Figma that mapped design decisions directly to front-end CSS variables.
Functional Token Naming: Mapped raw values like hex codes and pixel sizes to functional names (e.g., surface-primary, border-secondary), making system-wide updates instant.
Component-Level Variables: Linked tokens directly to reusable components so visual changes propagated across complex table layouts and forms without breaking the UI.


Design Patterns & Reusable Templates
To speed up layout creation and ensure consistency across data-dense workflows, I established standardised UI patterns and master page templates.
Stepper Card
Header
Supporting text
Instance Slot
Instance Slot
Instance Slot
Instance Slot
Skip
Previous
Next
Stepper Card Example
Connect Your Email
We’ll pull supplier invoices straight from your accounts payable inbox and send them into Simpro and Xero. Just connect the email where you usually receive invoices.
Not ready for this step? You can skip it for now and upload invoices manually.
By connecting, you are agreeing to the terms and conditions.
Connect with Microsoft
Connect with Gmail
Skip
Previous
Next
Xero
Keep your accounting sorted with direct Xero sync.
Learn more
Connected
Disconnect
Label
Label
Label

Label
Label
Error message

Label
Supporting text
!
Label
Supporting text
Label
Supporting text
Label
Supporting text


Users
Add User
Active
Inactive
Search
Name
Emma Thompson
Noah Williams
emma@cactus.com
noah@cactus.com
Contact number
+64 27 184 3829
Role
Accounts Admin
Expense User
Last login
26 Jun 2025 11:33
03 Jun 2025 15:41
Edit user details
Resent invitation
Deactivate user

Design System
Lentune · 2025
As Lentune’s range of tools expanded across invoice automation, approvals, and job management, fragmented UI patterns began slowing down team velocity. Engineers were rebuilding existing components, and designers lacked a single, scalable source of truth.
I identified the lack of a shared UI foundation as a scaling constraint and led the creation of Lentune’s design system from the ground up - defining the token architecture, component model and reusable patterns used across the product.The goal wasn’t simply visual consistency; it was to reduce repeated design decisions and give product and engineering teams a common foundation for shipping faster.
Token Architecture & Foundation
I set up a token structure in Figma that mapped design decisions directly to front-end CSS variables.
Functional Token Naming: Mapped raw values like hex codes and pixel sizes to functional names (e.g., surface-primary, border-secondary), making system-wide updates instant.
Component-Level Variables: Linked tokens directly to reusable components so visual changes propagated across complex table layouts and forms without breaking the UI.


Design Patterns & Reusable Templates
To speed up layout creation and ensure consistency across data-dense workflows, I established standardised UI patterns and master page templates.
Stepper Card
Header
Supporting text
Instance Slot
Instance Slot
Instance Slot
Instance Slot
Skip
Previous
Next
Stepper Card Example
Connect Your Email
We’ll pull supplier invoices straight from your accounts payable inbox and send them into Simpro and Xero. Just connect the email where you usually receive invoices.
Not ready for this step? You can skip it for now and upload invoices manually.
By connecting, you are agreeing to the terms and conditions.
Connect with Microsoft
Connect with Gmail
Skip
Previous
Next
Xero
Keep your accounting sorted with direct Xero sync.
Learn more
Connected
Disconnect
Label
Label
Label

Label
Label
Error message

Label
Supporting text
!
Label
Supporting text
Label
Supporting text
Label
Supporting text



Users
Add User
Active
Inactive
Search
Name
Emma Thompson
Noah Williams
emma@cactus.com
noah@cactus.com
Contact number
+64 27 184 3829
Role
Accounts Admin
Expense User
Last login
26 Jun 2025 11:33
03 Jun 2025 15:41
Edit user details
Resent invitation
Deactivate user