# Meshtastic Branding and Design Guidelines
[](https://cla-assistant.io/meshtastic/design)
[](https://opencollective.com/meshtastic/)
[](https://vercel.com?utm_source=meshtastic&utm_campaign=oss)
## Logo Usage
Please note that the use of the Meshtastic® logo is subject to restrictions as defined in our licensing and trademark guidelines. For more details, refer to our [Licensing and Trademark Guidelines](https://meshtastic.org/docs/legal/licensing-and-trademark/).
## Overview
The meshtastic logo is derived from the appearance/aesthetics of physical LoRa modulation.
Throughout an ongoing [community-driven design process on the meshtastic forum](https://meshtastic.discourse.group/t/design-guideline-logo/2022/41) it was refined and given additional meaning.
CycloMiles said:
> While inspired by the LoRa chirps, your logo resembles the shape of a tent [...] One could also think of mountainous areas…
This narrative also resonates with Lure.Exciting.Salads:
> I see the mountains (Where I plan on putting repeaters in my area, and where I plan on using these in general) and I also see tents (I plan on using these while backpacking, camping, snowshoeing, hunting, etc.) so it definitely speaks to me. I also clearly see the “M”
> When scaled down to under 10mm on my phone screen, I definitely feel like simple is better.
Besides the positive associations, some concerns were brought up by TitanTronics:
> I like the logo and the idea behind it, only if you notice the letter “M” seems to start out as an “i” and “a” making it look like “iaeshtastic” because you used the letter “a” and the letter “i” also in Meshtastic itself, suggesting that the two symbols used in the logo are an “i” and an “a” put together which makes “ia”
User ChomeBlue also brought up the ambiguity and non-obvious meaning:
> A non-nerd won’t relate to any of this. Not to mention; to the uninitiated, I don’t believe this would even be recognized as an "M’
Despite those concerns, most of the people involved could imagine the "LoRa-M" as the new logo. Ambiguity to a point is not detrimental if the form of the logo is able to communicate the right thing and people can identify themselves with it. Often, ambiguity makes it possible in the first place to create a distinct logo that will be associated with a brand/idea/community.
## Margins and spacing
## Sizes for different use cases
## The typeface
## Colors
Primary/Foreground color:
`#2C2D3C`
`RGB 44 45 60`
Secondary/Background/Accent color:
`#67EA94`
`RGB 103 234 148`
### Extended Color Palette
The complete extended palette — including Neutral Scale, Green Scale, Semantic Colors, and Theme Colors — is documented visually in the [Color Palette SVG](standards/color-palette.svg) and defined in the [Meshtastic Client Design Standards](standards/).
> **Accessibility note:** All foreground/background pairings meet WCAG AA contrast (4.5:1 minimum). Never use `#67EA94` for text on light backgrounds — use `Green 600` (`#3FB86D`) or `Green 700` (`#2D8F52`) instead.
## A note to developers
If you are a developer using these images inside a Meshtastic® application, you can run bin/generate-pngs.sh to regenerate PNGs from the vector files. This script will be updated as needed to generate appropriate
'standard' sized/colored images for various platforms.
## Notes for android developers
#### App launcher icons
The app launcher icon consists of a foreground and a background drawable. The forground drawable (`@drawable/ic_launcher_foreground`) should be generated from an SVG. The SVG should be 108 pixels square, with a center logo not exceeding 58 pixels square. The background is currently a solid color defined by `@color/ic_launcher_background`. For more information on adaptive icons, see Android's [official documentation](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive).
The SVG can be imported and converted to an Android vector drawable using Android Studio's `Vector Asset` tool. If you also need to regenerate Play Store assets, follow [this](https://developer.android.com/studio/write/image-asset-studio#create-adaptive) procedure. Just make sure to follow the existing app launcher icon implementation. Generated `.png` or `.webp` files are only needed for the Play Store, so please do not include them for the app launcher icon.
#### Action bar icons
To regenerate the action bar icons use the Image Asset tool to import logo/svg/Mesh_Logo_White.svg. Use 0% padding, HOLO_DARK theme and name the generated asset "app_icon".
## Design Standards
All UI must comply with the [Meshtastic Client Design Standards](standards/). Review the current version before making any UI changes.
The [standards directory](https://github.com/meshtastic/design/tree/master/standards) always names the current version, so a link to it never goes stale. Don't link the `meshtastic_design_standards_latest.md` symlink from the web: GitHub serves it as its target's filename rather than as the document.
## Using Design Standards with GitHub Copilot
If you are developing a Meshtastic client, you can configure GitHub Copilot to automatically enforce the [Meshtastic Client Design Standards](standards/) when making UI changes.
Add the following section to your repository's `.github/copilot-instructions.md` file (create the file if it doesn't exist):
```markdown
## Meshtastic design standards
All UI work in this repository follows the Meshtastic Client Design Standards:
https://github.com/meshtastic/design/tree/master/standards
That page names the current version and links it. Read the current version
before changing UI, and apply sections 1 through 10 to client UI and section 11
to documentation and in-product text.
```
## Stats
