apple-ios-27-design

Exact iOS 27 sizes, colours, type and Liquid Glass values from Apple's UI Kit.

npx skills add haythamasalama/skills --skill apple-ios-27-design

iOS 27 design kit

Read when: you build, restyle, review or draw iPhone or iPad UI and need the exact number Apple's kit uses. Owns: the iOS 27 kit's measured values — colours, text styles and Dynamic Type, materials, control styles and every component page.

The values come from Apple's iOS and iPadOS 27 UI Kit (developer.apple.com/design/resources, Sketch v27.1.3), read by script; the colour page also uses the kit's Figma community copy. Apple's licence for the Apple Design Resources applies to the kits themselves; this skill holds only measured values and written descriptions, not Apple's files or artwork.

TL;DR

  • Take values only from these files. If a value is not here, say "not in the kit". Why: a guess from memory, the HIG or a framework default looks right and is off by a point or a shade, which is the error this skill exists to stop.
  • Every colour has a light and a dark value. Vibrant labels and fills only look right drawn with the blend mode the kit names (plus-darker on light surfaces, plus-lighter on dark ones).
  • The kit's screens are iPhone 402 × 874, iPad Pro 11 1210 × 834 and three iPhone Duo canvases. Keep the kit's part sizes and scale the finished image, never the parts. Why: scaled parts stop matching every other value here.
  • Glass bars and buttons use shared Liquid Glass styles; the component page names the style, materials.md holds it.
  • The system control comes first. Use these specs to check a custom part against Apple's, to restyle a custom component so it matches, or to draw iPhone and iPad UI in images (website art, App Store pages).
  • Start with the component's reference. Go to the raw page dump only for a value no reference lists, and name the component line it came from.

Where each topic lives

Need File
A colour (accents, grays, backgrounds, labels, fills, separators, overlays) references/colors.md
A text style (font, size, line height, tracking) references/text-styles.md
Dynamic Type sizes per content size category references/text-styles-and-dynamic-type.md
Liquid Glass and materials references/materials.md
The fill a control uses per state references/control-styles.md
Safe areas and margins (the kit has them for iPhone Duo only) references/layout-guides.md
The kit's setup notes and licence, in summary references/getting-started.md
One component references/<component>.md, listed below

Components

Bars and navigation: toolbars (values in toolbars-values), tab-bars, sidebars, sheets, popovers

Buttons and menus: buttons, menus, segmented-controls, action-sheets, activity-views, alerts

Lists and input: lists, text-fields, keyboards (values in keyboards-values), toggles, sliders, steppers, date-and-time-pickers, color-pickers, page-controls, progress-indicators

System and screens: system (status bars, home indicators, iPad windows and menu bar, scroll edge effect), system-screens (wallpapers, Home Screen, widgets, Quick Actions, Lock Screen, notifications, Control Center, app icon frames), system-values (sizes and colours), system-text-and-effects, empty-states, faceid, product-bezels

Each component file lists what the kit leaves out and where the kit contradicts itself, so you can name the source instead of guessing.

The raw page dump (specs/, built locally)

Component references cite specs/<page>.txt. That folder is not shipped: it is a full dump of Apple's kit file, so you build it on your own machine from your own download of the kit (steps 1–3 under "Updating to a newer kit", then pass the dump folder to gen_tokens.py). Keep it out of anything you publish.

Each line is one layer; indentation shows nesting.

Token Meaning
COMPONENT "A/B/C" W×H A kit component. The name path holds its variant axes: appearance, device, size, style and state
BOARD A documentation artboard
@x,y Position inside the parent, in points
use "…" → Path [overrides] An instance of another component, with its overrides
text "layer" "content" Font size lhN kernN colour align Font is a PostScript name, lh is line height, kern is tracking
fill … Stacked fills, bottom first
border W inside Border width and position
shadow / inner-shadow x, y, blur, spread, colour
blur background / blur glass Background blur or Sketch's glass effect, with radius and the other values
corners R smoothingS styleN Corner radius (max = capsule or circle) and smoothing
stack h|v gapN padT,R,B,L Auto layout
#RRGGBB@NN% Colour with alpha
{Name} The kit swatch the colour is bound to
style="…" A shared layer style
blend plus-darker / blend plus-lighter Blend mode
􀻃 (U+100EC3) in a path Marks a building-block component that full screens are assembled from

Hidden layers are left out. specs/change-log.txt lists Apple's changes per kit version.

Updating to a newer kit

Run from this skill's folder. Python 3.10 or newer.

  1. Download the iOS Sketch kit from Apple Design Resources and accept Apple's licence there yourself.
  2. Unzip its JSON into a work folder outside this skill: unzip "Apple iOS 27 UI Kit.sketch" 'document.json' 'meta.json' 'pages/*' -d <work>/kit.
  3. Dump the pages: python3 scripts/extract.py <work>/kit <work>/dump.
  4. Rebuild the token pages: python3 scripts/gen_tokens.py <work>/kit . <work>/dump. This rewrites text-styles.md, materials.md and control-styles.md, adds the Liquid Glass labels to colors.md once, and copies the dump to specs/.
  5. Rewrite the component references whose pages changed; specs/change-log.txt lists what Apple changed.
  6. Check the new pages stay under 400 lines; split a long one into <name>.md and <name>-values.md.