Communication / iOS / Android / Web

Element X

Element X keeps the interface neutral with a near-black action color and one deep green accent, and generates the same Compound tokens for Android, iOS and web in light, dark and high contrast variants.

Download
  • #007A61
  • #1B1D22
  • #129A78
  • #E1E6EC
  • #D51928
  • #101317

Color

Every color token in the file, grouped by role.

Brand

  • primary#1B1D22
  • on primary#FFFFFF
  • accent#007A61
  • accent pressed#005C45
  • ink secondary#656D77
  • dark ink secondary#808994
  • dark accent#129A78
  • dark accent bright#1FC090
  • dark primary#EBEEF2

Surfaces

  • paper#FFFFFF
  • canvas#FFFFFF
  • surface subtle#F0F2F5
  • surface strong#E1E6EC
  • dark bg#101317
  • dark surface#1D1F24
  • dark surface strong#26282D

Text

  • ink#1B1D22
  • border disabled#CDD3DA
  • dark ink#EBEEF2

Lines

  • border interactive#818A95
  • border soft#BDC4CC
  • dark border#3C3F44

Status

  • success subtle#F1FBF6

More

  • critical#D51928
  • critical subtle#FFF7F6
  • dark critical#FD3E3C

Typography

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

  • InterOpen font, shown as published.
  • heading xl32px / 600 / 1.25

    Element X

  • heading md24px / 600 / 1.25

    Pack my box with five dozen liquor jugs

  • body lg17px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • body15px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • body small13px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • label15px / 500 / 1.25

    Continue to checkout

Shape

Corner radius tokens.

  • xs2px
  • md8px
  • lg12px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • half2px
  • unit4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl40px

Components

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

  • button primary
    button-primary
  • button accent
    button-accent
  • card
    card
  • button primary dark
    button-primary-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 109 lines
version: alpha
name: Element-X-design-analysis
description: "A messenger built on Compound, Element's own token-based design system: near-black solid actions on white, one deep green accent, Inter type on a 4px scale, pill buttons and circular avatars, and the same semantic token names (bg-canvas-default, text-primary, bg-accent-rest) generated for Android, iOS and web, each with light, dark and high contrast variants."
status: Draft
appVersion: "source snapshot of the public repositories, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#1b1d22"
  on-primary: "#ffffff"
  accent: "#007a61"
  accent-pressed: "#005c45"
  ink: "#1b1d22"
  ink-secondary: "#656d77"
  paper: "#ffffff"
  canvas: "#ffffff"
  surface-subtle: "#f0f2f5"
  surface-strong: "#e1e6ec"
  border-interactive: "#818a95"
  border-soft: "#bdc4cc"
  border-disabled: "#cdd3da"
  critical: "#d51928"
  critical-subtle: "#fff7f6"
  success-subtle: "#f1fbf6"
  dark-bg: "#101317"
  dark-surface: "#1d1f24"
  dark-surface-strong: "#26282d"
  dark-ink: "#ebeef2"
  dark-ink-secondary: "#808994"
  dark-accent: "#129a78"
  dark-accent-bright: "#1fc090"
  dark-border: "#3c3f44"
  dark-critical: "#fd3e3c"
  dark-primary: "#ebeef2"

typography:
  heading-xl:
    fontFamily: "Inter, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.25
  heading-md:
    fontFamily: "Inter, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
  body-lg:
    fontFamily: "Inter, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
  body:
    fontFamily: "Inter, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  body-small:
    fontFamily: "Inter, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "Inter, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.25

rounded:
  xs: 2px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  half: 2px
  unit: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 40px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 48px
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 48px
  card:
    backgroundColor: "{colors.surface-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-bg}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 48px

Overview

Element X is the rebuilt Matrix messenger from Element, built on its Compound design system. The interface is calm and neutral: white or near-black canvases, solid actions in near-black (inverted to near-white in dark mode), and a single deep green used for accents, selection and positive states. Inter is the only typeface. The tokens are shared across Android, iOS and web, so the same names exist on all three. [Observed]

What defines the look:

  1. Neutral solid action, green accent. The main button is #1b1d22 on light (#ebeef2 on dark), and green #007a61 (#129a78 dark) marks accents and positive states. [Measured]
  2. Pill buttons, circle avatars. Buttons use a fully rounded shape and avatars are circles. [Measured]
  3. One typeface, tight tracking. Inter, with slightly negative letter spacing that grows with size. [Measured]
  4. Four themes from one source. Light, dark, and high contrast versions of each. [Measured]

Source for this file: the public Compound design tokens, the Element X Android and iOS sources and the Compound icon set, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Canvas (bg-canvas-default)#ffffff#101317Compound tokens
Subtle surface (bg-subtle-secondary)#f0f2f5#1d1f24
Stronger surface (bg-subtle-primary)#e1e6ec#26282d
Text (text-primary)#1b1d22#ebeef2
Secondary text#656d77#808994
Primary action fill#1b1d22#ebeef2
Text on solid#ffffff#101317
Accent (bg-accent-rest)#007a61#129a78
Accent pressed#005c45#1fc090
Critical#d51928#fd3e3c
Interactive border#818a95#656c76
Soft border#bdc4cc#3c3f44
Disabled border#cdd3da#323539
Success subtle fill#f1fbf6#001f0e
Critical subtle fill#fff7f6#3e0000

All values are [Measured] from the Compound token files. They resolve through a base scale (gray, green, red and more) with a numbered ladder from 100 to 1400, plus alpha variants.

Typography

Inter everywhere, with a long fallback list on web (Helvetica Neue, Segoe UI, Roboto, Ubuntu, Fira Sans, Noto Sans, Arial) and a mono face (Inconsolata) for code. [Measured] The web token scale is body 11, 13, 15 and 17px, headings 20, 24, 28 and 32px, weights 400, 500 and 600, and line heights 1, 1.25 and 1.5. Letter spacing is slightly negative and grows with size, for example -0.0088em at 15px and -0.0216em at 32px. [Measured] The Android tokens use 12, 14 and 16sp with regular and medium weights. [Measured]

Shape and spacing

A 4px space scale (2px, 4px, 6px, 8px, 12px, 16px, 24px, 40px, 44px, 48px and larger). [Measured] Buttons and several controls use a fully rounded shape (50 percent), and avatars are circles. [Measured] Other corner radii were not captured as tokens. Shadows were not measured.

Iconography and motion

A custom Compound icon set with outline and solid variants (chat, check, chevrons, attachment, calendar and more). [Measured] Motion values were not measured.

Themes

Light, dark, light high contrast and dark high contrast, defined as separate token files. [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 stack with a back chevron. [Inferred]

Primary navigation

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

The home screen is the chat list. The exact tab and space structure was not confirmed from source. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Starting a chat is a compose action from the home screen. Its exact placement was not confirmed. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

System sheets and alerts styled with Compound colors. [Inferred]

Controls

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

Controls styled through Compound colors and fonts. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

The Compound iOS package exposes a font size scale. Dynamic Type behavior was not checked. [Measured for the scale, Inferred for Dynamic Type]

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.

The custom Compound icon set rather than SF Symbols. [Measured]

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.

Matrix accounts and single sign-on through the homeserver. Guideline 4.8 and account deletion were 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.

A custom token-driven look. It keeps iOS navigation conventions and replaces system colors and type with Compound. [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 and a back arrow in the top bar. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

The chat list is home, with no bottom navigation bar confirmed in the source read. [Inferred]

Main action

Expected on Android: Floating action button.

A floating action button component exists in the design system module. Whether the home screen uses it was not confirmed. [Measured for the component, Inferred for use]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Bottom sheet scaffold and drag handle components exist, with a 4dp-high handle. [Measured]

Controls

Expected on Android: Material switches, pickers, chips.

Material components restyled with Compound color roles. Buttons use a fully rounded shape. [Measured]

Text sizing

Expected on Android: Font scale.

Typography tokens are in sp, so they follow the system font scale. [Measured]

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.

Compound vector drawables, named ic_compound_*. [Measured]

Account and sign-in rules

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

Matrix sign-in through a homeserver. 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 components with the color scheme and typography replaced by Compound tokens. Buttons are pills where stock Material buttons are also fully rounded. [Inferred]

Platform: Web

Compound tokens exist as CSS custom properties (--cpd-color-*, --cpd-font-*, --cpd-space-*) for web. The Element Web client and the element.io site were not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Not measured. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

Not measured. [Inferred]

Main action

Expected on Web: Page-level button.

Not measured. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Not measured. The tokens define border and fill roles for interactive states. [Inferred]

Text sizing

Expected on Web: Browser zoom.

Font sizes are tokens in rem, so they follow the browser root size. [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.

SVG icons from the same Compound set. [Measured]

Account and sign-in rules

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

Not applicable to the tokens package. [Inferred]

Platform conformance

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

Light and dark themes are applied by a .cpd-theme-light or .cpd-theme-dark class, and a media-query variant exists. [Measured]

Cross-platform consistency

Consistent across platforms: token names, Inter, the near-black action color, the green accent, and four themes. [Measured]

Intentionally different: sizes are in sp on Android and rem on web, and navigation follows each platform. [Inferred]

Do's and Don'ts

Do

  • Use the semantic token names and let the theme resolve the value.
  • Keep the primary action neutral and reserve green for accents and success.
  • Use pill buttons and circular avatars.
  • Provide the high contrast themes.

Don't

  • Don't hard-code hex values, since dark and high contrast themes depend on tokens.
  • Don't use green for large fills of body text. The light accent is #007a61.
  • Don't mix another typeface with Inter.

Known Gaps

  • No on-device capture was done. All statements come from reading token files and source.
  • The Element Web client and the element.io marketing site were not measured, so the Web section is thin.
  • iOS and Android navigation structure, main action placement and corner radii other than pills were not confirmed.
  • Shadows and motion values were not measured.
  • Contrast was not recomputed for every token pair. Primary button pairs pass.
  • Account deletion and store policy rules were not verified for either app.