--- 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 | Role | Light | Dark | |------|-------|------| | 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.