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 graysystemGray.

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

  • System: systemBackgroundsecondarySystemBackgroundtertiarySystemBackground
  • Grouped (use with grouped lists/forms): systemGroupedBackgroundsecondarySystemGroupedBackgroundtertiarySystemGroupedBackground
  • Primary = overall view; Secondary = a group within it; Tertiary = a group within secondary.

Foreground / separators: labelsecondaryLabeltertiaryLabelquaternaryLabel; placeholderText; separator (lets content show through) vs opaqueSeparator; link.

Installs
1
GitHub Stars
1
First Seen
2 days ago
ios-color-and-materials — jpoindexter/design-and-ai-skills