Welcome to the latest updated version of Stacker News Media Kit & Brand Guidelines v1.2, a pivotal location where all the visual elements find place and help us understand how to use them to have our communications cohesive. SN brand identity is built on simplicity, trust, innovation and a taste of Texas's Wild West. With the following guidelines, as promised, I'll try to outline the essential elements of SN visual language to be easily usable internally and externally.
As third interaction from the previous discussion, here below you will find all the media assets in PNG and SVG downloadable from this zip file. BTW: I've been using Nostr 🌸 Blossom Serverserverscheck them out, it's a really cool idea! In case the file will be not available we can always upload it in other servers. Just let me know if any issue downloading it, ideally I made three copies available from:
The source file of all these assets still are the same Figma file and the PenPot file. This last one, has many issues and does not allow yet the same flexibility as Figma. Both files are open for contributions and comments, just need to register a dummy/anonymous account for each of the tools.
Note: To use these assets across SN, just copy-paste the image relative code, i.e.:
SN logo is the most recognizable visual identifier of Stacker News. It captures the essence of its brand and is to be used across the platform and other marketing materials consistently. Find below all the possible variations and colors. Ideally you should stick with it to maintain SN identity coherent, or propose something new if you feel like. If you have any question on how to place or use the logo, DO ask below, and we'll help sort it out.
Typography is essential to identify, increase readability and create consistency of brands. SN uses the default font-family:sans-serif; of your device's OS, usually are the most common and already installed in your device: system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji". Those are mostly used for:
Example paragraph text
The fonts selected will help to communicate the personality of the brand and provide maximum legibility for both print and screen.
Example <code>
For code, the approach is the same. Let's the device OS select its default monospace one. For example, on Mac will be one of the following:
A thoughtfully curated color palette gives SN trust, professionalism, and approachability. Colors play a key role in creating consistent visual experiences through digital and print communications. Make sure you are using the right color codes below:
SN utilizes a set of bespoke icons that support its communication internally across the platform. Icons help bring instant, intuitive cues for various types of content and features. We share them here for you so you can use as you wish and satisfy your creative needs.
Banners are important visual elements used in our digital platforms and marketing materials. They help to highlight key stories, features or announcements while maintaining our brand aesthetic.
Here below you'll find custom banners for Sn and for individial territories. I try to build those that I follow most, for now @AGORA is the only one that designed its own banners. Comment below if you'd like some banners for your territory!
If you feel something is missing, or you know a better tool to manage this media kit for SN in a collaborative and FOSS way then, DO share it in a comment below
Territory owners 1, do you need banners for your territory? Feel free to edit the figma file liked above or comment below sharing your needs or ideas, I'll try to do something for you.
By following these guidelines, we ensure consistency and professionalism in every case where Stacker News is represented here internally to stackers or to our audience in the KYC internet, reinforcing SN credibility as a trusted source for data-driven journalism.
We should do an accessibility review on a few of the color combinations in light mode and in some of the banner images with text, but for the most part everything has really good contrast in the default dark mode. Very nice to have the design guide as a tool to keep everything consistent. Love the icons. Great work!
Thanks for your feedback, I checked with some accessibility tools, and you right, does not look's good enough. You're welcome to double-check and evaluate possible improvements to be summarized in a GH issue.
Feel free to comment or ask questions on the issue directly. Hoping to open the conversation on what voluntary standards or guidelines we can use to make the content more readable and usable for all.
This is great! Thank you for taking time making this important analysis. Unfortunately have no GH account (yet), I'll keep an eye on the conversation and I'll take the results you gathered to find similar colors that match the accessibility standard as you suggested.
Yes I would like a banner for stocks and construction!
I am trying to do more advertising for my territories
Also going to use zaps on podcasts to help get the word out and bring new users to stacker news. Having a few banners for my territories can help with my rudimentary marketing strategy.
That's great! Construction is one that sometime I dive in too. If you like, share some references so we can work together with the inputs of the community for each territory.
Thanks for posting the updated version. I am going to fiddle with some stuff next week. I am still playing with my “You should be on Stacker News” marketing idea. I tried to do some stuff with AI but didn’t like anything it produced.
Ai... yes cool it helps! But like here in SN, do you enjoy reading Ai articles? Me either... nor I enjoy or feel particularly attracted by Ai image generation. You can be the best prompt-writer, however you'll limit the results by its tech boundaries.
I like the idea "You should be on Stacker News", reach out, I might be able to help you out with the visualization of it
Thanks for sharing! It seems from your username, you must be the designer who designed all of this. Great work! Predyx needs a good designer as well, how or where can we find someone as good as you?
You find me here. I'll be happy to help you, depending on your needs and requirements or point you in the right direction to find someone else with the skills you need. Reach out via email or nostr DM
🤣 ahaha when the 404 was showing up more often! Thanks for the reminder, I'll add them all to the collection. Where are all the others? Offline, 500 error etc... ?
Things to add on next version: