--- 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 | Role | Light | Dark | Where | |------|-------|------|-------| | Canvas (`bg-canvas-default`) | `#ffffff` | `#101317` | Compound 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.