---
version: alpha
name: Jellyfin-design-analysis
description: "A dark-first media streaming client: near-black surfaces (#101010 and #202020), one sky blue accent (#00a4dc) and a purple (#ac5cc3) from the logo gradient, with media artwork as the real color. Android uses a Material dark theme, while iOS leans on system colors."
status: Draft
appVersion: "source snapshot of the public repositories, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#00a4dc"
  primary-web: "#00afeb"
  purple: "#ac5cc3"
  surface-base: "#101010"
  surface-bar: "#202020"
  surface-card: "#363636"
  surface-launcher: "#000b25"
  surface-skip: "#202124"
  ink-on-dark: "#fafafa"
  ink-skip: "#dddddd"
  timebar-unplayed: "#333333"
  scrim-controls: "#60000000"
  scrim-info: "#cc000000"
  error-dark: "#cf6679"
  docs-primary: "#3578e5"
  docs-dark-bg: "#242526"
  docs-dark-nav: "#172138"
  docs-text-dark: "#303846"
  docs-success: "#00a400"
  docs-warning: "#ffba00"
  docs-danger: "#fa383e"
  paper: "#ffffff"
  on-primary: "#ffffff"

typography:
  controls-title:
    fontFamily: "sans-serif"
    fontSize: 16sp
    fontWeight: 400
    lineHeight: 24sp
  body:
    fontFamily: "sans-serif"
    fontSize: 14sp
    fontWeight: 400
    lineHeight: 20sp
  caption:
    fontFamily: "sans-serif"
    fontSize: 12sp
    fontWeight: 400
    lineHeight: 16sp
  web-body:
    fontFamily: "'Noto Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
  web-heading:
    fontFamily: "'Noto Sans', sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25

rounded:
  none: 0px
  sm: 4px
  md: 8px
  pill: 9999px

spacing:
  xs: 3px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 72px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 40px
  media-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.md}"
    padding: 12px
  skip-chip:
    backgroundColor: "{colors.surface-skip}"
    textColor: "{colors.ink-skip}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px
  top-bar:
    backgroundColor: "{colors.surface-bar}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.controls-title}"
    height: 56px
---

## Overview

Jellyfin is designed to disappear behind the media. The apps are dark by default, surfaces are graphite, and the only brand color is a clean sky blue `#00a4dc`, with the logo's purple `#ac5cc3` used sparingly. Posters, backdrops and thumbnails supply all the real color, so the interface stays neutral and lets artwork dominate. [Measured]

Three decisions define the look:

1. **Dark first.** The Android theme sets the background to `#101010`, the app bar to `#202020` and cards to `#363636`, with a darker `#101010` primary variant. [Measured]
2. **One blue accent.** `#00a4dc` is the Android primary and accent, and the website uses a close `#00afeb`. [Measured]
3. **Playback chrome is translucent black.** Player controls sit on a `#60000000` scrim, info panels on `#cc000000`, the unplayed time bar is `#333333`, and skip buttons use `#202124` with `#dddddd` text. [Measured]

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

## Core

### Colors

| Role | Value | Where |
|------|-------|-------|
| Primary and accent | `#00a4dc` | Android |
| Web accent | `#00afeb` | jellyfin.org |
| Logo purple | `#ac5cc3` | iOS |
| Background | `#101010` | Android |
| App bar and primary | `#202020` | Android |
| Card surface | `#363636` | Android |
| Launcher background | `#000b25` | Android |
| Splash fill | `#fafafa` | Android |
| Error on dark | `#cf6679` | Android |
| Playback scrim | `#60000000`, info `#cc000000` | Android |
| Unplayed track | `#333333` | Android |
| Skip chip | `#202124` with `#dddddd` text | Android |
| Docs site dark | `#242526`, navbar `#172138` | jellyfin.org |
| Docs semantic | success `#00a400`, warning `#ffba00`, danger `#fa383e` | jellyfin.org |

The iOS app mostly uses the system colors (system background, secondary and tertiary system fill) and adds the purple. [Measured]

### Typography

- **Android:** system sans, with a `16sp` title in the player controls. [Measured for the title size]
- **Website:** Noto Sans, with `1.5rem` and `0.8rem` as the most used sizes. [Measured]
- **iOS:** the system font, and the app includes a font picker. [Measured]

### Shape and spacing

- **Android shapes:** small `4dp`, medium `8dp`, large `0dp` (a square large shape). [Measured]
- **Player spacing:** controls padding `12dp`, button gaps `24dp`, bottom controls `42dp` size with `8dp` padding and margin, a `3dp` chapter marker, a `160dp` gesture area and `72dp` gesture images. [Measured]
- **Lists:** a `64dp` movie thumbnail size. [Measured]

### Iconography and motion

Simple play-control icons. Gesture overlays show large icons (`72dp`) for seek and brightness. [Measured] No motion tokens were found. [Inferred]

### Themes

Dark is the default on Android. The website has a light and a dark docs theme. iOS follows the system. [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 behavior. [Inferred]

### Primary navigation

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

A tab bar for home, media libraries and settings. Not verified in the files read. [Inferred]

### Main action

Expected on iOS: nav bar or bottom bar button.

Play buttons within media detail screens. [Inferred]

### Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Standard sheets and alerts. [Inferred]

### Controls

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

Platform controls and a custom color gradient slider. [Measured]

### Text sizing

Expected on iOS: Dynamic Type.

System text styles are expected, and a font picker view exists. [Measured]

### 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 are expected for most 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 Jellyfin server, with no third-party social login. Account deletion is on the server. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on iOS: system components and Dynamic Type.

High fidelity. The app relies on system colors and native components and adds only the purple accent. [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 drives navigation inside the web UI and the player. [Inferred]

### Primary navigation

Expected on Android: navigation bar, rail on tablets.

The web UI provides the navigation drawer and tabs. [Inferred]

### Main action

Expected on Android: floating action button.

Play buttons in the web UI. No floating action button. [Inferred]

### Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

The web UI draws most dialogs. The native player shows overlays and a skip button. [Inferred]

### Controls

Expected on Android: Material switches, pickers, chips.

An older Material color setup with a skip chip and playback controls. [Measured]

### Text sizing

Expected on Android: font scale.

Sizes are in `sp`. [Measured]

### Touch and pointer targets

Expected on Android: 48dp minimum.

Player controls are `42dp` bottom buttons and larger center icons. [Measured]

### Insets and system bars

Expected on Android: edge to edge, system bars.

Full-screen playback with a translucent control scrim. [Measured]

### Icons

Expected on Android: Material Symbols or custom.

Player icons from the ExoPlayer library. [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.

Partial. The theme is a small dark Material palette, and most of the UI is the web client. [Measured]

## Platform: Web

The jellyfin.org documentation site and the web client. Only the documentation site was measured.

### Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back with documentation breadcrumbs. [Inferred]

### Primary navigation

Expected on Web: top nav or sidebar.

A top navbar and a documentation sidebar. [Inferred]

### Main action

Expected on Web: page-level button.

Download and Get Started buttons. [Inferred]

### Sheets, dialogs and messages

Expected on Web: modals, toasts.

Documentation admonitions in success, info, warning and danger tones. [Measured]

### Controls

Expected on Web: native or custom.

Standard documentation-site controls. [Inferred]

### 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. [Inferred]

### Icons

Expected on Web: any.

SVG. [Inferred]

### Account and sign-in rules

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

Informational site. [Inferred]

### Platform conformance

Expected on Web: web norms for links and forms.

A standard documentation site with the default blue `#3578e5`, which is not the product's own `#00a4dc`. [Measured]

## Cross-platform consistency

Dark, neutral surfaces and the sky blue accent link the apps. The documentation site uses a different default blue and the logo purple appears only on iOS, so the brand is not consistently expressed. [Measured]

## Do's and Don'ts

### Do

- Keep surfaces graphite (`#101010`, `#202020`, `#363636`) and let artwork supply color.
- Use `#00a4dc` as the only accent.
- Put playback controls on translucent black scrims.
- On iOS, prefer system colors and components.
- Make gesture overlays large and obvious.

### Don't

- Don't add extra brand colors to the chrome.
- Don't use bright backgrounds behind posters.
- Don't use the documentation site's default blue for product UI.

## Known Gaps

- No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
- The embedded web client (the jellyfin-web project) was not read. Only the documentation site was measured.
- iOS has no explicit palette beyond the purple, so its real look depends on system colors.
- The navigation structure of both apps is inferred from product knowledge.
- Account deletion and store policy rules were not verified.
- Contrast: white text on the accent `#00a4dc` measures about 2.9 to 1, below the 4.5 to 1 target for normal text.