Case study / Backlit
Designing AI people can trust
Backlit is an iOS app that helps people keep track of what they know and what they owe. I co-founded the company and lead product and UX.
By Christian Eckels / Co-founder, product and UX lead
Role
Co-founder, product and UX lead
Team
Founding team with engineering partners
Timeline
November 2025 to now
Platform
iOS
FIG. 1 Backlit, an iOS app for what you know and what you owe.
01
The problem
AI tools rarely let people down by being wrong. The real problem is when it’s hard to know whether to trust them. When the product involves obligations, missing something can have real consequences.
02
A clear state model
Everything in Backlit is Open, Waiting or Resolved. People can see what the assistant handled, what it’s waiting on and what still needs them, and anything that matters keeps a person in the loop.
Open
Needs attention
Waiting
Waiting on someone or something
Resolved
Done
03
Explainability
When the assistant acts, it shows its reasoning, so people can check the work instead of taking it on faith.
04
Available Light
I built Backlit’s design system, Available Light, which includes its tokens, components, motion, and documentation, as well as the decks we use with the team and investors. The name comes from photography: you work with the light already in the room. There’s no flash, no glare, and nothing that draws attention to itself. The system is light-first: warm parchment, one interactive blue, Spectral for headlines, Work Sans for everything else, all on a 4-point spacing scale.
Available Light
V3.1 · Light-first · Spectral and Work Sans
Color
Base
#F0ECE4
Page
Surface
#F8F5EF
Cards and sheets
Ink
#2A2B30
Primary text
Secondary
#4E4A42
Secondary text
Interactive
#2F6E90
The one interactive color
Accent Ink
#254F68
Text accent
Plum
#765D71
Accent strong
Sage
#3E7A4F
Success
Sand
#C9AE82
Warm accent
Deep Sky
#16283B
Dark mode anchor
Type
Aa
Spectral
Display and headlines
Aa
Work Sans
Body, labels and interface
36 · Display
28 · Title
20 · Heading
16 · Body
12 · Caption
Spacing · 4-point base
space-1 · 4
space-2 · 8
space-3 · 12
space-4 · 16
space-6 · 24
space-8 · 32
space-12 · 48
space-16 · 64
Radius
sm · 8
button · 12
card · 18
pill · 20
Components
Mark resolved
Snooze
Open
Waiting
Resolved
Lease renewal
Waiting on your landlord
Card: padding 24 (tinted), radius 18, content gap 4
FIG. 2 Available Light V3.1: the shipped color, type, spacing and radius tokens.
FIG. 3 Backlit marketing site, built on Available Light.
05
Accessibility by default
Contrast and Dynamic Type have been part of the system from the start, not just added at the end. Secondary text meets WCAG AAA contrast standards.
12.0:1
AAA · Ink on Base
7.5:1
AAA · Secondary text on Base
5.1:1
AA · Interactive on Surface
06
Where it stands
Backlit is post-seed and testing with a small group of early users.
07
What I learned
AI generates options. Designers decide direction.