Customize your Passwd design!

Rebrand your Passwd! You can now customize the app using the logo and colors of your brand. See how.

Do you miss the vibrant colors of your brand in Passwd? You don’t have to anymore. Simply repaint it using your brand color scheme and enjoy the familiar look.

In the following before-after example, you can see a reimagined version of Passwd together with the concrete changes that have been made in order to achieve the result.

Customization example

Passwd user interface before and after customization.

To customize the design of the application, we used the following logo.

Custom logo example.

And we made the following changes to the code.

{
"black": "#000000" > "#2E3038",
"blue": "#0000ff" > "#E69500",
"hoverBlue": "#0000c2" > "#C27E00",
"brightMagenta": "#ff00eb" > "#00ADA0",
"hoverBrightMagenta": "#e600d4" > "#008F84",
"paleMauve": "#fff0fe" > "rgba(0, 173, 160, 0.08)”,
"lightGreen": "#70dcb1" > "#70dcb1",
"overlay": "rgba(244, 244, 255, 0.7)" > "rgba(0, 173, 160, 0.12)",
}

In the following screenshot, you can see what colors where changed to what result.

Passwd customization color changes example.

Instructions

To customize your Passwd to fit your branding, you can change the app’s original colors and replace our logo with yours.

Logo

Your logo must be in the .svg vector format. We recommend a 19:5 ratio.

The logo must be accessible via HTTPS protocol and the Access-Control-Allow-Origin header of your server must be set to “*” (or to your super domain address).

Colors

The colors of your custom design can be changed relative to that of Passwd. In other words, the keys in the JSON document, which stores the color scheme, correspond to the colors of Passwd design. For example, the value of the key “white”, used for all white objects in Passwd (e.g. the background, or button text on hover), is defined as “#FFFFFF”. If you want to change the color of all white objects, you simply change the value of the key “white” to “#000000. You can’t however change the color of individual objects.

You should also pay attention to hovers and other dynamic properties. If you don’t, your design ends up being inconsistent.

Below, you can see the list of colors that can be changed. When making your changes, you don’t need to rewrite every single color. If you, for example, wanted to change our white color to black, the only line you need to send us would be “white”: “#000000”

{
    "white": "#ffffff",
    "black": "#000000",
    "brownGrey": "#808080",
    "brownGrey2": "#9b9b9b",
    "brownGrey3": "#bfbfbf",
    "brownGrey4": "#666666",
    "lightGrey": "#ebebeb",
    "lightGrey2": "#f8f7f6",
    "lightGrey3": "#d9d9d9",
    "lightGrey4": "#e0e0e0",
    "blue": "#0000ff",
    "hoverBlue": "#0000c2",
    "overlayBlue": "#f4f4ff",
    "brightMagenta": "#ff00eb",
    "hoverBrightMagenta": "#e600d4",
    "paleMauve": "#fff0fe",
    "lightGreen": "#70dcb1",
    "green": "#2fd894",
    "red": "#f5222d",
    "hoverRed": "#fee5e6",
    "orange": "#ff9900",
    "lime": "#e2ffd1",
    "yellow": "#feff00",
    "overlay": "rgba(244, 244, 255, 0.7)",
    "password": {
        "0": "#f92525",
        "1": "#f95225",
        "2": "#ffb733",
        "3": "#3333ff",
        "4": "#2fd894"
    },
    "bgGrey": "#F8F7F6",
    "columnGraphLabel": "#9B9B9B"
}

Implementation

Once your list of changes and your logo (.svg) are ready, you can simply send them to our email [email protected] Your account will be then customized by the next update of your application.

Leave a Reply

Your email address will not be published. Required fields are marked *