Open Sourcing the UX Rebuild

Oct 13, 2025 by magicalceylontours.com 129 views

Presently sponsored by: 1Password Extended Access Management: Secure every sign-in for every app on every device. https://1password.com/troyhunt

Introduction

Have I Been Pwned (HIBP) has been a part of my life for over 11 years, and it's hard to believe how far it's come. From a simple SQL injection pattern to a full-fledged rebranding effort, HIBP has evolved into a robust and reliable service that helps people protect their online identities. In this article, we'll take a closer look at the rebranding process, the new logo, and the future of HIBP.

The Old Logo

The original logo for HIBP was designed in 2013, and it was a simple SQL injection pattern with the words "have i been pwned?" written after it. While it was a good starting point, it had its limitations. The logo was busy, and it didn't lend itself well to different use cases, such as favicons, merchandise, or formal documents.

The Rebranding Process

In 2024, I decided it was time to give HIBP a new look. I reached out to Fiverr for help, but unfortunately, the results were not what I was looking for. I then turned to Luft Design in Norway, who worked with me to create a new logo and branding guidelines.

The New Logo

The new logo for HIBP is a stylized representation of the SQL injection pattern that started it all. The logo features the characters ';-- which are commonly used in SQL injection attacks. The logo is simple, yet effective, and it immediately conveys the message that HIBP is a service that helps people protect their online identities.

The Logo Variations

The new logo comes in several variations, including a standalone icon, a longer form version with the words "have i been pwned?", and a stylized version with the words "pwned" in a bold font. The logo is designed to be flexible and can be used in a variety of contexts, from social media to merchandise.

The Color Palette

The new color palette for HIBP features a range of colors that are designed to be modern and cohesive. The primary color is a deep blue, which represents trust and security. The secondary color is a bright green, which represents growth and protection.

The Typography

The new typography for HIBP features a clean and modern font that is designed to be easy to read. The font is used throughout the website and is consistent with the new branding guidelines.

The Website

The new website for HIBP is built using Bootstrap 5, Vanilla JS, and Sass. The website features a clean and modern design that is consistent with the new branding guidelines. The website is also fully accessible and meets the latest web accessibility standards.

The UX Rebuild

The UX rebuild for HIBP is a major overhaul of the website's user experience. The new design features a more intuitive and user-friendly interface that makes it easier for users to navigate the website. The UX rebuild also includes a range of new features, such as a dedicated page for each breach and a login facility that allows users to manage their accounts.

Open Sourcing the UX Rebuild

The UX rebuild for HIBP is open sourced on GitHub, and we invite anyone interested to check out the repository and contribute to the project. We're excited to see what ideas and suggestions people come up with, and we're happy to provide feedback and guidance throughout the process.

Conclusion

The rebranding of HIBP is a major milestone in the service's history, and we're excited to see how it will be received by our users. The new logo, color palette, typography, and website design are all designed to be modern and cohesive, and we're confident that they will help to take HIBP to the next level. We invite anyone interested to check out the UX rebuild repository and contribute to the project.

The Future of HIBP

The future of HIBP is bright, and we're excited to see what the next chapter holds. We're committed to continuing to provide a robust and reliable service that helps people protect their online identities. We're also committed to staying up-to-date with the latest web technologies and trends, and we're excited to see how the UX rebuild will shape the future of HIBP.

Get Involved

We invite anyone interested to get involved in the UX rebuild project. You can check out the repository on GitHub and contribute to the project by leaving comments, sending PRs, or participating in the discussions list. We're excited to see what ideas and suggestions people come up with, and we're happy to provide feedback and guidance throughout the process.

Stickers and 3D Printed Logos

We're also excited to offer stickers and 3D printed logos to anyone who contributes to the UX rebuild project. We think it's a great way to show our appreciation for the hard work and dedication that people put into the project.

Conclusion

References

Q: What inspired the rebranding of Have I Been Pwned?

A: The rebranding of Have I Been Pwned was inspired by the need for a more modern and cohesive visual identity. The original logo, while simple, had its limitations, and we wanted to create a new logo that would be more flexible and effective in different contexts.

Q: What is the story behind the new logo?

A: The new logo features the characters ';-- which are commonly used in SQL injection attacks. The logo is a stylized representation of the SQL injection pattern that started it all, and it immediately conveys the message that Have I Been Pwned is a service that helps people protect their online identities.

Q: What is the significance of the color palette?

A: The new color palette for Have I Been Pwned features a range of colors that are designed to be modern and cohesive. The primary color is a deep blue, which represents trust and security, while the secondary color is a bright green, which represents growth and protection.

Q: What is the typography used in the rebranding?

A: The new typography for Have I Been Pwned features a clean and modern font that is designed to be easy to read. The font is used throughout the website and is consistent with the new branding guidelines.

Q: What is the UX rebuild, and how does it relate to the rebranding?

A: The UX rebuild is a major overhaul of the Have I Been Pwned website's user experience. The new design features a more intuitive and user-friendly interface that makes it easier for users to navigate the website. The UX rebuild also includes a range of new features, such as a dedicated page for each breach and a login facility that allows users to manage their accounts.

Q: Why is the UX rebuild open sourced?

A: The UX rebuild is open sourced to encourage community involvement and feedback. We invite anyone interested to check out the repository on GitHub and contribute to the project by leaving comments, sending PRs, or participating in the discussions list.

Q: What is the significance of the stickers and 3D printed logos?

A: The stickers and 3D printed logos are a way to show our appreciation for the hard work and dedication that people put into the project. We think it's a great way to reward contributors and encourage others to get involved.

Q: What is the future of Have I Been Pwned?

A: The future of Have I Been Pwned is bright, and we're excited to see what the next chapter holds. We're committed to continuing to provide a robust and reliable service that helps people protect their online identities. We're also committed to staying up-to-date with the latest web technologies and trends, and we're excited to see how the UX rebuild will shape the future of Have I Been Pwned.

Q: How can I get involved in the UX rebuild project?

A: You can check out the repository on GitHub and contribute to the project by leaving comments, sending PRs, or participating in the discussions list. We're excited to see what ideas and suggestions people come up with, and we're happy to provide feedback and guidance throughout the process.

Q: What is the timeline for the UX rebuild?

A: The timeline for the UX rebuild is ongoing, and we're working hard to bring the new design to life. We'll be sharing updates and progress on the GitHub repository and on the Have I Been Pwned blog.

Q: How can I stay up-to-date with the latest news and updates on the UX rebuild?

A: You can stay up-to-date with the latest news and updates on the UX rebuild by following the Have I Been Pwned blog and the GitHub repository. We'll be sharing regular updates and progress on the project, and we encourage you to participate and contribute to the discussion.