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

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

Source: specs/toolbars.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 toolbars.md.

Sizes

Toolbar buttons

Derived checks: 160 = 6 + 3 × 36 + 2 × 20 + 6; 164 = 10 + 3 × 36 + 2 × 18 + 10.

Bars

Other parts

Colours and states

Bar backgrounds (as stored)

The x. Kit/… swatches are kit helper colours in tokens.txt. The bars have no glass of their own; glass sits on the buttons, groups and fields. In the iPhone examples a Scroll Edge Effect/Top - Soft (no text) instance sits behind the status and navigation bars, with fill overrides #000000 {Backgrounds Grouped/Dark - Base/Primary} (Dark) and #FFFFFF {Backgrounds/Light/Primary} (Light).

Glass containers (all toolbar buttons, groups, search fields, segmented control)

A script check confirmed that every inline effect list on this page equals its named style in tokens.txt.

Content states

Inactive containers keep the Default content colours.

Titles

Search fields

Segmented control (iPad search row)

Sheet header buttons and grabber

Light Active and Light Inactive sheet buttons store the same values. Dark has Dark/Primary and Dark/Active/Primary (identical), and no Inactive set.

Text

No text layer on this page stores tracking (kern), so tracking is 0 throughout.

Effects

Glass styles used on this page, exactly as stored (also in materials.md):

Liquid Glass/Dark/Regular - Small
  fill #000000 (blend screen) + #999999@17%
  inner-shadow x20 y0 blur20 spread-30 #B2B2B2 (plus-darker) · inner-shadow x-20 y0 blur20 spread-30 #B2B2B2 (plus-darker)
  inner-shadow x0 y-4 blur0.5 spread-4 #666666 (plus-lighter) · inner-shadow x0 y4 blur0.5 spread-4 #666666 (plus-lighter)
  inner-shadow x0 y-1 blur0 spread0 #171717 (plus-lighter) · inner-shadow x0 y1 blur0 spread0 #171717 (plus-lighter)
  inner-shadow x0 y-40 blur10 spread-40 #1A1A1A (plus-lighter) · inner-shadow x0 y40 blur10 spread-40 #1A1A1A (plus-lighter)
  shadow x0 y8 blur15 spread0 #000000@4%
  shadow x0 y0 blur0 spread0.5 #BFBFBF (plus-darker) · shadow x-1.25 y0 blur0 spread-0.75 #BFBFBF (plus-darker) · shadow x1.25 y0 blur0 spread-0.75 #BFBFBF (plus-darker)
  blur glass radius6 saturation1 brightness1 distortion0.4 depth0.8 chromatic0

Liquid Glass/Light/Regular - Small
  fill #F8F8F8@20% (blend luminosity) + #000000@25% + #FFFFFF@25% + #444444@60% (blend plus-lighter)
  shadow x0 y8 blur15 spread0 #000000@2%
  shadow x0 y0 blur0 spread0.5 #DBDBDB (plus-darker) · shadow x-1.25 y0 blur0 spread-0.75 #DBDBDB (plus-darker) · shadow x1.25 y0 blur0 spread-0.75 #DBDBDB (plus-darker)
  inner-shadow x-20 y0 blur20 spread-30 #D9D9D9 (plus-darker) · inner-shadow x20 y0 blur20 spread-30 #D9D9D9 (plus-darker)
  inner-shadow x0 y-4 blur0.5 spread-4 #666666 (plus-lighter) · inner-shadow x0 y4 blur0.5 spread-4 #666666 (plus-lighter)
  inner-shadow x0 y-1 blur0 spread0 #171717 (plus-lighter) · inner-shadow x0 y1 blur0 spread0 #171717 (plus-lighter)
  inner-shadow x0 y40 blur30 spread-40 #E6E6E6 (plus-darker)
  inner-shadow x0 y-40 blur10 spread-40 #282828 (plus-lighter) · inner-shadow x0 y40 blur10 spread-40 #282828 (plus-lighter)
  blur glass radius6 saturation2 brightness1 distortion0.4 depth0.8 chromatic0

Liquid Glass/Dark/Regular - Small - Tinted
  fill #000000 (blend screen)
  inner-shadow x20 y0 blur20 spread-30 #D9D9D9 (plus-darker) · inner-shadow x-20 y0 blur20 spread-30 #D9D9D9 (plus-darker)
  inner-shadow x0 y-4 blur0.5 spread-4 #999999 (plus-lighter) · inner-shadow x0 y4 blur0.5 spread-4 #999999 (plus-lighter)
  inner-shadow x0 y-1 blur0 spread0 #262626 (plus-lighter) · inner-shadow x0 y1 blur0 spread0 #262626 (plus-lighter)
  inner-shadow x0 y-40 blur10 spread-40 #111111 (plus-lighter) · inner-shadow x0 y40 blur10 spread-40 #111111 (plus-lighter)
  shadow x0 y8 blur15 spread0 #000000@4%
  shadow x-1.25 y0 blur0 spread-0.75 #E6E6E6 (plus-darker) · shadow x1.25 y0 blur0 spread-0.75 #E6E6E6 (plus-darker)
  blur glass radius6 saturation1 brightness1 distortion0.4 depth0.8 chromatic0

Liquid Glass/Light/Regular - Small - Tinted
  same as the Dark Tinted style except the fill: #FFFFFF (blend multiply)

Liquid Glass/Dark/Regular - Small - Inactive
  fill #767680@24% {Fills/Dark/3 Tertiary} · shadow x0 y0 blur0 spread0.5 #E6E6E6 (plus-darker)

Liquid Glass/Light/Regular - Small - Inactive
  fill #000000@2% {Fills/Light/5 Quinary} · shadow x0 y0 blur0 spread0.5 #EBEBEB (plus-darker)

Other effects:

Kit notes

• The page has no documentation boards. Its only notes are the page header (_Header, title "Toolbars"; the dump stores its description only up to "A toolbar provides convenient access to") and two section labels, "Toolbar - Top" and "Toolbar - Bottom".
• The examples show the intended stacking on iPhone: status bar, then the navigation bar at y 62, a soft scroll edge effect behind both, and the bottom toolbar 32 pt above the bottom of the 874 pt screen (derived: 874 − 786 − 56 = 32). On iPad the bottom toolbar sits at y 776 (Dark) or 780 (Light) next to a floating window resize handle.
• On iPhone Duo the examples put toolbar buttons in a vertical bar on the edge of the screen: a vertical status bar above a vertical button group, and a camera punch-out area on the outer display.
• specs/change-log.txt: 27.1.0 added iPhone Duo symbols and examples, toolbars among them; 27.1.1 says "Fixed several layout bugs with toolbars".

Finding it in the spec