Switches — macOS 27

Read when: you need an exact macOS 27 value for switches (size, colour, text, effect) as Apple's kit draws it. Owns: Switches in Apple's macOS 27 kit: components, anatomy, sizes, colours and states, effects, kit notes.

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

Components

The page has 210 components in two families:

The building-block names start with the glyph 􀻃 (U+100EC3).

• The Active Off clicked state is named Active, Off, 1 - Clicked. Its number is 1, not 3, unlike Active, On, 3 - Clicked.
• The switch has no label layer.
• The kit doesn't say what Active and Inactive stand for on this page.

Anatomy

Switch

The component itself is the track: a capsule (corners max) carrying the track style. Its children:

• In Content Area, Active On Clicked has no Fill Color layer. The blue is the track's own fill.
• The Fill Color layer is listed before the Knob.

Clicked knob (􀻃/…/Knob/<Size>)

Three layers, in the order the spec lists them:

Sizes

Track and idle knob

Knob corners:

Derived values:

• Knob inset = knob x in the Off state: 3 (XL), 2 (Lg, Rg, Sm), 1.5 (Mn). The vertical inset is the same.
• Knob travel = On x − Off x: XL 27, Lg 22, Rg 18, Sm 14, Mn 12. It equals track width − knob width − 2 × inset (Rg: 54 − 32 − 4 = 18).
• The knob is wider than it is tall: width ÷ height = 47/30, 38/24, 32/20, 26/16 and 21/13.
• Geometry is identical across appearance, context and state within a size (checked across all 40 switches per size).

Clicked knob

The clicked knob instance sits over the track and overflows it:

The same masters are used in Content Area and Over-glass.

The clicked knob masters:

Derived values:

• Clicked ÷ idle knob size: Rg 50/32 wide and 31/20 tall; XL 73/47 and 46/30.
• The clicked knob's vertical centre matches the idle knob's in every size (Rg: −3.5 + 31 ÷ 2 = 12 = 2 + 20 ÷ 2).
• Its horizontal centre matches in Sm, Rg and Lg (Rg Off: −7 + 25 = 18 = 2 + 16). It doesn't in Mn (0.5 to the left when Off, 0.5 to the right when On) or XL (1 to the right when Off, 1 to the left when On).

Colours and states

The tables give the paint stored on each layer. "Track" is the component layer. Shared track and knob styles are in control-styles-content-area.md / control-styles-over-glass.md.

• Values are the same in every size (each appearance, context and state was checked across all five sizes).
• The idle knob uses the style Content Area/Light/Knobs - Toggle/01 - Idle in all four appearance and context pairs: fill #FFFFFF · shadow x0 y3 blur36 spread0 #000000@5% · corners 50.
• Dark, Content Area overrides that knob's fill to #FFFFFF@85% and its corners to max.
• Knob positions: Off states have the knob at the Off x; On states at the On x; Clicked states use the clicked knob instance.

Light, Content Area

Idle knob: fill #FFFFFF, shadow x0 y3 blur36 spread0 #000000@5%, corners 50.

Light, Over-glass

Idle knob: fill #FFFFFF, shadow x0 y3 blur36 spread0 #000000@5%, corners 50.

Dark, Content Area

Idle knob: style Content Area/Light/Knobs - Toggle/01 - Idle, fill #FFFFFF@85%, shadow x0 y3 blur36 spread0 #000000@5%, corners max.

Dark, Over-glass

Idle knob: fill #FFFFFF, shadow x0 y3 blur36 spread0 #000000@5%, corners 50.

What changes for Disabled

From the tables above:

• Active, On, Disabled has the same layers and values as Active, On, Idle in all four appearance and context pairs. The kit stores no opacity or dimmed fill for it.
• Active, Off, Disabled matches Active, Off, Idle in Content Area. On Over-glass it trades the overlay track for a flat fill: Light #000000@15%, Dark #FFFFFF@14%.
• Inactive, On, Disabled lightens the track in every pair. Content Area: Tertiary instead of Primary. Over-glass Light: #000000@5% instead of 15%. Over-glass Dark: #FFFFFF@10% instead of 22%.
• Inactive, Off, Disabled differs from Idle only on Over-glass.
• No switch uses the kit's Knobs - Toggle/04 - Disabled or Tracks/Active, Filled, 04 - Disabled styles, though both are in control-styles-content-area.md / control-styles-over-glass.md.

Effects

The clicked Knob layer has the same effects in Light and Dark. Only distortion and depth vary by size (see the masters table):

• inner-shadow x0 y−4 blur0.5 spread−4 #666666 (blend plus-lighter)
• inner-shadow x0 y4 blur0.5 spread−4 #666666 (blend plus-lighter)
• inner-shadow x0 y−1 blur0 spread−0.25 #171717 (blend plus-lighter)
• inner-shadow x0 y1 blur0 spread−0.25 #171717 (blend plus-lighter)
• inner-shadow x0 y20 blur20 spread−20 #F2F2F2 (blend plus-darker)
• inner-shadow x0 y−40 blur10 spread−40 #333333 (blend plus-lighter)
• inner-shadow x0 y40 blur10 spread−40 #333333 (blend plus-lighter)
• blur glass radius0 saturation1 brightness1 distortion 0.08–0.15 depth 0.3–0.46 chromatic0.4

The layer has no style link. Its values match the shared style Content Area/Light/Knobs - Toggle/03 - Clicked in specs/tokens.txt except for distortion and depth (the style has 0.12 / 0.3).

Kit notes

The page has no documentation boards and no notes from Apple. Its only top-level text layers are headings:

• "Toggles", with "Light" and "Dark" headings.
• The section labels "Content Area" and "Over-Glass", each split into "Active" and "Inactive".

Finding it in the spec