Assets for unifying Shabad OS across various platforms.
The Shabad OS Brand helps unify Shabad OS related projects across various platforms such as the desktop and mobile app, the website, documentation, and tutorials, and also the various social media accounts (e.g. instagram and twitter).
The assets should only be used in relation to Shabad OS. If in doubt, please reach out and ask for permission.
The strongest connection to Shabad OS related projects is the logo consisting of a pink lotus flower and the words Shabad OS. The logo is provided as an SVG. A plain white color or radial gradient should be used with the lotus flower when needing more contrast from a busy background.
| Key | Value |
|---|---|
Icon |
Lotus Flower SVG |
Icon BG |
none, #ffffff, or #ba1e62 → #300519 |
Font Family |
Noto Sans |
Font Weight |
100/200 (Thin/Ultra-Light) |
The icon comes as an SVG and was created in a free, open-source vector program called Inkscape.
From a branding perspective, the closer to the original pink lotus flower colors used, the better. However, in some cases there are variations of the petal colors used. By default, in terms of color, there are 5 layers to the lotus icon:
| Layer | Hex Code (#) | Opacity (%) |
|---|---|---|
Inner Circle |
ffbd5f |
100 |
Inner Front Petals |
ffb7d0 |
54.9 |
Inner Base Petals |
ffe3ec |
100 |
Outer Front Petals |
ff86b1 |
74.1 |
Outer Base Petals |
ff4f91 |
74.1 |
Assuming the end resulting mask (viewable icon area including background) is 72 x 72 dp, the lotus icon, horizontally from left most petal point to right most petal point, should be 52 x 52 dp.
|
ℹ️
|
The radial background used on mobile apps (for consistency) assumes a 108 x 108 dp area with the center of the radius beginning at the bottom of the square and extending up to the top-most point of the inner front petals. This was done to keep the look of icons consistent between Android and iOS. This is subject to change after further testing. |
The Page Size of the icon can be changed through Inkscape’s menu File > Document Properties…. When changing page size, make sure all elements are centered using the Align and Distribute tool (center aligning relative to Page both horizontally and vertically). Also make sure when exporting that the Export Area is set to "Page". Here is a table of which page sizes to use for which format.
| Page Size | End Platform |
|---|---|
52 x 52 dp |
Should only be used to show the lotus only (E.g. website favicon) |
72 x 72 dp |
Social Media / iOS App Icon |
108 x 108 dp |
Android App Icon |
The lotus icon is used in many themes for desktop as a backdrop. These images can be found in the wallpapers folder and are to be exported to 2160 x 2160 px PNG files.
-
Ask a question via Slack or {wa-url}[WhatsApp]
-
Submit an issue on our issue tracker
-
Follow @shabad_os on Instagram and @shabad_os on Twitter and let us know what you think!