This repository contains all resources and usage details about Mouseless brand. For the original brandkit you can download brandkit.fig or brandkit.pdf.
We are a software development collective connecting through the craft. We prioritize our people above all else, promoting open communication and efficiency. With this philosophy, our collective keeps its focus on its craft which eventually leads to excellence.
Inspired from this vision, we named our collective as Mouseless.
Mouseless name should be used in lowercase (mouseless) wherever suitable
unless you use it in a formal context or a documentation, like in this
document. Social media profile names should be lowercase as well.
Logo consists of three parts, greater than symbol >, brand name mouseless
or initial m and an underscore _.
There are;
- three forms: mark, full, short
- three colors for mark: primary, black and white
- four colors for full and short: primary, secondary, black and white
As a result there are 11 combinations as shown below;
| color \ form | mark | full | short |
|---|---|---|---|
| primary |  |
 |
 |
| secondary | N/A |  |
 |
| white |  |
 |
 |
| black |  |
 |
 |
Unlike a regular logo, we prefer dark background over a light one, because the terminal feel comes from a dark background.
When logo is needed in a place where image cannot be included, you may use
> m_ or > mouseless_.
Among 11 above alternatives it looks hard to choose which one to use. Let's make it easy.
First of all, every alternative is valid and can be used. There is no restriction. However, if you use a logo this means you want it to be noticed and look nice. Below is a list of suggestions to achieve this;
- Prefer primary & secondary logos over black & white wherever possible
- Use primary & white for dark backgrounds, secondary & black for light
backgrounds
- When you use mark, there is only primary color which might fit both light and dark backgrounds.
- Form preference is full, then short. If none fits well, use mark.
Below are some examples;
| Logo on backgrounds |
|---|
 |
 |
 |
 |
assets/logo folder includes all of the existing exported
files. All of these exported files are valid and can be used where they fit.
Use .svg files where possible, if not, use .png files with a suitable size.
.svg files are in assets/logo/svg folder. Below is the
naming convention for svg files;
logo-full-primary.svg
logo-[form]-[color].svg
.png files are in assets/logo/png folder. There are four
folders indicating different sizes named xs, s, m and l that are 5px,
50px, 150px and 500px in height respectively.
Below is the naming convention for png files;
logo-short-secondary-5px.png
logo-full-black-50px.png
logo-[form]-[color]-[height].png
If existing exported files does not suit your need, you can use brandkit.fig file to export a new one.
Note
Logo is pixel compliant, so you can use a perfect logo even if you have 5 pixels of height. On the other hand full logo may feel long, so you may use a 5x5 mark form or a 17x5 short form.
Profile pictures are exported including background so that it can fit better with social media channels. They come with two colors, primary and secondary, and three forms, mark, short and terminal.
| color \ form | mark | short | terminal |
|---|---|---|---|
| primary |  |
 |
 |
| secondary |  |
 |
 |
These exports are in assets/logo/profile folder with the following naming convention;
logo-profile-short-primary.svg
logo-profile-terminal-secondary-500px.png
logo-profile-[form]-[color].svg
logo-profile-[form]-[color]-[height].png
Depending on the platform, you may prefer mark form or short form. If target platform places brand name on the right side of profile picture, then it is better to use only mark form, e.g. Github. If profile picture is used stand alone, then you may consider using short form. Terminal form is there just for fun, use it if you feel it is suitable.
Use watermarks to protect and copyright photos and videos online. Watermarks
are exported to assets/logo/watermark in 15%,
22.5% and 30% opacities using only black/white colors in all forms.
Below is the naming convention for watermark logos;
logo-watermark-full-black-0.15.svg
logo-watermark-short-black-0.225.svg
logo-watermark-[form]-[color]-[opacity].svg
Warning
Don't use watermarks directly in html, because they are meant to be used on
existing photos or videos. There are also no .png exports available, because
of the same reason.
There are no apparent use cases for badges, but they are prepared anyway. primary and secondary badges are more suitable for brand related badges, whereas black and white badges can be used as status badges etc.
| Type | Badge |
|---|---|
| primary |  |
| secondary |  |
| white |  |
| black |  |
Primary brand color is red-500 (
#F9465B). We use it in a minimal
manner, e.g., link and button hover states or selected items.
We have 7 colors with 9 grades per color. You may also use regular black
(
#000000) and white (
#FFFFFF).
| Name | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| red | |||||||||
| darkgreen | |||||||||
| yellow | |||||||||
| orange | |||||||||
| blue | |||||||||
| green | |||||||||
| gray |
Click to see color codes...
| Name | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
| red | #FFEDEC | #FFDAD9 | #FFB3B4 | #FF888D | #FA465B | #DF314A | #BB1134 | #920024 | #680017 |
| darkgreen | #E6EFF0 | #B2CFD1 | #82AEB0 | #507D80 | #3B6F70 | #255759 | #154245 | #092C2E | #031819 |
| yellow | #FAF8C8 | #FCF8A7 | #FAF478 | #E8E26F | #D9D355 | #BCC45E | #B2AE56 | #8C894D | #666322 |
| orange | #FFF3D9 | #FFE8B8 | #FFDE99 | #FFD478 | #FFC957 | #D9A941 | #B28930 | #8C6B22 | #664C14 |
| blue | #E6EFF7 | #BAE0FF | #87C8FF | #54B1FF | #229AFF | #147FD9 | #0C67B2 | #004F91 | #003969 |
| green | #E2F6F2 | #C1F5E9 | #A3F7E4 | #82F5DA | #61F2D1 | #52D1B4 | #42AD94 | #328A75 | #246657 |
| gray | #F7F7F7 | #E9EBEB | #D5DBDB | #C4CCCC | #B3BDBD | #8D9494 | #666B6B | #3F4242 | #18191A |
Primary theme uses
darkgreen-900 for background,
gray-400 for foreground and
white for headings.
Note
Use
darkgreen-800 for box backgrounds.
Primary theme uses
gray-100 for background,
darkgreen-900 for foreground and
black for headings.
Warning
Boxes are styled the same as primary theme.
Mouseless is founded by Cihan Deniz to create a collective where developers can join and perform their craft with passion. Without being certain of what this collective may become in the future, Mouseless brand uses the same color as GC Brains to leave a mark in the brand hoping to remind its roots and core values to a future mouseless developer.