# Colores

- Mandarina
- Verde oscuro
- Verde claro
- Lavanda
- Azul cielo
- Amarillo Sol
- Beige oscuro
- Beige
- Beige claro
- Gris oscuro
- Gris
- Gris claro

# Tipografía

## Pantalla 1 82px

### Pantalla 2 54px

#### Pantalla 3 44px

##### Pantalla 4 28px

P - Pantalla 1

P - Pantalla 2

P - Pantalla 3

P - Pantalla 4

# Encabezamiento 1 54px

## Encabezamiento 2 38px

### Encabezamiento 3 24px

#### Encabezamiento 4 20px

##### Encabezamiento 5 18px

###### Encabezamiento 6 16px

P - Rúbrica 1

P - Rúbrica 2

P - Rúbrica 3

P - Rúbrica 4

P - Rúbrica 5

P - Rúbrica 6

Cuerpo grande 24px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cuerpo grande 22px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cuerpo por defecto 18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cuerpo medio 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Cuerpo pequeño 14px

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Texto semibold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Texto semibold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[Enlace de texto](/content/es/style-guide/helpers#/index.html)

# Listas

- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur
- Lorem ipsum dolor sit amet consectetur

1. Lorem ipsum dolor sit amet consectetur
2. Lorem ipsum dolor sit amet consectetur
3. Lorem ipsum dolor sit amet consectetur

# Botones

[Botón Primario Pequeño](/content/es/style-guide/helpers#/index.html) [Botón Primario Grande](/content/es/style-guide/helpers#/index.html) [Botón Primario Icono Pequeño](/content/es/index.html) [Botón Icono principal grande](/content/es/index.html) [Botón Primario Pequeño](/content/es/style-guide/helpers#/index.html) [Botón Primario Grande](/content/es/style-guide/helpers#/index.html) [Botón Primario Icono Pequeño](/content/es/index.html) [Botón Icono principal grande](/content/es/index.html)

[Botón Secundario S](/content/es/style-guide/helpers#/index.html) [Botón Secundario L](/content/es/style-guide/helpers#/index.html) [Botón Icono S secundario](/content/es/index.html) [Botón Secundario Icono L](/content/es/index.html) [Botón Enlace](/content/es/index.html) [Botón Icono de enlace](/content/es/index.html) [Botón Icono de enlace](/content/es/index.html)

[Botón Contorno Pequeño](/content/es/style-guide/helpers#/index.html) [Botón Contorno Grande](/content/es/style-guide/helpers#/index.html) [Icono pequeño del contorno de un botón](/content/es/index.html) [Icono grande del contorno del botón](/content/es/index.html) [Botón Contorno Pequeño](/content/es/style-guide/helpers#/index.html) [Botón Contorno Grande](/content/es/style-guide/helpers#/index.html) [Icono pequeño del contorno de un botón](/content/es/index.html) [Icono grande del contorno del botón](/content/es/index.html)

# Iconos

# Iconos redondeados de la línea Fuente

- Icono 1
- Icono 2
- Icono 3

# Pegar código SVG

# Utilizar una imagen

# Todos los iconos con imágenes SVG

# Prueba Texto + iconos

## Lorem ipsum dolor met, prueba imagen SVG

## Lorem ipsum dolor met, prueba fuente iconos

# Radios

Radio 12px

Radio 16px

Radio 30px

Radio 4px

Radio 6px

Radio 8px

Radio 50%

# Frontera

Borde 1 px

Borde Verde Oscuro

Borde Verde claro

# Alinear

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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

# Margen

- Margen superior 16px
- Margen superior 20px
- Margen superior 24px
- Margen inferior 32px
- Margen inferior 80px
- Margen inferior 0px
- Margen inferior 10px
- Margen inferior 12px
- Margen inferior 16px
- Margen inferior 98px
- MG Top Auto

# Sección

# Sección + Contenedor por defecto (ancho máximo 1220px)

# Sección + Contenedor lleno