Keypad

  • The keypad enables users to input phone numbers within the Dialer application.

  • It features a consistent layout across various screen sizes (tall, standard, short) with clear margins, keylines, and padding.

  • Keypad elements adhere to specific typography, color, and sizing guidelines for visual consistency.

  • Roboto is the primary typeface, with color variations for day and night modes to ensure readability.

  • The keypad design incorporates motion, though specific details are not outlined in this document.

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