ios-color-and-materials

Installation
SKILL.md

iOS color & materials — semantic, adaptive, never hard-coded

Source: Apple HIG Color, Dark Mode, and Materials pages (read June 2026; change logs confirm iOS-26 currency). Apple renders hex/RGB values as image swatches and explicitly says not to hard-code them — so this skill names the semantic APIs, not numbers.

1. The rule: use dynamic, semantically-named colors

"Documented color values are for your reference… The actual color values may fluctuate from release to release." Use the APIs so colors auto-adapt to light/dark + Increase Contrast + Liquid Glass.

  • Don't redefine a semantic color's meaning (don't use separator as text, or secondaryLabel as a background).
  • Always supply light + dark variants for custom colors, plus an increased-contrast option — "Even if your app ships in a single appearance mode, provide both light and dark colors to support Liquid Glass adaptivity."

2. The color APIs you actually use

System named colors (SwiftUI): red orange yellow green mint teal cyan blue indigo purple pink brown — each has default + increased-contrast variants for light/dark.

Grays: UIKit systemGray, systemGray2…6; SwiftUI gray ≈ systemGray.

Background sets — two families, each primary/secondary/tertiary (express hierarchy by nesting):

  • System: systemBackground → secondarySystemBackground → tertiarySystemBackground
  • Grouped (use with grouped lists/forms): systemGroupedBackground → secondarySystemGroupedBackground → tertiarySystemGroupedBackground
  • Primary = overall view; Secondary = a group within it; Tertiary = a group within secondary.

Foreground / separators: label → secondaryLabel → tertiaryLabel → quaternaryLabel; placeholderText; separator (lets content show through) vs opaqueSeparator; link.

Installs
3
GitHub Stars
2
First Seen
Aug 26, 2026