LastPass
Role
Product Designer
Timeline
Platform
Web
Responsibilities
Overview: Born now to be improved later
LastKit is the design system of LastPass and since its establishment in 2021, it went through a lot. Coming from a small UI kit, transitioning into a complex system that is being adopted across the whole organization.
In 2025, the release of LastKit 2.0 began. We, as a team, started to support more and more teams and constantly designed, built and improved LastKit. This 2.0 project combined a total rebrand of the brand itself while widening the horizon of what a regular documentation site means.
LastKit 1.0: Analyzing what we had
The traditional operation of LastKit required many members to be present and support each other. While the team work was effective, it cost a lot of money and time. As more and more projects came in, supporting them individually was not possible because the team also had to develop new features.
The LastKit components were stored in Storybook, which functioned as a simple documentation site that helped the project during the design and development lifecycles.
Inputs from research & stakeholders
We had multiple conversations that helped us understand where the current documentation site falls behind the expectations and these showed us multiple areas that we can improve on.
The team held a workshop where everybody could put their ideas up on the board which we clustered. This gave us a complex look on what we should include in the site.
Branding LastKit: Combining history and a futuristic vision
We had the freedom to tailor the branding to our needs – what the team needs to achieve the short and long terms goals, such as expanding the design system more across the company, introducing contribution models and developing a totally new documentation site.
When we held internal conversations to see how the team members imagine shaping up the brand of LastKit, we saw a pattern coming back from time to time: they were mentioning the golden era of software computing, while emphasizing how LastKit could be the future of the company.
Team member nr. 1
“This needs to be an example of what can we create if we have no limitation and boundaries – and we do not have those yet.”
Team member nr. 2
“I really love the brand that touches historical elements... like how Apple inspires from the back times to times.”
Team member nr. 3
“The branding needs to interpret, that we are doing a project that will be us for years, being timeless, while showcasing the future of code.”
Overview of the brand design work
The brand reflects on the combination of the history of software computing and the future of the LastPass product. Using retro-style gradients with serif fonts and futuristic images bring it all together with a simple logomark.
Gabor — Staff Frontend Developer @ LastPass
After analyzing multiple documentation sites (thanks to designsystem.surf), the team agreed to follow a more conventional way of informational architecture. In order to fully structure our available elements, we created a card sorting experiment which helped us categorize them.
Homepage of LastKit: Find anything, fast.
The general idea was to include everything on the homepage that helps the visitors to find their needs as soon as possible. We didn’t want to include any kind of storytelling here, and more focusing on the functionality of the site.
Introduction
General description of LastKit and how to get started as a newbie.
Components
From atomic components to templates. The core functionality of the site.
Theming
Any kind of foundational elements that relates to LastPass
Changelog
Keeping everything documented, and logging changes over time.
Search
Find an element really fast. Works as an autocomplete element.
Category: Structured approach with dynamic thumbnails
The goal of the main category sites (introduction, components, theming, changelog) was to have a dynamic experience that can be easily expandable, displays rich visuals and easy to understand.
Each category page contains a header, with different cards that show each subcategory. While we kept the top menubar, we extended the navigation with an easily reachable side navigation that helps to swipe between pages faster.
Theming: Fulfilling the needs of designers and devs
When it comes to concrete pages, one of the most important aspect was to create the balance between visual guidelines, descriptions for multiple teams across the organization, while meeting with the expectation of the developers.
Rich visual guides
General description of LastKit and how to get started as a newbie.
Descriptions of usage
General description across the page, how to use guides, do’s and don’ts.
Table of contents
We used a TOC on the right side that functions as a tertiary navigation inside the page.
Code snippets
Editable and easily copiable code snippets that help the work of the devs.
Easy switch between the Core and UAC
*Core and UAC are the two main themes across the whole organization. Core indicates the password manager apps and the UAC means the admin console. While the Core is primarily uses the red color, the UAC uses blue to show the difference.
The switch between the themes and components of the Core and UAC couldn’t be any easier. While we placed the main switch up to the menu, we also used visual signals, such as modifying the color of the header and the illustrations, that indicates if the user is on the right place to never copy or use the wrong theme across their work.
Component page: Built for every aspect a component has
Our component page was created with one goal: to display every relevant information about the component. While we are following the structure of the other sites, we added a cover image, displayed the variants, and used tabs for different aspects:
How-to usage guides
General description of the components, how to use guides, do’s and don’ts, variants, code snippets and examples.
Content
In collaboration with the content design team, we established a content guideline page to include how to use content across the component.
Accessibility
Built for developers, to be able to run accessibility tests for the component.
Anatomy & Specs
A built-in system, that provides every metric and token of the component.
Feedback and future opportunities
Although the release of the documentation site only happened in the middle of September 2025, we immediately began receiving positive feedback from multiple teams and co-workers –highlighting the detailed documentation, the easy-to-access code and how organized the whole site is.
We also saw a couple of areas where we can still extend the project, which will happen in the near future:
Adding proper brand design guidelines in collaboration with the brand creative team.
Adding a voice and tone guide by the content design team to the copy consistent across the brand.
Adding patterns – commonly used, complex interfaces as examples to help building screens even faster and more consistently.
Provide a built-in feedback form, where the users can give us relevant feedback regarding the items, pages, etc.
Personally, this project widened the horizon of what is possible inside even a large organization. I was able to combine my skills in art direction, design thinking, detailed documentation, and fast execution. It was also exciting because we touched the pain points of multiple teams, from developers through QA engineers to designers and we could see how they are thinking and what is important to them.
We were able to help them build faster, more consistently, and reduce the number of support tickets. I will carry their satisfaction with me as motivation to continue thinking beyond what is considered impossible.