Communication / iOS / Android / Web

Tuta Mail

Tuta is calm and trustworthy because every product has one Material 3 seed color, tinted neutral surfaces and a strict 4 and 8 point grid, all shared across web and the mobile shells.

Download
  • #8F4A4E
  • #435E91
  • #1A6B52
  • #F4D2D2
  • #FCF9F6
  • #221A14

Color

Every color token in the file, grouped by role.

Brand

  • primary mail#8F4A4E
  • primary calendar#435E91
  • primary drive#1A6B52
  • primary mail dark#FFB3B5
  • primary calendar dark#ACC7FF
  • primary drive dark#8AD6B7
  • secondary#87521B
  • tertiary#63568F
  • on primary#FFFFFF

Surfaces

  • container mail#F4D2D2
  • container calendar#D2DAF3
  • container drive#A6F2D2
  • surface#FFFFFF
  • surface mail tint#FCF9F6
  • surface calendar tint#F7F9FC
  • surface drive tint#F8FCF9
  • dark surface mail#181212
  • dark surface calendar#101418
  • dark surface drive#0F1512

Text

  • ink#221A14
  • ink variant#4E4545
  • dark ink mail#F3ECEC

Lines

  • outline#7F7575
  • outline variant mail#D0C4C4
  • outline variant calendar#C4C6D0
  • outline variant drive#BFC9C2

Status

  • error#BA1A1A
  • error container#FFE5E5
  • warning#8D7426
  • warning container#FFEFCC
  • success#44845E
  • success container#E9FFED

More

  • campaign nota#D93951
  • european blue#003E85
  • european blue light#ACC7FF
  • sovereign yellow#FEE06A

Typography

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

  • system-uiSystem font, drawn with the default on your device.
  • body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • small14px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • label14px / 500 / 1.4

    Continue to checkout

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg16px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px
  • xxl48px
  • section64px

Components

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

  • button primary
    button-primary
  • button primary calendar
    button-primary-calendar
  • button primary drive
    button-primary-drive
  • container card
    container-card
  • error banner
    error-banner
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 109 lines
version: alpha
name: Tuta-Mail-design-analysis
description: "A privacy-first email, calendar and drive suite designed as a set of Material 3 color systems: Mail in a muted rose (#8f4a4e), Calendar in a steel blue (#435e91) and Drive in a deep green (#1a6b52), each with a matching dark mode. One shared web UI runs inside the web, iOS and Android apps, driven by a strict 4 and 8 point spacing scale."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary-mail: "#8f4a4e"
  primary-calendar: "#435e91"
  primary-drive: "#1a6b52"
  primary-mail-dark: "#ffb3b5"
  primary-calendar-dark: "#acc7ff"
  primary-drive-dark: "#8ad6b7"
  container-mail: "#f4d2d2"
  container-calendar: "#d2daf3"
  container-drive: "#a6f2d2"
  surface: "#ffffff"
  surface-mail-tint: "#fcf9f6"
  surface-calendar-tint: "#f7f9fc"
  surface-drive-tint: "#f8fcf9"
  ink: "#221a14"
  ink-variant: "#4e4545"
  outline: "#7f7575"
  outline-variant-mail: "#d0c4c4"
  outline-variant-calendar: "#c4c6d0"
  outline-variant-drive: "#bfc9c2"
  secondary: "#87521b"
  tertiary: "#63568f"
  error: "#ba1a1a"
  error-container: "#ffe5e5"
  warning: "#8d7426"
  warning-container: "#ffefcc"
  success: "#44845e"
  success-container: "#e9ffed"
  campaign-nota: "#d93951"
  european-blue: "#003e85"
  european-blue-light: "#acc7ff"
  sovereign-yellow: "#fee06a"
  dark-surface-mail: "#181212"
  dark-surface-calendar: "#101418"
  dark-surface-drive: "#0f1512"
  dark-ink-mail: "#f3ecec"
  on-primary: "#ffffff"

typography:
  body:
    fontFamily: "system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  small:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
  label:
    fontFamily: "system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary-mail}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    height: 44px
  button-primary-calendar:
    backgroundColor: "{colors.primary-calendar}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    height: 44px
  button-primary-drive:
    backgroundColor: "{colors.primary-drive}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    height: 44px
  container-card:
    backgroundColor: "{colors.container-mail}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
  error-banner:
    backgroundColor: "{colors.error-container}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px

Overview

Tuta looks calm, soft and trustworthy, and it is built like a Material 3 theme generator's output. The color tokens are named after Material 3 roles (primary, on_primary, primary_container, surface_container, outline_variant and so on), and each of the suite's three products gets its own seed color: a muted rose for Mail, a steel blue for Calendar and a deep green for Drive. [Measured]

Three decisions define the look:

  1. One product, one color. Mail is rose #8f4a4e, Calendar blue #435e91, Drive green #1a6b52. Each has a light theme and a dark theme with a lighter primary (#ffb3b5, #acc7ff, #8ad6b7) and a tinted near-black surface (#181212, #101418, #0f1512). [Measured]
  2. Tinted neutrals. Surfaces are white, with slightly tinted container steps (#fcf9f6 for Mail, #f7f9fc for Calendar, #f8fcf9 for Drive) so each app feels subtly different without extra decoration. [Measured]
  3. One UI on every platform. The same interface appears in the browser and in the iOS and Android apps, and the theme switches by product (Mail, Calendar or Drive). [Measured]

Source for this file: the public source for the web, Android and iOS apps, read on 2026-10-06. The tuta.com site returned almost no usable styles. No on-device capture was done. See Known Gaps.

Core

Colors

RoleMailCalendarDrive
Primary (light)#8f4a4e#435e91#1a6b52
Primary (dark)#ffb3b5#acc7ff#8ad6b7
Primary container (light)#f4d2d2#d2daf3#a6f2d2
Primary container (dark)#733337#244173#00513c
Surface container (light)#fcf9f6#f7f9fc#f8fcf9
Surface (dark)#181212#101418#0f1512
Surface container (dark)#241e1e#1c2024#1b211e
Outline variant (light)#d0c4c4#c4c6d0#bfc9c2
Outline variant (dark)#4e4545#44474e#404944
On surface (dark)#f3ecec#eceef4#dee4df

Shared across products: white surface #ffffff, text #221a14 (Drive #171d1a), secondary #87521b, tertiary #63568f, outline #7f7575.

Semantic colors, light then dark: error #ba1a1a and #ffb4ab, warning #8d7426 and #ffe089, success #44845e and #5e9e77, each with a container color and an "on" color. Campaign accents include a coral #d93951, "Go European" blue #003e85 and a sovereign yellow #fee06a. All [Measured].

State colors for hover, focus and active are the outline variant at 27, 33 and 40 percent opacity (#d7c1c144, #d7c1c155, #d7c1c166 for Mail). [Measured]

Typography

The font family and type scale were not found in the files read. The UI defines a font_size scale and the website uses a --sans stack. Treat typography as unmeasured. [Inferred]

Shape and spacing

Strict grid. [Measured]

  • Core spacing steps: 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 96, 112 and 128. Named spacing values include 4, 8, 12, 16, 24, 32, 48 and 64.
  • Radius values: 4, 8, 12 and 16.
  • Icon sizes: 12, 16, 24 and 32.
  • Button heights: 32 (small), 44 (default), 48 (medium) and 56 (large).
  • The website uses a default border radius token on most surfaces.

Iconography and motion

Icons are simple, in sizes from 12 to 32, tinted by role. Drive has file-type colors: folder #4a662c, document #8f4a4e, image #006a65, video #7f4d7b, audio #a2752f. [Measured] Illustrations use outline and highlight tokens such as #3b080f and #f9e5e5. [Measured] No motion tokens were found. [Inferred]

Themes

Light and dark for each of the three products, plus a "light secondary" and "dark secondary" variant so a user can switch palettes. [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.

The UI inside the shell is the web UI, so back handling follows the web app's own controls plus native gestures where the shell provides them. [Inferred]

Primary navigation

Expected on iOS: bottom tab bar, about five items.

The shared UI provides its own navigation (folders and mail views) rather than a native tab bar. [Inferred]

Main action

Expected on iOS: nav bar or bottom bar button.

A compose action in the shared UI, typically a floating or bar button. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

The shared UI draws its own dialogs and sheets. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Web-drawn controls, not Cupertino ones. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not verified. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Default buttons are 44 high. [Measured]

Insets and system bars

Expected on iOS: safe areas, status bar.

Not verified. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom icons from the shared UI. [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.

Tuta accounts only, with no third-party social login. Account deletion is available inside the app. [Inferred] Checked: 2026-10-06 against source and general knowledge only.

Platform conformance

Expected on iOS: system components.

Low fidelity to iOS conventions, by design. The app trades native feel for one consistent, private, cross-platform UI. [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.

The shell handles the system back button and forwards it to the shared UI. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

The shared UI provides its own navigation. [Inferred]

Main action

Expected on Android: floating action button.

A compose button in the shared UI. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Drawn by the shared UI. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Web-drawn controls styled with Material 3 color roles, so they look Material without using Material widgets. [Measured for the roles, Inferred for the controls]

Text sizing

Expected on Android: font scale.

Not verified. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Medium buttons are 48 high. [Measured]

Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Custom icons. [Inferred]

Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

Tuta accounts. Account deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

Adopts Material 3 color roles and naming in its theme, but renders with its own web components rather than native Material widgets. [Measured]

Platform: Web

The web client that all three platforms share, plus the tuta.com marketing site.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back with in-app navigation. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

A sidebar of folders and a list and detail layout for mail. [Inferred]

Main action

Expected on Web: page-level button.

A compose button in the primary color. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Modal dialogs and banners with error, warning and success containers. [Measured for the colors]

Controls

Expected on Web: native or custom.

Custom controls built in the app's own UI library. [Inferred]

Text sizing

Expected on Web: browser zoom.

Not verified. [Inferred]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Button heights run from 32 to 56. [Measured]

Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive between desktop and mobile layouts. [Inferred]

Icons

Expected on Web: any.

Custom icon set. [Inferred]

Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

Tuta account sign-in. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms. The marketing site uses colored status tokens such as --red-fighter and --blue-fighter for its product tabs. [Measured]

Cross-platform consistency

Almost everything is shared because the apps wrap one UI. The visual system is the same on all platforms: Material 3 roles, the three product colors and the same spacing grid. [Measured]

Do's and Don'ts

Do

  • Name colors after Material 3 roles and generate them from one seed per product.
  • Give each product its own primary and its own tinted surface.
  • Build every dimension from the 4 and 8 point grid.
  • Provide a lighter primary and tinted near-black surfaces in dark mode.
  • Keep status colors in the error, warning and success container pattern.

Don't

  • Don't reuse one product's primary in another product.
  • Don't use pure black in dark mode. Use the tinted surfaces.
  • Don't add values outside the radius and spacing scale.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • The font family and type scale were not found. Typography is unmeasured.
  • The tuta.com stylesheet returned almost no readable values, so the marketing site is only partly covered.
  • The native shells were not read beyond their structure, so native navigation behavior is inferred.
  • Account deletion and store policy rules were not verified.