---
version: alpha
name: Medito-design-analysis
description: "A meditation app designed to be quiet: a near-monochrome Material 3 theme in warm neutrals (black ink #171717 on white in light mode, #e5e5e5 on #1a1a1a in dark mode), Google Sans with generous letter spacing and weights up to 800, and soft 8 to 14 pixel corners. The website uses a warmer cream palette with a violet and a coral accent."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary-light: "#171717"
  primary-dark: "#e5e5e5"
  on-primary-light: "#fafafa"
  on-primary-dark: "#171717"
  surface-light: "#ffffff"
  surface-dark: "#1a1a1a"
  card-light: "#f5f5f5"
  card-dark: "#262626"
  ink-light: "#0a0a0a"
  ink-secondary-light: "#737373"
  ink-secondary-dark: "#a1a1a1"
  border-light: "#e5e5e5"
  border-strong-light: "#d4d4d4"
  border-dark: "#404040"
  shade-dark: "#333333"
  deep-dark: "#171717"
  soft-dark: "#1f1f1f"
  mid-dark: "#525252"
  accent-sky: "#5dade2"
  accent-sky-pale: "#d4edf7"
  accent-sand: "#d1bda9"
  accent-coral: "#ff6568"
  error: "#e40014"
  web-cream: "#faf8f5"
  web-sand: "#f0ece5"
  web-line: "#e0dbd1"
  web-ink: "#1a1a17"
  web-muted: "#6b6860"
  web-violet: "#6c5ce7"
  web-violet-deep: "#5a4bd1"
  web-coral: "#e8446a"
  on-primary: "#ffffff"

typography:
  display:
    fontFamily: "Google Sans, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.5px
  title:
    fontFamily: "Google Sans, sans-serif"
    fontSize: 18px
    fontWeight: 800
    lineHeight: 1.5
    letterSpacing: 0.5px
  subtitle:
    fontFamily: "Google Sans, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.5px
  body:
    fontFamily: "Google Sans, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.4px
  caption:
    fontFamily: "Google Sans, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.8px
  web-display:
    fontFamily: "Instrument Serif, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
  web-body:
    fontFamily: "DM Sans, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6

rounded:
  button: 8px
  input: 12px
  card: 12px
  sheet: 14px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.on-primary-light}"
    typography: "{typography.subtitle}"
    rounded: "{rounded.button}"
    height: 48px
  button-primary-dark:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary-dark}"
    typography: "{typography.subtitle}"
    rounded: "{rounded.button}"
    height: 48px
  card:
    backgroundColor: "{colors.card-light}"
    textColor: "{colors.ink-light}"
    typography: "{typography.body}"
    rounded: "{rounded.card}"
    padding: 16px
  card-dark:
    backgroundColor: "{colors.card-dark}"
    textColor: "{colors.primary-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.card}"
    padding: 16px
  secondary-text:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-secondary-light}"
    typography: "{typography.body}"
---

## Overview

Medito is built to calm you down. The app is almost monochrome, with black and white doing the work, a single soft gray for secondary text, and color left to the meditation artwork and a few pastel accents. Type is set generously, with positive letter spacing on nearly every style so text reads slow and open. [Measured]

Three decisions define the look:

1. **Monochrome Material 3.** The theme uses Material 3 with a black primary (`#171717`) and off-white text on it in light mode, and a light gray primary (`#e5e5e5`) with near-black text in dark mode. Surfaces are white or `#1a1a1a`, cards `#f5f5f5` or `#262626`. [Measured]
2. **Accessibility is documented in the code.** The secondary text color `#737373` carries a comment noting it reaches 4.7 to 1 on white, which is the WCAG AA level, so contrast was checked on purpose. [Measured]
3. **Wide, heavy type.** Google Sans is used at weights from 500 to 800 with letter spacing from `0.2` to `0.8` pixels and line heights of 1.2 to 1.5. [Measured]

Source for this file: the public app source and meditofoundation.org, read on 2026-10-06. No on-device capture was done. See Known Gaps.

## Core

### Colors

| Role | Light | Dark |
|------|-------|------|
| Primary | `#171717` | `#e5e5e5` |
| On primary | `#fafafa` | `#171717` |
| Surface and background | `#ffffff` | `#1a1a1a` |
| Card | `#f5f5f5` | `#262626` |
| Text | `#0a0a0a` | `#e5e5e5` |
| Secondary text | `#737373` (AA on white) | `#a1a1a1` |
| Border | `#e5e5e5` | `#404040` |
| Strong border | `#d4d4d4` | `#525252` |
| Error | `#e40014` | not extracted |

Additional named colors: deep `#171717`, soft `#1f1f1f`, graphite `#a1a1a1`, moon `#525252`, charcoal `#333333`. Pastel accents: sky `#5dade2` and pale sky `#d4edf7`, sand `#d1bda9` and a coral `#ff6568`. All [Measured].

The website palette is warmer: cream `#faf8f5`, sand `#f0ece5`, line `#e0dbd1`, ink `#1a1a17`, muted `#6b6860`, violet `#6c5ce7` (deep `#5a4bd1`) and coral `#e8446a`. [Measured]

### Typography

Google Sans across the app. Styles run: 20 bold, 18 weight 800 and 700 (titles), 16 semibold, 14 medium and 12 semibold. Letter spacing is `0.2` to `0.8` pixels. Line heights are 1.2 to 1.5. [Measured] Buttons are 16 semibold. [Measured] The website pairs DM Sans (body, about 15 px) with Instrument Serif for display. [Measured]

### Shape and spacing

- **Radii:** buttons `8`, inputs and cards `12`, bottom sheets and dialogs `14`. [Measured]
- **Elevation:** buttons and bars use elevation `0`, so depth comes from fills and borders. [Measured]
- Spacing values were not extracted. [Inferred]

### Iconography and motion

Simple line icons. Motion values were not extracted. [Inferred]

### Themes

Light, dark and system, switched through an explicit theme mode. [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 iOS back swipe works. The app bar uses Material styling. [Inferred]

### Primary navigation

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

A bottom navigation with home, explore and profile style tabs. Not verified in the files read. [Inferred]

### Main action

Expected on iOS: nav bar or bottom bar button.

Large play buttons on session screens. [Inferred]

### Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Material bottom sheets with `14` top corners and dialogs. [Measured]

### Controls

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

Material controls. [Inferred]

### Text sizing

Expected on iOS: Dynamic Type.

Text follows the system scale. [Inferred]

### Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

### Insets and system bars

Expected on iOS: safe areas, status bar.

Handled by the platform. [Inferred]

### Icons

Expected on iOS: SF Symbols or custom.

Custom icons. [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.

Not verified. If the app offers third-party sign-in, an equivalent option and account deletion would be required. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on iOS: system components and Dynamic Type.

Low fidelity: Material 3 on iOS. [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.

System back. [Inferred]

### Primary navigation

Expected on Android: navigation bar, rail on tablets.

A Material navigation bar. [Inferred]

### Main action

Expected on Android: floating action button.

Play buttons rather than a floating action button. [Inferred]

### Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Material 3 sheets, dialogs and snackbars. [Measured]

### Controls

Expected on Android: Material switches, pickers, chips.

Material 3 controls in monochrome. [Measured]

### Text sizing

Expected on Android: font scale.

Follows the system font scale. [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.

Custom and Material icons. [Inferred]

### Account and sign-in rules

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

Not verified. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on Android: Material 3 components and roles.

Uses Material 3 components with a custom monochrome scheme in place of dynamic colors. [Measured]

## Platform: Web

The meditofoundation.org site.

### Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back. [Inferred]

### Primary navigation

Expected on Web: top nav or sidebar.

A top navigation. [Inferred]

### Main action

Expected on Web: page-level button.

Donate and download buttons in violet or coral. [Inferred]

### Sheets, dialogs and messages

Expected on Web: modals, toasts.

Not a feature of the site. [Inferred]

### Controls

Expected on Web: native or custom.

Standard form controls. [Inferred]

### Text sizing

Expected on Web: browser zoom.

Sizes in `rem` and `px`. [Measured]

### Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

### Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive. [Inferred]

### Icons

Expected on Web: any.

SVG. [Inferred]

### Account and sign-in rules

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

Informational site. [Inferred]

### Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms with DM Sans, Instrument Serif and a warm cream palette. [Measured]

## Cross-platform consistency

The app is monochrome and cool-neutral, while the website is warm cream with violet and coral accents. The two do not share a palette, which is an inconsistency. [Measured]

## Do's and Don'ts

### Do

- Keep the app near-monochrome and let artwork carry color.
- Use Google Sans at medium to extra-bold weights with positive letter spacing.
- Check secondary text contrast and note it, as with the `#737373` AA comment.
- Use elevation 0 and separate with fills and borders.
- Round buttons to 8, inputs and cards to 12, and sheets to 14.

### Don't

- Don't add saturated colors to interface chrome.
- Don't use tight letter spacing.
- Don't use the website's violet and coral inside the app.

## Known Gaps

- No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
- Spacing values and motion were not extracted.
- Navigation structure is inferred from product knowledge.
- Sign-in methods and account deletion were not checked.
- The app and website palettes differ, and which is the intended brand was not confirmed.