Squareness was from the beginning meant to be minimalistic. There should be no gradients and no curved forms. One additional concern was that it should be easy to the eyes. Squareness is designed to be used everyday in business as well as in spare time computing. So, much time was also spent on the calibration of colors.
As the name suggests, Squareness is dominated by squares or more generally rectangles. You won't find a single round form here. Even the radio buttons are squares.
Squareness is a flat skin and uses only few 3D effects. Actually there is only one 3D effect that can be seen in nearly all parts of the skin.
The above image shows the 3D effect on a button. Normally the button has a brownish color and a nearly black border. When the mouse cursor hovers above the button the color changes to a light green thus emulating some sensor that puts on some light inside the button making it shine. When the button is pressed the light stays on but since all of the button but the border is pressed inside the monitor, a shadow gets visible on the left and upper edges.
You will find the same coloring and the same effect on every other widget that can be pressed (e.g. scroll bars, combo boxes, check boxes).
The following table presents all the colors in RGB and hexadecimal form with the name of each color and an annotation explaining where the colors are used.
| Color sample | Color (r,g,b) (0 ≤ r,g,b ≤ 255) | Color #rrggbb | Name | Notes on usage |
|---|---|---|---|---|
| 247,242,225 | #F7F2E1 | window | window background, caption background, tab background | |
| 34,57,73 | #223949 | border | active window border, control border | |
| 184,175,119 | #B8AF77 | inactive window border | inactive window background, inactive tab rollover border | |
| 134,144,150 | #869096 | disabled border | border for disabled controls | |
| 170,59,34 | #AA3B22 | default button border | ||
| 219,196,99 | #DBC463 | normal control background | ||
| 211,211,42 | #D3D32A | pressed control background | background for a pressed control or a control above which the mouse cursor hovers; this color is also used for the progress bar fill | |
| 163,159,28 | #A39F1C | pressed control shadow background | This color is used for the shadow in the background of a pressed or selected control | |
| 236,236,194 | #ececc2 | tab page background | ||
| 245,246,220 | #F5F6DC | progress bar background | This color is a bit brighter than the window color. It is used as the background of progress bars, scroll bars, menus and group box headers. This color very subtly sets the said controls apart from the rest of a window. | |
| 237,225,185 | #EDE1B9 | scroll bar pressed background | When the scroll bar itself is pressed (neither the buttons nor the thumb) this color is used as the background color to indicate this. | |
| 255,255,255 | #FFFFFF | text input background | Used everywhere where text can be typed in. | |
| 0,0,0 | #000000 | text color | Any text anywhere uses this color. |
The following figure shows the widgets of Squareness. Some skins may have slightly different widgets due to the limitations of the respective skin engine.
