Brand Story

01

Verbal

02

Logo

03

Color

04

Typography

05

Art Direction

06

Icon
Download
Contact

09

Dropdowns

Los dropdowns, también conocidos como menús desplegables, son elementos de la interfaz de usuario que permiten al usuario seleccionar una opción de una lista predefinida. Se presentan como un botón o contenedor que, al ser clickeado, revela una lista de opciones

Anatomía

Selector

Label

Placeholder text base

1

2

3

5

4

  1. Texto label
  2. Texto input
  3. Contenedor
  4. Botón accionable
  5. Indicador de estado (stroke)

Dropdown

Desktop

Option A

Option B

Option C

1

2

3

  1. Opción de selección
  2. Stroke contenedor
  3. Background

Mobile

Option A

Option B

Cancelar

1

2

5

6

3

4

  1. Opción de selección
  2. Slide mark
  3. Background shadow
  4. Background
  5. Spacer
  6. Text primary button

Estructura

La estructura de un “dropdown” se conforma a partir del espaciado que hay entre sus elementos básicos.

Selector

Large

Label

Placeholder text base

12

48

12

12

Medium

Label

Placeholder text

40

4

  1. Large: Se sugiere su uso cuando se disponga de amplio espacio de trabajo en la pantalla.
  2. Medium: Este es el tamaño predeterminado y más utilizado.

Dropdown

Mobile

Option A

Option B

Cancelar

Desktop

Option A

Option B

Option C

24

24

375

8

52

8

264

8

16

12

Tipografía

Los elementos de tipo texto en los “Input” deben configurarse en mayúsculas y minúsculas, siendo mayúscula la primer letra de la frase o nombre propio.

Selector

Elemento

Label

Placeholder text

Input text

Tamaño de fuente

12px

14px

14px

Peso de fuente

Medium

Regular

Regular

Token de la fuente

$action3-medium

$body1-regular

$body1-regular

Dropdown Mobile

Elemento

Options text

Action

Tamaño de fuente

14px

14px

Peso de fuente

Regular

Semibold

Token de la fuente

$body1-regular

$action1-semibold

Dropdown Desktop

Elemento

Options text

Tamaño de fuente

14px

Peso de fuente

Regular

Token de la fuente

$body1-regular

Estados interactivos & Color

Los estados interactivos del componente (selector y dropdown) indican su momento de uso y comunican la respuesta del sistema. Estos estados ayudan al usuario a comprender situaciones o estados como selección, múltiples opciones, hover, scroll y demás.

Selector

Label

Placeholder text base

1

2

3

5

4

Selector Enable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor stroke: $carbon light-900
  4. Botón accionable: $secondary900
  5. Contenedor background: $carbon light-100

Label

Placeholder text base

1

2

3

5

4

Selector Filled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor stroke: $carbon mid-600
  4. Botón accionable: $secondary900
  5. Contenedor background: $carbon light-100

Label

Placeholder text base

1

2

3

5

4

Selector Disabled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon mid-100
  3. Color contenedor stroke: $carbon light-600
  4. Botón accionable: $carbon mid-100
  5. Contenedor background: $carbon light-400

Dropdown Desktop

Option A

Option B

Option C

1

3

2

Dropdown Open

  1. Color options: $carbon dark-600
  2. Color contenedor stroke: $carbon light-900
  3. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

3

4

2

Dropdown Hover

  1. Color options: $carbon dark-600
  2. Color options selected: $carbon light-400
  3. Color contenedor stroke: $carbon light-900
  4. Contenedor background: $carbon light-100

Option A

Option B

Option C

5

1

3

4

2

Dropdown Hover Scroll

  1. Color options: $carbon dark-600
  2. Color options hover: $carbon light-400
  3. Color contenedor stroke: $carbon light-900
  4. Scroll: $brand-900
  5. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

2

4

5

3

Dropdown Select

  1. Color options: $carbon dark-600
  2. Color option selected: $brand-600
  3. Color contenedor stroke: $carbon light-900
  4. Color options hover: $carbon light-400
  5. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

2

4

5

6

3

Dropdown Select Scroll

  1. Color options: $carbon dark-600
  2. Color option selected: $brand-600
  3. Color contenedor stroke: $carbon light-900
  4. Color options hover: $carbon light-400
  5. Color scroll: $brand-900
  6. Contenedor background: $carbon light-100
Librería de Átomos →
Librería de Moléculas →

This is fine 🔥 | All Rights Reserved

Librería de átomos →

|

Librería de Moléculas →

ÁTOMOS

Logo

01

Color

02

Tipografía

03

Espaciados

04

Iconografía

05

MOLÉCULAS

Botones

06

Campos de texto

07

Controles de selección

08

Dropdowns

09

Modales

10

Notification (Toast)

11

Badges

12

09

Dropdowns

Los dropdowns, también conocidos como menús desplegables, son elementos de la interfaz de usuario que permiten al usuario seleccionar una opción de una lista predefinida. Se presentan como un botón o contenedor que, al ser clickeado, revela una lista de opciones

Anatomía

Selector

Label

Placeholder text base

1

2

3

5

4

  1. Texto label
  2. Texto input
  3. Contenedor
  4. Botón accionable
  5. Indicador de estado (stroke)

Dropdown

Desktop

Option A

Option B

Option C

1

2

3

  1. Opción de selección
  2. Stroke contenedor
  3. Background

Mobile

Option A

Option B

Cancelar

1

2

5

6

3

4

  1. Opción de selección
  2. Slide mark
  3. Background shadow
  4. Background
  5. Spacer
  6. Text primary button

Estructura

La estructura de un “dropdown” se conforma a partir del espaciado que hay entre sus elementos básicos.

Selector

Large

Label

Placeholder text base

12

48

12

12

Medium

Label

Placeholder text

40

4

  1. Large: Se sugiere su uso cuando se disponga de amplio espacio de trabajo en la pantalla.
  2. Medium: Este es el tamaño predeterminado y más utilizado.

Dropdown

Mobile

Option A

Option B

Cancelar

Desktop

Option A

Option B

Option C

24

24

375

8

52

8

264

8

16

12

Tipografía

Los elementos de tipo texto en los “Input” deben configurarse en mayúsculas y minúsculas, siendo mayúscula la primer letra de la frase o nombre propio.

Selector

Elemento

Label

Placeholder text

Input text

Tamaño de fuente

12px

14px

14px

Peso de fuente

Medium

Regular

Regular

Token de la fuente

$action3-medium

$body1-regular

$body1-regular

Dropdown Mobile

Elemento

Options text

Action

Tamaño de fuente

14px

14px

Peso de fuente

Regular

Semibold

Token de la fuente

$body1-regular

$action1-semibold

Dropdown Desktop

Elemento

Options text

Tamaño de fuente

14px

Peso de fuente

Regular

Token de la fuente

$body1-regular

Estados interactivos & Color

Los estados interactivos del componente (selector y dropdown) indican su momento de uso y comunican la respuesta del sistema. Estos estados ayudan al usuario a comprender situaciones o estados como selección, múltiples opciones, hover, scroll y demás.

Selector

Label

Placeholder text base

1

2

3

5

4

Selector Enable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor stroke: $carbon light-900
  4. Botón accionable: $secondary900
  5. Contenedor background: $carbon light-100

Label

Placeholder text base

1

2

3

5

4

Selector Filled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor stroke: $carbon mid-600
  4. Botón accionable: $secondary900
  5. Contenedor background: $carbon light-100

Label

Placeholder text base

1

2

3

5

4

Selector Disabled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon mid-100
  3. Color contenedor stroke: $carbon light-600
  4. Botón accionable: $carbon mid-100
  5. Contenedor background: $carbon light-400

Dropdown Desktop

Option A

Option B

Option C

1

3

2

2

Dropdown Open

  1. Color options: $carbon dark-600
  2. Color contenedor stroke: $carbon light-900
  3. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

3

4

2

Dropdown Hover

  1. Color options: $carbon dark-600
  2. Color options selected: $carbon light-400
  3. Color contenedor stroke: $carbon light-900
  4. Contenedor background: $carbon light-100

Option A

Option B

Option C

5

1

3

4

2

Dropdown Hover Scroll

  1. Color options: $carbon dark-600
  2. Color options hover: $carbon light-400
  3. Color contenedor stroke: $carbon light-900
  4. Scroll: $brand-900
  5. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

2

4

5

3

Dropdown Select

  1. Color options: $carbon dark-600
  2. Color option selected: $brand-600
  3. Color contenedor stroke: $carbon light-900
  4. Color options hover: $carbon light-400
  5. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

2

4

5

6

3

Dropdown Select Scroll

  1. Color options: $carbon dark-600
  2. Color option selected: $brand-600
  3. Color contenedor stroke: $carbon light-900
  4. Color options hover: $carbon light-400
  5. Color scroll: $brand-900
  6. Contenedor background: $carbon light-100

Dropdown Mobile

Option A

Option B

Cancelar

2

4

1

3

5

6

Dropdown Enable

  1. Color options: $carbon dark-600
  2. Color mark slider: $carbon light-600
  3. Color shadow: $carbon light-900
  4. Contenedor background: $carbon light-100
  5. Color spacer: $carbon light-600
  6. Text primary button: $secondary-900

Option A

Option B

Cancelar

3

2

2

1

4

5

6

Dropdown Select

  1. Color options: $carbon dark-600
  2. Color options selected: $brand-600
  3. Color mark slider: $carbon light-600
  4. Color shadow: $carbon light-900
  5. Contenedor background: $carbon light-100
  6. Color spacer: $carbon light-600
  7. Text primary button: $secondary-900
Librería de Átomos →
Librería de Moléculas →

This is fine 🔥 | All Rights Reserved

ÁTOMOS

Logo

01

Color

02

Tipografía

03

Espaciados

04

Iconografía

05

MOLÉCULAS

Botones

06

Campos de texto

07

Controles de selección

08

Dropdowns

09

Modales

10

Notification (Toast)

11

Badges

12

Librería de Átomos →
Librería de Moléculas →

09

Dropdowns

Los dropdowns, también conocidos como menús desplegables, son elementos de la interfaz de usuario que permiten al usuario seleccionar una opción de una lista predefinida. Se presentan como un botón o contenedor que, al ser clickeado, revela una lista de opciones

Anatomía

Selector

Label

Placeholder text base

1

2

3

5

4

  1. Texto label
  2. Texto input
  3. Contenedor
  4. Botón accionable
  5. Indicador de estado (stroke)

Dropdown

Desktop

Option A

Option B

Option C

1

2

3

  1. Opción de selección
  2. Stroke contenedor
  3. Background

Mobile

Option A

Option B

Cancelar

1

2

5

6

3

4

  1. Opción de selección
  2. Slide mark
  3. Background shadow
  4. Background
  5. Spacer
  6. Text primary button

Estructura

La estructura de un “dropdown” se conforma a partir del espaciado que hay entre sus elementos básicos.

Selector

Large

Label

Placeholder text base

12

48

12

12

Medium

Label

Placeholder text

40

4

  1. Large: Se sugiere su uso cuando se disponga de amplio espacio de trabajo en la pantalla.
  2. Medium: Este es el tamaño predeterminado y más utilizado.

Dropdown

Mobile

Option A

Option B

Cancelar

Desktop

Option A

Option B

Option C

24

24

375

8

52

8

264

8

16

12

Tipografía

Los elementos de tipo texto en los “Input” deben configurarse en mayúsculas y minúsculas, siendo mayúscula la primer letra de la frase o nombre propio.

Selector

Elemento

Label

Placeholder text

Input text

Tamaño de fuente

12px

14px

14px

Peso de fuente

Medium

Regular

Regular

Token de la fuente

$action3-medium

$body1-regular

$body1-regular

Dropdown Mobile

Elemento

Options text

Action

Tamaño de fuente

14px

14px

Peso de fuente

Regular

Semibold

Token de la fuente

$body1-regular

$action1-semibold

Dropdown Desktop

Elemento

Options text

Tamaño de fuente

14px

Peso de fuente

Regular

Token de la fuente

$body1-regular

Estados interactivos & Color

Los estados interactivos del componente (selector y dropdown) indican su momento de uso y comunican la respuesta del sistema. Estos estados ayudan al usuario a comprender situaciones o estados como selección, múltiples opciones, hover, scroll y demás.

Selector

Label

Placeholder text base

1

2

3

5

4

Selector Enable

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-400
  3. Color contenedor stroke: $carbon light-900
  4. Botón accionable: $secondary900
  5. Contenedor background: $carbon light-100

Label

Placeholder text base

1

2

3

5

4

Selector Filled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon dark-600
  3. Color contenedor stroke: $carbon mid-600
  4. Botón accionable: $secondary900
  5. Contenedor background: $carbon light-100

Label

Placeholder text base

1

2

3

5

4

Selector Disabled

  1. Color label: $carbon dark-600
  2. Color placeholder: $carbon mid-100
  3. Color contenedor stroke: $carbon light-600
  4. Botón accionable: $carbon mid-100
  5. Contenedor background: $carbon light-400

Dropdown Desktop

Option A

Option B

Option C

1

3

2

2

Dropdown Open

  1. Color options: $carbon dark-600
  2. Color contenedor stroke: $carbon light-900
  3. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

3

4

2

Dropdown Hover

  1. Color options: $carbon dark-600
  2. Color options selected: $carbon light-400
  3. Color contenedor stroke: $carbon light-900
  4. Contenedor background: $carbon light-100

Option A

Option B

Option C

5

1

3

4

2

Dropdown Hover Scroll

  1. Color options: $carbon dark-600
  2. Color options hover: $carbon light-400
  3. Color contenedor stroke: $carbon light-900
  4. Scroll: $brand-900
  5. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

2

4

5

3

Dropdown Select

  1. Color options: $carbon dark-600
  2. Color option selected: $brand-600
  3. Color contenedor stroke: $carbon light-900
  4. Color options hover: $carbon light-400
  5. Contenedor background: $carbon light-100

Option A

Option B

Option C

1

2

4

5

6

3

Dropdown Select Scroll

  1. Color options: $carbon dark-600
  2. Color option selected: $brand-600
  3. Color contenedor stroke: $carbon light-900
  4. Color options hover: $carbon light-400
  5. Color scroll: $brand-900
  6. Contenedor background: $carbon light-100

Dropdown Mobile

Option A

Option B

Cancelar

2

4

1

3

5

6

Dropdown Enable

  1. Color options: $carbon dark-600
  2. Color mark slider: $carbon light-600
  3. Color shadow: $carbon light-900
  4. Contenedor background: $carbon light-100
  5. Color spacer: $carbon light-600
  6. Text primary button: $secondary-900

Option A

Option B

Cancelar

3

2

2

1

4

5

6

Dropdown Select

  1. Color options: $carbon dark-600
  2. Color options selected: $brand-600
  3. Color mark slider: $carbon light-600
  4. Color shadow: $carbon light-900
  5. Contenedor background: $carbon light-100
  6. Color spacer: $carbon light-600
  7. Text primary button: $secondary-900

This is fine 🔥 | All Rights Reserved