Keypad

  • The keypad is used to enter phone numbers in Dialer.

  • The keypad anatomy includes digit key labels and letter key labels.

  • Keypad specifications are provided for tall, standard, and short screens, and with a divider.

  • Styles for the keypad include typography, color, and sizing details.

The keypad allows users to enter phone numbers in Dialer.

Anatomy

1.Digit key label
2. Letter key label

Specs - Keypad

callout icon
Layout
Margins, keylines, and padding for various screen sizes
callout icon
Layout labels
Definitions of E, M, KL, P, Flex

Keypad in tall screen

Keypad in standard screen

Keypad in short screen

Keypad with divider

Styles

callout icon
Typography guidelines
Scale and grid references, typographic examples, and more
callout icon
Color guidelines
Palettes, elevation and opacity values, and more

Typography

Type style Typeface Weight Size (dp)
Body 1 Roboto Regular 32
Subtitle 3 Roboto Regular 18

Color

Element Color(day mode) Color (night mode)
Primary type / icons White White @ 88%
Divider line White @ 22% White @ 12%

Sizing

Element Size (dp)
Tertiary icon 24
Touch target 76
Divider line thickness 1

Motion