Componentized Design System

All front-end components of theme’s built with TheDock are rooted in a design system. The system is carefully balanced to give you as much creative freedom as necessary while still keeping your theme and layouts consistent.

Typography

All text in your layouts are connected to a typographic hierarchy to maintain consistency throughout your theme. You can edit the individual styles as you see fit, as well as create additional styles if needed.

All type, as well as all units for spacing (more below) are defined in relative units (rem) which are connected to a base size. This base size is defined in pixels, but can also use an automated adjusting system on larger screens. The Base size is adjusted automatically on mobile screens.

Colors

All Colors in your theme are connected to a palette that can be adjusted and applied throughout at any time. The basic palette consists of five colors. Each of those colors include six tints and shades, which means your basic palette is in fact 35 different tints and shades.

Extending your palette, you can create swatches. These swatches can introduce new colors and can also use gradients and the backdrop filter (commonly referred to as the ‘glas’ effect).

Spacing

To maintain alignment and vertical rhythm in your theme all layouts follow a twelve-column grid system, automatically adjusting to mobile screens. Most themes does not extend to the edges on larger screens, and using the width controller you can define both your default width and the individual values.

Similarly, all spacing, such as margin and padding, are connected to a set of relative units. You can assign default values that are automatically applied when working on your layouts. You can also tweak these units to match your design.

UI

Your layout will use and re-use a number of smaller components, such as buttons, icons and forms. The design of these components are all edited in the user interface section of your design system. While the functionality of for instance a button is defined in the layout, the styling is aligned with your design system and updated in all instances whenever adjusted in the UI panel.