--- 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 | Role | Light | Dark | Where | |------|-------|------|-------| | Primary and button | `#2c6bed` Android, `#2267f5` iOS | `#6191f3` Android, `#2d70fa` iOS | Android core colors, iOS palette | | Primary dark and pressed | `#1851b4` | not read | Android | | Primary icon | `#3a76f0` | not read | Android | | Text on primary | `#ffffff` | not read | Android | | Secondary button fill | `#e9e9e9` | `#3b3b3b` | Android | | Secondary button text | `#2c6bed` | not read | Android | | Page background | `#ffffff` (surface roles) | `#1b1b1b` for tertiary | Android | | Tertiary background | `#f6f6f6` | `#1b1b1b` | Android | | Divider minor and major | `#d4d4d4`, `#b9b9b9` | `#3b3b3b` minor | Android | | Hint text | `#848484` | not read | Android | | 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 `#d6d9e0` | | signal.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.