Tinct — Case Study · Arne Steiger

Überblick

Auf einen Blick.

Rolle

Senior Art Director / Creative AI Lead —
Konzept, Design, Entwicklung

Aufgaben

Konzept · UX Design
Swift-Entwicklung · Open Source

Typ

Eigenprojekt · Open Source (MIT)

Zeitraum

März – April 2026

Status

● v0.1 · Fertig

Tech Stack

SwiftUIAppKitScreenCaptureKitNSColorPanelmacOS 13 Ventura+

GitHub

github.com/steiger-design/tinct

Plattform

macOS 13 Ventura oder neuer

Problem

Das Problem.

Jedes Mal wenn ein Designer eine Farbe braucht, unterbricht er seinen Workflow. Das muss nicht so sein.

Der typische Weg: Screenshot machen, in Figma öffnen, Color Picker aktivieren, Hex kopieren, wieder zurück zum eigentlichen Tool. Für eine einzige Farbe. Vier Schritte, zwei Tool-Wechsel, dreißig Sekunden Unterbrechung — dutzende Male pro Tag.

Wer eine Palette aus einem Referenzbild braucht, hat es noch schwerer: Adobe Extract öffnen, Bild hochladen, exportieren, ins Figma-Format übersetzen. Für fünf Farben, die man in zehn Sekunden hätte haben können.

Tinct macht Farbarbeit auf dem Mac so frictionless wie möglich — kein extra Tool öffnen, kein Screenshot, kein Umkopieren. Einfach im Menu Bar wohnen und immer da sein wenn man eine Farbe braucht.

User Research · Persona

Für wen.

David O.

Executive Creative Director · Hamburg · 52

„In der Produktion entscheidet Farbe über alles. Ich brauche den Pantone-Wert sofort — nicht nach drei Tool-Wechseln und einem Screenshot."

Pain Points

Pantone-Werte für Printproduktionen manuell nachschlagen
Farbabnahme mit internationalen Druckereien kostet Zeit
Screenshot-Workflow für jede Farbentnahme unterbricht Meeting-Flow
Palette aus Kunden-Referenzmaterial schnell kommunizieren
Farbwerte zwischen Agentur und Produktionsfirma synchronisieren

Ziele

Pantone direkt beim Picken, kein Nachschlagen
HEX + CMYK + Pantone auf einen Blick für Print und Digital
Im Kunden-Meeting sofort Farbwerte aus Referenzen zeigen
.ASE direkt in Adobe-Tools öffnen ohne Umweg
Farbentscheidungen dokumentieren und weitergeben

Tim K.

Freelance Brand & UI Designer · Hamburg · 26

„Ich arbeite überall — Café, Park, Zug. Mein Setup muss so schlank wie möglich sein. Tinct ist das einzige Farb-Tool das dazu passt."

Pain Points

Figma Color Picker funktioniert nur auf Screenshots — ein extra Schritt zu viel
Keine einheitliche Farbhistorie über verschiedene Projekte
CSS Custom Properties für Kunden manuell eintippen
Design Tokens für Übergabe an Entwickler aufwändig erstellen
Kein Pantone-Wert wenn Kunden nach Druckfarben fragen

Ziele

Farbe direkt von jeder Stelle — kein Screenshot-Zwischenschritt
CSS und JSON Export direkt aus der App
Farbhistorie als Referenz für laufende Projekte
Schlankes Tool das in jeden Workflow passt
Pantone parat haben wenn Kunden Print-Fragen stellen

UX · User Flow

Der Weg durch das Produkt.

01

🍎

Menu Bar öffnen

Tinct-Icon in der Mac Menu Bar klicken — Popover öffnet sich sofort

02

🎛️

Tool wählen

Color Picker (Einzelfarbe) oder Area Select (Palette) — Sampling einstellen

03

🔍

Farbe / Bereich wählen

Lupe mit 8× Zoom zum präzisen Picken oder Rechteck über beliebigen Bereich ziehen

04

🎨

Ergebnis

HEX · RGB · HSL · CMYK auf einen Blick + nächste Pantone-Annäherung mit ΔE-Wert

05

📤

Exportieren

.ASE (Adobe) · .CLR (macOS) · .JSON (Tokens) · CSS Custom Properties — oder direkt kopieren

Process · Wireframes

Vom Sketch zum Interface.

Die größte UX-Herausforderung bei einem Menu Bar Tool: alles muss in einem sehr kleinen, kompakten Popover funktionieren — ohne Navigation, ohne Hierarchie, ohne Ablenkung.

01 — Main · Tool wählen

02 — Result · Einzelfarbe

03 — Area Select · Palette

ℹ Das kompakte Popover-Format zwingt zu radikaler Reduktion: jede Funktion muss auf direktem Weg erreichbar sein, ohne Navigation oder Hierarchie. Der Lupe-Overlay mit 8× Zoom war die technisch aufwendigste Entscheidung — aber UX-seitig die richtigste.

Design Process · Entscheidungen

Entscheidungen und ihre Gründe.

Entscheidung 01

Menu Bar App vs. Standalone Fenster-App

✗Eigenständige App mit eigenem Fenster und Dock-Icon

✓Menu Bar Popover — kein Dock, kein Fenster, immer verfügbar

Tinct ist ein Werkzeug, kein Programm. Es soll da sein wenn man es braucht und verschwinden wenn nicht. Ein Dock-Icon würde suggerieren dass man die App "öffnet und benutzt" — das ist das falsche mentale Modell. Das Menu Bar Icon ist das richtige: es ist eine Erweiterung des Systems, nicht eine zusätzliche Anwendung.

Entscheidung 02

5 Extraction-Modi vs. ein universeller Algorithmus

✗Ein Algorithmus extrahiert die "besten" Farben — User bekommt was der Algorithmus entscheidet

✓5 Modi: Dominant · Vibrant · Brightest · Darkest · Contrast — User wählt die Perspektive

"Die beste Palette" gibt es nicht — es gibt die richtige Palette für den jeweiligen Zweck. Ein Shadow-Analyse braucht Darkest. Ein Kampagnen-Moodboard braucht Vibrant. Contrast ist für Accessibility-Tests. Fünf Modi geben dem Designer die Kontrolle zurück.

Entscheidung 03

Pantone-Approximation vs. weglassen

✗Nur digitale Farbwerte (HEX, RGB, HSL, CMYK) — einfacher, keine Lizenzfragen

✓Nächste Pantone-Annäherung mit ΔE-Genauigkeitswert

Designer die für Print arbeiten brauchen Pantone. Immer. Wer das weglässt zwingt sie zum manuellen Nachschlagen. Der ΔE-Wert ist entscheidend: er macht klar dass es eine Annäherung ist, keine offizielle Referenz — das ist ehrlich und praktisch gleichzeitig.

Entscheidung 04

Open Source vs. kommerzielles Produkt

✗Closed Source, App Store, Bezahlmodell

✓Open Source MIT — kostenlos, auf GitHub

Tinct ist ein Portfolio-Projekt das Swift-Entwicklungskompetenz und UX-Thinking auf macOS zeigt. Der Wert liegt nicht im Produkt selbst — er liegt darin zu zeigen dass ich eine native macOS App von Null aufbauen kann. Open Source ist die konsequente Entscheidung dafür.

Screens & Interface

Das Produkt.

01 — Main UI · Color Picker

02 — Color Picker · Aktiv

03 — Area Select · Modus wählen

04 — Picking · In Aktion

05 — Result · Einzelfarbe + Pantone

06 — Result · Area Select

07 — History · Farben & Paletten

08 — Palette · Extracted

09 — Settings

Iterationen & Learnings

Was ich mitgenommen habe.

✓ Was gut funktioniert hat

→ScreenCaptureKit ist die richtige API für den Lupe-Overlay — performant und präzise
→5 Extraction-Modi statt einem geben echte Kontrolle
→Pantone-Approximation mit ΔE ist der überraschendste und nützlichste Feature
→Menu Bar Popover fühlt sich sofort nativ an
→Open Source Entscheidung war richtig — zeigt Kompetenz ohne Ablenkung durch Monetarisierung

↻ Was ich heute anders machen würde

→Figma Tokens Export früher einplanen — ist der meistgefragte Missing Feature
→History-Export als Batch (alle Colors/Palettes auf einmal) statt einzeln
→Homebrew-Distribution von Anfang an vorbereiten — ist der natürliche Weg für macOS Developer Tools
→Keyboard-Shortcuts prominenter kommunizieren — ⌘⇧C und ⌘⇧A werden kaum entdeckt

Ein gutes Tool verschwindet. Tinct ist dann am besten wenn der User nicht merkt dass er es benutzt — sondern einfach die Farbe hat die er braucht.

Links

Weitererkunden.

GitHub → Download v0.1 → ← Zurück zum Portfolio

Tinct.Farben picken.Paletten extrahieren.Direkt aus dem Menu Bar.