Semantic Color Mapping in SwiftUI

Context

Semantic colors make components easier to reuse because the component asks for a role, not a brand-specific hex value. That keeps color decisions flexible without making every screen special-case itself.

The snippet

extension Color {
    static let appPrimary = Color("AppPrimary")
    static let appSurface = Color("AppSurface")
}

Text("Continue")
    .foregroundStyle(.appPrimary)

Why this works

The component still reads like a component. The theme stays flexible because the actual color mapping lives in one place.

Use it when:

• several screens share the same visual language
• brand colors need dark mode or contrast adjustments
• components should not know the raw palette

Avoid it when:

• a one-off screen only needs a single local color
• the token layer would be bigger than the UI itself
• the role name is so vague it hides the design intent

Takeaway: Semantic colors help SwiftUI components stay reusable without losing brand consistency.

Next steps

• Design Tokens in SwiftUI Without Framework Bloat
• SF Symbols: Icons as Design Data
• Creating a Custom ButtonStyle Systematically