Health & Wellness / iOS / Android / Web

Medito

Medito is built to calm: black and white do the work, secondary text is checked for contrast, and open letter-spaced type keeps everything slow.

Download
  • #171717
  • #E5E5E5
  • #5DADE2
  • #D1BDA9
  • #FF6568
  • #6C5CE7

Color

Every color token in the file, grouped by role.

Brand

  • primary light#171717
  • primary dark#E5E5E5
  • on primary light#FAFAFA
  • on primary dark#171717
  • ink secondary light#737373
  • ink secondary dark#A1A1A1
  • accent sky#5DADE2
  • accent sky pale#D4EDF7
  • accent sand#D1BDA9
  • accent coral#FF6568
  • on primary#FFFFFF

Surfaces

  • surface light#FFFFFF
  • surface dark#1A1A1A
  • card light#F5F5F5
  • card dark#262626

Text

  • ink light#0A0A0A
  • web ink#1A1A17
  • web muted#6B6860

Lines

  • border light#E5E5E5
  • border strong light#D4D4D4
  • border dark#404040
  • web line#E0DBD1

Status

  • error#E40014

More

  • shade dark#333333
  • deep dark#171717
  • soft dark#1F1F1F
  • mid dark#525252
  • web cream#FAF8F5
  • web sand#F0ECE5
  • web violet#6C5CE7
  • web violet deep#5A4BD1
  • web coral#E8446A

Typography

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

  • Google SansOpen font, shown as published.
  • Instrument SerifOpen font, shown as published.
  • DM SansOpen font, shown as published.
  • display20px / 700 / 1.2

    Pack my box with five dozen liquor jugs

  • title18px / 800 / 1.5

    The quick brown fox jumps over the lazy dog

  • subtitle16px / 600 / 1.3

    The quick brown fox jumps over the lazy dog

  • body14px / 500 / 1.5

    The quick brown fox jumps over the lazy dog

  • caption12px / 600 / 1.5

    Continue to checkout

  • web display48px / 400 / 1.1

    Medito

  • web body15px / 400 / 1.6

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • button8px
  • input12px
  • card12px
  • sheet14px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px

Components

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

  • button primary
    button-primary
  • button primary dark
    button-primary-dark
  • card
    card
  • card dark
    card-dark
  • secondary text
    secondary-text
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 128 lines
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

RoleLightDark
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#e40014not 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.