Keyboards: sizes, colours, text and effects — iOS 27

Read when: you need the sizes, colours, text and effects of keyboards on iOS 27, as Apple's kit draws them. Owns: Keyboards in Apple's iOS 27 kit: sizes, colours and states, text, effects, kit notes.

Source: specs/keyboards.txt from Apple's iOS 27 UI Kit (Sketch, v27.1.3), read 2026-11-01. Values are copied from the kit; derived values say so.

Components and anatomy are in keyboards.md.

Sizes

Key masters (iPhone and iPhone Duo)

Masters are 50×43 (Dark iPhone: 48×43); instances are resized in the key pads. Cells give size, corner radius, label font and size.

Fonts are SFCompact-Regular unless the cell says otherwise. Some masters pad the label box (UpperCase, Keyboard Switch pad0,0,2,0; LowerCase pad0,0,3,0; .com pad0,0,5,0; Delete pad2,0,0,0).

iPhone and iPhone Duo key pad rows (Letters Upper Case)

Row heights: iPhone 43; Duo Outer Portrait 42; Outer Landscape 33.3 (Light 33.33); Inner Portrait 49.67; Inner Landscape 42.33.

Numbers and Punctuation / Punctuation and Special Characters: rows 1 and 2 are 10 keys at the Row 1 width; row 3 has two side keys and 5 middle keys:

Bottom rows

In Email, URL and Web Search the middle group keeps the Default space width and splits it: Email adds "@" and "." keys of 43.33; Web Search adds a 33.33 "." key and uses a 63-wide Return/Prominent on iPhone (Duo keeps the full Enter width).

Other parts

Colours and states

Keyboard background

Keys

Keyboard chrome

Accessory bars

The Find stepper default instance shows Previous Enabled and Next Disabled; Light Find and Replace uses Previous Disabled, Dark uses Previous Enabled.

Text

Every layer that names 06 Body/1 Default matches the style's font, size and line height (SFPro-Regular 17 lh22).

Effects

Liquid Glass/Dark/Keyboard Background
  fill #000000@25% + #CCCCCC (blend plus-darker) + #0D0D0D (blend plus-lighter) + #262626@90% (blend luminosity)
  inner-shadow x0 y0 blur8 spread0 #000000@10% (blend overlay)
  inner-shadow x0 y-1.5 blur0.25 spread-1.25 #4C4C4C (plus-lighter)
  inner-shadow x0 y-1.5 blur0.25 spread0 #1A1A1A (blend color-dodge)
  inner-shadow x0 y1.5 blur0.25 spread-1.25 #4C4C4C (plus-lighter)
  inner-shadow x0 y1 blur0.25 spread0 #1A1A1A (blend color-dodge)
  blur glass radius8 saturation1 brightness1 distortion0.4 depth0.8 chromatic0

Dark iPhone Alpha glass group (same style name, stored differently)
  fill as above · inner-shadow x0 y0 blur8 spread0 #000000@10% (overlay)
  inner-shadow x0 y-1.5 blur0.25 spread-1.25 #4C4C4C (plus-lighter) · inner-shadow x0 y1.5 blur0.25 spread-1.25 #4C4C4C (plus-lighter)
  inner-shadow x0 y-1 blur0.25 spread0 #1A1A1A (color-dodge) · inner-shadow x0 y1 blur0.25 spread0 #1A1A1A (color-dodge)
  blur glass radius8 saturation1 brightness1 distortion0.4 depth0.8 chromatic0

Liquid Glass/Light/Keyboard Background
  fill #D4D4D4@74% (blend luminosity) + #1B1B1B (blend plus-lighter) + #E6E9ED (blend plus-darker)
  inner-shadow x0 y0 blur8 spread1 #000000@20% (plus-lighter)
  inner-shadow x0 y-1 blur2 spread0 #1A1A1A (plus-lighter) · inner-shadow x0 y1 blur2 spread0 #1A1A1A (plus-lighter)
  inner-shadow x0 y2 blur0.25 spread-1.5 #FFFFFF@70%
  blur glass radius4 saturation1 brightness1 distortion0.3 depth0.8 chromatic0
  corners 27 smoothing0.6 style1

The accessory bars use Liquid Glass/{Dark,Light}/Regular - Small; its full stack is listed in toolbars.md (Effects) and materials.md. A script check confirmed that every inline effect list on this page equals its named style, except the Dark iPhone Alpha group above.

Kit notes

• The page has no documentation boards. Its header (_Header, title "Keyboards") has a description that the dump keeps only up to "On devices without physical keyboards, t".
• The examples show each keyboard type in place: alpha (upper and lower case), numeric, punctuation, email, URL and web search versions of the iPhone keyboard (the latter three only change the bottom row), the number pad, the emoji keyboard, the iPad keyboard, and the iPhone Duo keyboards. All sit at the bottom edge of the screen.
• On iPhone the keyboard sits in one glass panel with the accessory bar floating 10 pt above it (derived: 58 − 48). On iPhone Duo the accessory bar is a search field with a close button, 12 pt above the panel.
• specs/change-log.txt: 27.1.0 added iPhone Duo symbols and examples, keyboards among them.

Finding it in the spec