Premium UI design is a phrase that's been flattened by a thousand Medium posts. The usual version: "use a tinted neutral, avoid pure black, make your shadows colored." Those observations are real, but they're downstream of something harder to copy — a specific philosophy of craft that Rauno Freiberg (Vercel), Karri Saarinen (Linear), and Matt Ström-Awn (formerly Stripe's Dashboard) have each written about in detail. Their primary sources are hiding in plain sight, and they're dramatically more useful than the aggregated commentary about them.
This post synthesizes what those designers actually say, with links to the source material. What Stripe, Linear, and Vercel do at the craft layer — the decisions most teams skip — and why the result feels fundamentally different from generic SaaS UI. No "use #2A2A2A" hex prescriptions. Instead: the underlying patterns, the named manuals, and a reproducible checklist.
TL;DR — Key Takeaways
Premium UI design is a phrase that's been flattened by a thousand Medium posts.
- The "premium UI" Medium aggregate is downstream of three primary sources that most designers have never read: Rauno Freiberg's Devouring Details, Linear Method plus Karri Saarinen's 10 rules for crafting products, and Matt Ström-Awn's writeup of the Stripe Merchant Dashboard.
- Linear published its entire philosophy. The Linear Method is public. The January 2026 "Details Matter" short film reinforces it. Teams ignoring it are missing the clearest playbook in the industry.
- Vercel's craft is documented by designers who built it. Rauno Freiberg's Devouring Details manual has 23+ chapters on interaction design at this level.
- Stripe doesn't publish a design blog, but Matt Ström-Awn's dashboard writeup is the closest thing. The typography is Söhne by Klim Type Foundry (Kris Sowersby, 2019).
- The actual premium-UI decisions are invariant across all three: interaction density and responsiveness, typography as brand, restraint in color, crafted microstates (hover, focus, disabled), and respect for physical metaphor.
- Most of what you can copy is process, not hex values. The shared thread is obsession with the specific case, not the abstraction.
Linear: The Most Documented Playbook in the Industry
Linear Method is Linear's publicly documented product philosophy — not a design system, but a set of principles about how they build. It's free to read. Most teams haven't. A sampling of what it says:
- Opinionated software beats flexible software. Constraints produce better products than configurability.
- Speed is a feature. Every interaction should feel instant.
- Craft requires relentless iteration on details that users never consciously notice.
- Build what you use. The Linear team uses Linear for everything.
- A great product is obvious in its confidence — in what it includes and what it refuses.
Karri Saarinen, Linear's co-founder and CEO, also published 10 Rules for Crafting Products That Stand Out on the Figma Blog, which extends the Method with more specific craft rules. Shape edges match brand personality. Motion curves are designed, not defaulted. Interactions resolve in the frame where the user's eye is, not elsewhere. These aren't hex-value rules. They're rules about what you notice when designing.
The "Details Matter" Short Film
On January 28, 2026, Linear released a short documentary called "Details Matter" that walks through the craft decisions inside Linear. It's the clearest artifact of how this team thinks. Specific decisions shown in the film: the typography's optical alignment on every breakpoint, the animation curves for the sidebar, the keyboard shortcut model, the empty states that were designed to be memorable rather than generic. None of this is accidental, and all of it is visible if you know where to look.
If you're trying to understand premium UI and you watch one thing, watch Details Matter.
Vercel: Rauno Freiberg's Devouring Details
Rauno Freiberg is a design engineer at Vercel whose personal site rauno.me/craft is the other side of the coin from Linear Method. Where Linear documents product philosophy, Rauno documents interaction design at the pixel level.
His Devouring Details project is a 23+ chapter manual on interaction design details — hover states, transitions, focus management, the unglamorous work that separates "fine" from "can't put down." Sample chapter titles: "Interaction Design Details," "Touch Target Overflow," "Optical Spacing," "Motion Staggers." The manual opens for registration periodically and has become a cult reference.
The Vercel interface — vercel.com, the dashboard, the command bar, Geist UI — is designed by people who think this way. The Geist typography system (Geist Sans, Geist Mono, and Geist Pixel, all OFL-licensed by Vercel with Basement Studio) is one expression of it. The deploy preview experience is another. None of it is accidental.
Rauno has also written about his craft approach on his Twitter/X, in his Raycast Community Stories interview, and in a detailed Every.to piece on invisible interaction details. His publicly documented decisions are one of the best sources of "how Vercel thinks" available.
Stripe: The Closest Primary Source Is Matt Ström-Awn
Stripe doesn't publish a design blog the way Linear does. The Stripe design team writes occasionally on Medium and elsewhere, but there's no canonical documented philosophy. The closest thing to a primary source is Matt Ström-Awn's Stripe Merchant Dashboard project page — a detailed writeup of his work as a designer on Stripe's main dashboard product.
Ström-Awn is now running Directed Edges (along with Nathan Curtis, as of 2024), but his Stripe work documented the approach: information density balanced with breathing room, typography as the hierarchy anchor, restrained color, deliberate hover and focus states, and a commitment to making complex financial data feel approachable.
On the typography specifically: Stripe uses Söhne, designed by Kris Sowersby at Klim Type Foundry (released 2019). Söhne is a contemporary grotesque that Stripe uses across its marketing site, dashboard, and documentation. This attribution matters because there's widespread confusion online — Söhne is not by Berton Hasebe (who designed other Klim fonts); it's by Sowersby, who runs the foundry.
The combination of Söhne for typography, a careful neutral palette, and Stripe's restrained use of its brand indigo is the typographic-chromatic foundation of what feels "Stripe-like." But the craft is in what's not flashy: the spacing, the tabular number alignment in financial tables, the hover states on links in documentation, the focus rings on forms. These decisions are documented in Ström-Awn's writeup and visible if you look.
A Reproducible Checklist
If you want to push your UI toward premium, here's the checklist extracted from the primary sources. Not prescriptive hex values — structural decisions.
Typography. Pick one family. Use it at 4-6 sizes maximum. Commit to it across marketing, product, and documentation. Set up a modular scale. (More in The Typography Stack.)
Color. Define semantic meaning before values. What color is "danger"? What's "primary action"? What's "subtle background"? Values follow meaning. (More in Color Systems That Scale.)
Interaction completeness. Every interactive element has: default, hover, focus (keyboard), active (pressed), disabled, loading. Drafted, designed, implemented. If one is missing, the element isn't done.
Motion. Define your curves (ease-in, ease-out, spring). Define your durations. Use them consistently. Don't use browser defaults for transitions that users will see repeatedly.
Empty states and errors. Designed, not stubbed. These are high-trust moments. Generic "no data" placeholder text destroys hierarchy; specific, helpful empty states build it.
Hairlines and separators. Thin lines, considered placement. Often 0.5px or 1px at low alpha. Never the default <hr> tag styling.
Focus rings. Designed, not browser-default. Visible, high-contrast, keyboard-accessible. Every interactive element. (This one is also an accessibility requirement — see Accessibility Is Not a Feature.)
Loading states. Skeletons that match the layout they're replacing, not generic spinners. Timing that feels fast (under 100ms perceived) or at least intentional (staggered, with motion).
Typography kerning and baselines. Optical alignment for headlines. Tabular numbers for data. Monospace for code and IDs. Small details that compound.
Respect for the specific case. For every screen, ask: what's the primary action here, and how does the design make that obvious? Not "is the primary button styled?" — but "does the whole composition lead the eye there?"
What to Stop Copying
A few anti-patterns that look premium but miss what the primary sources actually say.
Don't copy hex values out of context. Linear's specific grays don't make your interface feel like Linear. The architecture of how Linear uses grays might.
Don't copy component libraries verbatim. Radix, shadcn/ui, and similar libraries are excellent foundations. But premium is in the customization — the specific tuning to your brand — not in using a polished default. An unmodified shadcn install looks like every other unmodified shadcn install.
Don't confuse clean with premium. Premium is considered. Clean is a lack of mess. These often coincide, but cleanliness is necessary, not sufficient.
Don't chase "Stripe-like." Stripe's design serves Stripe's specific product, brand, and audience. Copying it wholesale into a different product context produces dissonance. Study the process, not the output.
Frequently Asked Questions
What makes a UI look premium?
Premium UI reads as considered — every visible element has visible decisions behind it. Typography, color, microstates, motion, empty states, hairlines, focus rings, and loading states are all designed rather than defaulted. The pattern across premium products is not a specific aesthetic (Linear, Stripe, and Vercel look quite different) but a consistent level of craft. The primary sources for this approach are Linear Method, Rauno Freiberg's Devouring Details, and Matt Ström-Awn's Stripe Dashboard writeup.
What font does Stripe use?
Stripe uses Söhne, designed by Kris Sowersby at Klim Type Foundry (released 2019). Söhne is a contemporary grotesque used across Stripe's marketing site, dashboard, and documentation. It's a commercial font (not free), with licensing through Klim.
What font does Linear use?
Linear uses Inter, the open-source typeface designed by Rasmus Andersson. Inter serves around 500 million requests per month across the web. Linear does not use a custom typeface despite widespread assumption otherwise.
What font does Vercel use?
Vercel uses Geist — specifically Geist Sans, Geist Mono, and Geist Pixel. All three are designed by Vercel in collaboration with Basement Studio and released under the Open Font License in October and November 2023. Geist is Vercel's brand typography and is also the default typography system for Next.js 15 and later.
How can I make my SaaS UI feel more premium?
Focus on completeness, not decoration. Every interactive element should have all six microstates (default, hover, focus, active, disabled, loading). Your typography should be a single family used consistently. Color should be restrained and meaning-driven. Motion should follow a defined set of curves and durations. Empty states, loading states, and error states should be designed rather than stubbed. These are the decisions documented by designers at Linear, Vercel, and Stripe.
Is Linear Method a design system?
No. Linear Method is a publicly documented product philosophy — principles about how the Linear team builds software. It covers product decisions, team process, and craft expectations. It's not a design system in the component library sense. Linear's actual design system is private, but the underlying principles are all at linear.app/method.
Where can I read the original sources for these ideas?
Start with Linear Method (linear.app/method), Rauno Freiberg's craft page (rauno.me/craft), Devouring Details (devouringdetails.com), Karri Saarinen's 10 Rules for Crafting Products on the Figma Blog, and Matt Ström-Awn's Stripe Dashboard writeup (mattstromawn.com/projects/stripe-dashboard/). These five sources cover most of what's worth reading from the primary designers involved.
For the systems behind the craft, read [Color Systems That Scale](https://mantlr.com/blog/color-systems-that-scale) and [The Spacing System Cheat Sheet](https://mantlr.com/blog/spacing-system-cheat-sheet) — the foundations that let craft decisions compose. And [The Typography Stack That Works Everywhere](https://mantlr.com/blog/typography-stack-everywhere) for the type side specifically.
For the broader conversation about what "premium" means when the industry is shifting, see [Liquid Glass vs Material Expressive](https://mantlr.com/blog/liquid-glass-vs-material-expressive) on how Apple and Google are thinking about the next era of UI feel.
Browse Mantlr's curated [UI design inspiration](https://mantlr.com/categories), [design engineering resources](https://mantlr.com/categories), and [premium UI kits](https://mantlr.com/categories) to study the craft.
External references: