Buttons: colours and states, text and effects — macOS 27

Read when: you need the colours and states, text and effects of buttons on macOS 27, as Apple's kit draws them. Owns: Buttons in Apple's macOS 27 kit: colours and states, text, effects, kit notes.

Source: specs/buttons.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 and anatomy are in buttons.md.

Colours and states

How to read the tables:

• Each row is one appearance · context · state. It holds for all five sizes unless the State cell names sizes.
• "Frame" is the component layer itself; "BG rect" is its BG child. Fills are stacked bottom first, as in the spec.
• A shared style is named only where the layer references one. Where both the frame and BG reference one, both are given.
• "text fill" is a fill set on the text layer on top of its colour, as stored.
• No layer on this page has a border, shadow, inner shadow or blur.

Disabled at a glance (derived from the tables below)

Bordered

Bordered Tinted

Bordered Destructive

Bordered Default

Bordered Default Destructive

Borderless (on = bezel)

Toggle

Arrow Buttons

Irregular values in these tables

These are stored this way in the kit. They are listed so a builder can decide whether to follow them.

• Dark · Over-glass · Bordered Default Destructive · Active, Off, 1 Idle references the Light style Over-Glass/Light/05 - Prominent (Default) Destructive/01 - Idle and uses blend plus-darker; the other Dark Over-glass states use plus-lighter. No component references Over-Glass/Dark/05 - Prominent (Default) Destructive/01 - Idle.
• Light · Over-glass · Bordered Default Destructive · Idle binds the dark swatch {System Colors/Dark (use plus lighter)/1 Red} (#FF4747), as its shared style does.
• Dark · Over-glass · Bordered Default · Clicked binds the light swatch {System Colors/Light Vibrant (use plus darker)/8 Blue} (#0078F0), as its shared style does. Its Idle layer uses blend plus-lighter where the shared style says plus-darker.
• Light · Content Area · Bordered Tinted · Clicked binds {System Colors/Dark/8 Blue} (#0091FF), as its shared style does.
• Dark · Content Area · Bordered Destructive: the Lg–Mn frames reference Content Area/Light/03 - Bordered Destructive/… while their BG uses the Dark style. In Disabled, Lg–Mn frames also carry the Light fill at 10 % under the Dark BG, and the XL frame repeats the Dark BG fill at 12 %. The Idle BG is at 20 % while the shared style says 22 %. The Idle label is #F52F32 {System Colors/Light Vibrant (use plus darker)/1 Red} with plus-lighter at XL, and #FF4245 with lighten at Lg–Mn.
• Light · Content Area · Bordered Default · Disabled sets opacity 40 % on the frame as well as on BG; the other appearance and context do not.
• Light · Over-glass · Bordered Destructive · Idle: the XL frame has no blend; Lg–Mn frames use plus-darker. Borderless Over-glass Inactive, Off, 1 Idle has the Clicked text fill at Lg–Mn but not at XL.
• Active, Off, 2 Hover exists only for Over-glass Mn Toggle and Borderless, in place of Active, Off, 1 Idle. Its values are the same as Idle at the other four sizes.
• Dark Toggle BG rects in Content Area use plus-darker. Dark · Over-glass Borderless Clicked adds #FFFFFF@18% with plus-darker. Dark · Content Area Toggle Inactive, Off, 4 Disabled labels use plus-lighter; Inactive, On, 4 Disabled labels don't.
• In Light · Content Area, the Bordered labels use the vibrant swatch #363636 {Labels/Light Vibrant (use plus darker)/1 Primary} without its blend mode.
• The shared styles store their own corner value (often max, sometimes 0, 4 or 6, sometimes none), but the components set their own radius per size (Mn 4, Sm 5, Rg 6, Lg max, XL max). The component value is the one drawn.

Text

No text layer on this page references a shared text style (the file has no textstyle token). No component text sets tracking; kern appears only on the page headings.

Label colours in Idle and Clicked states (collected from the tables above):

Disabled labels use the Tertiary label colour or a layer opacity; see Disabled at a glance.

Derived: SFPro-Medium is not one of the weights in text-styles.md (those use Regular, Semibold, Bold and Heavy). The 13 / 16 size and line height match 06 Body, but the weight does not.

Effects

There are no shadows, inner shadows, background blurs, glass effects or borders on this page. Every layer line carries only fill, corners, stack, opacity and blend tokens. The glass that Over-glass variants are drawn on is in materials.md.

Kit notes

The page has no documentation boards and no notes from Apple. It holds only section headings, which give the page's own names for the groups:

• Large headings: "Button" (layer name "Button, Bordered"), "Toggle Button", "Arrow Button", and "Light" / "Dark" at 50 % opacity.
• Context headings: "Content Area" and "Over-Glass".
• Family headings: "Bordered", "Bordered Tinted", "Bordered Destructive", "Bordered Default", "Bordered Default Desctructive" (spelled so), "Borderless".
• State headings: "Active", "Inactive", "Off, Active", "Off, Inactive", "On, Active", "On, Inactive".

The page also has a few loose layers outside any component. Two instances named Buttons/Dark/Content Area/Neutral/5 XL/Active, Off, 1 Idle point to the Light XL Bordered Idle and Disabled components (the second with a style→Content Area/Light/01 - Bordered/04 - Disabled override). Three instances named Buttons/Dark/Content Area/Bordered Destructive/5 XL/Active, Off, 1 Idle point to Light XL Bordered Destructive Idle and Disabled components with the override color:fill-0→#FF383C@5%; one of them is also at opacity 40%. There are also a Rectangle 42 × 6 #FF2E32@30%, and two Rectangle 5 bars 129 × 9 in #0088FF {System Colors/Light/8 Blue} and #0091FF {System Colors/Dark/8 Blue}. No Neutral family exists among the components.

Finding it in the spec