/axiom-design

name: axiom-design
description: Use when making design decisions, implementing HIG patterns, Liquid Glass, SF Symbols, typography, or structuring app entry points and authentication flows.
license: MIT

Design & HIG

**You MUST use this skill for ANY visual design, HIG compliance, Liquid Glass, SF Symbols, typography, or app composition work.**

<!-- AXIOM_AUDITOR_INLINE_BEGIN — rewritten for Codex by scripts/build-codex.ts; do not hand-edit --> > **Auditors are skills here.** Where this router says "Launch `some-auditor` agent", invoke the > matching Codex skill instead — same procedure, no Claude Code agent required. > > Available: `axiom-audit-liquid-glass`. > > The ones that shell out — builds, tests, simulators, crash symbolication — need shell access to run. <!-- AXIOM_AUDITOR_INLINE_END -->

Quick Reference

| Symptom / Task | Reference | |----------------|-----------| | Design decisions, HIG compliance, colors, backgrounds | See `skills/hig.md` | | Spacing, padding, margins, insets — what value to use | See `skills/hig.md` | | Section index / A–Z index strip / alphabet scrubber — should this list have one | See `skills/hig.md` | | Semantic colors, custom color patterns, material styles | See `skills/hig-ref.md` | | Liquid Glass effects, adoption, migration from blur effects | See `skills/liquid-glass.md` | | App-wide Liquid Glass adoption, backward compatibility | See `skills/liquid-glass-ref.md` | | SF Symbols rendering modes, effects, animations | See `skills/sf-symbols.md` | | SF Symbols API signatures, UIKit equivalents, availability | See `skills/sf-symbols-ref.md` | | Verify a symbol name exists / check one symbol's availability or supported modes (`sfsymbols` CLI) | See `skills/sf-symbols-ref.md` (Part 11) | | San Francisco fonts, text styles, Dynamic Type, tracking | See `skills/typography-ref.md` | | App entry points, auth flows, root view switching, scene lifecycle, document-based apps | See `skills/app-composition.md` | | Apple Pay button / Wallet pass design / Tap to Pay button | See `axiom-payments` suite, plus `skills/hig.md` for cross-cutting HIG context |

Decision Tree

digraph design {
    start [label="Design task" shape=ellipse];
    what [label="What do you need?" shape=diamond];

    start -> what;
    what -> "skills/hig.md" [label="design decision,\nHIG compliance,\ncolor/background choice"];
    what -> "skills/hig.md" [label="spacing/padding/margin value"];
    what -> "skills/hig-ref.md" [label="semantic color API,\ncustom color code,\nmaterial style details"];
    what -> "skills/liquid-glass.md" [label="Liquid Glass effects,\nmigrate from blur,\nRegular vs Clear"];
    what -> "skills/liquid-glass-ref.md" [label="app-wide Liquid Glass plan,\nplatform differences,\nbackward compat"];
    what -> "skills/sf-symbols.md" [label="rendering mode choice,\nsymbol effects/animations,\ncustom symbols"];
    what -> "skills/sf-symbols-ref.md" [label="SF Symbols API syntax,\nUIKit equivalents,\navailability matrix"];
    what -> "skills/typography-ref.md" [label="font selection,\nDynamic Type,\ntext styles, tracking"];
    what -> "skills/app-composition.md" [label="@main entry point,\nauth flow, root view,\nscene lifecycle"];
}

1. Design decision / HIG compliance / choosing colors or backgrounds? → `skills/hig.md` 1a. Need semantic color API, custom color code, or material style details? → `skills/hig-ref.md` 2. Liquid Glass effects / migrating from blur / Regular vs Clear variant? → `skills/liquid-glass.md` 2a. Planning app-wide Liquid Glass adoption / platform differences / backward compatibility? → `skills/liquid-glass-ref.md` 3. SF Symbols rendering mode / symbol effects / custom symbols? → `skills/sf-symbols.md` 3a. Need SF Symbols API syntax / UIKit equivalents / availability check? → `skills/sf-symbols-ref.md` 4. Font selection / Dynamic Type / text styles / tracking / leading? → `skills/typography-ref.md` 5. App entry point / auth flow / root view switching / scene lifecycle? → `skills/app-composition.md` 6. SwiftUI view implementation? → `/skill axiom-swiftui` 7. TextKit / rich text editing / Writing Tools? → `/skill axiom-uikit` 8. Accessibility compliance (VoiceOver, contrast, touch targets)? → `/skill axiom-accessibility` 9. Audit UI for Liquid Glass adoption? → liquid-glass-auditor (Agent — surfaces migration opportunities AND adoption-completeness gaps: variant discipline, nesting hygiene, availability gating, primary-action tinting, accessibility re-check; scores ADOPTED / PARTIAL / NOT ADOPTED) 10. CarPlay app design, categories, driver-distraction rules? → `/skill axiom-media` (carplay-hig.md)

Platform-specific HIG

• watchOS design (glanceable UI, watchOS 10 navigation) → See axiom-watchos (skills/design-for-watchos.md)

Conflict Resolution

**design vs swiftui**: When building UI: 1. **Use design FIRST** — Decide what to build (colors, materials, typography, layout intent) before how to build it. 2. **Then use swiftui** — Implement the design decision in SwiftUI code.

**design vs accessibility**: When choosing colors or typography:

• Color contrast or Dynamic Type compliance? → **use accessibility**
• Which semantic color or text style to pick? → **use design**

**design (liquid-glass) vs swiftui**: When implementing Liquid Glass:

• What Liquid Glass is, when to use Regular vs Clear, migration strategy → **use design** (`skills/liquid-glass.md`)
• SwiftUI code for `.glassEffect()` modifier → **use design** (`skills/liquid-glass-ref.md`), then swiftui for surrounding view code

**design (app-composition) vs swiftui**: When structuring app architecture:

• @main entry, auth state machine, root view switching, scene lifecycle → **use design** (`skills/app-composition.md`)
• NavigationStack, NavigationSplitView, tab structure → **use swiftui**

**design vs media (CarPlay)**: When designing for CarPlay:

• General iOS HIG principles (colors, typography, Liquid Glass) → **use design**
• CarPlay-specific rules (app