Finance / iOS / Android / Web

Phoenix

Phoenix hides Lightning complexity behind a calm payments-app look: a cool near-white page, white cards, azure for action, green for success and a blue-gray text ladder.

Download
  • #25A5FF
  • #1AC486
  • #50B338
  • #2B313E
  • #F5F5FA
  • #FEBC2E

Color

Every color token in the file, grouped by role.

Brand

  • primary#25A5FF
  • on primary#FFFFFF
  • ink secondary#73899E
  • dark ink secondary#73899E
  • dark primary#25A5FF

Surfaces

  • paper#FFFFFF
  • canvas#F5F5FA
  • canvas android#F4F7F9
  • dark bg#000000
  • dark surface#16191D
  • dark surface android#171B22

Text

  • ink#2B313E
  • ink faint#99A2B6
  • surface muted#F0F5F7
  • web ink#24333E
  • dark ink#FFFFFF

Lines

  • divider#E1EBED
  • divider strong#D1D7E3
  • dark divider#4E586C

Status

  • success#50B338
  • success bright#1AC486
  • warning#FEBC2E
  • warning orange#FFA525
  • negative#D14F4F
  • dark success#00B962
  • dark negative#DB5959

More

  • purple#5741D9
  • horizon#91B4D1

Typography

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

  • RobotoOpen font, shown as published.
  • h148px / 500 / 1.1

    Phoenix

  • h326px / 500 / 1.2

    Pack my box with five dozen liquor jugs

  • h418px / 700 / 1.3

    The quick brown fox jumps over the lazy dog

  • body16px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • body small14px / 400 / 1.4

    The quick brown fox jumps over the lazy dog

  • label16px / 500 / 1.3

    Continue to checkout

Shape

Corner radius tokens.

  • sm8px
  • md12px
  • lg16px
  • 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
  • card
    card
  • card dark
    card-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 103 lines
version: alpha
name: Phoenix-design-analysis
description: "A self-custodial Bitcoin Lightning wallet that tries to feel like a normal payments app: a cool near-white background (#f5f5fa) with white cards, azure #25a5ff for primary actions, green for success, a blue-gray text ladder from #2b313e down, and an all-black dark mode on iOS. Android and iOS share the same palette names."
status: Draft
appVersion: "source snapshot of the public repository and phoenix.acinq.co, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#25a5ff"
  on-primary: "#ffffff"
  ink: "#2b313e"
  ink-secondary: "#73899e"
  ink-faint: "#99a2b6"
  paper: "#ffffff"
  canvas: "#f5f5fa"
  canvas-android: "#f4f7f9"
  surface-muted: "#f0f5f7"
  divider: "#e1ebed"
  divider-strong: "#d1d7e3"
  success: "#50b338"
  success-bright: "#1ac486"
  warning: "#febc2e"
  warning-orange: "#ffa525"
  negative: "#d14f4f"
  purple: "#5741d9"
  horizon: "#91b4d1"
  web-ink: "#24333e"
  dark-bg: "#000000"
  dark-surface: "#16191d"
  dark-surface-android: "#171b22"
  dark-ink: "#ffffff"
  dark-ink-secondary: "#73899e"
  dark-divider: "#4e586c"
  dark-success: "#00b962"
  dark-negative: "#db5959"
  dark-primary: "#25a5ff"

typography:
  h1:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.1
  h3:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.2
  h4:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.3
  body:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
  body-small:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
  label:
    fontFamily: "'Roboto', sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  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
  card:
    backgroundColor: "{colors.paper}"
    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

Phoenix is ACINQ's self-custodial Bitcoin wallet for the Lightning Network. ACINQ describes the aim as the experience of a good old Bitcoin wallet with instant, cheap payments. [Observed]

What defines the look:

  1. Cool near-white and white cards. The iOS background is #f5f5fa and Android uses #f4f7f9, with white cards and soft #e1ebed borders. [Measured]
  2. Azure and green. Azure #25a5ff is the Android primary and the iOS accent, and green (#50b338, #1ac486) is for success and for the brand on the website. [Measured]
  3. A blue-gray text ladder. Text runs from #2b313e to #73899e and #99a2b6. [Measured]
  4. True black dark mode. iOS dark uses #000000 backgrounds with a #16191d muted surface. [Measured]

Source for this file: the public Phoenix source (Android and iOS) and the phoenix.acinq.co stylesheet, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Primary and accent blue#25a5ff#25a5ffAndroid theme, iOS catalog
Success green#50b338#00b962iOS catalog
Bright green#1ac486sameAndroid palette, website
Orange accent#ffa525#ffa525iOS catalog
Warning#febc2e#ffc638iOS catalog
Negative#d14f4f#db5959iOS catalog
Page background#f5f5fa iOS, #f4f7f9 Android#000000 iOS, #171b22 Android
Muted background#ffffff#16191diOS
Border#e1ebed#4e586ciOS
Text#2b313e#ffffffAndroid palette
Secondary text#73899e#73899eAndroid palette
Faint text#99a2b6not readAndroid palette
Button fill (iOS)#fcfcff#000000iOS
Website text#24333ephoenix.acinq.co

The Android palette also defines a gray ladder from #f9fafc (gray10) to #111318 (gray1000) and red tints (#d03d33, #c76d6d, #f9e9ec). [Measured] The iOS primary foreground asset reads black in dark mode, which looks like a text role used on light fills, so it is not listed as body text. [Inferred]

Typography

Android sets sans-serif (Roboto) for every style: h1 48sp, h2 38sp, h3 26sp at medium weight, h4 18 and h5 16 bold, subtitle 16 and 14 in the muted gray, with letter spacing 0.5sp on placeholders. [Measured] The website uses Roboto and Titillium Web with a pixel font for decoration. [Measured] iOS uses the system font. [Inferred]

Shape and spacing

Android defines rounded shapes in its theme and iOS has a shapes file. The exact pixel radii were not read, so the radius scale in the front matter is inferred from common card radii. [Inferred] Spacing was not mapped.

Iconography and motion

Simple line icons and a flame logo. [Inferred] Motion values were not measured.

Themes

Light, dark and system on both apps, with an iOS accent that can differ between blue, green and orange assets. [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.

NavigationStack with a back chevron. [Inferred]

Primary navigation

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

A single home screen with a transaction list and send and receive actions, plus a settings entry. No tab bar was confirmed. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Send and receive buttons on the home screen. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Sheets and popovers for payment details and confirmations. [Inferred]

Controls

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

Controls with a custom button fill asset and text field border asset. [Measured]

Text sizing

Expected on iOS: Dynamic Type.

Dynamic Type support was not checked. [Inferred]

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.

SF Symbols and custom assets. [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.

No account. The wallet is created locally with a seed, so Guideline 4.8 is not relevant. Account deletion is not applicable, but wallet data deletion flow 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.

Colors adapt to dark mode through a color set per role. A separate accent set (blue, green, orange) exists. [Measured]

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.

A home screen with a payments list and a settings route. No bottom navigation was confirmed. [Inferred]

Main action

Expected on Android: Floating action button.

Send and receive actions on the home screen. A floating action button was not confirmed. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Dialogs and bottom sheets. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Material components with an app color object and custom text styles. [Measured]

Text sizing

Expected on Android: Font scale.

Text uses sp, so it follows 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.

Custom vector icons. [Inferred]

Account and sign-in rules

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

No account. [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 2 Typography and Colors objects with Phoenix's own palette, so the app follows Android conventions with its own colors. [Measured]

Platform: Web

The phoenix.acinq.co marketing site only. There is no web wallet.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

A top bar on a single long page. [Inferred]

Main action

Expected on Web: Page-level button.

Download buttons in the brand green #1ac486. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not applicable. [Inferred]

Controls

Expected on Web: Native or custom.

Not measured. [Inferred]

Text sizing

Expected on Web: Browser zoom.

Sizes in px and em. [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 marketing page with a green brand color and a decorative pixel font, which the app itself does not use. [Measured]

Cross-platform consistency

Consistent across platforms: azure and green, the blue-gray text ladder, white cards on a cool background and the no-account model. [Measured]

Intentionally different: the website leads with green while the app leads with azure, and iOS goes to true black in dark mode while Android uses #171b22. [Measured]

Do's and Don'ts

Do

  • Use azure for primary actions and green for success.
  • Keep the page cool near-white with white cards and #e1ebed borders.
  • Use the blue-gray text ladder for secondary and faint text.
  • Use true black in dark mode on OLED.

Don't

  • Don't use white text on azure #25a5ff for small text. It measures about 2.6 to 1.
  • Don't use the faint text color #99a2b6 for essential information.
  • Don't carry the website's pixel font into the app.

Known Gaps

  • No on-device capture was done. All statements come from reading source and a stylesheet.
  • White text on the azure primary #25a5ff measures about 2.6 to 1, below the 4.5 to 1 target.
  • Corner radii, spacing, screen structure and iOS typography were not measured or confirmed, and the front matter radii are inferred.
  • The iOS primary foreground role was not mapped to a use.
  • Wallet deletion and store policy rules were not verified for either app.