Communication / iOS / Android / Web

Signal

Signal uses one ultramarine and a plain gray ladder on top of platform-native structure, so trust comes from what is absent, while color is saved for conversations and wallpapers.

Download
  • #2C6BED
  • #6191F3
  • #1851B4
  • #F6F6F6
  • #1B1B1B
  • #F44336

Color

Every color token in the file, grouped by role.

Brand

  • primary#2C6BED
  • primary light#6191F3
  • primary dark#1851B4
  • primary ios#2267F5
  • primary ios dark#2D70FA
  • on primary#FFFFFF
  • ink secondary#5E5E5E
  • surface button secondary#E9E9E9
  • dark ink secondary#B9B9B9
  • dark primary#6191F3

Surfaces

  • paper#FFFFFF
  • canvas#F6F6F6
  • web surface dark#1F2229
  • dark bg#1B1B1B
  • dark surface#303030
  • dark surface raised#3B3B3B

Text

  • ink#000000
  • web ink#14161A
  • dark ink#FFFFFF

Lines

  • divider#D4D4D4
  • divider strong#B9B9B9
  • web border#D6D9E0

Status

  • danger#F44336
  • danger highlight#EF5350
  • success#4CAF50
  • warning#FFD624
  • danger ios#FF3B30
  • warning ios#FFCC00
  • success ios#34C759

Typography

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

  • InterOpen font, shown as published.
  • body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • body small14px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • label16px / 600 / 1.3

    Continue to checkout

  • display40px / 800 / 1.15

    Signal

Shape

Corner radius tokens.

  • sm8px
  • md12px
  • sheet18px
  • pill999px

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 secondary
    button-secondary
  • card
    card
  • card dark
    card-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 100 lines
version: alpha
name: Signal-design-analysis
description: "A messenger whose design says trust by leaving things out: one ultramarine blue on white or near-black, neutral gray ladders, plain Material and iOS-native structure, and conversation colors as the only playful element. Android and web share #2c6bed, iOS uses a slightly brighter #2267f5, and the website sets Inter."
status: Draft
appVersion: "source snapshot of the public repositories and signal.org, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#2c6bed"
  primary-light: "#6191f3"
  primary-dark: "#1851b4"
  primary-ios: "#2267f5"
  primary-ios-dark: "#2d70fa"
  on-primary: "#ffffff"
  ink: "#000000"
  ink-secondary: "#5e5e5e"
  paper: "#ffffff"
  canvas: "#f6f6f6"
  surface-button-secondary: "#e9e9e9"
  divider: "#d4d4d4"
  divider-strong: "#b9b9b9"
  danger: "#f44336"
  danger-highlight: "#ef5350"
  success: "#4caf50"
  warning: "#ffd624"
  danger-ios: "#ff3b30"
  warning-ios: "#ffcc00"
  success-ios: "#34c759"
  web-ink: "#14161a"
  web-surface-dark: "#1f2229"
  web-border: "#d6d9e0"
  dark-bg: "#1b1b1b"
  dark-surface: "#303030"
  dark-surface-raised: "#3b3b3b"
  dark-ink: "#ffffff"
  dark-ink-secondary: "#b9b9b9"
  dark-primary: "#6191f3"

typography:
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-small:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.3
  display:
    fontFamily: "Inter, sans-serif"
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1.15

rounded:
  sm: 8px
  md: 12px
  sheet: 18px
  pill: 999px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 48px
  button-secondary:
    backgroundColor: "{colors.surface-button-secondary}"
    textColor: "{colors.primary-dark}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 48px
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px
  card-dark:
    backgroundColor: "{colors.dark-surface}"
    textColor: "{colors.dark-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px

Overview

Signal is the private messenger from the Signal Foundation. Its design leaves things out on purpose: one blue, a plain gray ladder and platform-native structure. [Observed]

What defines the look:

  1. One blue. Ultramarine #2c6bed is the button, link and selected color on Android and web, and iOS uses #2267f5 in light and #2d70fa in dark. [Measured]
  2. A named gray ladder. Android has greys from #f6f6f6 to #121212 in steps of about five percent (core_grey_02 to core_grey_95). [Measured]
  3. Plain structure. Lists, toolbars and sheets follow each platform's conventions with few custom components. [Inferred]
  4. Color as a feature. Conversation and chat colors, wallpapers and ultramarine variants are the only expressive elements. [Observed]

Source for this file: the public Android and iOS repositories and the signal.org stylesheet, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Primary and button#2c6bed Android, #2267f5 iOS#6191f3 Android, #2d70fa iOSAndroid core colors, iOS palette
Primary dark and pressed#1851b4not readAndroid
Primary icon#3a76f0not readAndroid
Text on primary#ffffffnot readAndroid
Secondary button fill#e9e9e9#3b3b3bAndroid
Secondary button text#2c6bednot readAndroid
Page background#ffffff (surface roles)#1b1b1b for tertiaryAndroid
Tertiary background#f6f6f6#1b1b1bAndroid
Divider minor and major#d4d4d4, #b9b9b9#3b3b3b minorAndroid
Hint text#848484not readAndroid
Red#f44336 Android, #ff3b30 iOS#ff453a iOS
Green#4caf50 Android, #34c759 iOS#30d158 iOS
Yellow#ffd624 Android, #ffcc00 iOS#ffd60a iOS
Website text and surfaces#14161a, #1f2229, border #d6d9e0signal.org

The iOS palette also defines a high contrast variant of each color, for example #0a43b9 for ultramarine in light and #5d92ff in dark. [Measured] Android core surface roles (colorSurface and friends) come from a Material 3 color scheme file whose values were not all read. All other values are [Measured].

Typography

The website uses Inter at 400, 500, 600 and 800 with sizes of 16, 18, 20px and rem steps up to 3rem, and a monospace stack for code. [Measured] The Android app ships its own typeface helper but its default text uses the system font and Material roles. [Inferred] iOS uses the system font through text styles. [Inferred]

Shape and spacing

Android bottom sheets use an 18dp corner. [Measured] Button and bubble radii were not read. A 4 and 8 spacing scale is expected. [Inferred]

Iconography and motion

Simple outline icons that take the primary or secondary text color, with the selected tab icon in the primary text color rather than blue. [Measured from tint role names] Motion values were not measured.

Themes

Light, dark and system on both apps, plus high contrast color variants on iOS and chat color and wallpaper choices on both. [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 controller with the interactive swipe-back gesture. [Inferred]

Primary navigation

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

A tab-like home with chats, calls and stories entries. The exact tab set depends on the app version and was not confirmed. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A compose button in the navigation bar. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Action sheets and alerts with themed colors, plus custom bottom sheets. [Inferred]

Controls

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

Standard iOS switches and pickers with the ultramarine tint. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Fonts are defined through text styles in the font extension files, which supports Dynamic Type. [Measured for the files, Inferred for behavior]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not verified. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

A mix of SF Symbols-style and custom glyphs through a theme icon extension. [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 phone number. No third-party login, so Guideline 4.8 is likely not triggered. Account deletion was not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

Close to the iOS look with a custom color theme for light, dark and high contrast. [Observed]

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, an up arrow in the toolbar. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar (chats, calls, stories) with the selected icon in the primary text color. [Measured for the tab tint roles, Inferred for the set]

Main action

Expected on Android: Floating action button.

A floating compose button is expected on the chat list. It was not confirmed in source. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Material bottom sheets with an 18dp corner and Material dialogs. [Measured]

Controls

Expected on Android: Material switches, pickers, chips.

Material 3 controls with ultramarine as the primary role. [Inferred]

Text sizing

Expected on Android: Font scale.

Android text uses sp, so it 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 vector icons tinted by role (primary, secondary, action). [Measured]

Account and sign-in rules

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

Phone number sign-in. Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

Material 3 with a role-named color layer (signal_background_primary, signal_text_primary and so on) mapped onto the Material scheme. [Measured]

Platform: Web

The signal.org website and its stylesheet. The desktop client was not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back and top navigation. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

A top navigation bar. [Inferred]

Main action

Expected on Web: Page-level button.

A download button for the app. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Not measured. [Inferred]

Text sizing

Expected on Web: Browser zoom.

Sizes use rem and px, so they follow the browser root size in part. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

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

Not applicable. [Inferred]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A light and dark site, using the same #2c6bed and #1851b4 blues as the apps. [Measured]

Cross-platform consistency

Consistent across platforms: one ultramarine, a gray ladder, light and dark themes, plain structure. [Measured]

Intentionally different: iOS uses a brighter blue and native navigation, Android uses Material components and the website uses Inter. [Measured]

Do's and Don'ts

Do

  • Use one blue for every action and link.
  • Use the gray ladder for surfaces and dividers instead of tinted colors.
  • Keep the selected tab in the text color and reserve blue for actions.
  • Offer high contrast variants.

Don't

  • Don't add a second accent color to the chrome.
  • Don't use the lighter blue #6191f3 on white backgrounds.
  • Don't decorate with gradients. Color lives in conversations.

Known Gaps

  • No on-device capture was done. All statements come from reading source and a stylesheet.
  • Android surface and on-surface values come from a Material 3 scheme file that was not read in full, so surface hex values are listed as white and the gray ladder.
  • The ultramarine #2c6bed against white measures about 4.7 to 1, close to the 4.5 to 1 limit, and the lighter dark-mode blue was not checked.
  • Corner radii for buttons and bubbles, spacing and motion were not measured.
  • Account deletion and store policy rules were not verified for either app.