version: "1.0.3" name: design-standards description: Apply the Meshtastic design standards on Android - brand colours, Material 3 tokens, MeshtasticIcons and accessibility - with the upstream meshtastic/design standards as the source of truth. Use this whenever you choose a colour, icon, spacing value or contrast level, and before claiming a screen matches the design.

Skill: Meshtastic Design Standards

Description

Android-specific guidance for applying the Meshtastic design standards. All visual rules, color palettes, accessibility requirements, and cross-platform conventions live upstream.

Source of truth: `meshtastic/design/standards/`

That index names the current version; open it from there for the full spec (colors, M3 mapping, accessibility, units/locale, agent checklist). Don't fetch meshtastic_design_standards_latest.md over HTTP — it is a symlink, and GitHub returns its target's filename, 35 bytes, with HTTP 200.

If this skill diverges from upstream, upstream wins.

1. How to Use the Standards

Before implementing any UI:

1. Read the upstream standards — they include a full agent implementation checklist
2. Check the settings validation matrix — `meshtastic/design/standards/audits/settings-validation-matrix.md` has field-by-field validation rules for every config/module setting
3. Apply the Android-specific mappings below

2. Android / Compose Mappings

Theme Tokens

The upstream standards define M3 role mappings (Section 8). In this codebase:

• Theme is defined in core/ui/ — the AppTheme composable (core/ui/src/commonMain/kotlin/org/meshtastic/core/ui/theme/Theme.kt)
• Use M3 tokens (MaterialTheme.colorScheme.primary, .surface, etc.) — never raw hex values
• Dynamic color (Android 12+): on by default via dynamicColorScheme() (AppTheme(dynamicColor = true) for all flavors); the Android actual is gated by SDK ≥ S, while desktop/iOS return null

Brand Colors → Compose

Raw palette defined in core/ui/src/commonMain/kotlin/org/meshtastic/core/ui/theme/CustomColors.kt (e.g. N800, G500, G600, E500, B400) — reference the M3 token, not the raw CustomColors entry, in UI code.

Key Rules (Android-specific)

• Icons: Use MeshtasticIcons (from core/ui/icon/), not material.icons.Icons
• Touch targets: 44×44dp minimum (M3 default is 48dp — compliant)
• Typography: Default body = 16sp. Support Dynamic Type via MaterialTheme.typography
• Message bubbles: Use onSurface for text color, never node identity colors

3. App Icons

• Launcher icon: ic_launcher — adaptive (androidApp/src/main/res/mipmap-anydpi/ic_launcher.xml) with foreground/background layers. The Play-Store listing asset is androidApp/src/main/ic_launcher2-playstore.png.
• When regenerating, use Image Asset Studio and keep the ic_launcher resource name.

4. Settings Validation Reference

When implementing or modifying settings screens, consult the upstream validation spec: `settings-validation-android.md`

It documents every field's:

• Valid ranges and byte limits
• UI component type (stepper, picker, secure input, etc.)
• Dirty-tracking patterns
• Edge cases (e.g., BLE PIN must be exactly 6 digits, Wi-Fi SSID max 32 UTF-8 bytes)