Theme Customization
Apple's design system is built for customization within platform conventions. Rather than generating a full scheme from a seed color, Apple provides semantic tokens (tint colors, text styles, materials) that your brand fills in while the system handles adaptation across modes, sizes, and accessibility settings.
6 flow steps6 topics5 brand guidesM3 Exclusive
Customization Areas
Tint ColorDark ModeCustom TypographyShape & Corner RadiusApp IconMotion & Animation
Making M3 Your Own
Material Design 3 is designed to be customized. Unlike previous versions, M3 provides a systematic approach: start with a single seed color and the system generates an entire harmonious color scheme. From there, you can customize typography, shape, motion, and individual component tokens to express your brand identity.
Seed-to-Scheme Flow
1
Choose a Tint Color
Select your app's primary brand color. This tint color will be used for interactive elements — buttons, links, navigation bar items, and selected states.
2
Define Color Assets
Create color assets in your Asset Catalog with separate appearances for Light, Dark, and High Contrast modes. The system will resolve the correct value at runtime.
3
Select Typography
Choose custom fonts for your app or use SF Pro with custom text styles. Register custom fonts in Info.plist and map them to Dynamic Type sizes using UIFontMetrics.
4
Configure App Icon
Design your app icon following the platform icon grid. Provide all required sizes. Use Xcode's Asset Catalog to manage icon variants for different contexts.
5
Apply Accent Color
Set your tint/accent color in the Asset Catalog (AccentColor) or programmatically via .tint() / tintColor. This color cascades to all standard interactive controls.
6
Test Across Modes
Verify your customizations in Light Mode, Dark Mode, Increased Contrast, and all Dynamic Type sizes. Use Xcode's Environment Overrides and Accessibility Inspector.
Customization Topics
Brand Integration
Tint Color as Brand Identity
Your tint/accent color is the primary brand touchpoint in the UI. Pick a color that's recognizable, high-contrast, and distinct from system red (reserved for destructive actions).
Set the AccentColor in your Asset Catalog. This single color cascades to all standard controls — buttons, links, switches, sliders, and navigation items — providing consistent brand presence.
Custom Fonts for Brand Voice
Replace SF Pro with your brand fonts to establish typographic identity. Map your fonts to Apple's text style hierarchy and ensure they scale with Dynamic Type.
Use UIFontMetrics to wrap custom font sizes so they scale proportionally with the user's preferred text size. This preserves brand typography while maintaining accessibility.
App Icon as Brand Mark
Design your app icon as a miniature brand mark. Use your brand colors and a simplified version of your logo or symbol. The icon should be instantly recognizable at any size.
Use Apple's icon grid template for consistent optical alignment. The system handles corner masking — provide a full-bleed square image and let the OS apply the continuous-curve mask.
Brand Imagery & Illustrations
Use illustrations, photography, and custom imagery that match your brand aesthetic. Provide dark mode variants for all custom visual assets.
Store images in Asset Catalogs with Light/Dark appearances. Use SF Symbols with your tint color for iconography to maintain visual consistency with the platform.
Launch Screen & First Impression
The launch screen (LaunchScreen.storyboard) is the first thing users see. Keep it simple — match your app's initial screen background to create a seamless transition.
Use a static launch screen that matches your app's background color. Avoid logos, text, or loading indicators. The goal is a perceived instant launch, not a splash screen.