Foundational principle is that when it’s about the user, it’s [FOR YOU]. As a consequence nounspace’s branding and worlds move into the back. When the product nounspace.wtf is being presented, we [OWN THE STAGE]. # [FOR YOU] For all user touch points we follow industry established best practices across the entire user journey. This specifically applies to iconography, typography and color palette. The underlying rules are: 1. Seem less and intuitive navigation 2. Ensure good visibility 3. Optimize for mobile and desktop experiences separately ## Iconography Integrate established icon family. Eg. Font Awesome, Material Icons, Ionicons, Feather Icons, Heroicons Perferably "open source" families. ## Typography Neutral, no serifs. In "settings" and "admin" environments: Focus on readibility. Consider adding fonts for users to select when building out their space. And, if possible, only open source fonts. Default font for all touchpoints is [Inter](https://fonts.google.com/specimen/Inter) In environments where we want to [OWN THE STAGE] for a split second, we use the font *[Press Start 2P Regular](https://www.dafontfree.net/press-start-2p-regular-font/f84397.htm)* ## Color palette - For "settings" and "admin" environments: Optimize for visibility - Integrate dark and light mode For everything else: put the user in control to create their space. ## Logo integration Pixel perfect black on white or inverted nounspace.wtf logo ![nounspace wtf logo - black pixel perfect](https://hackmd.io/_uploads/B1JVRQsmC.png) ![nounspace wtf logo - white pixel perfect](https://hackmd.io/_uploads/r10foCjXR.png) ## Icons ![nounspace wtf - icon black](https://hackmd.io/_uploads/BymH3Ao70.png) ![nounspace wtf - icon white](https://hackmd.io/_uploads/SJXB30jmR.png) Download all logo files [here](https://drive.google.com/drive/folders/1fcdZFkLkWGQgKE7RN77KQCjVUPdBe2wS?usp=sharing). # [OWN THE STAGE] This is where we start world building - creating a moment in time, a space that captures the audience and fans that sparks connection and belonging, a desire to explore their own space on nounspace.wtf Worlds function as vehicles for marketing assets in campaigns, presentations, merch, etc The question of "what should my presentation look like?" or "what is the look and feel for the next marketing campaign?" the answer is "your favorite blockbuster from (e.g.)2004" We have the gifts from the pre-netflix and pre-spotify era at our fingertips to remix: **we all watched the same movies, series, played the same gameboy games and listened to the same music** The myspace generation is probably the last generation that is universally connected through their childhood/teens consumption of media and entertainment When we build out worlds, we want to showcase in a playful way that nounspace.wtf is the canvas for the user to build out their own space. It ultimately serves as a source of inspiration for users. ## Logo integration hand drawn logo - filled or outlines. Always use the logo bigger than you would normally: [OWN THE STAGE]! ![nounspace wtf logo - black filled](https://hackmd.io/_uploads/BkkGC7jX0.png) ![nounspace wtf logo - filled white upload](https://hackmd.io/_uploads/Hy0kfNiQC.png) ![nounspace wtf logo - black outline](https://hackmd.io/_uploads/ByJfRmsmC.png) ![nounspace wtf logo - white outline](https://hackmd.io/_uploads/rk1f0XiQA.png) Download all logo files [here](https://drive.google.com/drive/folders/1fcdZFkLkWGQgKE7RN77KQCjVUPdBe2wS?usp=sharing). ## Icons ![nounspace wtf - icon drawing black](https://hackmd.io/_uploads/HyTNw1h7C.png) ![nounspace wtf - icon drawing white](https://hackmd.io/_uploads/S1l64D1n70.png) ![nounspace wtf - icon drawing outline black](https://hackmd.io/_uploads/r16NPk2QR.png) ![nounspace wtf - icon drawing outline white](https://hackmd.io/_uploads/HkTNDk2mR.png) ## World Building When we build worlds, we want to lean into existing visual concepts fans, users and the audience can relate to. The inspiration for these worlds should be taken from Hollywood blockbusters, series and console games that shaped culture in the late 90s and 2000s. Worlds to explore: - Jurassic Park - Batman - Spiderman - Willy Wonka & the chocolate factory - Packman - Super Mario - Flynnstones - Ninja Turtyles - Tetris - Zelda - Simpsons - Star Wars - King of Queens - Lion King - … - And many more ## Iconography, Typography, Color palette derived from the world that we’re building and presenting. # Summary | Categories | For You | Own the Stage | |---------------------------|-------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------| | **Iconography** | Integrate established icon family. | Based on the world that we’re building | | **Typography** | Neutral, no serifs. | Based on the world that we’re building | | **Color palette** | Optimize for visibility. Integrate dark and light mode. | Based on the world that we’re building | | **Logo integration** | Pixel perfect black on white or inverted nounspace.wtf logo | Hand drawn logo - filled or outlines. | | **World Building** | N/A | Lean into existing visual concepts fans, users, and the audience can relate to. Inspirations include Hollywood blockbusters, series, and console games from the late 90s and 2000s. Examples: Jurassic Park, Batman, Spiderman, Willy Wonka & the Chocolate Factory, Pac-Man, Super Mario, Flintstones, Ninja Turtles, Tetris, Zelda, and many more. | | **Underlying Rules** | 1. Seamless and intuitive navigation. 2. Ensure good visibility. 3. Optimize for mobile and desktop experiences separately. | N/A | ![Bildschirm­foto 2024-05-30 um 00.05.16](https://hackmd.io/_uploads/H1ETENB4R.png) ![Bildschirm­foto 2024-05-30 um 00.05.47](https://hackmd.io/_uploads/HkUAV4S4A.png) ![Bildschirm­foto 2024-05-30 um 00.06.00](https://hackmd.io/_uploads/rJV1BVHV0.png)