UI kit
Duffer UI kit
The pieces every screen is built from, shown in light and dark. Sample data only.
Foundations
Marigold for the one main action, zinc everywhere else. Numbers in Geist Mono.
light
Brand
Brand solid
Background
Card
Muted
Border
Foreground
Muted text
Success
Warning
Info
Destructive
Page title 24
Section title 16
Body 14: what people read and write.
Data row 13: what people scan.
Caption 12 · meta and hints
1,980 / 2,200 · 6.8 GB · 31 Oct
dark
Brand
Brand solid
Background
Card
Muted
Border
Foreground
Muted text
Success
Warning
Info
Destructive
Page title 24
Section title 16
Body 14: what people read and write.
Data row 13: what people scan.
Caption 12 · meta and hints
1,980 / 2,200 · 6.8 GB · 31 Oct
Statuses
Neutral chips with a coloured dot. Only 'Changes requested' (and overdue dates) get a stronger chip.
light
dark
Platforms & channels
Real brand colours. A channel is the brand logo with a platform badge; black-and-white brands flip with the theme.
light
- @anokhireet.inInstagram
- @anokhireet.productsInstagram
- anokhireetYouTube
- Anokhi ReetLinkedIn
dark
- @anokhireet.inInstagram
- @anokhireet.productsInstagram
- anokhireetYouTube
- Anokhi ReetLinkedIn
Dates
Relative while it's close, then the date. Due dates turn rose once they pass.
light
dark
Page header & filters
Roomy header with at most one brand button; compact filter pills underneath. Try the filters (menus open in the app's current theme).
light
Content
Everything Anokhi Reet is planning, writing and posting.
dark
Content
Everything Anokhi Reet is planning, writing and posting.
Review bar
Pinned under an item in review: who can approve, platform warnings, then the decision. Try Approve, Undo and Request changes (menus open in the app's current theme).
light
Waiting for an admin
Arpit or Priya can approve
- 6 / 5 hashtags on Instagram
- Caption is cut after 125 characters
dark
Waiting for an admin
Arpit or Priya can approve
- 6 / 5 hashtags on Instagram
- Caption is cut after 125 characters
Compact list
Scanning view: 36 px rows, 13 px text.
light
dark
Calendar
Compact week: status dot, platform, title. Festivals sit on top of their day.
light
dark
Empty state
A faded mark, one sentence, one action.
light
No ideas yet
Capture the first one with + Idea, or press N anywhere in Duffer.
dark
No ideas yet
Capture the first one with + Idea, or press N anywhere in Duffer.
Activity log
Who did what, when. Newest first.
light
dark