You can find our style guide and assets in PenPot. This article gives a bit of background information.
The emoticons we use for our logo and illustrations are based on the open source project OpenMoji Collection created by the University of Schwäbisch Gmünd. Even most of Chatmosphere's new colors are based on the OpenMoji palette.
For the app interface we use the open source icon set Feather by Cole Bemis. It's simple outline style makes it easy to add custom icons when needed.
We decided to use Space Grotesk, distributed by Florian Karsten Typefaces, as the font defining Chatmosphere's character(s). Inter, by Rasmus Andersson, is utilized for labels and all small but functional text elements.
With the shift to explicitly open-source friendly fonts, we could move away from embedding Google Fonts and the inevitable tracking that comes with them.
In the beginning of this project, we used Figma for our visual design work. Simply because we needed to work remotely and Figma by far is the most convenient collaborative design tool. Also, the hand-off for dev works quite well.
The drawback though is, that it's proprietary. And we think it's absolutely ok to pay for it if you work for big clients, or within a company, as it made the life of many designers (and probably developers) so much easier. But, unfortunately, Figma does not work too well for Open-Source-Design. Our need is to make design files accessible (same as our code is accessible on GitHub) and to reduce hosting costs, especially in times when we might not fully work on Chatmosphere.
That's why we tested PenPot during the last round of funding from the Prototype-Fund. It is not self-hosted yet, but for now, we can make style guide, assets for and design specifications open for everyone to read and download.
We also have detailed some additional app-design, hoping to make contributions easier and to enable consistency in future developments.
Wireframes and click dummies are meant to give context for more complex issues, and they are linked to epics in our roadmap and app-repo. If you want to contribute to Chatmosphere and you have any questions or ideas regarding the way we make design accessible, please drop us a line. 😻
Wash your hands, wear a mask, and mingle in virtual spaces.