# Style Guide

## Grid System

### The table of grid system sizes

| Device Width |  ≥ 992px |  < 992px |  < 767px |  < 479px |
|--------------|----------|----------|----------|----------|
| Max Container Width |  1200px |  100% |  100% |  100% |

## Spacing System

#### Spacing - Desktop

- 130 px - Paddings Tops for blocks
- 100 px - Inside of Blocks (between headlines and inside a content block)
- 130 px - Paddings Bottom for blocks

#### Spacing - Tablet

- 100 px - Paddings Tops for blocks
- 60 px - Inside of Blocks (between headlines and inside a content block)
- 100 px - Paddings Bottom for blocks

#### Spacing - Mobile

- 80 px - Paddings Tops for blocks
- 60 px - Inside of Blocks (between headlines and inside a content block)
- 80 px - Paddings Bottom for blocks

## Color Palette

### Primary

- #1c276d
- #ff7eae
- #213344

### Secondary

- #ffffff
- #e5f33c
- #f7f7f7
- #eaf7fb

## Typography

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

> Block quote

## Lists

### Ordered list

1. Item 1
2. Item 2
3. Item 3

### Unordered list

- Item A
- Item B
- Item C

### Links

[Text link](https://university.webflow.com/lesson/add-and-nest-text-links-in-webflow)

**Bold text**

_Emphasis_

Superscript

Subscript

### Headers - Desktop

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

### Headers - Tablet

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

### Headers - Mobile

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

### Body

##### Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

##### Paragraph

##### Paragraph Large

### Links

##### Link

[All services](https://www.taja.ai/templates/style-guide#)

##### Link With Icon

[All services](https://www.taja.ai/templates/style-guide#)

## Buttons

##### Primary Button

[Button Text](https://www.taja.ai/templates/style-guide#)

##### Primary Button Pink

[ Button Text](https://www.taja.ai/templates/style-guide#)

##### Secondary Button

[Button Text](https://www.taja.ai/templates/style-guide#)