# Configuration

***

### Primary colour

**Field type**:\
Color picker

**Example value**:\
`#0c72a7`

**Path to the configuration**:\
Tab "Layout" => Block "Main colours"

**Technical name**:\
`sw-color-brand-primary`

{% hint style="info" %}
ThemeWare® variables ($twt-...) are currently not possible in this field.

Variable: **$sw-color-brand-primary**
{% endhint %}

***

### Secondary colour

**Field type**:\
Color picker

**Example value**:\
`#404b58`

**Path to the configuration**:\
Tab "Layout" => Block "Main colours"

**Technical name**:\
`sw-color-brand-secondary`

{% hint style="info" %}
ThemeWare® variables ($twt-...) are currently not possible in this field.

Variable: **$sw-color-brand-secondary**
{% endhint %}

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`#eaeaf0`

**Path to the configuration**:\
Tab "Layout" => Block "Main colours"

**Technical name**:\
`sw-border-color`

{% hint style="info" %}
ThemeWare® variables ($twt-...) are currently not possible in this field.

Variable: **$sw-border-color**
{% endhint %}

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`#fafafa`

**Path to the configuration**:\
Tab "Layout" => Block "Main colours"

**Technical name**:\
`sw-background-color`

{% hint style="info" %}
ThemeWare® variables ($twt-...) are currently not possible in this field.

Variable: **$sw-background-color**
{% endhint %}

***

### Primary colour (light)

**Field type**:\
Color picker

**Example value**:\
`#2a96cf`

**Path to the configuration**:\
Tab "Layout" => Block "Main colours"

**Technical name**:\
`twt-color-brand-primary-light`

{% hint style="info" %}
A bright shade of the primary colour.

Variable: **$twt-color-brand-primary-light**
{% endhint %}

***

### Primary colour (dark)

**Field type**:\
Color picker

**Example value**:\
`#104d6e`

**Path to the configuration**:\
Tab "Layout" => Block "Main colours"

**Technical name**:\
`twt-color-brand-primary-dark`

{% hint style="info" %}
A darker shade of the primary colour.

Variable: **$twt-color-brand-primary-dark**
{% endhint %}

***

### Secondary colour (light)

**Field type**:\
Color picker

**Example value**:\
`#4b5867`

**Path to the configuration**:\
Tab "Layout" => Block "Main colours"

**Technical name**:\
`twt-color-brand-secondary-light`

{% hint style="info" %}
A bright shade of the secondary colour.

Variable: **$twt-color-brand-secondary-light**
{% endhint %}

***

### Secondary colour (dark)

**Field type**:\
Color picker

**Example value**:\
`#353e49`

**Path to the configuration**:\
Tab "Layout" => Block "Main colours"

**Technical name**:\
`twt-color-brand-secondary-dark`

{% hint style="info" %}
A darker shade of the secondary colour.

Variable: **$twt-color-brand-secondary-dark**
{% endhint %}