Designing the primary emblem for Have I Been Pwned was straightforward: I took a SQL injection sample, wrote “have i been pwned?” after it after which, simply to present it a contact of sophistication, put a rectangle with rounded corners round it:
Job achieved! I imply actually, what extra did I would like for a pet undertaking with a silly title that may doubtless solely add to the litany of failed nerdy concepts I would had earlier than that? After which, to compress 11 and a bit years right into a single sentence: it instantly grew to become unexpectedly standard, I added an API and a notification service, I mentioned “pwned” earlier than US Congress, I added Pwned Passwords, went by means of a failed M&A, employed a developer and principally, devoted my life to working this service. There’s been some “water below the bridge”, so to talk.
The rebrand we’re soft-launching at present has been a very long time coming, and true to that kind, we’re not dashing it. It is a “comfortable launch” in that we’re sharing work in progress that is sufficiently developed to place it on the market to the general public, however you will not see it in manufacturing anyplace but. The web site is not any completely different, the social channels nonetheless have the identical hero photographs and avatars and so forth. That is the time to hunt suggestions and tweak earlier than committing extra effort into writing code and pushing this to the lots.
A fast primer on “why”, because the query has come up a number of instances while beforehand discussing this. Assume for a second that my valiant 2013 try at a emblem was, itself, aesthetically adequate. It is a arduous one to make use of in numerous use instances (favicon, merch) and it is fairly “busy” in it is present kind with no simply recognisable image which makes it arduous to use to many use instances. And there are masses of use instances; I discussed a pair simply now, however how about in formal paperwork such a the contracts we write for enterprise prospects? Or because it seems on Stripe-generated invoices, stickers, my 3D printed logos, e mail signatures and so forth and so forth. And branding is not only a emblem, it is a complete set of various use instances and variants of the brand and hues such that you’ve got flexibility to current the model’s picture in a cohesive, recognisable vogue. Branding is an artwork kind.
At one level there, I would had a go at redoing the brand myself. It was horrible. how one can have this imaginative and prescient of one thing aesthetic in your thoughts and know immediately if it is the precise factor whenever you see it, however simply cannot fairly articulate it your self? I am like that with inside design… and logos. So, I reached out to Fiverr for assist, and instantly regretted it:
I imply… wow. Okay, I get free revisions, let’s give the designer one other probability:
Dammit! This simply wasn’t going to work, and we had been going to wish to make a way more critical dedication if we wished this achieved proper. So, we went to Luft Design in Norway as Charlotte and Mikael went method again, and together with his assist, we went round and round by means of numerous iterations of temper boards, design types, colors and carved out time in Oslo throughout our go to there in December to sit down with Stefan as properly and actually nut this factor out. I used to be adamant that I wished one thing instantly recognisable but additionally trendy and cohesive with out being fussy. Principally, give me every little thing, which Mikael did:
Let me discuss you thru the logic of those three variations, starting with the icon. Mikael initially gave us a number of doable variations of a very completely different icons which implied various things. My concern with that’s you must know what the symbology means to ensure that it to make sense. Maybe if you happen to’re ranging from scratch that may work, however whenever you’re a decade+ into a reputation and a model, there’s historical past that I feel it’s essential to carry ahead. One of many variations Mikael did reused that authentic SQL injection sample I utilized to the brand again in 2013 and only for the sake of justifying my alternative, here is what it means for the uninitiated:
Take a SQL question like this:
SELECT * From Person WHERE Identify="blah"Now, think about “blah” is untrusted consumer enter, that being information that somebody submits by way of a kind, for instance. They may then change “blah” to the next:
blah';DROP TABLE USERWe’ll shortcut the entire SQL injection lesson about validation of untrusted information and parameterization of queries and simply soar straight to the resultant question:
SELECT * From Person WHERE Identify="blah";DROP TABLE USER'And now, because of the extra question appended to the unique one, your consumer desk is gone. Nevertheless… the SQL has a syntax error as there is a rogue apostrophe hanging off the top, so we repair it through the use of commenting syntax like so:
blah';DROP TABLE USER;--Chief among the many characters in that sample are these guys:
';--And that is the historical past; these are characters that play a job within the type of assault that has led to so lots of the breaches in HIBP at present. Seems they’re additionally very easy to stylise and characterize as a concise emblem:
We agonised over variations of this for months. The issue is that when you concentrate on all those which are actually recognisable with out accompanying phrases, they’re recognisable as a result of the model is large. The Nike swoosh, the Mitsubishi diamonds, the Pepsi circle, the Apple emblem and so forth. HIBP clearly would not have that degree of cachet, however I actually just like the simplicity of attain of these, and that is what we’ve got with this one in addition to that connection to the historical past of the model and the sensible use of these characters.
However simply as with a lot of these different recognisable logos, these are instances when what’s successfully only a emblem alone is not sufficient, so we’ve got the longer kind model:
“Have I Been Pwned” is a mouthful. It is not simply lengthy to say, it is lengthy to placed on the display, lengthy to print as a sticker, lengthy to placed on a shirt and so forth and so forth. “Pwned”, then again, is brief, concise and, I would argue, has acheived a lot higher recognition as a phrase as a consequence of HIBP. Studying how “PWNED” went from hacker slang to the web’s favourite taunt, I feel that is a good conclusion to attract. For a second, we even toyed with the concept of an precise rename to only “Pwned” and checked out making an attempt to purchase pwned.com by way of a dealer which, uh, did not work out actual properly:
Appartently, you can put a worth on it! So no, we’re not renaming something, we’re simply offering numerous stylistic choices for representing the brand. This is the reason we nonetheless have the a lot wordier variations as properly:
Not like outdated mate at Fiverr, a correct branding train like Mikael has achieved goes properly past simply the brand alone. For instance, we’ve got a color palette:
And we’ve got typography:
Hoodies:
And t-shirts:
You get the concept.
However most significantly, there’s the web site. Clearly the model must prevail throughout to the digital realm, however there’s additionally the problem of the front-end tech stack we construct on, and that is one thing I have been occupied with for months now:
In 2013, I constructed the entrance finish of @haveibeenpwned on Bootstrap and jQuery. In 2025, @stebets and I are rebuilding it as a part of a rebrand. What ought to we use? What are the entrance finish instruments that make net dev superior at present? (vanilla HTML, CSS and JS apart, after all)
— Troy Hunt (@troyhunt) December 27, 2024
You’ll be able to learn all types of various options in that thread however ultimately, we determined to maintain it easy:
- Bootstrap 5
- Vanilla JS (i.e. simply write JavaScript with out a framework dependency like jQuery)
- Sass (which compiles to CSS anyway)
And that is it. Besides Stefan and I are busy guys and we actually did not need to make investments our valuable cycles rebuilding the entrance finish, so we received Ingiber Olafsson to do it. Ingiber got here to us by way of Stefan (so now we’ve got two Icelanders, two Norwegians and… me), and he is been completely smashing out the brand new entrance finish of HIBP:
What I’ve actually loved with Ingiber’s method is that every little thing he is constructed is tremendous clear, light-weight and visually lovely (based mostly on Mikael’s work, after all). I’ve actually appreciated his consideration to element that is not all the time apparent too, for instance ensuring accessibility for the visually impaired is maximised:
Ingiber has helped get us to the purpose the place very quickly, Stefan and I’ll start the combination work to roll the brand new model into the primary web site. That is not simply branding work both because the UX is getting a serious overhaul. Some stuff is pretty minor: the record of pwned web sites is now method too massive and we have to have a devoted web page per breach. Different stuff is rather more main: we need to have a particular “login” facility (quoting as it should doubtless stay passwordless by sending a token by way of e mail), the place we’ll then consolidate every little thing from notification enrolment to area administration to viewing stealer logs. It is a vital paradigm shift that requires plenty of very cautious thought.
A fast caveat on the examples above and the others within the repository: we have given Ingiber free reign to experiment and throw concepts round. Because of this, we have got some awsome stuff we hadn’t thought of earlier than. We have additionally received some stuff that shall be infeasible within the quick time period, for instance, a hyperlink by means of to the official response of the breached firm and the total timeline of occasions. I hope concepts like this maintain coming (each from Ingiber and the group), however simply understand that some stuff you see on this repo will not be on the web site the day we roll all this out.
As with a lot of this undertaking since day one, we’re doing this out within the open for everybody to see. A part of that’s this weblog publish heralding what’s to come back, and a part of it is usually open sourcing the ux-rebuild repository. I truly created that repo greater than a yr in the past and began crowd-sourcing concepts earlier than closing it off final month while Ingiber received working. It is now open once more, and I would like to ask anybody to take a look at what we’re constructing, depart their feedback (both right here on within the repo), ship PRs and so forth and so forth. I am actually stoked with the work the blokes I’ve talked about on this weblog publish have achieved, however there will be different nice concepts that none of us have considered but. And if you happen to provide you with one thing superior, we have already got truckloads of stickers and 3D printed logos I would like to ship you:
So there we’ve got it, that is the rebrand. Do please ship us your suggestions, not nearly logos and feel and appear, but additionally what you’d wish to see UX and have smart on the web site. The discussions record on that repo is a superb place the chime in or add new concepts, and even simply the feedback part under 👇
Edit: Wow, all of the responses have been superior! Gotta be trustworthy, I used to be nervous redefining the model after so lengthy, however I could not have hoped for a greater response 😊 I’ve two fast additions to this publish:
- Attributable to standard demand, I’ve opened a retailer on Sticker Mule the place now you can buy the stickers. These are listed at their value worth, there is not any markup from us, simply get pleasure from them and share liberally.
- I ought to have considered this earlier than publishing this publish, however we have now revealed the static HTML pages to preview.haveibeenpwned.com. That is working on Cloudflare pages and is auto-deployed on every GitHub merge into primary, so you will see this proceed to evolve over the approaching weeks.
