12 simple steps to build a neumorphic login page with Bonita UI Designer 
Published: 2020-05-22 14:20:14

![Cover image](https://dev-to-uploads.s3.amazonaws.com/i/m23acifnivmxw6bueqb4.PNG)

The interface style known as neumorphic (a combination of skeumorphic and realistic design) has been gaining in popularity, and I think we'll see it being used more and more in 2020.

One important aspect of neumorphism is about selecting the proper color palettes, and 3 shades of the same color are required for this.

i) Light Shadow should be done by using a light color. For example, rgba(255,255,255,1),

ii) The Main background and Element color should be in the mid-range. For example, rgba(235,245,252,1) for the background and element,

iii) Dark Shadow should be done by using a dark color. For instance, rgba(0,0,0,0.1).


Below are the 12 simple steps I followed to implement a login page using the Bonita UI Designer, inspired by https://neumorphism.io/.

First, create a new application page in UI Designer.

Step: 1
In the UI Designer whiteboard, drag & drop a container widget, give the CSS class name as “logo-box”  and set the column width to 6. We will put our company logo in this container.
![Step 1 image]
(https://dev-to-uploads.s3.amazonaws.com/i/vm2ija3vrm353h9z81fc.PNG)

Step: 2
Inside the logo-box, place the logo and title as you want. Here I am using an image widget for the logo and a text widget for the company’s name. I have added the Bonitasoft logo in UI Designer as an image asset.

Now, set the properties as given below for the image widget:
* Width = 12;	
* Source Type  = Asset;	
* Asset Name = bonitasoftLogo.png

You can download the Bonitasoft logo from this [link](https://drive.google.com/open?id=1rGZpdzD7XycsgjYFAN7BO2qkKxzQgiaV).

![Step 2 logo image]
(https://dev-to-uploads.s3.amazonaws.com/i/1d75of8l64b42kz86jeu.PNG)

Set the properties as given below for the text widget:
* Width = 12;	
* CSS classes = bonita;	
* Text = ```Bonita<span class=”soft”>soft</span>```;
* Alignment = center

![Step 2 text]
(https://dev-to-uploads.s3.amazonaws.com/i/ijl50ue768ybkfmjkqyk.PNG)

#####Note: Since the company logo and the title can be different, I suggest you write your own CSS for this part.

Step: 3
In the whiteboard outside the logo-box, drag & drop a form container widget next to the logo-box, give the CSS class name as “login-form” and set the column width to 6. We will use this form container to implement our login form.

![Step 3 image]
(https://dev-to-uploads.s3.amazonaws.com/i/leuus5fqhwugv681dalb.PNG)

Step: 4
Inside the login-form, create a title using title widget and set the properties as:
* Width = 12;	Text = Login;	Title level = Level 2;	Alignment = center

![Step 4 image]
(https://dev-to-uploads.s3.amazonaws.com/i/4i92v9ufwki0wxethccf.PNG)

Step: 5
Below the title, drag & drop a new container, give the CSS class name as “input-container” and set the column width to 12.

![Step 5 image]
(https://dev-to-uploads.s3.amazonaws.com/i/as571rqvky9cj2gdykb4.PNG)

Step: 6
Inside the input-container, drag & drop an input widget and set the properties as:
* Width = 12;	CSS classes = input-widget;	Label = Username;
* Placeholder = username@address.com (you can put whatever email address you want to);
* Type = Email

![Step 6 image]
(https://dev-to-uploads.s3.amazonaws.com/i/w7ng9nuuj1ygj1iymbpd.png)

Step: 7
Below the username, drag & drop another input widget and set the properties as:
* Width = 12;	CSS classes = input-widget;	Label = Password
* Placeholder = ……… ;	Type = Password

![Step 7 image]
(https://dev-to-uploads.s3.amazonaws.com/i/ylz85usrua3ezpi7jv76.PNG)

Step: 8
Below the password widget, drag & drop a button widget and set the properties as:
* Width = 12;	CSS classes = input-widget;	Label = Sign in;
* Alignment = center;
* Style = default;

![Step 8 image]
(https://dev-to-uploads.s3.amazonaws.com/i/iltxce4011a06dd2j9kb.PNG)

Step: 9
Now, outside the input-container, drag & drop a container, give the CSS class name as “forget-password” and set the column width to 12.

![Step 9 image]
(https://dev-to-uploads.s3.amazonaws.com/i/1g8o8yz5f1h0r4inpasq.PNG)

Step: 10
Inside the forget-password container, drag & drop a text widget and set the properties as:
* Width = 6;	Text = Forgot password?;	Alignment = right

![Step 10 image]
(https://dev-to-uploads.s3.amazonaws.com/i/k9znzw56vl126hq808l8.PNG)

Step: 11
Just to the right to the text widget, drag & drop a Link widget and set the properties as:
* Widget = 6;	Text = Click here;	Alignment = left;		Style = link

![Step 11 image]
(https://dev-to-uploads.s3.amazonaws.com/i/v5meg02ts1tpyuc0e535.PNG)

Step: 12
Go to Assets > style.css and write the CSS below:
```
.logo-box {
    height: 100vh;
    position: relative;
    text-align: center; 
    background: rgba(235,245,252,1);
} 
.logo-box img {
   width: 40%;
   margin: 0 auto;
   padding: 15% 0 0;
}
.bonita{
    font-size: 4em;
    color: #0A4561;
}
.bonita .soft {
    color: #B52A2A;
}
.login-form {
    height: 100vh;
    position: relative;
    padding: 40px 40px 60px;
    background: rgba(235,245,252,1);
    text-align: center;
}
.input-container {
    text-align: left;
    padding: 40px 40px 60px;
    margin-top: 40px;
    box-shadow: -5px -5px 10px  rgba(255,255,255,0.8),
                 5px 5px 15px rgba(0,0,0,0.1);
    border-radius: 10px;
}
.login-form h2 {
    color: #0A4561;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 6px;
}

.input-container .input-widget {
    margin-top: 20px;
}
.input-container .input-widget label {
    display: block;
    color: #868686;
    margin-bottom: 5px;
    font-size: 18px;
}
.input-container .input-widget input,
.input-container .input-widget button {
    width: 100%;
    height: 50px;
    background: rgba(235,245,252,1);
    border: none;
    outline: none;
    border-radius: 40px;
    padding: 5px 15px;
    font-size: 18px;
    color: #32a3b1;
    box-shadow: inset -2px -2px   6px rgba(255,255,255,1),
                inset 2px 2px 6px rgba(0,0,0,0.1);
}
.input-container .input-widget input::placeholder {
    color: #bdcada;
    font-size: 18px;
}

.input-container .input-widget button {
    margin-top: 20px;
    box-shadow: -2px -2px 6px rgba(255,255,255,1),
          2px 2px 6px rgba(0,0,0,0.1);
}
.input-container .input-widget button:active{
    color: #006c9c;
    margin-top: 20px;
    box-shadow: inset -2px -2px 6px rgba(255,255,255,1),
  inset 2px 2px 6px rgba(0,0,0,0.1);
    outline: none;
}
.forget-password .component {
    margin-top: 30px;
    padding-right: 0;
    color: #0A4561;
}
.forget-password a {
    padding: 0;
    color: #B52A2A;
    text-decoration: none;
}
```
Finally, save the page and click on the preview. We will see a beautiful neumorphic login page as shown below;

![Output image]
(https://dev-to-uploads.s3.amazonaws.com/i/km0gtfzc6b16s2r5fxi5.PNG)

Note: For a responsive page, Bonita Subscription users can define the size of the elements based on different screen sizes by clicking screen size icons to the top-right corner in the UI Designer.

Similarly, Bonita Community users can create a responsive login page by following the tutorial [here] (https://documentation.bonitasoft.com/bonita/7.10/responsiveness-with-community-edition). 

I would love to know if you are into neumorphism as well. What are the colors you use? Please share your tips and examples.

And remember, have fun with Bonita!