Open-Source Brand Kit Template - HackerNoon’s logos & brand guide + open-source site template
by•
The official home for HackerNoon’s logos, colors, fonts and brand guidelines. Grab the pixel-watch logo as SVG or PNG, plus everything press, partners and writers need. We also open-sourced it: edit one config file and deploy your own brand kit (Next.js, MIT).
Replies
Hey Product Hunt! I'm Kien, Product Designer at HackerNoon.
HackerNoon has had a brand page for a while. It did the job: logos, colors, a few rules. But it was static, hard to navigate, and didn't say much about why HackerNoon looks the way it does.
So we rebuilt it. HackerNoon Brand Kit v2.0 is:
More interactive: the homepage is a board of live tiles, and every page has something to play with, like the logo playground where you can try the pixel cloclk on any background or live-testing HackerNoon fonts!
Easier to navigate: a new nav that collapses, expands and works properly on mobile, so you can get to any asset in a few clicks
Deeper on history: on how each element (the logo, the green, the typeface, the voice) becomes part of HackerNoon
All the practical stuff is still there, and even easier to use/download.
One more thing: we open-sourced it. While building this, we realised most brand guidelines end up as a PDF nobody opens. So we stripped out our assets and turned the whole site into a free template. Edit one config file (name, colors, logo, fonts) and deploy your own brand kit.
🔗 Template: github.com/hackernoon/brand-kit-template
🎨 Demo: brand-kit-template.preview.hackernoon.com
If you’ve used the old page, I’d love to hear what you think of the new one. And if you’re new here, which part of HackerNoon’s look were you most curious about? PRs on the template are very welcome too 🙌
This template makes any startup look like a much bigger company!
Great open source tool!