UX CASE STUDY · DESIGN TOOLS · v1.0, Shipped 2026

From a folder of 800 references to a shipped palette in under three minutes without sending a single pixel to the cloud.

Point Nitpic at a folder of references and a one-sentence brief. Get back a curated palette, a WCAG audit, and an exportable design system, in one window, in under three minutes. Everything runs locally.

SPEC · NV001
Role
Solo Designer & Developer
Timeline
v1.0, Shipped 2026
Stack
Electron · Vite + React · FastAPI · Ollama
Constraint
RUNS LOCALLY (NO CLOUD)
TOKENS PER BRIEF CURATION REQUESTAFTER vs BEFORE 22828→7500
MY ROLE002

Solo project, so I owned every layer. Research, persona, IA, visual system, the build. The audience I designed for is the audience I am: working designers, dev leads, and the creative directors who manage them.

Team
Solo, Designer of One
Stakeholders
Designers, Dev Leads, Creative Directors
FIG. 01v1.0, Shipped 2026
PROBLEM → SOLUTION003

The Problem vs. The Solution

Every color tool I owned wanted me to do three jobs on three surfaces. Pick favorites in a viewer, build a palette in a swatch app, check contrast in a third tool. The transitions between those surfaces were where the work happened, and where the work fell apart.

BEFORE003.A

Three tools, three tabs, nothing talks

Pulling a usable palette out of references is one of the slowest steps in early visual design. The tools have not kept up with how the work actually moves.

P-01
10 to 15 minutes per image, by handEyedrop a color. Squint at the neighbour that looks suspiciously similar. Copy the hex. Lose track of which reference you pulled it from. Repeat.
P-02
Auto-palettes you can't steerOther extractors pick five colors and call it done. You don't see why those five, you can't weight them, and merging in the brand hex a client emailed over is a fight.
P-03
A gap between moodboard and tokensInspiration lives in Pinterest. Tokens live in Figma or code. The handoff between them is manual and never really finishes.
AFTER003.B

One window, folder to palette

A three-pane workspace. Ingest references, write a brief, watch the AI curate. The output lands as a role-assigned palette with a live WCAG audit and six UI previews, then exports as a complete token set, and nothing leaves your machine.

S-01
Brief-driven curationType a sentence like "moody cinematic noir, deep blues, single warm light source." The AI ranks every image against the brief and returns a curated set with a matching palette. Ollama by default, Claude as the cloud fallback.
S-02
Palette to design system, WCAG built inEight named color roles render across six mockup variants with a full contrast matrix and one-click fixes. The Tokens stage then turns the winning palette into a working theme: OKLCH role assignment with an AA guarantee, light and dark from one extraction, exported as CSS custom properties or JSON.
S-03
Local-first AI, zero cloud costBrief curation, prompt generation, and style guide writing all run on Ollama by default. $0 per palette. Reference images stay on disk. The cloud fallback exists for weak hardware, not as the happy path.
THE IMPACT004

The Impact

Nitpic is a personal product, so these come from benchmarking v1.0 against my own workflow. Three numbers I'd put on a slide if a hiring manager asked what shipped.

Folder to exported palette
0min
End to end, for someone who knows the flow
Token payload cut
0%
From 22,828 down to 7,500 tokens for 150 images
AI cost per palette
$0
Default local path runs entirely on Ollama

Brief curation token payload

First cut overflowed Ollama's 4,096-token context window. Three layered fixes brought it under.
KEY DECISIONS005

Key Design Decisions

Three calls that defined what Nitpic is, and what it deliberately isn't.

DEC-01
Three-pane shell, not a floating canvas

v0 was a single 680px column. On a 27-inch monitor, half the screen was wallpaper. I evaluated a Figma-style floating canvas and a Lightroom-style three-pane grid. The grid won.

Why

Picking colors needs three surfaces visible at once: the reference grid, the image you're inspecting, and the palette you're building. The moment any of those overlaps another, you're working blind on the one underneath.

DEC-02
Metadata-only curation, not vision models

Instead of sending pixels to a vision model, the app sends a one-letter-keyed JSON catalog per image: id, hex, tone bucket, lightness, hue, top three tags. The model reasons about color in HSL space.

Why

Vision calls cost tokens by the thousand and most useful local models don't have vision. The catalog fits 150 images in 7,500 tokens, down from 22,828 in the first cut, inside Ollama's default 4,096-token constraint budget.

DEC-03
A custom design system, C-FRG

Industrial-camera concept. Signal-red accents, amber lens motifs, Barlow Condensed displays, Share Tech Mono for data labels, void-black surfaces.

Why

A color tool has to demonstrate a visual point of view or the pitch collapses. A generic Tailwind shell would have undercut the whole product. Designers trust tools that look like they were made by someone who uses them.

LIVE PROTOTYPE006

Try the Tokens engine

The palette-to-design-system stage, running as a single page: pick a sample palette or build your own, watch the role-assignment heuristic map it onto semantic tokens with a WCAG AA guard, flip light and dark, and export CSS or JSON. The same engine that runs inside the app.

kashb.ca/nitpic-tokens kashb.ca/nitpic-tokens ↗
DESIGN PROCESS008

Design Process

Standard Double Diamond, run end-to-end by one person. Owning every layer makes it tempting to skip the parts you find boring, so I had to stay honest about where I was and not let "I can just build it" short-circuit the thinking.

01
DISCOVER
  • ▸Workflow audit of my own moodboard-to-palette process
  • ▸Competitive teardown: Coolors, Adobe Color, Khroma
  • ▸Pain-point synthesis from designer forums
02
DEFINE
  • ▸Primary persona: lead UX / creative director
  • ▸6-stage journey map from Discover to Output
  • ▸Happy-path flow with explicit fallback states
03
DESIGN
  • ▸Dark-mode wireframes: dashboard, DNA, scatter map
  • ▸Bespoke C-FRG industrial design system
  • ▸Component-level tokens with CSS Module scoping
04
DELIVER
  • ▸Electron shell wrapping Vite, React, and CSS Modules
  • ▸FastAPI backend with Ollama for local AI by default
  • ▸One-command launcher, v1.0 shipped end-to-end
REFLECTION009
The hardest part of senior design is shipping less

Four features got cut from v1 after they were built and working. An image-region highlighter, a dedup button, a pop-out preview, a floating tone strip. Each one took longer to justify cutting than it took to remove. The rule I landed on: if I couldn't state the cut reason in a sentence, the feature stayed. The product is better for it. Cutting working code is the move that's hardest to defend in writing and easiest to defend in user testing.

NEXT CASE STUDY

Master Case Study Builder

▸
Available for Work

Let's build something impactful.

I'm currently open to new opportunities in UX/UI Design, Product Design, and GovTech transformation roles.

Drop me an email Connect on LinkedIn