Resolution:
To change the background color go and change the colors in CSS sheets: The steps are as follows:
1. On the left menu click on Forms, right click on the design panel:
Add Resources -> Form -> Form Resource Store
2. Double click Form Resource Store and in that therewill be WEB-INF (leave it as it is). Right click and add “web resources folder”. (Add Resources -> Form -> Web Resources Folder)
3. Double click Web Resources Folder and add style sheet. (Add Resources -> Form -> Style Sheet).
4. The style sheet below is the default one that is being used for the forms being developed. One can go and change the background color / font color and any normalized changes as required. For example, consider the whole form to be in the same color. For this go to the edit region of the stylesheet and make the following:

.tibfr_ctrl_normal {background-color:#BDBDB6; padding:0px;}
.tibfr_ctrl_normal input.btn {font-size:small;}
.tibfr_ctrl_normal .tibfr-form-label {font-family: Verdana,Arial,Helvetica,sans-serif;font-size:10px;font-weight:bold; text-decoration:none; color: #333333; background-color: #BDBDB6;}
.tibfr_ctrl_normal .tibfr-grid-header { font-family: Verdana,Arial,Helvetica,sans-serif;font-size:10px;font-weight:bold; text-decoration:none;     color: #333333; background-color: #BDBDB6;}
.tibfr_ctrl_normal .tibfr-form-detail{    font-family: Verdana,Arial,Helvetica,sans-serif;font-size:10px;font-weight:normal;text-decoration:none;color: 000000;background-color: #BDBDB6;} .tibfr_ctrl_normal .tibfr-grid-body {font-family: Verdana,Arial,Helvetica,sans-serif;font-size:10px;font-weight:normal; text-decoration:none; color: #000000;background-color: #BDBDB6;} .tibfr_ctrl_normal a.url {font-size:small;}

5. One can also customize the changes as needed by writing own code in the style sheet by replicating the content at the top of the file. In the TIBCO BussinessWorks WorkFlow at the top the following code snippet is there.
/* Define your own style(s) here. A template is provided below. */ /* Replace &ltcustom_style> by required style name and modify it according to needs. */ /* Then uncomment the entire block. */

6. Once done with the changes to the style sheet click the form (on the left panel) for which changes need to be made. In the configuration panel map the Custom Stylesheet by clicking the browse button. The sheet developed is present under ProjectName -> Forms-> Form Resource Store -> Web Resources Folder -> CustomStyleSheet. Click ok. If any new styles are added then they would be visible in the drop-down menu of “Style” in each configuration panel.

How to change the form layout / front-end GUI in BusinessWorks Form Builder