---
# System prepended metadata

title: Page navigation

---


# Page navigation

## Sizing

![](https://i.imgur.com/BdzsPWx.png)


|        | Attribute | Mobile    | Tablet   | Desktop  |
| ------ | --------- | --------- | -------- | -------- |
| **1. Page title** | Font-size | Size 10 <br /> Light
| **2. Navigation menu container** | Height | 6.4rem
| **3. Page title margin** | Top | 2.5rem | 3.5rem
| **5. Page title padding** | Bottom | 1.5rem | 2.5rem
| **5. Navigation menu padding** | Bottom | 3.5rem | 6rem

# Navigation menu

## Sizing

![](https://i.imgur.com/EX6wiC1.png)

|        | Attribute | Mobile    | Tablet   | Desktop  |
| ------ | --------- | --------- | -------- | -------- |
| **1. Active label** | Font-size <br /> Weight | Size 5 <br /> Bold
| **2. Inactive label** | Font-size <br /> Weight | Size 5 <br /> Regular
| **3. Underliner** | Width <br /> Height | 100%  <br /> 0.3rem |
| **4. Container padding** | Top <br /> Bottom| 1.4rem <br /> 1.4rem | 1.9rem <br /> 1.9rem
| **5. Container margin** | Right | 2.5rem | 4rem | 5rem |

## Color
### Negative
![](https://i.imgur.com/ePxq3KN.png)


|        | Attribute | Value  |
| ------ | --------- | --------- |
| **1. Active** | Label text color <br/> Underliner color | White <br/> White
| **2. Hover** | Label text color <br/> Underliner color | White <br/> White 20% opacity
| **3. Inactive** | Label text color <br/> Underliner color | White <br/> White 20% opacity

### Positive
![](https://i.imgur.com/mfyhLb7.png)


|        | Attribute | Value  |
| ------ | --------- | --------- |
| **1. Active** | Label text color <br/> Underliner color | Purple <br/> Purple
| **2. Hover** | Label text color <br/> Underliner color | Purple <br/> Purple 20% opacity
| **3. Inactive** | Label text color <br/> Underliner color | Black <br/> 0% opacity



# ID Panel

## Sizing
### Type 1

![](https://i.imgur.com/a3mz4TA.png)


|        | Attribute | Mobile    | Tablet   | Desktop  |
| ------ | --------- | --------- | -------- | -------- |
| **1. Icon** | Font-size <br/> Margin-right | 2.2rem <br/> 1rem | 3.2rem <br/> 1rem
| **2. ID Panel title** | Font-size <br /> Weight | Size 7 <br /> Light
| **3. Page container** | Padding | 2rem | 4rem | 
| **4. Rounded corner** | Top, right, bottom, left | 0.5rem
| **5. Padding** | Bottom | 2.5rem

The amount of columns can vary between 3, 4 or 6 depending on the content of the ID Panel.


# Page content

## Sizing

![](https://i.imgur.com/6YvH6lx.png)


|        | Attribute | Mobile    | Tablet   | Desktop  |
| ------ | --------- | --------- | -------- | -------- |
| **1. Content title** | Font-size <br /> Weight <br /> Padding-bottom | Size 9 <br /> Light <br /> 1.5rem | Size 9 <br /> Light <br /> 2.5rem
| **2. Section title** | Font-size <br /> Weight <br /> Padding-bottom | Size 7 <br /> Bold <br /> 1.5rem | Size 7 <br /> Bold <br /> 2.5rem
| **3. Subsection title** | Font-size <br /> Weight <br /> Padding-bottom | Size 5 <br /> Bold <br /> 1rem | Size 5 <br /> Bold <br /> 1.5rem
| **4. Description** | Font-size <br /> Padding-bottom | Size 4 <br /> 2rem
| **5. (Sub-)section content padding** | Bottom | 2rem
| **6. Additional padding** | Bottom | 2.5rem


# Page container

## Sizing

![](https://i.imgur.com/lqJAEdm.png)



|        | Attribute | Mobile    | Tablet   | Desktop  |
| ------ | --------- | --------- | -------- | -------- |
| **1. Page container** | Padding | 2rem | 4rem | 
| **2. Content title** | Font-size <br /> Weight <br /> Padding-bottom | Size 9 <br /> Light <br /> 1.5rem | Size 9 <br /> Light <br /> 2.5rem
| **3. Content description** | Font-size <br /> Padding-bottom | Size 4 <br /> 2rem
| **4. Additional padding** | Bottom | 1.5rem | 2rem



---

# Gradient banner

## Sizing

![](https://i.imgur.com/2EkMBOn.png)


|        | Attribute | Mobile    | Tablet   | Desktop  |
| ------ | --------- | --------- | -------- | -------- |
| **1. Gradient banner** | Height | 25rem | 35rem | 




## Colors

![](https://i.imgur.com/DAxvyfr.png)


|        | Attribute | Mobile    | Tablet   | Desktop  |
| ------ | --------- | --------- | -------- | -------- |
| **1. Gradient colors** | Color-stop1 <br/> Color-stop2 <br/> Color-stop3 | Purple <br/> Purple <br/> Turquoise | 
| **2. Gradient angle** | Angle | 135deg