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
- 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.
Why Medium's "Premium UI" Thesis Is Incomplete
If you've read three Medium posts about what makes Stripe, Linear, and Vercel feel premium, you've seen the same list: avoid pure black, use tinted neutrals, tint your shadows with brand color, use hairline borders. Those observations are directionally true — premium interfaces do tend to use near-black instead of #000, and shadows do often carry brand temperature. But the prescriptions are flattened.
Pure #000 on pure #FFF isn't automatically bad. Many premium interfaces use it deliberately. The aggregate "always use #2A2A2A" rule is a specific hex claim that no primary source from Stripe, Linear, or Vercel actually makes. What these companies do consistently is choose the value that fits the brand temperature — which may be #0A0A0A, or #1A1A1A, or in some cases #000, depending on what the surrounding palette needs.
The deeper pattern is not a hex rule. It's a philosophy of specific, considered decisions rather than defaults. This is where the primary sources become much more useful than the aggregates.
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.
The Decisions That Actually Separate Premium From Generic
Reading the primary sources, the decisions that recur across all three companies converge on specific patterns.
1. Interaction density, not visual density
Generic SaaS UIs often confuse "information density" with "premium." They cram dashboards with numbers, tables, charts, and widgets. Linear, Vercel, and Stripe are relatively sparse visually, but interaction-dense — every element you see is responsive to hover, focus, keyboard, and context. The density is in the behavior, not the pixels.
Practical implication: before adding a new element to a screen, audit the existing elements' interaction completeness. Hover states. Focus rings. Keyboard shortcuts. Loading skeletons. Transition timing. If the existing elements don't have those, adding more elements will make the UI feel less premium, not more.
2. Typography as the brand anchor
Linear uses Inter. Vercel uses Geist. Stripe uses Söhne. Different choices, but the same discipline: a single typeface family (plus mono where needed), used with systemic scale, weight, and spacing. No mixing display fonts. No decorative typography for flair.
The typography is the brand anchor. This is why swapping Linear's Inter to Arial immediately makes the interface look wrong in a way that's hard to articulate — Inter is part of what Linear is.
More on this in The Typography Stack That Works Everywhere.
3. Color as restraint, not expression
Premium interfaces use surprisingly little color. Stripe's dashboard is mostly neutrals plus measured indigo. Linear's default theme is cool grays plus brand indigo. Vercel is near-monochrome plus context color.
Color in these products is used for meaning (red means danger, green means success, brand color means primary action) rather than decoration. This is the opposite pattern from "colorful" SaaS products where every card has a different accent color. The restraint reads as confidence.
More on how these palettes are built in Color Systems That Scale.
4. Crafted microstates
Hover, focus, active, disabled, loading, empty — the microstates most teams treat as afterthoughts are where premium UI shows up. Every button in a Linear interface has six distinct states, each with its own color, transition, and feel. Every input field in Stripe's dashboard has a focus ring that's deliberately designed, not Bootstrap's default.
Practical implication: if your design review is only looking at default states, your design review is missing 80% of what matters for perceived quality.
5. Respect for physical metaphor
Not skeuomorphism. But premium interfaces treat interactions as if they're physical — elements that animate in come from a direction that makes sense. Dropdown menus grow from their trigger. Modals enter with weight. Loading states feel like the work is being done, not hidden.
Rauno Freiberg writes about this extensively. The physical intuition doesn't mean gradients or drop shadows; it means that the UI feels like it obeys a coherent set of rules about how things move and reveal.
6. Obsession with the specific case
Reading Linear Method and Devouring Details, the most consistent theme is not any specific technique — it's obsession with the concrete case. Not "all modals should transition in 200ms." The specific question: "when a user opens this modal from this context, how should it feel, and why?"
Generic design systems answer the abstract question. Premium design answers the specific one, dozens of times per product, with different answers for different cases. The result looks coherent from far away and considered up close.
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: