--- 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 | Role | Mail | Calendar | Drive | |------|------|----------|-------| | 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.