@ Design_r
2025-02-02 00:03:39
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](https://stacker.news/items/855556/r/Design_r?commentId=855753), 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](https://stacker.news/items/786223), here below you will find all the media assets in PNG and SVG downloadable from this [zip file](https://nosto.re/0a8b02224c970de78fba3a0195dcf1ee44d18925ba941724497173b2bcbab901.zip). BTW: I've been using **`Nostr`** 🌸 **Blossom Serverservers** [check them out](https://blossomservers.com/), 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:
- https://nosto.re/0a8b02224c970de78fba3a0195dcf1ee44d18925ba941724497173b2bcbab901.zip
- https://blossom.poster.place/0a8b02224c970de78fba3a0195dcf1ee44d18925ba941724497173b2bcbab901.zip
- https://nostr.download/0a8b02224c970de78fba3a0195dcf1ee44d18925ba941724497173b2bcbab901.zip
The source file of all these assets still are the same [Figma file](https://www.figma.com/design/ZL3FLItd9j48pzKVi4qlOy/Stacker.News-Media-Kit?node-id=3-16&t=oEbUcC1tmLDRXgdH-0) and the [PenPot file](https://design.penpot.app/#/workspace/7ad540b5-8190-815d-8005-5685b9c670bc/7ad540b5-8190-815d-8005-5685c186216e?page-id=2643bc5a-0d34-80b2-8005-58099eabda41). 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.:
# Stacker News Logotype
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.
| Avatar on transparent BG | Avatar on BG | Logo Extended | Logo Vertical |#|
|---|---|---|---|---|
|  `` |  `` |  ``|  `` |Oil Black|
|  `` |  `` |  `` |  ``| Golden Yellow |
|  `` |  `` |  `` |  ``|With Shadow |
# Stacker News Typography
This is the typography SN had used to create its logo. [Download LightningVolt OpenType Font file.otf](http://honeyanddeath.web.fc2.com/FontFile/honeyanddeath_Lightningvolt.zip) designed by **[Honey&Death](http://honeyanddeath.web.fc2.com/fnt_Lightningvolt.html)**, install it in your computer and play with it.
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 Header H1
## Example Header H2
### Example Header H3
#### Example Header H4
##### Example Header H5
**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:
```
SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",`
```
# Stacker News Colors
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:
| # | Name | HEX code | RGB code | HLS |
|---|---|---|---|---|
|  | Bitcoin-only | `#F6911D` | `rgb(246,145,29)` | `hsl(32,92.3%,53.9%)` |
|  | Blackr | `#000000` | `rgb(0,0,0)` | `hsl(0,0%,0%)` |
|  | Dark | `#121214` | `rgb(18,18,20)` | `hsl(240,5.3%,7.5%)` |
|  | Gold | `#FADA5E` | `rgb(250,218,94)` | `hsl(48,94%,67.5%)` |
|  | Gray | `#969696` | `rgb(150,150,150)` | `hsl(0,0%,58.8%)` |
|  | Light | `#F0F0F0` | `rgb(240,240,240)` | `hsl(0,0%,94.1%)` |
|  | Nostrch | `#8C25F4` | `rgb(140,37,244)` | `hsl(270,90.4%,55.1%)` |
|  | Pinkish | `#E685B5` | `rgb(230,133,181)` | `hsl(330,66%,71.2%)` |
|  | Ruby | `#C03221` | `rgb(192,50,33)` | `hsl(6,70.7%,44.1%)` |
|  | Sky Hover | `#007CBE` | `rgb(0,124,190)` | `hsl(201,100%,37.3%)` |
|  | Sky Links | `#2E99D1` | `rgb(46,153,209)` | `hsl(201,63.9%,50%)` |
|  | Sky Visited | `#56798E` | `rgb(86,121,142)` | `hsl(203,24.6%,44.7%)` |
|  | So Fiat | `#5C8001` | `rgb(92,128,1)` | `hsl(77,98.4%,25.3%)` |
# Stacker News Icons
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.
|  `` |  `` |  `[Bounty](https://m.stacker.news/75607)` |  `[Caret](https://m.stacker.news/75608)` |  `[Cowboy](https://m.stacker.news/75609)` |  `[Sun](https://m.stacker.news/75610)` |
|---|---|---|---|---|---|
|  **`[Edit](https://m.stacker.news/75611)`** |  **`[Gun](https://m.stacker.news/75612)`** |  **`[Horse](https://m.stacker.news/75613)`** |  **`[Info](https://m.stacker.news/75614)`** |  **`[Moon](https://m.stacker.news/75615)`** |  **`[Lightning](https://m.stacker.news/75616)`**|
|  **`[Bald Lost Hat](https://m.stacker.news/75617)`**|  **`[Markdown](https://m.stacker.news/75618)`**|  **`[Nostr](https://m.stacker.news/75619)`**|  **`[Referral](https://m.stacker.news/75620)`**|  **`[Rewards](https://m.stacker.news/75621)`**|  **`[Horse Lost Saddle](https://m.stacker.news/75622)`**|  **`[Search](https://m.stacker.news/75623)`** |
| **`[Shoot](https://m.stacker.news/75624)`** | **`[Texas](https://m.stacker.news/75625)`** |  **`[Upload](https://m.stacker.news/75626)`** |  **`[Zap Zap](https://m.stacker.news/75627)`** |||
# Stacker News Banners
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!
#### SN Dark background
|970x250|
|---|
| ```|``|``|
|728x90|
|---|
|  `` |
#### SN Gold background
|970x250|
|---|
|`` |
|250x250|300x250|300x600|
|---|---|---|
|`` | `` |`` |
|728x90|
|---|
|`` |
#### SN by @Jon_Hodl
|970x250|
|---|
| `` |
|250x250|300x250|300x600|
|---|---|---|
| `` |  ``| `` |
|728x90|
|---|
|`` |
#### ~AGORA territory
The SN P2P Marketplace
|970x250|
|---|
| `` |
|250x250|300x250|300x600|
|---|---|---|
| `` | ``|``|
|728x90|
|---|
| ``|
#### ~alter_native territory
|970x250|
|---|
| ``|
|250x250|300x250|300x600|
|---|---|---|
|``|``|``|
|728x90|
|---|
|`` |
#### ~bitcoin_beginners
|970x250|
|---|
| `` |
|250x250|300x250|300x600|
|---|---|---|
| ``|``|`` |
|728x90|
|---|
| ``|
#### ~Design territory
|970x250|
|---|
|``|
|250x250|300x250|300x600|
|---|---|---|
|``|``|``|
|728x90|
|---|
|``|
#### ~Music territory
|970x250|
|---|
| ``|
|250x250|300x250|300x600|
|---|---|---|
|``|``|``|
|728x90|
|---|
| ``|
# Anything else we could add?
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.
[^1]: FYI: @Aardvark @AGORA @anna @antic @AtlantisPleb @Bell_curve @benwehrman @bitcoinplebdev @Bitter @BlokchainB @ch0k1 @davidw @ek @elvismercury @frostdragon @grayruby @HODLR @inverselarp @Jon_Hodl @k00b @marks @MaxAWebster @mega_dreamer @niftynei @nout @OneOneSeven @OT @PlebLab @Public_N_M_E @RDClark @realBitcoinDog @roytheholographicuniverse @siggy47 @softsimon @south_korea_ln @theschoolofbitcoin @TNStacker @UCantDoThatDotNet @Undisciplined
originally posted at https://stacker.news/items/872925