Immich — design system & UI screens

Consumer · 8 screens · immich.app

Photos Timeline — Open-source photo and video management for your own server.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/immich.

Decoded design system

Immich's decoded design system: background #FFFFFF, text #0A0A0B, accent #4250AF, link #4250AF, primary #4250AF; type scale h1 36px / h2 36px / body 16px; 8px spacing base; 4px base radius. The single interactive/action color is #4250AF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F0F0F0`
border	`#DADADA`
text	`#0A0A0B`
text_muted	`#676767`
primary	`#4250AF`
accent	`#4250AF`
link	`#4250AF`
button_bg	`#4250AF`
button_text	`#FFFFFF`

Using these colors

Action color #4250AF — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link, button_bg are all #4250AF — one role, not several (the action color).
accent #4250AF — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.

Typography

h1: 36px
h2: 36px
body: 16px

Spacing

base unit: 8px
scale: 4px, 8px, 10px, 16px, 32px

Radii

base: 4px
button: 9999px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease
animated properties: transform, color, background-color, border-color

Native design tokens

Token	Value
`--immich-ui-danger-800`	`lab(22.3811% 41.0341 31.1197)`
`--immich-ui-danger-300`	`lab(72.5219% 39.626 18.8161)`
`--immich-ui-primary-500`	`#4250af`
`--immich-ui-success-200`	`lab(87.12% -73.1038 55.5232)`
`--color-slate-200`	`lab(91.7353% -.998765 -4.76968)`
`--color-orange-600`	`lab(57.1026% 64.2584 89.8886)`
`--color-slate-700`	`lab(26.9569% -1.47016 -15.6993)`
`--color-neutral-600`	`lab(34.924% 0 0)`
`--color-neutral-500`	`lab(48.496% 0 0)`
`--color-amber-600`	`lab(60.3514% 40.5624 87.1228)`

…and 110 more measured on the page.

Layout (measured)

common grid: 2 columns

Motion choreography (measured)

Load order: div

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Input (measured)

height 40px · radius 8px

Responsive (measured)

breakpoints: 639px · 767px · 800px · 850px · 1023px · 1279px
mobile (390px): hero 30px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →