iOS Playground theme parity¶
This audit records the source-defined parity between the iOS Playground theme and Android’s design-system module after the source migration in PR #10320. It supports issue #5047 Phase D (#10285); the crayon texture work depends on #10283. Values below come from the platform theme and component sources. Accessibility identifiers are unchanged.
Tokens¶
| Area | Android | iOS | Parity / difference |
|---|---|---|---|
| Font family | Shantell Sans variable font; Normal 400, Medium 500, SemiBold 600, Bold 700. On API below 26, variable-axis settings are ignored and the default instance is used. | Vendored ShantellSans-Light variable TTF; .weight() drives its wght axis. |
Same family and role scale; platform scaling mechanisms differ (Compose sp; SwiftUI semantic TextStyle/Dynamic Type). |
| Display roles | displayLarge 57/400; displayMedium 45/400; displaySmall 36/400. |
Same sizes and weights. | Match. Android additionally defines line-height/letter-spacing: 64/−0.25, 52/0, 44/0. iOS roles do not set either value. |
| Headline roles | headlineLarge 32/400; headlineMedium 28/400; headlineSmall 24/400. |
32/600, 28/600, 24/600 (semibold). | Intentional source difference: iOS headlines are semibold; Android headlines are Normal (400). Android line heights are 40, 36, 32 with zero letter spacing; iOS leaves these unspecified. |
| Title roles | titleLarge 22/400; titleMedium 16/500; titleSmall 14/500. |
22/500, 16/500, 14/500. | titleLarge differs: iOS Medium versus Android Normal. Android line heights 28/24/20; letter spacing 0/0.15/0.1. iOS leaves these unspecified. |
| Body roles | bodyLarge 16/400; bodyMedium 14/400; bodySmall 12/400. |
Same sizes and weights. | Match. Android line heights 24/20/16; letter spacing 0.5/0.25/0.4. iOS leaves these unspecified. |
| Label roles | labelLarge 14/500; labelMedium 12/500; labelSmall 11/500. |
Same sizes and weights. | Match. Android line heights 20/16/16; letter spacing 0.1/0.5/0.5. iOS leaves these unspecified. |
| Core light colors | Primary/on: #D62A22/#FFFFFF; secondary/on: #1F6FC2/#FFFFFF; tertiary/on: #FFD23F/#3A2E00; background/on: #FFF7EC/#241E18; surface/on: #FFFFFF/#241E18; error/on: #C1271F/#FFFFFF. |
Same role values. | Match. Android also defines Material 3 container, outline, inverse, scrim, and surface-container tokens; these include values beyond the iOS theme’s role set. |
| Core dark colors | Primary/on: #FF8A7E/#3A0A05; secondary/on: #8FC4F5/#0A2A45; tertiary/on: #FFDD6B/#3A2E00; background/on: #14110D/#F3E9DB; surface/on: #241E17/#F3E9DB; error/on: #FFB4AB/#690005. |
Same role values. | Match. Android additionally defines dark Material 3 container, outline, inverse, scrim, and surface-container tokens. |
| Other color roles | Accent sky #2F7FD6, grass #57AB46, sand #F2C879, slide #8E5BD0, cone #FF7A1A, ink #282827. Scheme selection follows system dark mode; dynamic color defaults off (opt-in on Android 12+). |
Same six accents. surfaceVariant is #F3E8D8 light / #3A2F24 dark; success and warning use grass/cone; info uses secondary; textSecondary is onSurface at 0.68 opacity. Scheme follows SwiftUI colorScheme. |
Shared accents; iOS names extra semantic aliases explicitly. Android’s optional dynamic-color override has no corresponding iOS theme setting. |
| Shape scale | extraSmall/small/medium/large/extraLarge: 6/12/18/26/40 dp. | Same radii in points. | Same nominal values; dp and points are platform units. |
| Component radii | button 14; card 18; text field 12; dialog 26; bottom sheet top corners 26 dp. | button 14; card 18; text field 12; dialog 26; bottom sheet 26 pt. | Same named radii. iOS also has swatch 4, thumbnail 8, gesture target 16, layered backdrop 20; Android instead has AutoMobileDimensions corner-radius tokens 4/8/16 dp. |
| Spacing and sizing | Spacing tokens: 0, 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 64, 80 dp. Heights/sizes: button 48, text field 56, toolbar 64, bottom nav 80, FAB 56, icons 24/32/16 dp. Elevation 0/2/4/8 dp; borders 1/2/4 dp. | No parallel spacing, component-size, elevation, or border-width token scale in the iOS theme files. | Android-only shared dimension tokens; iOS screens and native controls retain their own layout metrics. |
| Crayon sketch | Deterministic seeded rounded-rectangle jitter, default 6 samples per edge, roughness 2.5 dp, double strokes (main width 2.5 dp; echo 0.8× width at 0.55 alpha and 1.2× roughness). Also supports a horizontal sketch edge. Grain uses RuntimeShader on API 33+, no-op below. | Deterministic seeded rounded-rectangle jitter, default 6 samples per edge, roughness 2.5 pt, double strokes (main width 2.5 pt; echo 0.8× width at 0.55 opacity and 1.2× roughness). Uses SwiftUI Shape/Canvas; no grain shader counterpart in this source. | Outline algorithm and defaults correspond. Android has an additional grain shader capability; iOS sketch source is explicitly native SwiftUI without Metal. |
Typography sizes/weights are written as size/weight (weight: 400 Normal, 500 Medium, 600 SemiBold). Android’s additional line-height and letter-spacing values are sp; iOS does not declare equivalent explicit values.
Components and platform behavior¶
| Component or surface | Android design-system module | iOS Playground | Parity / gap |
|---|---|---|---|
| Text and screen content | AutoMobileText and typography roles; Material 3 theme supplies defaults. |
playgroundContent() applies bodyLarge, primary text ink, and primary tint without adding layout or accessibility elements. |
Shared type/color intent; iOS modifier styles existing content rather than providing a parallel custom control library. |
| Buttons | Filled/secondary, outlined, text, tonal, and content button wrappers; crayon grain/border treatments are component-specific. | Uses SwiftUI Button with inherited theme tint/content styling; no equivalent themed button component set in the theme sources. |
Native interaction and component treatment differ. |
| Text fields | Filled and outlined AutoMobileTextField wrappers with design-system dimensions and shapes. |
Native SwiftUI text inputs inherit content font/ink/tint where playgroundContent() is applied; no parallel themed text-field wrapper in theme sources. |
Android has explicit wrappers and sizing; iOS leaves control styling/layout to the view and platform. |
| Toggle / switch | No dedicated toggle wrapper in the design-system component sources inspected. | SwiftUI/native controls can inherit content styling; no dedicated theme toggle wrapper. | Platform controls; no custom parity component. |
| List row | No dedicated list-row component in this design-system module. | Native List rows inherit content styling when the modifier is applied. |
Native list surfaces and row metrics remain platform-defined. |
| Cards, chips, dialogs, FAB, navigation | Module provides card/content-card, filter chip, dialog, FAB, top app bar, bottom navigation/navigation bar components, with Android shapes, colors, and crayon treatments as implemented per component. | No corresponding reusable themed component suite in the iOS theme files; views use SwiftUI composition and the shared theme helpers. | Android has explicit design-system components; iOS does not claim component-by-component visual parity. |
| Native system surfaces | Android system-owned surfaces remain outside the theme components. | System alerts, pickers, keyboard, and navigation bar chrome stay platform-controlled. | Intentional platform boundary; theme does not override these native surfaces. |
The iOS theme helpers apply only where a view opts into autoMobileTheme(), autoMobileSurface(), autoMobileBackground(), or playgroundContent(). Platform-owned control metrics and appearance can therefore vary while the shared tokens remain aligned.