iOS Color Theming Reference

iOS Colors & Theming Reference

by wondelai · MIT license · ★ 2,235 on GitHub · updated Sep 10

SKILL.md section 3 covers the core semantic palette (label, secondaryLabel, systemBackground, systemBlue/systemRed/systemGreen) and the…

# iOS Colors & Theming Reference

SKILL.md section 3 covers the core semantic palette (`label`, `secondaryLabel`, `systemBackground`, `systemBlue`/`systemRed`/`systemGreen`) and the three Dark Mode adaptation rules. This file adds what it does not carry: the extra layering tokens and the full WCAG contrast table.

## Extra Semantic Tokens (beyond the core set)

For multi-level hierarchy and grouped layouts, reach past the core six:

```swift
Color(.tertiaryLabel)              // 3rd-level text (placeholders, disabled)
Color(.quaternaryLabel)            // 4th-level (separators, faint glyphs)
Color(.secondarySystemBackground)  // elevated cards / grouped table sections
Color(.tertiarySystemBackground)   // a layer above secondary
Color(.systemGroupedBackground)    // base behind grouped lists (Settings style)
Color(.separator)                  // hairline dividers (already mode-aware)
```

Use the grouped-background family for `.insetGrouped` lists; use the plain `systemBackground` family for full-bleed content.

Overview

SKILL.md section 3 covers the core semantic palette (label, secondaryLabel, systemBackground, systemBlue/systemRed/systemGreen) and the three Dark Mode adaptation rules. This file adds what it does not carry: the extra layering tokens and the full WCAG contrast table.

Manual install (npx, ZIP)

Claude Codenpx skills add wondelai/skills --skill ios-colors-theming-reference -g -a claude-code

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

colors-depth.md1.5 KB

Read colors-depth.md here

wondelai/main1 file

colors-depth.md1.5 KB

colors-depth.md

Show the full text31 lines

ios-colors-theming-reference/colors-depth.md31 lines · 1.5 KB

PreviewCode

Outline

RawView on GitHub

iOS Colors & Theming Reference

SKILL.md section 3 covers the core semantic palette (label, secondaryLabel, systemBackground, systemBlue/systemRed/systemGreen) and the three Dark Mode adaptation rules. This file adds what it does not carry: the extra layering tokens and the full WCAG contrast table.

Extra Semantic Tokens (beyond the core set)

For multi-level hierarchy and grouped layouts, reach past the core six:

Color(.tertiaryLabel)              // 3rd-level text (placeholders, disabled)
Color(.quaternaryLabel)            // 4th-level (separators, faint glyphs)
Color(.secondarySystemBackground)  // elevated cards / grouped table sections
Color(.tertiarySystemBackground)   // a layer above secondary
Color(.systemGroupedBackground)    // base behind grouped lists (Settings style)
Color(.separator)                  // hairline dividers (already mode-aware)

Use the grouped-background family for .insetGrouped lists; use the plain systemBackground family for full-bleed content.

Color Contrast (full WCAG table)

SKILL.md states the 4.5:1 floor for body text. The complete set of minimums:

Content	Minimum ratio
Normal text (< 18pt, or < 14pt bold)	4.5:1
Large text (>= 18pt, or >= 14pt bold)	3:1
UI components and graphical objects (icons, control borders, focus rings)	3:1

Verify with Xcode's Accessibility Inspector color contrast check, in both light and dark modes and with Increase Contrast enabled.

1	# iOS Colors & Theming Reference
2
3	SKILL.md section 3 covers the core semantic palette (`label`, `secondaryLabel`, `systemBackground`, `systemBlue`/`systemRed`/`systemGreen`) and the three Dark Mode adaptation rules. This file adds what it does not carry: the extra layering tokens and the full WCAG contrast table.
4
5	## Extra Semantic Tokens (beyond the core set)
6
7	For multi-level hierarchy and grouped layouts, reach past the core six:
8
9	```swift
10	Color(.tertiaryLabel) // 3rd-level text (placeholders, disabled)
11	Color(.quaternaryLabel) // 4th-level (separators, faint glyphs)
12	Color(.secondarySystemBackground) // elevated cards / grouped table sections
13	Color(.tertiarySystemBackground) // a layer above secondary
14	Color(.systemGroupedBackground) // base behind grouped lists (Settings style)
15	Color(.separator) // hairline dividers (already mode-aware)
16	```
17
18	Use the grouped-background family for `.insetGrouped` lists; use the plain `systemBackground` family for full-bleed content.
19
20	## Color Contrast (full WCAG table)
21
22	SKILL.md states the 4.5:1 floor for body text. The complete set of minimums:
23
24	\| Content \| Minimum ratio \|
25	\|---------\|---------------\|
26	\| Normal text (< 18pt, or < 14pt bold) \| 4.5:1 \|
27	\| Large text (>= 18pt, or >= 14pt bold) \| 3:1 \|
28	\| UI components and graphical objects (icons, control borders, focus rings) \| 3:1 \|
29
30	Verify with Xcode's Accessibility Inspector color contrast check, in both light and dark modes and with Increase Contrast enabled.
31