Media & Entertainment / iOS / Android / Web

Jellyfin

Jellyfin disappears behind the media: graphite surfaces, a single sky blue accent and translucent black playback chrome so artwork does the talking.

Download
  • #00A4DC
  • #AC5CC3
  • #101010
  • #202020
  • #363636
  • #000B25

Color

Every color token in the file, grouped by role.

Brand

  • primary#00A4DC
  • primary web#00AFEB
  • docs primary#3578E5
  • on primary#FFFFFF

Surfaces

  • surface base#101010
  • surface bar#202020
  • surface card#363636
  • surface launcher#000B25
  • surface skip#202124
  • docs dark bg#242526
  • paper#FFFFFF

Text

  • ink on dark#FAFAFA
  • ink skip#DDDDDD
  • docs text dark#303846

Lines

  • scrim controls#60000000 (0%)

Status

  • scrim info#CC000000 (0%)
  • error dark#CF6679
  • docs success#00A400
  • docs warning#FFBA00
  • docs danger#FA383E

More

  • purple#AC5CC3
  • timebar unplayed#333333
  • docs dark nav#172138

Typography

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

  • sans-serifSystem font, drawn with the default on your device.
  • Noto SansOpen font, shown as published.
  • controls title16px / 400 / 24sp

    The quick brown fox jumps over the lazy dog

  • body14px / 400 / 20sp

    The quick brown fox jumps over the lazy dog

  • caption12px / 400 / 16sp

    Continue to checkout

  • web body16px / 400 / 1.65

    The quick brown fox jumps over the lazy dog

  • web heading24px / 700 / 1.25

    Pack my box with five dozen liquor jugs

Shape

Corner radius tokens.

  • none0px
  • sm4px
  • md8px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs3px
  • sm8px
  • md12px
  • lg24px
  • xl72px

Components

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

  • button primary
    button-primary
  • media card
    media-card
  • skip chip
    skip-chip
  • top bar
    top-bar
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 97 lines
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

RoleValueWhere
Primary and accent#00a4dcAndroid
Web accent#00afebjellyfin.org
Logo purple#ac5cc3iOS
Background#101010Android
App bar and primary#202020Android
Card surface#363636Android
Launcher background#000b25Android
Splash fill#fafafaAndroid
Error on dark#cf6679Android
Playback scrim#60000000, info #cc000000Android
Unplayed track#333333Android
Skip chip#202124 with #dddddd textAndroid
Docs site dark#242526, navbar #172138jellyfin.org
Docs semanticsuccess #00a400, warning #ffba00, danger #fa383ejellyfin.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.