Media & Entertainment / iOS / Android / Web

Immich

Immich is a friendlier self-hosted photo app: one indigo brand that lightens on dark, a rainbow logo that doubles as ten color presets, and round, plain surfaces so photos lead.

Download
  • #4250AF
  • #ACCBFA
  • #FA2921
  • #ED79B5
  • #FFB400
  • #18C249

Color

Every color token in the file, grouped by role.

Brand

  • primary#4250AF
  • primary dark mode#ACCBFA
  • brand flutter light#4150AF
  • on primary#FFFFFF

Surfaces

  • paper#FFFFFF
  • dark bg#0A0A0A

Text

  • ink#000000
  • ink app#221F20
  • dark fg#E5E7EB
  • logo pink#ED79B5

More

  • dark gray#212121
  • logo red#FA2921
  • logo yellow#FFB400
  • logo blue#1E83F7
  • logo green#18C249
  • preset deep purple#6F43C0
  • preset deep purple dark#D3BBFF
  • preset red#C51C16
  • preset orange#FF5B01
  • preset lime#CDDC39
  • preset cyan#00BCD4
  • preset slate#696969
  • gray 100#F3F4F6
  • gray 200#E5E7EB
  • gray 500#6B7280

Typography

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

  • GoogleSansOpen font, shown as published.
  • GoogleSansCodeOpen font, shown as published.
  • title large26px / 600 / 1.2

    Pack my box with five dozen liquor jugs

  • title medium18px / 600 / 1.3

    The quick brown fox jumps over the lazy dog

  • title small16px / 600 / 1.3

    The quick brown fox jumps over the lazy dog

  • label14px / 500 / 1.4

    Continue to checkout

  • caption12px / 600 / 1.3

    Continue to checkout

  • body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

  • mono14px / 400 / 1.5

    Sphinx of black quartz, judge my vow 0123456789

Shape

Corner radius tokens.

  • md10px
  • lg15px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • base16px
  • lg24px
  • xl32px
  • sidebar72px

Components

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

  • button primary
    button-primary
  • button primary dark
    button-primary-dark
  • input
    input
  • dark card
    dark-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 110 lines
version: alpha
name: Immich-design-analysis
description: "A self-hosted photo and video backup product with a calm indigo brand (#4250af on light, a soft sky #accbfa on dark) built on Material 3 with ten selectable color presets, Google Sans typography, a five-color rainbow logo and generously rounded 10 to 15 pixel controls. The mobile and web apps share the same brand colors."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#4250af"
  primary-dark-mode: "#accbfa"
  brand-flutter-light: "#4150af"
  ink: "#000000"
  ink-app: "#221f20"
  paper: "#ffffff"
  dark-bg: "#0a0a0a"
  dark-fg: "#e5e7eb"
  dark-gray: "#212121"
  logo-red: "#fa2921"
  logo-pink: "#ed79b5"
  logo-yellow: "#ffb400"
  logo-blue: "#1e83f7"
  logo-green: "#18c249"
  preset-deep-purple: "#6f43c0"
  preset-deep-purple-dark: "#d3bbff"
  preset-red: "#c51c16"
  preset-orange: "#ff5b01"
  preset-lime: "#cddc39"
  preset-cyan: "#00bcd4"
  preset-slate: "#696969"
  gray-100: "#f3f4f6"
  gray-200: "#e5e7eb"
  gray-500: "#6b7280"
  on-primary: "#ffffff"

typography:
  title-large:
    fontFamily: "GoogleSans, sans-serif"
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.2
  title-medium:
    fontFamily: "GoogleSans, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
  title-small:
    fontFamily: "GoogleSans, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.3
  label:
    fontFamily: "GoogleSans, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
  caption:
    fontFamily: "GoogleSans, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.3
  body:
    fontFamily: "GoogleSans, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  mono:
    fontFamily: "GoogleSansCode, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5

rounded:
  md: 10px
  lg: 15px
  pill: 9999px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    height: 40px
  button-primary-dark:
    backgroundColor: "{colors.primary-dark-mode}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    height: 40px
  input:
    backgroundColor: "{colors.gray-100}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    height: 48px
  dark-card:
    backgroundColor: "{colors.dark-gray}"
    textColor: "{colors.dark-fg}"
    rounded: "{rounded.lg}"
    padding: 16px

Overview

Immich looks like a friendlier, self-hosted take on a mainstream photo app. The brand is a calm indigo on light and a soft periwinkle on dark, set in Google Sans, and the personality comes from the five-color logo (red, pink, yellow, blue, green) that is also available as ten color presets in the mobile app. Photos are the content, so surfaces are plain white or near-black. [Measured]

Three decisions define the look:

  1. Brand color flips for dark mode. Indigo #4250af becomes #accbfa on dark backgrounds (#0a0a0a), keeping contrast without a separate palette. The web and mobile apps use these same two values. [Measured]
  2. Ten user color presets. The mobile app offers indigo, deep purple, pink, red, orange, yellow, lime, green, cyan and slate gray, each a Material 3 scheme generated from a seed, so users can retheme the app. [Measured]
  3. Round, soft controls. Mobile cards and inputs use 15 radius, buttons and tiles 10, and titles are semibold Google Sans. [Measured]

Source for this file: the public source and immich.app, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDark
Brand primary#4250af (mobile #4150af)#accbfa
Background#ffffff#0a0a0a
Foreground#000000 (app text #221f20)#e5e7eb
Dark gray surface#212121
Input and soft fill#f3f4f6 (ring #e5e7eb)
Secondary text#6b7280
Logo red, pink, yellow#fa2921, #ed79b5, #ffb400
Logo blue, green#1e83f7, #18c249

Mobile presets (light seeds): indigo #4150af, deep purple #6f43c0, pink #ed79b5, red #c51c16, orange #ff5b01, yellow #ffb400, lime #cddc39, green #18c249, cyan #00bcd4 and slate gray #696969. Dark seeds are tuned per preset (for example deep purple #d3bbff, orange #cc6d08, red #d3302f). Each uses a Material 3 scheme generator, with fidelity and neutral variants for orange and slate. Dynamic system color is supported. All [Measured].

Typography

Google Sans is the interface font on both mobile and web (a variable file with weights 410 to 900), with Google Sans Code for monospace. The mobile app picks a locale-specific font where needed. [Measured]

Mobile scale: titles at 26, 18 and 16 (semibold), display styles at 18, 14 and 12 (semibold), body hints at 14 regular, and labels at 14 medium. App bars use 18 semibold. [Measured] The web uses a scale from .75rem to 3.75rem. [Measured]

Shape and spacing

  • Mobile radii: 10 (buttons and cards) and 15 (inputs, dialogs and tiles). App bar elevation is 0. [Measured]
  • Web: a 4.5rem sidebar width token. Breakpoints at 639, 767, 850 (sidebar), 1023, 1279 and 1535px. [Measured]

Iconography and motion

Icons follow the Material style. The logo mark is a five-petal pinwheel in the logo colors. [Inferred] Motion values were not extracted. [Inferred]

Themes

Light and dark on both apps, ten color presets and dynamic color on mobile. The web has its own light and dark theme variables. [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.

The iOS back swipe works, but the app bar has a Material look without a previous-title label. [Inferred]

Primary navigation

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

A bottom navigation with photos, search, albums and library. The structure is inferred from product knowledge. [Inferred]

Main action

Expected on iOS: nav bar or bottom bar button.

Upload and backup controls in the app bar and library. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Material dialogs and bottom sheets. [Inferred]

Controls

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

Material controls with 15 radius inputs. [Measured]

Text sizing

Expected on iOS: Dynamic Type.

Text follows the system scale. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: safe areas, status bar.

Handled by the platform. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Material-style icons. [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 to the user's own server, with optional single sign-on through the server. Account deletion is on the server. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: system components and Dynamic Type.

Low fidelity, with Material 3 on iOS and one look on both platforms. [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 an up arrow. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

A Material navigation bar. [Inferred]

Main action

Expected on Android: floating action button.

Not verified. Upload and sync actions are in the app bar. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Material bottom sheets, dialogs and snackbars. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Material 3 controls styled by the generated scheme. [Measured]

Text sizing

Expected on Android: font scale.

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.

Material-style icons. [Inferred]

Account and sign-in rules

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

Own-server sign-in. Account deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

High fidelity: seeded Material 3 schemes, ten presets and dynamic color. [Measured]

Platform: Web

The immich.app site and the web application.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back with a sidebar for sections. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

A left sidebar that collapses at the 850px breakpoint, 4.5rem wide when collapsed. [Measured]

Main action

Expected on Web: page-level button.

An upload button in the header. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Modals and toasts in the shared UI package. [Inferred]

Controls

Expected on Web: native or custom.

Custom controls from the shared @immich/ui package, with gray-100 inputs and a ring on focus. [Measured]

Text sizing

Expected on Web: browser zoom.

Sizes in rem. [Measured]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive with breakpoints from 639px to 1535px. [Measured]

Icons

Expected on Web: any.

SVG icons. [Inferred]

Account and sign-in rules

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

Own-server accounts. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms with a shared brand with the mobile app. [Measured]

Cross-platform consistency

The same brand indigo and its dark-mode counterpart, the same Google Sans family and the same logo colors appear on mobile and web. The mobile app adds ten user-selectable presets that the web does not. [Measured]

Do's and Don'ts

Do

  • Use #4250af on light and #accbfa on dark for the brand color.
  • Set type in Google Sans with semibold titles.
  • Use 15 radius for inputs and 10 for buttons on mobile.
  • Offer color presets generated from seeds, including a neutral gray.
  • Keep the logo's five colors for illustration and branding moments.

Don't

  • Don't use pure white text on the light brand color without checking contrast.
  • Don't hand-pick scheme colors that Material 3 can generate.
  • Don't use the logo colors for functional UI states.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • The shared web UI package (@immich/ui) was not read, so web component details are partly missing.
  • Navigation structure and the main action are inferred from product knowledge.
  • Spacing on mobile and web screens was not measured beyond a few tokens.
  • Account deletion and store policy rules were not verified.