All the buttons are defined in XML:
_Common.svg
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linearGradient1">
<stop stop-color="#ffb100" offset="0"/>
<stop stop-color="#ffb100" stop-opacity="0.498039" offset="0.5"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
<linearGradient y2="-0.000052" x2="0.519006" y1="2.485417" x1="0.527431" id="linearGradient11" xlink:href="#linearGradient1"/>
<linearGradient id="linearGradient2">
<stop stop-color="#ffff00" offset="0"/>
<stop stop-color="#ffff00" stop-opacity="0.498039" offset="0.5"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
<linearGradient y2="-0.000052" x2="0.519006" y1="2.485417" x1="0.527431" id="linearGradient12" xlink:href="#linearGradient2"/>
<linearGradient id="linearGradient3">
<stop stop-color="#ffb1ff" offset="0"/>
<stop stop-color="#ffb1ff" stop-opacity="0.498039" offset="0.5"/>
<stop stop-color="#ffffff" offset="1"/>
</linearGradient>
<linearGradient y2="-0.000052" x2="0.519006" y1="2.485417" x1="0.527431" id="linearGradient13" xlink:href="#linearGradient3"/>
</defs>
<metadata>image/svg+xml</metadata>
</svg>
Button.svg
<control class="Button">
<svg for="normal" width="70" height="30">
<rect fill="url(#linearGradient11)" stroke-width="0.799956" stroke-opacity="0.805" ry="5.809992" y="0" x="0" height="100%" width="100%"/>
</svg>
<svg for="prelight" width="70" height="30">
<rect fill="url(#linearGradient12)" stroke-width="0.799956" stroke-opacity="0.805" ry="5.809992" y="0" x="0" height="100%" width="100%"/>
</svg>
<svg for="clicked" width="70" height="30">
<rect fill="url(#linearGradient13)" stroke-width="0.799956" stroke-opacity="0.805" ry="5.809992" y="0" x="0" height="100%" width="100%"/>
</svg>
</control>
Label.svg
<control class="Label" passive="1">
<svg for="normal" width="70" height="30">
<text style="font-size: 12; fill:#A0A0A0; font-style:bold; stroke-width:2px; font-family: verdana, arial, sans-serif;" id="text3208" y="100%" x="0" xml:space="preserve">Hello !</text>
</svg>
<svg for="prelight" width="70" height="30">
<text style="font-size: 12; fill:#ffffff; font-style:bold; stroke-width:2px; font-family: verdana, arial, sans-serif;" id="text3208" y="100%" x="0" xml:space="preserve">Hello !</text>
</svg>
<svg for="clicked" width="70" height="30">
<text style="font-size: 12; fill:#FF8080; font-style:bold; stroke-width:2px; font-family: verdana, arial, sans-serif;" id="text3208" y="100%" x="2" xml:space="preserve">Hello !</text>
</svg>
</control>
This surface enables you do easily define your own custom controls.
I think that this will be the base for Concept Client 4.0 IF and only IF I decide do get rid of GTK+. Gtk is a fabulous UI framework, but moving to my own, backwards-compatible framework, it will give Concept Applications a nicer look and feel. This is just an idea. Most probably I will use both GTK+ and SVG surfaces.
Now, this is Gyro!