For · Designers
Designers.
Editorial-grade product UI anatomy: spacing, type, motion, and restraint.
One purple pen: notes from an editor who refused to rewrite
A story about a magazine editor, a stubborn writer, and the small lavender mark that ended up shaping how we ship websites at onedb.
- essay
- craft
- story
The night the SaaS site rewrote itself
A founder, a deadline, a sleeping co-founder, and the eleven-hour rebuild of a SaaS landing page that taught me everything about restraint.
- saas
- story
- landing-pages
Consumer products and the ninety-second rule
A weekend with a friend's seven-year-old, a half-broken iPad, and what it taught me about why consumer products live or die in the first ninety seconds.
- consumer
- onboarding
- story
Settings pages that don't sprawl
Every product's settings start sane and end as a junk drawer. The structure, the rules, and the conventions that keep settings findable past year two.
- settings
- dashboard
- tutorial
Changelog pages that build trust over time
A changelog is your most under-rated marketing surface. The structure that makes it skimmable, the cadence that makes it work, and the entries worth writing.
- changelog
- marketing
- tutorial
File uploaders that don't feel cheap
Drag-drop, paste, progress, retry. The five elements every file upload needs, and the small touches that separate a real product from a wrapper around a file input.
- upload
- forms
- tutorial
Date pickers users don't actually hate
The most-cursed input in product UI, and the small set of decisions that turn it into one users almost don't notice.
- date-picker
- forms
- tutorial
AI chat UI patterns beyond ChatGPT
Threads, suggestions, tool calls, streaming. The patterns that make AI products feel modern, and the ones that still look like a fork of the same demo.
- ai
- chat
- patterns
Notification centers that respect attention
Toasts confirm, notifications inform. The anatomy of a notification center users actually open, plus the rules that keep it from becoming spam.
- notifications
- tutorial
- patterns
Tabs, accordions, and steppers: pick the right one
Three surfaces that look similar and behave nothing alike. A field guide to picking the one that actually fits, plus the rules that make each one quiet.
- tabs
- patterns
- tutorial
Charts in product UI without the marketing varnish
Dashboard charts aren't marketing graphics. The four chart types worth shipping, and the editorial rules that keep them quiet and readable.
- charts
- dashboard
- tutorial
Tooltips and popovers without the nagging
When a tooltip helps, when a popover replaces a modal, and the small accessibility rules that make both feel calm instead of clingy.
- tooltips
- tutorial
- patterns
Loading states beyond the spinner
Skeletons, optimistic UI, progress bars. The four loading patterns worth shipping, and the latency thresholds that decide which one.
- loading-states
- tutorial
- ux
Notes from a software agency that shouldn't have survived
Six people, three rooms, an espresso machine that screams. What I learned working with a small software agency in Lisbon that has outlasted three economic cycles.
- agency
- story
- business
Motion Is a Quieter Typography
Mei keeps a small notebook of every transition she sees that broke. The rare ones that disappeared into the product, she writes those down too. Both lists teach the same lesson.
- motion
- animation
- design
- craft
Thirty seconds that ship a company: notes on great launch videos
What the OpenAI demo, the Arc reveal, and a launch I helped a friend ship at 4 a.m. taught me about the form of the modern launch video.
- launch
- video
- story
Your footer is a second hero, treat it like one
Mega-footers, minimal footers, and the quiet conversion work the bottom of the page does when no one's watching.
- footer
- tutorial
- navigation
Navigation patterns that stay out of the way
Sticky bars, mega menus, sidebars, mobile sheets. The four navigation models, and the rules that make each one quiet.
- navigation
- tutorial
- patterns
Testimonial walls that feel real, not staged
Three patterns, pull-quote hero, testimonial grid, video card, and the small details that decide whether visitors believe you.
- testimonials
- social-proof
- conversion
A design tokens cheat sheet for solo founders
Color, type, spacing, radius, shadow, motion. The minimum-viable token system, the names that scale, and the file you can paste into your project this afternoon.
- design-tokens
- tutorial
- design-systems
FAQ sections that actually answer the question
Accordions, two-column, search-driven, and the brutal honesty about which questions should be on the page versus in your docs.
- faq
- tutorial
- conversion
Toast notifications without the spam
When to use a toast, when to use a banner, when to use nothing. The three placement rules and the timing tradeoffs nobody documents.
- notifications
- tutorial
- ui
The anatomy of a hero section that actually converts
The first 600 pixels decide whether someone stays. Here's what the best product teams ship, and why.
- hero
- tutorial
- conversion
Data tables that respect the user
Sticky headers, sane defaults, and the unglamorous rules that make a table usable past 50 rows.
- data-table
- dashboard
- tutorial
Framer vs Webflow vs Next.js for your marketing site
Three tools, three jobs, and the decision most solo founders get wrong. A real tradeoff matrix, plus the case for shipping in the boring choice.
- framer
- webflow
- nextjs
- landing
Multistep forms that don't make users rage-quit
Progress indicators, save-and-resume, and the single biggest UX mistake teams make with onboarding forms.
- forms
- onboarding
- tutorial
Dashboard layouts that actually work
Sidebar+main, top-tabs, kanban, data-grid. The four dashboard archetypes, when each one fits, and the rules that keep dense pages from feeling cramped.
- dashboard
- tutorial
- patterns
Magnetic buttons and other microinteractions worth shipping
The handful of motion details that earn their keep, and the dozens that don't.
- motion
- interaction
- tutorial
Page transitions that don't annoy on the second visit
View Transitions, route-level fades, and why most slick page animations should be turned off after the first session.
- motion
- tutorial
- interaction
Scroll storytelling without the dizziness
Sticky scenes, scroll-triggered reveals, and the line between cinematic and motion sickness.
- motion
- scroll
- landing
Forms that feel fast (even when they're not)
Inline validation, field grouping, the multi-step pattern, and the small details that turn a 12-field form into something users actually finish.
- forms
- tutorial
- ux
Mobile nav beyond the hamburger
The bottom bar, the floating pill, and four other patterns, when each one wins on touch.
- navigation
- mobile
- tutorial
Feature sections that still work in 2026
Bento, alternating rows, and feature tables, when each pattern wins, and which ones are quietly dying.
- features
- landing
- tutorial
Bento grids: when they work, when they don't
Apple made them famous. Every AI app shipped one. Most should have shipped a feature list instead.
- bento
- patterns
- opinion
Case study pages that convert past the first scroll
The four-act structure every great case study uses, and the line between proof and brochure.
- case-study
- social-proof
- conversion
Error states are where trust lives or dies
404s, 500s, payment failures, and the recovery copy that decides whether the user blames you or themselves.
- errors
- empty-states
- tutorial
Empty states are your second chance at onboarding
The empty dashboard is the user's first real impression of your product. Most teams ship a shrug, here's how to ship a tutorial instead.
- empty-states
- tutorial
- onboarding
Onboarding checklists that don't feel like homework
The five-step ceiling, the dismiss-vs-complete tension, and what to do when users skip the checklist entirely.
- onboarding
- auth
- conversion
Dark mode is a design decision, not a CSS variable
Why most dark modes look broken, and the contrast, depth, and color rules that separate good dark UI from inverted light UI.
- dark-mode
- design-foundations
- tutorial
Modals, sheets, and drawers: when to interrupt
Dialog, sheet, drawer, popover, four ways to overlay content, four different jobs. The decision tree, the spec, and the accessibility traps.
- modals
- tutorial
- patterns
Typography for product UI is mostly about restraint
Two fonts, four sizes, and the tracking, leading, and weight choices that make product type feel premium.
- typography
- design-foundations
- tutorial
Command menus 101: why every modern app has one
From Spotlight to Linear's K-bar. What makes a good command menu, and how to ship one without rebuilding it from scratch.
- interaction
- tutorial
- patterns
Spacing systems that scale past the first screen
The 4px / 8px debate, the cases for both, and how to keep spacing consistent when your product grows to 200 screens.
- spacing
- design-foundations
- tutorial
Social proof: logos, numbers, stories
Three tiers of social proof, ordered by trust. When to use a logo strip, when to use a metric, and when only a real story will do.
- social-proof
- tutorial
- conversion
Color systems for product teams that aren't design teams
Primary, neutrals, semantic colors, and how to ship a usable palette without hiring a brand consultant.
- color
- design-foundations
- tutorial
The comparison table that closes the deal
Vs competitor, vs alternative, vs status quo. Three comparison patterns, when each one converts, and how to ship one without looking petty.
- comparison
- tutorial
- conversion
The launch day landing page checklist
What to ship on day-of, what to ship the week before, and the post-launch surfaces most teams forget.
- launch
- landing
- tutorial
Other audiences