--- version: alpha name: Mastodon-design-analysis description: "A purple-forward social client built on one brand family called Blurple (#552cfb, #6364ff on the web, #4000dd as the Android Material primary), with an eggplant-dark identity and soft lavender surfaces. The Android app is a genuine Material 3 theme, the iOS app uses a custom asset-based token set, and the website sets Manrope in heavy weights." status: Draft appVersion: "source snapshot of the public repositories, 2026-10-06" platformsCovered: [iOS, Android, Web] reviewer: "" verifiedAt: "" colors: primary: "#552cfb" primary-web: "#6364ff" primary-follow: "#563acc" primary-android: "#4000dd" primary-dark-mode: "#858afa" primary-android-dark: "#c7bfff" brand-deep: "#2f0c7a" brand-eggplant: "#17063b" brand-light: "#858afa" brand-soft: "#e0e3ff" brand-softest: "#f0f1ff" brand-soft-dark: "#3d317c" ink: "#1c1a25" ink-secondary: "#545473" ink-secondary-dark: "#b2b0c7" surface-android: "#fcf8ff" surface-android-dark: "#13121d" surface-variant-android: "#e5dff6" secondary-android: "#5d51af" container-android: "#ebddff" secondary-fill: "#f5f5fa" secondary-fill-dark: "#333345" inverted-fill: "#171721" outline-android: "#787588" disabled: "#9baec8" inactive: "#6e828c" danger: "#9e0812" danger-android: "#ba1a1a" blocked: "#ff3b30" success-soft: "#f0fdf4" warning-soft: "#fef3c6" favorite-star: "#e89a00" favorite-star-dark: "#ffb014" on-primary: "#ffffff" typography: web-display: fontFamily: "Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 42px fontWeight: 800 lineHeight: 1.1 web-heading: fontFamily: "Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 1.2 web-body: fontFamily: "Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 16px fontWeight: 450 lineHeight: 1.5 web-small: fontFamily: "Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 rounded: xs: 2px sm: 4px md: 6px lg: 8px xl: 12px card: 16px pill: 9999px spacing: xs: 4px sm: 8px base: 16px lg: 24px xl: 32px components: button-primary: backgroundColor: "{colors.primary-follow}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" height: 40px button-primary-android: backgroundColor: "{colors.primary-android}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" height: 40px card-soft: backgroundColor: "{colors.brand-softest}" textColor: "{colors.ink}" rounded: "{rounded.card}" padding: 16px tonal-chip: backgroundColor: "{colors.brand-soft}" textColor: "{colors.ink}" rounded: "{rounded.pill}" padding: 8px --- ## Overview Mastodon's design is built on a family of purples called Blurple, from a bright `#552cfb` down to a near-black eggplant `#17063b`. It is friendly, slightly playful and distinctly not a blue social network. Surfaces are tinted lavender rather than neutral gray, which keeps the whole product on-brand. [Measured] Three decisions define the look: 1. **One brand family, tuned per platform.** The iOS brand color is `#552cfb` (lightening to `#858afa` in dark mode), the website uses `#6364ff`, and the Android app derives a full Material 3 palette from `#4000dd`. The follow button uses a deeper `#563acc`. [Measured] 2. **Lavender tints for structure.** Soft backgrounds are `#f0f1ff` and `#e0e3ff` in light mode and `#261e48` and `#3d317c` in dark mode, used for chips, banners and cards. [Measured] 3. **Heavy, round type on the web.** The site uses Manrope with weights up to 800 and a custom `450` body weight. [Measured] Source for this file: the public Android and iOS repositories and joinmastodon.org, read on 2026-10-06. No on-device capture was done. See Known Gaps. ## Core ### Colors | Role | Light | Dark | |------|-------|------| | Brand (iOS) | `#552cfb` | `#858afa` | | Brand (website) | `#6364ff` | n/a | | Follow and primary button | `#563acc` | `#6364ff` | | Dark brand | `#2f0c7a` | | | Eggplant | `#17063b` | | | Soft brand fill | `#e0e3ff` | `#3d317c` | | Softest brand fill | `#f0f1ff` | `#261e48` | | Secondary text | `#545473` | `#b2b0c7` | | Secondary fill | `#f5f5fa` | `#333345` | | Inverted fill | `#171721` | `#f5f5fa` | | Danger base | `#9e0812` | | | Blocked | `#ff3b30` | | | Success soft | `#f0fdf4` | `#032e15` | | Warning soft | `#fef3c6` | `#7b3306` | | Disabled and inactive | `#9baec8`, `#6e828c` | `#4f5d64` | | Favorite star (Android) | `#e89a00` | `#ffb014` | Android Material 3 roles: primary `#4000dd`, on primary `#ffffff`, primary container `#ebddff`, secondary `#5d51af`, surface and background `#fcf8ff`, on surface `#1c1a25`, surface variant `#e5dff6`, outline `#787588`, error `#ba1a1a`. Dark: primary `#c7bfff`, primary container `#4d1af4`, surface `#13121d`, on surface `#e5e0f0`, surface variant `#474557`. All [Measured]. ### Typography - **Website:** Manrope with a system fallback. Sizes include `0.75rem` to `4.25rem`, weights of 450, 500, 600, 700 and 800, and a mono stack for code. [Measured] - **iOS:** the system font for the interface. A display font, Staatliches, is bundled as an asset, so it is likely used for a few headings. [Measured] Where it appears was not confirmed. - **Android:** the Material 3 type scale on the system sans. [Inferred] ### Shape and spacing - **Website radii:** `.125rem`, `.25rem`, `.375rem`, `.5rem`, `.75rem`, `1rem`, pill and circle. The most common is `.375rem`. [Measured] - **Android:** Material 3 shape scale. [Inferred] - Website gutter is `1rem`, and the header is `5.625rem` tall. [Measured] - Shadows are soft, with thin ring outlines. [Measured] ### Iconography and motion Android uses the Material 3 motion easings, including emphasized (`cubic-bezier(0.3, 0, 0.8, 0.2)` accelerate, `(0.1, 0.7, 0.1, 1)` decelerate), standard `(0.2, 0, 0, 1)` and legacy `(0.4, 0, 0.2, 1)`. [Measured] Icons are simple glyphs in the text or brand color. [Inferred] ### Themes Light and dark on both apps, plus Android dynamic color variants (separate color files exist for Android 8.1, 12, 13 and 14). [Measured] ## Platform: iOS How the iOS app looks and behaves. Items come from public source files. ### Back and up navigation Expected on iOS: chevron plus previous title, swipe from the left edge. Standard navigation stack behavior is expected. [Inferred] ### Primary navigation Expected on iOS: bottom tab bar, about five items. A bottom tab bar. The common structure for the app is Home, Search, Notifications and Profile, with a Compose entry. Not verified in the files read. [Inferred] ### Main action Expected on iOS: nav bar or bottom bar button. Composing a post is a bar button or tab entry, not a floating button. [Inferred] ### Sheets, dialogs and messages Expected on iOS: action sheets, alerts, modals. Standard sheets and alerts, with dedicated tokens for poll borders and search cards. [Measured] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Custom buttons for follow states: follow `#563acc`, following `#552cfb` at 15 percent (dark `#6364ff` at 30 percent), blocked `#ff3b30`, tag follow and unfollow inverted pairs. [Measured] ### Text sizing Expected on iOS: Dynamic Type. Not verified. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not verified. [Inferred] ### Insets and system bars Expected on iOS: safe areas, status bar. Standard. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. A mix of custom assets and system symbols. [Inferred] ### Account and sign-in rules Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked. Sign-in is by choosing a server and logging into a Mastodon account, which is the app's own account system. Account deletion is handled on the user's server. [Inferred] Checked: 2026-10-06 against source and general knowledge only. ### Platform conformance Expected on iOS: system components and Dynamic Type. The app keeps iOS navigation and adds its own purple token set, including per-state follow buttons. [Inferred] ## Platform: Android How the Android app looks and behaves. Items come from public source files. ### Back and up navigation Expected on Android: system back and gesture, up arrow in the top bar. Standard system back and top app bars. [Inferred] ### Primary navigation Expected on Android: navigation bar, rail on tablets. A bottom navigation bar for the main areas. A dark navigation bar background `#282c37` exists for the light theme. [Measured] ### Main action Expected on Android: floating action button. A compose action is expected as a floating action button. Not verified. [Inferred] ### Sheets, dialogs and messages Expected on Android: bottom sheets, dialogs, snackbars. Material 3 dialogs, sheets and snackbars with the Mastodon palette. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Material 3 widgets. [Inferred] ### Text sizing Expected on Android: font scale. Not verified. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not verified. [Inferred] ### Insets and system bars Expected on Android: edge to edge, system bars. Not verified. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not verified. [Inferred] ### Account and sign-in rules Expected on Android: account deletion and data safety requirements. Note the date checked. Server-based Mastodon accounts. Deletion happens on the user's server. [Inferred] Checked: 2026-10-06 against source only. ### Platform conformance Expected on Android: Material 3 components and roles. Closely follows Material 3. The palette is a full Material 3 scheme generated from the brand color, with light, dark and medium-contrast and high-contrast variants for the favorite star, plus dynamic color support. This is the most platform-faithful of the three. [Measured] ## Platform: Web The joinmastodon.org marketing site. ### Back and up navigation Expected on Web: browser back, breadcrumbs. Browser back and a persistent header. [Inferred] ### Primary navigation Expected on Web: top nav or sidebar. A `5.625rem` tall header. [Measured] ### Main action Expected on Web: page-level button. Join and Get the app buttons in the brand purple. [Inferred] ### Sheets, dialogs and messages Expected on Web: modals, toasts. Not a feature of the marketing site. [Inferred] ### Controls Expected on Web: native or custom. Custom web controls. [Inferred] ### Text sizing Expected on Web: browser zoom. Sizes are in `rem`. [Measured] ### Touch and pointer targets Expected on Web: pointer and keyboard. Not verified. [Inferred] ### Insets and system bars Expected on Web: viewport, scrollbars. Responsive at 640, 768, 1024, 1280 and 1536px. [Measured] ### Icons Expected on Web: any. SVG icons. [Inferred] ### Account and sign-in rules Expected on Web: not applicable unless the product has accounts. The site is informational and sends people to a server of their choice. [Inferred] ### Platform conformance Expected on Web: web norms for links and forms. Follows web norms with a purple brand and Manrope. [Measured] ## Cross-platform consistency The purple family, the soft lavender tints, and the friendly tone are consistent. Exact brand hex values differ per platform, and the Android palette is generated from Material 3 rules while iOS uses a hand-built token set. [Measured] ## Do's and Don'ts ### Do - Anchor everything on Blurple and use deeper `#563acc` for follow actions. - Use lavender tints (`#f0f1ff`, `#e0e3ff`) for soft surfaces. - On Android, derive colors from Material 3 roles and support dynamic color. - On the web, use Manrope with heavy headings. - Show follow state with distinct button styles for follow, following and blocked. ### Don't - Don't use neutral grays for surfaces. Keep a lavender tint. - Don't use a single hex for the brand across platforms. Use each platform's role. - Don't mix the website's `#6364ff` into native app chrome without checking contrast. ## Known Gaps - No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed. - Android shapes, type scale and spacing were assumed to be standard Material 3 and were not read. - iOS typography, radii, spacing and tab structure were not extracted. - The navigation structure of both apps is inferred from product knowledge. - The font Staatliches is bundled on iOS but its use was not confirmed. - Account deletion and store policy rules were not verified.