The UI Kit is made in Sketch. These guidelines are for Kambi designers and third party designers who plan to contribute to the Design System.

Symbol Naming Convention

We use the standard Sketch way of organizing symbols in folders by using the slash symbol (/) in the symbol name. Look in Sketch under the “Insert/Symbols/Document” menu to get an understanding of our structure. Sub symbols of a symbol are located in the Assets folder.

Layer Names

Give the layer a name that explains the layer’s content. If the layer holds editable content you will need to think about that the layer name will be become the label in Sketch’s inspector panel.

Layer Order

Put the layers in a top down order. Keep in mind that the order the layers are created will determine the order in which the content will be edited in the Sketch inspector panel.

Layer Resizing Settings

Set the Pin to Edge and Fix Size settings to allow for stretching the component horizontally to fit different column widths.


When branding a Kambi client for a new Partner, use a plugin to replace Roboto with the new font. We recommend the plugin “Fontily”. We recommend using as few typefaces as possible as every added typeface adds to the loading time.


Use colors from the UI Kit’s color library. If you are branding a Kambi client for a Partner, edit the Partner colors in the color library. Please refrain from adding more color swatches in the library, unless it’s absolutely necessary.