Communication / iOS / Android / Web

Mastodon

Mastodon is a friendly, distinctly purple social product: a Blurple family tuned per platform, lavender tints for structure and a real Material 3 theme on Android.

Download
  • #552CFB
  • #6364FF
  • #563ACC
  • #2F0C7A
  • #17063B
  • #E0E3FF

Color

Every color token in the file, grouped by role.

Brand

  • 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 secondary#545473
  • ink secondary dark#B2B0C7
  • secondary android#5D51AF
  • secondary fill#F5F5FA
  • secondary fill dark#333345
  • on primary#FFFFFF

Surfaces

  • surface android#FCF8FF
  • surface android dark#13121D
  • surface variant android#E5DFF6
  • container android#EBDDFF

Text

  • ink#1C1A25
  • disabled#9BAEC8

Lines

  • outline android#787588

Status

  • danger#9E0812
  • danger android#BA1A1A
  • success soft#F0FDF4
  • warning soft#FEF3C6

More

  • inverted fill#171721
  • inactive#6E828C
  • blocked#FF3B30
  • favorite star#E89A00
  • favorite star dark#FFB014

Typography

Each style is set with the file's own family, size, weight and spacing.

  • ManropeOpen font, shown as published.
  • web display42px / 800 / 1.1

    Mastodon

  • web heading28px / 700 / 1.2

    Pack my box with five dozen liquor jugs

  • web body16px / 450 / 1.5

    The quick brown fox jumps over the lazy dog

  • web small14px / 500 / 1.4

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs2px
  • sm4px
  • md6px
  • lg8px
  • xl12px
  • card16px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • base16px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button primary android
    button-primary-android
  • card soft
    card-soft
  • tonal chip
    tonal-chip
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 104 lines
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

RoleLightDark
Brand (iOS)#552cfb#858afa
Brand (website)#6364ffn/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.