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

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.

Inclusive color (required): never convey meaning/state/interactivity by color alone — pair with text, glyph shape, or position. Watch red-green / blue-orange confusions; consider cultural meaning.

3. Dark Mode

• No app-specific light/dark toggle — respect the system setting (Light/Dark/Auto); Auto can switch at runtime.
• Dark Mode is not a simple inversion. Use semantic colors; for custom colors add a Color Set asset with both variants.
• Contrast floors (explicit): minimum 4.5:1; for custom small text strive for 7:1.
• Base vs elevated: Dark Mode uses a dimmer base set and a brighter elevated set; the system auto-switches base→elevated when UI comes forward (popover, sheet, multi-window). Prefer system backgrounds so this depth cue works.
• Soften white-background images so they don't glow. Test with Increase Contrast + Reduce Transparency (separately + together) — these can reduce dark-on-dark contrast.

4. Materials — two types, don't confuse them

1. Liquid Glass = the functional/chrome layer floating above content (see ios-liquid-glass-swiftui). Don't use it in the content layer. Exception: transient controls (sliders/toggles) take a glass look only while being manipulated.
2. Standard materials = differentiation within the content layer (app backgrounds, grouped surfaces).

Standard material levels (iOS), thin→thick: .ultraThin, .thin, .regular (default), .thick. Thicker = more opaque = better contrast for fine text; thinner = more translucent = preserves context. Choose by semantic need, not apparent color.

Vibrancy (always put system vibrant colors on top of materials for legibility):

• Labels: .label (default, highest contrast) → .secondaryLabel → .tertiaryLabel → .quaternaryLabel. Avoid quaternaryLabel on .thin/.ultraThin (contrast too low).
• Fills: .fill / .secondaryFill / .tertiaryFill (any material). Separators: single value, any material.