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.

  • Master Page Templates: Built reusable Figma template components for complex invoice processing views, approval queues, and data tables -allowing designers to drop in pre-structured layouts and quickly assemble new screens.
  • Consistent Component Behaviours: Standardised interactive states, validation logic, and edge-case behaviours for form fields and table cells.
  • Figma-to-Code Parity: Structured component properties, variant logic, and auto-layout rules.

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

Email

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

swmoonnz@gmail.com

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.

  • Master Page Templates: Built reusable Figma template components for complex invoice processing views, approval queues, and data tables -allowing designers to drop in pre-structured layouts and quickly assemble new screens.
  • Consistent Component Behaviours: Standardised interactive states, validation logic, and edge-case behaviours for form fields and table cells.
  • Figma-to-Code Parity: Structured component properties, variant logic, and auto-layout rules.

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

Email

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

swmoonnz@gmail.com

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.

  • Master Page Templates: Built reusable Figma template components for complex invoice processing views, approval queues, and data tables -allowing designers to drop in pre-structured layouts and quickly assemble new screens.
  • Consistent Component Behaviours: Standardised interactive states, validation logic, and edge-case behaviours for form fields and table cells.
  • Figma-to-Code Parity: Structured component properties, variant logic, and auto-layout rules.

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

Email

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