gitwtfhub

wtf is jellyfin-design?

jellyfin/jellyfin-design — explained in plain English

Analysis updated 2026-08-14 · repo last pushed 2026-08-01

7JavaScriptAudience · designerComplexity · 1/5ActiveSetup · easy

TL;DR

A centralized home for Jellyfin's design tokens, colors, spacing, fonts, and more, that automatically converts them into CSS, Android, and iOS formats so all Jellyfin apps stay visually consistent.

Mindmap

mindmap
  root((repo))
    What it does
      Stores design tokens
      Auto converts to platform formats
    Tech stack
      StyleDictionary
      JSON token definitions
      JavaScript
    Use cases
      Keep apps visually consistent
      Update colors in one place
    Audience
      Designers and developers
      Jellyfin contributors
    Outputs
      CSS variables
      Android XML
      iOS Swift code

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Change a color or spacing value once and have it automatically update across all Jellyfin apps.

REASON 2

Generate platform-specific style files for web, Android, and iOS from a single source of truth.

REASON 3

Maintain visual consistency across multiple Jellyfin interfaces including web, desktop, mobile, and TV.

What's in the stack?

JavaScriptStyleDictionaryJSON

How it stacks up

jellyfin/jellyfin-designanefzaoui/minecraft-server-managerboneskull/promwrap
Stars777
LanguageJavaScriptJavaScriptJavaScript
Last pushed2026-08-012020-07-21
MaintenanceActiveDormant
Setup difficultyeasymoderateeasy
Complexity1/53/52/5
Audiencedesignergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · easy Time to first run · 5min

Wtf does this do

Jellyfin Design is a small project that holds the "design tokens" for Jellyfin, the open-source media server. Design tokens are the fundamental building blocks of a visual style, things like exact color values, spacing measurements, font sizes, and border radii. Instead of hardcoding these values scattered across different apps and components, this repo keeps them in one centralized place so the entire Jellyfin ecosystem stays visually consistent. The repo uses a tool called StyleDictionary to take those design tokens (written in a standardized JSON format) and automatically translate them into formats that different platforms can actually use. For example, the same "primary blue" color definition can be converted into CSS variables for a web app, XML resources for Android, or Swift code for iOS. Running a single build command processes all the token definitions and outputs platform-specific files. This kind of project matters most for teams maintaining apps across multiple platforms. If Jellyfin ships on web, desktop, mobile, and TV interfaces, keeping the look and feel consistent across all of them is a real challenge. A designer might adjust a shade of gray or change a button's corner radius once here, and every app can pull in the updated value rather than having someone manually hunt down and update that color in dozens of separate codebases. The README is quite sparse, it covers just the tooling setup and a single build command. There's no detailed documentation about the full token structure, contribution guidelines, or how the outputs get consumed by the main Jellyfin applications. What's notable is that this is a focused, utility-level project: it's not an app itself, but rather the single source of truth that other Jellyfin projects depend on for their visual styling decisions.

Yoink these prompts

Prompt 1
I want to add a new design token for Jellyfin, like a new accent color or spacing value. Where do I define it in the JSON token files, and how do I run the build to generate the platform-specific outputs?
Prompt 2
Help me understand how StyleDictionary transforms the JSON design tokens in this repo into CSS variables, Android XML resources, and iOS Swift code.
Prompt 3
I need to update the primary button corner radius for all Jellyfin apps. Show me how to find the right token in this repo, change it, and rebuild the outputs.

Frequently asked questions

wtf is jellyfin-design?

A centralized home for Jellyfin's design tokens, colors, spacing, fonts, and more, that automatically converts them into CSS, Android, and iOS formats so all Jellyfin apps stay visually consistent.

What language is jellyfin-design written in?

Mainly JavaScript. The stack also includes JavaScript, StyleDictionary, JSON.

Is jellyfin-design actively maintained?

Active — commit in last 30 days (last push 2026-08-01).

How hard is jellyfin-design to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is jellyfin-design for?

Mainly designer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.