Detailed View

Targets

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.

Forms and 3D effects

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.

3D Effect in Squareness

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).

Colors

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.

Widgets

The following figure shows the widgets of Squareness. Some skins may have slightly different widgets due to the limitations of the respective skin engine.

The Widgets of Squareness